Webdesign 101 : CSS (Stylesheets) : : Billeder og billedtekster

Forsiden » CSS » CSS formateringseksempler

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.

margin sætter afstanden mellem billedets yderkanter og websidens øvrige elementer.
padding sætter afstanden mellem div-kassens indhold og kassens inderkant. (Bemærk her, at det er den mindst mulige afstand. Hvis kassens bredde overstiger billedets bredde på 125 pixel * 2* ½ em vil denne afstand øges i bredden.)
text-align bestemmer, hvorledes div-kassens indhold skal justeres i forhold til kassen.
border sætter en ramme om kassen.

Opdateret 17. december 2003.

Billeder og billedtekster

CSS eksempler:

Webdesign 101