Opmaak en positionering van het list element.

Bron: http://www.sceneone.nl/tekst/list.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Het list element is één van mijn favoriete html-dingetjes. Als je er goed mee om weet te gaan en goed begrijpt wat de list doet en hoe hij zichzelf gedraagt kun je er van alles mee.
We kennen 3 soorten list elementen:

In dit onderdeel bespreek ik de unordered list. Alles wat hier aan bod komt geldt eigenlijk ook voor de ordered list. De definition list bespreek ik in het volgende onderdeel: blockquote en het dl-element
Eerst even 2 eenvoudige voorbeelden:

CSS: GEEN HTML: <ul>
<li>eerste list item in een unordered list</li>
<li>tweede list item</li>
<li>derde list item</li>
<li>vierde list item</li>
</ul>

<ol>
<li>eerste list item in een ordered list</li>
<li>tweede list item</li>
<li>derde list item</li>
<li>vierde list item</li>
</ol>

bekijk het resultaat

Zoals ik in het onderdeel over margin en padding al beschreven heb, hebben veel html elementen al een margin en padding van zichzelf. Dit geldt zeker ook voor het list element.
Om goed te kunnen zien hoe dat precies zit met die natuurlijke margin en padding van de list gaan we de twee(!) elementen waaruit de list is opgebouwd (de <ul> en de <li>) een border geven en zetten we de list in een div:

CSS: div.box{
border: 2px solid yellow;
padding: 0;
}

ul{
border: 1px solid red;
}

li{
border: 1px solid black;
} HTML: <div class="box">
<ul>
<li>eerste list item, l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l l</li>
<li>tweede</li>
<li>3de list item</li>
</ul>
</div>

bekijk het resultaat (in Firefox)

naar het begin van de pagina

Wat gebeurd er?

Ik ga er vanuit dat je het resultaat bekeken hebt in Firefox en dat je dus hetzelfde ziet als ik.
Maar voor de zekerheid en voor de handigheid hier toch nog even een screenshot van het resultaat (een beetje ingekort):

screenshot van het resultaat van bovenstaand voorbeeld

Omdat de padding van de div op 0 staat weten we dat de ruimte aangegeven door '1' een margin-top (13px) van de <ul> moet zijn en de ruimte aangegeven door '2' een margin-bottom (13px) van de <ul> is.
Als je niet precies begrijpt wat er met padding en margin bedoelt wordt moet je eerst het onderdeel over padding en margin even doornemen.
Links en rechts zien we geen ruimte tussen de border van de div en van de <ul>. Blijkbaar is de margin-left en -right van de <ul> dus 0.

Maar wat gebeurt er bij '3'? Is dat een padding-left van de <ul> of een margin-left van de <li>? Door uit te proberen kom je erachter dat het (volgens Firefox) een padding-left (40px) van de <ul> is.

Dan blijft er voor de <li> weinig over. Geen margin-left en zoals je kunt zien ook geen margin-top, -right of -bottom.
verder kun je zien dat er geen ruimte van betekenis blijft tussen de zwarte borders en de tekst. Aan alle letters 'l' in het eerste list item kun je zien dat er ook aan de rechterkant geen ruimte overblijft.
Dus geen padding voor de <li>.

Dus nu weten we dat voor de <ul> geldt:
margin: 13px 0 13px 0;
padding: 0 0 0 40px;

En voor de <li> geldt:
margin: 0;
padding: 0;

Internet Explorer gaat op een andere manier om met het list element dan Firefox. Voor ons is belangrijk te weten dat IE de ruimte links, aangegeven met '3' ziet als margin-left van de <ul>.

Wat willen wij?

Wij (ik in ieder geval) willen graag een list zelf op kunnen maken. Om dat te kunnen gaan we eerst de bestaande opmaak verwijderen. Margin en padding verwijderen en die smerige bullit eruit. De bullit is een onderdeel van de <ul> en wordt in het css omschreven met 'list-style'.
De margins, padding en bullit zijn allemaal gekoppeld aan de <ul>, aan de <li> hoeven we dus niets te veranderen.
Daarom:

CSS: div.box{
border: 1px solid black;
}

ul{
margin: 0;
padding: 0;
list-style: none;
} HTML: <div class="box">
<ul>
<li>eerste list item</li>
<li>tweede</li>
<li>3de list item</li>
</ul>
</div>

bekijk het resultaat (in Firefox)

naar het begin van de pagina

Nu hebben we een kale list. Die gaan we opmaken. We beginnen met hem een beetje ruimte te geven door middel van margin en padding:

CSS: div.box{
border: 1px solid black;
}

ul{
margin: 10px 0 10px 50px;
padding: 0;
list-style: none;
}

li{
margin: 5px 0 0 0;
} HTML: <div class="box">
<ul>
<li>eerste list item</li>
<li>tweede</li>
<li>3de list item</li>
</ul>
</div>

bekijk het resultaat (in Firefox)

Oké, dat gaat goed. Nu willen we nog onze eigen list-style, zeg maar onze eigen bullit toevoegen.
Dat doen we door middel van een background image:

CSS: div.box{
border: 1px solid black;
}

ul{
margin: 10px 0 10px 50px;
padding: 0;
list-style: none;
}

li{
margin: 5px 0 0 0;
background: url(../_img/pijl.gif) no-repeat 0 0;
} HTML: <div class="box">
<ul>
<li>eerste list item</li>
<li>tweede</li>
<li>3de list item</li>
</ul>
</div>

bekijk het resultaat (in Firefox)

Oké, dat gaat niet goed. We moeten wat gaan schuiven. Laten we beginnen met de <li> een padding-left te geven. Die background image blijft wel op z'n plaats staan, dus zal alleen de tekst opschuiven:

CSS: div.box{
border: 1px solid black;
}

ul{
margin: 10px 0 10px 50px;
padding: 0;
list-style: none;
}

li{
margin: 5px 0 0 0;
padding: 0 0 0 35px;
background: url(../_img/pijl.gif) no-repeat 0 0;
} HTML: <div class="box">
<ul>
<li>eerste list item</li>
<li>tweede</li>
<li>3de list item</li>
</ul>
</div>

bekijk het resultaat (in Firefox)

Da's dus nog niet helemaal goed. We zullen toch wat met de background image moeten schuiven, maar dat is geen probleem:

CSS: div.box{
border: 1px solid black;
}

ul{
margin: 10px 0 10px 50px;
padding: 0;
list-style: none;
}

li{
margin: 5px 0 0 0;
padding: 0 0 0 35px;
background: url(../_img/pijl.gif) no-repeat 0 7px;
} HTML: <div class="box">
<ul>
<li>eerste list item</li>
<li>tweede</li>
<li>3de list item</li>
</ul>
</div>

bekijk het resultaat (in Firefox)

There you have it! Een opgemaakte list.
Geen geklooi in de html met een tabelletje en allemaal losse plaatjes in de ene <td> en de bijhorende teksten in de andere <td>. Een paar goed uitgedachte stijlregels in je css is alles wat je nodig hebt.

En dit is nog maar het begin van wat er mogelijk is met een list. Als je er nog geen genoeg van hebt moet je maar eens kijken bij het hoofdstuk over navigatie. Daar komen gecompliceerd opgemaakte list's met daarin je navigatie aan de orde.

naar het begin van de pagina