---

Møjn!

Jeg vil gerne lave en opstilling på min hjemmeside, som jeg tror, at man
kalder "hanging indent". Jeg kan bare ikke gennemskue hvorledes jeg
implementerer det med CSS. Tidligere har jeg benyttet en <table>, men jeg er
vha. CSS sluppet af med alle andre <table>s i mine sider. Og jeg vil gerne
undgå at benytte dem igen her.

Det jeg gerne vil lave er noget i retningen af:

1998 Danmark vandt næsten over Brasilien ved VM i Frankrig.
1994 Ingen deltagelse.
1990 Ingen deltagelse efter smertefuldt nederlag i Bukarest.

Det skulle også gerne virke, så teksten til højre "ordner sig ind" til den
ovenstående tekst, hvis den fylder mere end en linie.

Jeg har forsøgt med

p.text1 {
position: absolute;
left: 0px;
}

p.text2 {
position: absolute;
left: 80px;
margin-bottom: 20px;
}

og så skrevet dette i dokumentet:

<p class="text1">
<?php echo $name ?>
</p>

<p class="text2">
Jakob Bro Nielsen.
</p>


<p class="text1">
<?php echo $titellen ?>
</p>

<p class="text2">
<?php echo $titel ?>
</p>

Men det virker ikke rigtig. Det er som om, at der ikke bliver lavet en ny
linie efter p.text2 selvom jeg har sat margin-bottom til 20 px.

Hvad gør jeg galt?

Med venlig hilsen

Jakob Bro Nielsen

---

J. Nielsen wrote:

>
> 1998 Danmark vandt næsten over Brasilien ved VM i Frankrig.
> 1994 Ingen deltagelse.
> 1990 Ingen deltagelse efter smertefuldt nederlag i Bukarest.
>
>
> Hvad gør jeg galt?
>

Du bibeholder data'en i din tabel, da det er tabulær data.

Fordi du er gået over til CSS-layout er ikke ensbetydende med at du ikke må bruge tabeller.
Ovenstående kan laves efter alle kunstens regler i en tabel med summary, table header og footer.

PS. Hvis du stadig vil undgå tabellen kan du prøve med definationslister (dl, dt, dd).

Hintzmann c",)

---

J. Nielsen wrote:

> Det jeg gerne vil lave er noget i retningen af:
>
> 1998 Danmark vandt næsten over Brasilien ved VM i Frankrig.
> 1994 Ingen deltagelse.
> 1990 Ingen deltagelse efter smertefuldt nederlag i
> Bukarest.

[snip CSS eksempel]

> Men det virker ikke rigtig. Det er som om, at der ikke bliver
> lavet en ny linie efter p.text2 selvom jeg har sat margin-bottom
> til 20 px.

Det skyldes nok, at du bruger absolut positionering.

Prøv i stedet følgende:

<dl class="tabbed">
<dt>1998</dt>
<dd>Danmark vandt næsten over Brasilien ved VM i Frankrig</dd>

<dt>1994</dt>
<dd>Ingen deltagelse.</dd>

<dt>1990</dt>
<dd>Ingen deltagelse efter smertefuldt nederlag i Bukarest.</dd>
</dl>

Umiddelbart kan jeg komme på to måder at gøre det ønskede:

Denne løsning er den simpleste rent kodemæssigt, men udløser desværre
Internet Explorers 3-pixel-bug grundet brug af float:

dl.tabbed dt {
   float: left;
}

dl.tabbed dd {
   margin-left: 4em;
}

Hvorimod denne løsning er noget små-fnidder (IMHO) grundet brugen af
negative værdier, men den ser dog ud til at virke:

dl.tabbed dt {
   line-height: 1.5em;
}

dl.tabbed dd {
   line-height: 1.5em;
   margin: -1.5em 0 0.25em 4em;   
}

--
Anders Thorsen Holm | http://www.daimi.au.dk/~zoolook/

Overvejer du at købe en DVD-afspiller? Så hold dig fra Fona!
Læs hvorfor: http://www.daimi.au.dk/~zoolook/?page=fona