Naar aanleiding van het vorig artikel “Alt en title juist gebruiken” kunnen we natuurlijk ook iets doen voor de ziende medesurfer.

Dit is één van de vele mogelijkheden, dus dit is zeker niet de manier ( zoals je weet is het bij webdesign vooral je fantasie en je kunnen ), maar wat wel belangrijk is dat je alt, title en visuele beschrijving hetzelfde zijn anders zou het nog wel eens verwarrend kunnen worden.

De mogelijke manier

Voor de gelegenheid eens een dl gebruiken, kan nooit kwaad en zoals de naam het al zegt, er wordt een defenitie gegeven.

De HTML

<dl>
<dt><img class="legende" src="images/blogcom.jpg" title="waar ben ik op deze foto" alt="waar ben ik op deze foto" /></dt>
<dd>Afb. 1: waar ben ik op deze foto</dd>
</dl>

Zoals je ziet niets speciaal.

De CSS

Alles een beetje stylen:

dl {
float: left;
margin: 0 25px 25px 0;
border: 1px solid #000;
background-color: #ececec;
}

dt {
margin: 0;
}

dd {
margin: 0;
padding: 8px 0;
text-align: center;
font-weight: bold;
}

img {
margin: 0;
padding: 8px;
}

Voor de geïnteresseerden : De float bepaling in de dl is erin gezet voor als je dit voorbeeld gaat gebruiken in combinatie met tekst, dus je afbeelding wordt links getoond en je tekst zal zich er rond aanpassen.

Voorbeeld

Zoals altijd ook een voorbeeld van dit alles.

Compatibiliteit ?

Getest en goed bevonden voor:

  • Internet Explorer 5.5
  • Internet Explorer 6
  • Internet Explorer 7
  • FireFox 1.5.0.9
  • Opera 9.02
  • Misschien ook Safari ? Wie zal het mij zeggen ?