Forsiden » CSS »

CSS-formatering af definitionslister

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.

Første definitionslistepunkt

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.

Andet definitionslistepunkt

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.

HTML kildekoden

<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>

Stylesheet kildekoden:


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ærkninger

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.

CSS eksempler:

Søg på websiderne

Indtast søgeord

Abonner på mit nyhedsbrev

Indtast din e-mail adresse

Anbefal siden til en ven

Indtast e-mail adresse