Lijsten

Lijsten voor opsommingen kunnen worden geplaatst op 2 manieren, de unordered list stijl (ul)
en de ordered list stijl (ol).
Als eerst de unordered list stijl. De unorderd stijl is voorzien van een punt/cirkel of een
afbeelding voor de opsomming en zit er geen volgorde in.
Op de ordered manier maak je je lijstje/opsomming met een nummering bijvoorbeeld 1 t/m 5.
Unordered list
Als eerste dan de unordered list stijl, de HTML code voor een unordered lijstje is.
<ul>
<li>test</li>
<li>test</li>
</ul>
List-style is de optie voor de CSS waarmee je opsommingen kunt voorzien van een punt ervoor of een
afbeelding ervoor etc. Je kunt diverse opsommingstekens gebruiken, waardes voor de List-style zijn disc,
circle en square.
In de CSS geef je dit aan als volgt aan:
<style type="text/css">
ul li {
list-style-type: square;
}
</style>
Hieronder voorbeelden van disc, circle en square.

Het is ook mogelijk de eigenschappen disc, circle en square van een eigen kleur te voorzien. Normaal
gesproken zijn deze bullets zwart maar door in de CSS de regel "color:#FF0000;" toe te voegen kun je
een eigen kleur aan de bullet meegeven zoals hierboven als voorbeeld bij Disc. Echter, de tekst binnen
de LI krijgt dan ook deze kleur, als alternatief kun je hiervoor <P> tags plaatsen om de tekst en
vervolgens middels CSS de P een andere kleur meegeven. Een andere optie om de opsomming op te
maken is om een eigen afbeelding als bullet te gebruiken in plaats van de netgenoemde opties hierboven.
Dit bereik je door in de CSS de volgende code in te voegen:
ul {
list-style-image: url('afbeelding.gif');
}
Dit is handig om toe te passen bij bijvoorbeeld een menu dat je opbouwt middels een UL.
Ordererd list
Dit gaat ongeveer op dezelfde manier voor een ordererd list. Standaard is het genummerd met
nummers maar ook hieraan kun je verschillende soorten nummering aangeven:
{list-style-type: lower-roman} //Kleine Romeinse cijfers
{list-style-type: upper-roman} //Romeinse cijfers
{list-style-type: lower-alpha} //Kleine letters
{list-style-type: upper-alpha} //Hoofdletters
De CSS code wordt dan:
<style type="text/css">
ol {
list-style-type:upper-roman;
}
</style>
Positie
Als laatste kun je ook de positie bepalen van je lijstje, De code hiervoor is:
ul { list-style-position: outside }
waarbij je outside kunt vervangen voor inside. Dit geld dus ook voor de OL, ordered list.

Als CSS code totaal ziet het er dan als volgt uit bij bijvoorbeeld een unordererd list.
<style type="text/css">
ul {
list-style-type: square;
list-style-position: outside;
}
</style>