/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
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.'

Søg
Reklame
Statistik
Spørgsmål : 177557
Tips : 31968
Nyheder : 719565
Indlæg : 6408871
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste