Jeg har skrevet en del om CSS-formatering af ordnede og uordnede lister (websiden CSS-formatering af HTML-lister). Definitionslisterne er mere ligetil, bl.a. er der ikke så mange problemer med browserfortolkningen af disse. Det betyder dog ikke, at de ikke kan gøres visuelt interessante.
En definitionsliste er strukturelt meget velegnet til oversigter af forskellig art, der består af en overskrift eller et link, efterfulgt af en kort forklaring. Hvis du vil bruge denne listetype, kan det godt svare sig at lege lidt med formateringen. Denne side beskriver, hvad du kan gøre.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
<dl class="kasse">
<dt>Første definitionslistepunkt </dt>
<dd>
<p>[ Tekst i <dd>-markøren ]</p>
</dd>
<dt>Andet definitionslistepunkt</dt>
<dd>
<p>[ Tekst i <dd>-markøren ]</p>
</dd>
</dl>
dl.kasse dt {
font-family:arial,sans-serif;
font-size:1em;
border:1px solid black;
background:#fece7a;
color:black;
padding:2px 5px;
font-weight:bold;
width:300px;
margin:10px 0 10px 60px;
margin-bottom:-15px;
}
dl.kasse dd {
font-family:verdana,sans-serif;
font-size:1em;
border:1px solid black;
background:#fffffe;
color:black;
margin:5px 0 5px 0px;
padding:10px;
}
dl.kasse dd p {
font-size:100%;
margin:0 !important;
}
>
Bemærk, at det er nødvendigt at indsætte en tilsyneladende
overflødig <p>-markør inde i <dd>
-markøren. Hvis ikke jeg gør dette, vil Internet Explorer ikke vise <dd>-markørens border-top.
Dette medfører så, at jeg er nødt til at give
<p>-markøren inde i <dd>-
markøren en ny style. Det er ikke ligetil, fordi denne
<p>-markør vil arve <dd>-
markørens egenskaber med en sådan styrke eller vægt, at
class-attributten ikke kan ophæve dem.
Derfor er jeg nødt til at anvende en inline style,
eller - som her - gøre brug af nøgleordet
!important, der giver den aktuelle egenskab
en meget høj styrke eller vægt.
Opdateret 17. december 2003.
Søg på websiderne
Abonner på mit nyhedsbrev
Anbefal siden til en ven