Terug naar beginpagina Homepage-Maken.nl
Versio Webhosting   

Gekleurde HTML-bullets in lijsten

In ongeordende lijsten <ul> worden bullets getoond voor de list items. In een eerder artikel hebben we gezien dat je je eigen plaatjes als bullets in lijsten kunt gebruiken. Maar je kunt ook veel doen met de gewone HTML-bullets. De standaard bullets zien er niet erg fraai uit, maar met behulp van CSS kunnen we deze bullets een stuk mooier maken.

Laten we eerst eens kijken naar een standaard ongeordende lijst met de standaard bullets voor de list items:

De bullets zijn gewone stippen in dezelfde kleur als de tekst van je lijst.

We kunnen de bullets laten verschillen van de tekstkleur door van de list items links te maken:

Ook kunnen we heel makkelijk een ander symbool gebruiken om voor de list items te plaatsen. In plaats van de stip kunnen we bijvoorbeeld voor een vierkantje kiezen:

Hiervoor plaats je de volgende CSS-code in het Head-gedeelte van je pagina:

<style type="text/css">
<!--
li { list-style-type: square }
-->
</style>

De HTML code voor de lijst zelf wordt gewoon:

<ul>
 <li>Line1</li>
 <li>Line2</li>
 <li>Line3</li>
</ul>

Nu een combinatie van bovenstaande voorbeelden. We maken nu een ongeordende lijst met vierkantjes voor de list items en met links in de list items met een andere kleur dan de list items en de normale linkkleur op de pagina. Ook hebben we nu een andere kleur gekozen voor de tekst van de list items dan de normale tekstkleur.

Je ziet dat er nu lichtblauwe vierkantjes voor de list items staan. Dit is weer dezelfde kleur als de tekst in list items. Alleen verschilt deze tekstkleur nu van de normale tekstkleur op de pagina. Ook de linkkleur is veranderd. De CSS-code die we hiervoor gebruikten:

<style type="text/css">
<!--
li { color: #0099FF;
 list-style-type: square;
}
li a { text-decoration: none;
 color: #FF6600;}
-->
</style>

Door gebruik te maken van CSS classes kun je meerdere CSS lijsten op één pagina verschillend laten weergeven. Zo wordt het mogelijk om bijvoorbeeld een compleet menu te maken voor je site met behulp van een CSS lijst. Je zet de hele lijst gewoon in een <div> die je de CSS class laat gebruiken. Bijvoorbeeld:


De CSS-code die we voor dit menu gebruiken is:

<style type="text/css">
<!--
.menu { border: 1px solid black; background-color: #FFCC00;
 padding-top: 5px;
 padding-right: 20px;
 padding-bottom: 5px;
 padding-left: 0px;
 width: 100px }
.menu li { color: #FF3300}
.menu li a { color: #FF6633;
 list-style-type: square;
 font-family: Verdana, sans-serif;
 font-size: 12px}
.menu li a:hover { color: #FF6633;
 background-color: #FF9966;;
 text-decoration: none}

-->
</style>

De HTML-code blijft simpel. Je hoeft alleen de lijst met het menu tussen <div> en </div>-tags te plaatsen en deze de menu class te geven.

<div class="menu">
 <ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
 </ul>
</div>

Je ziet dat er veel mogelijk is met de gewone HTML-lijsten door gebruik te maken van Cascading Style Sheets. Veel informatie op websites is heel geschikt om in lijstvorm te publiceren, met name menu's. Toch doen veel webmasters dit niet, omdat ze niet op de hoogte zijn van de mogelijkheden van lijsten in combinatie met CSS. Met CSS laat je je lijsten er beter uitzien, terwijl je pagina's een logische opbouw blijven houden.

Homepage-Maken Tip

De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.

Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.

Klik hier om te starten met je Weebly website!

Zoekfunctie en Overige Info


Copyright © Homepage-Maken.nl 2000-2018 · Privacybeleid

Deze pagina voldoet aan de XHTML 1.0 richtlijnen     Deze pagina voldoet aan de CSS richtlijnen

[Naar boven]  [Home]