Gigadesign, XHTML-CSS website maken

Veilige Navigatie

Een navigatie die tegen een stootje kan.

Een navigatie-menu is nodig en handig voor je bezoekers, zo verliezen ze de weg niet. Maar wat als er bezoekers zijn die reeds een beetje van hun zicht verloren zijn, dus niet meer zo goed zien, kunnen deze je navigatie nog steeds gebruiken als ze het schermlettertype aanpassen naar hun behoefte ?
Als je je als webmaster op deze vraag een neen kunt geven, dan kan je navigatie niet tegen een stootje.

Dus zou je je navigatie moeten kunnen maken zodat ook slechtzienden, met de door hun aangepaste instellingen, van je navigatie kunnen genieten. Dit gaan we nu eens proberen.

Een gouden regel voor dat slechtzienden het schermlettertype kunnen aanpassen is het vermijden van te werken met pixel-perfecte font-instellingen, dus vermijd het gebruik van px voor lettertypes, gebruik em of %.

De XHTML code

<ul id="navigatie">
<li id="aktief"><a href="#">Home</a></li>
<li><a href="#">Pagina 14</a></li>
<li><a href="#">Natte poes</a></li>
<li><a href="#">Samson en Gert</a></li>
<li><a href="#">Mama</a></li>
</ul>

Een eenvoudige ongeordende lijst zal de basis zijn voor de tab-blad navigatie, weinig code is altijd beter als je denkt hoe je het vroeger moest doen met allemaal <OLD-STYLE>geneste tabellen en spacer-gifs</OLD-STYLE> voor hetzelfde resultaat.

3 Kleine afbeeldingen.

Om de tab-bladen een beetje te stylen gaan (zodat je de indruk krijgt welk deel nu bij de betreffende pagina hoort) we 3 kleine achtergrond-afbeeldingen gebruiken, deze mag je gerust stelen.

1. Achtergrond voor aktieve tab.
2. Achtergrond voor niet-aktieve tab.
3. Achtergrond voor niet-aktief te scheiden. (onderste boord)

Laat het stylen beginnen.

Laten we eerst eens de lijst horizontaal laten plaatsen, en de standaard bolltjes weg werken, met float zorgen we ervoor dat de lijst horizontaal wordt weergegeven.

#navigatie {
float : left;
width : 100%;
margin : 0;
padding : 10px 0 0 46px;
list-style : none;
background : #D1870C;
}

#navigatie li {
float : left;
margin : 0 0 1px 0;
padding : 0;
font : 55% "Lucida Console", sans-serif;
}

Een voorlopig voorbeeld 1 hiervan bekijken.

Vorm geven aan de links.

Daar het gewenst is dat het volledige gebied bij de links, dus de gehele tab, klikbaar is geven we de links a, de definitie display: block; mee.

#navigatie a {
float : left;
display : block;
margin : 0 1px 0 0;
padding : 6px 8px 7px 8px;
color : #333;
text-decoration : none;
border : 1px solid #9b8748;
border-bottom : none;
background : #F8D8A1;
}

Een voorlopig voorbeeld 2 hiervan bekijken.

This is the part where the image kicks in

Dus nu gaan we de afbeeldingen toevoegen om het een beetje op te fleuren. repeat-x zorgt ervoor dat de afbeelding horizontaal herhaald wordt, en top left plaatst de afbeelding links boven in de hoek.

#navigatie a {
float : left;
display : block;
margin : 0 1px 0 0;
padding : 6px 8px 7px 8px;
color : #333;
text-decoration : none;
border : 1px solid #9b8748;
border-bottom : none;
background : #F8D8A1 url(nav_uit.gif) repeat-x top left;
}

Een voorlopig voorbeeld 3 hiervan bekijken.

De onderste boord afbeelding.

De afbeelding voor de onderste boord zorgt ervoor dat we een afscheiding krijgen van de aktieve en niet aktieve tabben (of dit het correcte woord is?) en veranderen we in de #navigatie.

#navigatie {
float : left;
width : 100%;
margin : 0;
padding : 10px 0 0 46px;
list-style : none;
background : #D1870C url(nav_lijn.gif) repeat-x bottom left;
}

Een voorlopig voorbeeld 4 hiervan bekijken.

Het hover en active effect

Altijd handig om je bezoekers te laten weten waar ze precies zijn door de aktieve link anders weer te geven, hetzelfde als het hover over de links zal hier van toepassing zijn. Hiervoor gebruiken we de voorlopig ongebruikte #aktief.

#navigatie a:hover, #aktief a {
color : #333;
padding-bottom : 4px;
border-color : #727377;
background : #FFF url(nav_aan.gif) repeat-x top left;
}

En wegens demostratie doeleinden, moet je volgende code ook weer aanpassen, zodat alles nu perfect marcheert:

#navigatie li {
float : left;
margin : 0;
padding : 0;
font : 75% "Lucida Console", sans-serif;
}

Een afgewerkt voorbeeld 5 hiervan bekijken.

Besluit.

Wat is nu het doel denk je nu ?, Als je nu deze voorbeelden hebt bekenen, neem het laatste afgewerkte voorbeeld en je surft gemakkelijkshalve met FireFox of Opera, verander het formaat van de letterweergave eens, je zal zien dat de navigatie steeds meegaat met het gekozen formaat (er zijn grenzen natuurlijk).

Dus als je bezoeker nu wenst zijn tekst instellingen van zijn browser en beetje te vergroten zal de gehele navigatie meegaan, zonder (zoals vroeger met tabellen) uit zijn voegen te barsten.