|
| Baggrundsbillede og tekst Fra : Tabita Enig |
Dato : 18-11-02 15:51 |
|
Jeg har et billede, der forestiller et stykke skind, som jeg vil bruge til
en ramme omkring et stykke tekst. Jeg har overvejet at lægge billedet som
baggrundsbillede, men hvordan får jeg så teksten til at stå pænt i forhold
til rammen? Man kan selvfølgelig ændre lidt på diverse margener, så det
kommer til at passe, men det er jo i virkeligheden ikke særlig smart.
Hvordan gøres det smartest? Man må kunne definere billedet og teksten
relativt til hinanden??
Tabita
| |
Lasse Reichstein Nie~ (18-11-2002)
| Kommentar Fra : Lasse Reichstein Nie~ |
Dato : 18-11-02 16:43 |
|
"Tabita Enig" <tabitae@stofanet.dk> writes:
Hej Tabita
> Jeg har et billede, der forestiller et stykke skind, som jeg vil bruge til
> en ramme omkring et stykke tekst. Jeg har overvejet at lægge billedet som
> baggrundsbillede, men hvordan får jeg så teksten til at stå pænt i forhold
> til rammen? Man kan selvfølgelig ændre lidt på diverse margener, så det
> kommer til at passe, men det er jo i virkeligheden ikke særlig smart.
> Hvordan gøres det smartest? Man må kunne definere billedet og teksten
> relativt til hinanden??
Smartest kan jeg ikke lige svare på. Det afhænger af så meget :)
En mulighed er at dele billedet op i ni (tre x tre) mindre dele, så
teksten kun skal stå over det midterste billede. Så er der flere
forskellige måder at sætte det sammen på bagefter (tabeller, absolut
placering med CSS, etc.)
Jeg ved ikke hvad problemet med marginer er, det burde kunne virke.
Hvis man laver en <div> med skindet som baggrund, og inde i den har endnu
en div, så burde placeringen kunne klares med marginer på den inderste:
Eksempel:
<div style="width:200px;height:400px;background-image:url('skind.png');
padding:0px;">
<div style="margin:25px 45px 25px 40px;">
Her er teksten over skindet.
</div></div>
En lignenede løsning placerer den indre div absolut i forhold til den
ydre:
<div style="position:relative;width:200px;height:400px;
background-image:url('skind.png');">
<div style="position:absolute;left:40px;top:25px;width:115px;height:350px;">
Her er teksten over skindet.
</div></div>
Det er vigtigt at den yderste div har position:relative (eller absolute
eller fixed), fordi indholdet bliver placeret i forhold til den nærmeste
omkransende box med placering forskellig fra defaulten.
Håber en af dem kan bruges
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
'Faith without judgement merely degrades the spirit divine.'
| |
|
|