Forsiden » CSS »

Billeder og billedtekster

HTML og XHTML har ingen markører, der gør det muligt at indsætte et billede og en billedtekst på en sådan måde, at sammenhængen mellem billede og tekst er entydig.

Her beskriver jeg en metode til at gøre netop dette, baseret på en W3C-tutorial.

HTML- (eller XHTML-) koden til det billede, du ser til højre under sektionsmenuen, er:

<div class="figur">
<img src="spacewalk.jpg" 
alt="Space Walk" width="185" 
height="276" />
<p class="billedtekst">
Spadseretur i rummet</p>
</div>

Til denne kode har jeg kun følgende bemærkning: Da denne webside er en XHTML-side, der skal validere som "Strict" XHTML, kan en border-attribut ikke forekomme i img-markøren. Den er derfor indsat i stylesheet'et for denne del af websiden:

div.figur {
  float:right;
  width:75%;
  margin:10px;
  padding:.5em;
  text-align:center;
  border:1px solid black;
}
p.billedtekst {text-align:center;margin-left:0;}
div.figur img {border:none;}

Nu har værdien af billedets border jo kun interesse, hvis billedet er et aktivt element, f.eks. et link. Men det er en god vane altid at sætte border til 0, uanset hvilken måde man gør det på. (Medmindre du selvfølgelig ønsker at der skal være én.)

Det, der er vigtigt her, er fremhævet med grønt. Resten er kun pynt.

Opdateret 17. december 2003.

CSS eksempler:

Spadseretur i rummet

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