16 Augustus 2009

In semantische html maak je vaak gebruik van lists. Standaard schakel je daarom de margin, padding en de rondjes/opvolgnummering etc. uit.
En als je dan ook nog een floating hebt gebruikt dan staat display waarschijnlijk op iets van inline(-block)

Probleemstelling

Maar soms wil je het ineens wel tonen. Of je hebt een mooi plaatje/pijltje wat ervoor moet komen. Dat lijkt dus niet meer te lukken.

Oplossing

De volgende stijlsetting lossen het probleem op:

il.toon{
    display: list-item;
    list-style: disc url(/images/arr.jpg) inside;
}

Ipv 'inside' kun je ook outside gebruiken. Bekijk het verschil maar eens.

De 'disc' of een ander type is toch belangrijk ondanks de image. Want als images niet geladen worden door de browser van de gebruiker (!) dan wordt het ingestelde lijst-type getoond. Als je dat niet wil, kun je het hier ook op 'none' zetten.

Verschil in browsers

Hoewel dit de juiste oplossing is, gaat het positioneren in de verschillende browsers niet zo lekker. Men raadt daarom aan om de list-style helemaal niet te gebruiken, maar een achtergrondplaatje.

il.toon{
   background: url(/images/arr.jpg) no-repeat center left;
   padding-left: 20px;
}

Met de padding wordt de tekst/inhoud naar rechts gedrukt zodat het plaatje goed zichtbaar is en het op een list-item lijkt.

Let op dat de 'ul' de juiste instellingen heeft, anders krijg je alsnog verschillen met in de InternetExplorer

ul{
    list-style-position: outside;
}