In dit hoofdstuk gaan we een menu maken dat er ongeveer uitziet als figuur 1.
figuur 1: een menu van tabbladen
Het menu suggereert een stel tabbladen. Blad 2 is het bovenste tabblad, het blad in beeld. Door een klik op een andere tab zet je een ander blad in beeld.
Je kan proberen zelf deze layout te maken. Als je dat niet lukt of als dat je teveel werk is vind je hieronder in detail hoe je de layout van figuur 1 krijgt.
Vanuit sjabloon 5
We gaan uit van sjabloon 5, een van de sjablonen die besproken zijn in hoofdstuk 30 en 31.
figuur 2: menu van sjabloon 5
Een stijlblok
Om sjabloon 5 om te werken tot het menu van figuur 1 moeten we veranderingen aanbrengen in de css.
Het ligt voor de hand dat te doen in het stijlblad.
In dit hoofdstuk pakken we het echter anders aan: we zetten de nieuwe stijlregels in een stijlblok in de head van sjabloon 5.
Dat heeft twee redenen:
Ten eerste kan je na het experimenteren alle veranderingen simpel ongedaan maken door het stijlblok te wissen.
Daarnaast hebben we in deze cursus nog niet met een stijlblok gewerkt. Daar krijg je nu dus de gelegenheid voor.
figuur 3: stijlblok met de opmaakregels voor het tabbladmenu<head><meta charset="utf-8">
<title>Websites met stijl - H37</title>
<link rel="stylesheet" href="css/stijlen.css"> <style>nav {border-bottom: 1px solid hsl(240, 50%, 50%); padding: 30px 20px 0 20px;
}
Zet het stijlblok van figuur 3 op de aangegeven plaats in de head.
Wil je daar meer uitleg/toelichting bij? Klik dan op de knop Stap voor stap.
Het aanbrengen van de stijlen stap voor stap
De opmaak bestaat uit 4 onderdelen:
De opmaak van de menuregel: nav
De opmaak van de menu-items: nav a
De opmaak van het actieve menu-item (het menu-item van de pagina in beeld: nav a[href=""]
De opmaak van een menu-item dat met de muis wordt aangewezen: nav a:hover
Stap 1
Open het bestand sjabloon5.html (Het staat in de map sjablonen).
Zet de tags voor het element style in de head zoals in figuur 4.
(De regels uit de head die er al staan zijn licht gedrukt.)
De stijlen moeten na de regel <link rel="stylesheet"href="css/stijlen.css"> komen.
figuur 4<head><meta charset="utf-8">
<title>Websites met stijl - H37</title>
<link rel="stylesheet" href="css/stijlen.css"> <style>
</style></head>
Alle stijlregels die je gaat toevoegen moeten tussen die beide tags komen.
Stap 2: opmaak van de menu-items
We beginnen met de belangrijkste stijlregels, die van de menu-items.
Daarheen wordt verwezen door de selector nav a - hyperlinks binnen nav.
Zet eerst binnen het stijlblok de selector en de open- en sluit accolade nav a { en }
Voeg daartussen een voor een de verschillende stijlregels van figuur 5 toe; bekijk na elke regel het effect in de browser.
figuur 5: stijlregels voor de menu itemsnav a{border: 1px solid hsl(240,50%, 50%); background-color: hsl(0, 0%, 90%); color: hsl(240, 0%, 45%); border-radius: 8px 8px 0 0; width: 150px; font-size: 100%; padding: 3px 0; margin: 0 0 -1px 0;
}
Toelichting per regel
border: 1px solid hsl(240,50%, 50%); Het kader om de menu-items
background-color: hsl(0, 0%, 90%); De lichtgrijze achtergrond
color: hsl(240, 0%, 45%); Donkergrijze tekst
border-radius: 8px 8px 0 0; De afrondingen links- en rechtsboven
Het oorspronkelijke menu is klein. De tabs kunnen best wat groter:
width: 150px; Breedte 150px (i.p.v. 90px)
font-size:100%; Lettergrootte 100% i.p.v. 90%
padding: 3px 0; Een padding van 3px boven en onder de tekst
margin: 0 0 -1px 0;
De menu-items moeten precies op de horizontale lijn staan.
Maar ze blijken er net 1px boven te staan. Dat kan verholpen worden door de ondermarge op -1px te zetten. (De andere marges zetten we op 0).
Stap 3: opmaak van de menuregel
De menuregel (het element nav) moet op twee punten aangepast:
De tabs staan te dicht tegen de kopfoto en de linker kant van de pagina.
De horizontale lijn onderaan het menu moet wat donkerder; nu is hij lichter dan de lijnen onderaan de tabs.
Dat gaan we oplossen met de stijlregels uit figuur 6:
Zet eerst binnen het stijlblok de selector en de open- en sluit accolade nav { en }. In figuur 3 heb ik nav vóór nav a gezet
(het omhullende element eerst), maar dat hoeft niet.
Voeg daartussen een voor een de stijlregels van figuur 6 toe; bekijk na elke regel het effect in de browser.
figuur 6: stijlregels voor de menuregelnav {border-bottom: 1px solid hsl(240, 50%, 50%); padding: 30px 20px 0 20px;
}
Toelichting per regel
border-bottom: 1px solid hsl(240,50%, 50%); Geeft de border-bottom van het menu dezelde dikte en kleur als de border van de menu-items.
padding: 30px 20px 0 20px; maakt de padding boven 30px, links en rechts 20px en onder 0.
Door de bovenpadding en de linker padding schuift het menu 30px omlaag en 20px naar rechts.
De padding onder moet 0 zijn, anders komt er weer ruimte tussen de menu-items en de brede lijn onder het menu.
Je zou denken dat je in plaats van padding: 30px 20px 0 20px;
ook margin: 30px 20px 0 20px; zou kunnen gebruiken; maar met margin i.p.v. padding gaat het niet helemaal goed:
Met margin stopt de lijn onder het menu 20px uit de linker en rechter kant: de border valt binnen de marge en buiten de padding!
Stap 4: opmaak van het actieve menu-item
Het actieve menu-item" is dat van de pagina in beeld. Omdat er geen link naar de pagina in beeld hoeft te zijn is het bestemmingsadres leeg: href="".
De selector selecteert het actieve element hierop: nav a:[href=""].
Het belangrijkste van de opmaak is de onderkant van het menu-item: hier moet de blauwe lijn (onderdeel van de onderlijn van de menuregel) weg.
Dat doen we door border-bottom een witte kleur te geven. Die komt dan over de blauwe lijn heen.
Verder maken we de tekstkleur blauw.
Dit menu-item krijgt geen achtergrondkleur en blijft dus wit.
De opmaak van het actieve menu-item wordt dan:
figuur 7: opmaak van het actieve menu-itemnav a[href=""] {border-bottom: 1px solid white; color: hsl(240, 100%, 45%);
}
Zet de opmaak in het stijlblok.
Stap 5: opmaak van een menu-item bij aanwijzen met de muis
De hiervoor is nav a:hover een met de muis aangewezen link in nav.
We maken de achtergrondkleur bij aanwijzen met de muis net wat donkerder.
Ook de tekstkleur maken we wat donkerder.
De stijlen zien er als volgt uit:
figuur 8: opmaak van een menu-item bij aanwijzen met de muisnav a:hover {background-color: hsl(0, 0%, 80%); color: hsl(240, 50%, 60%); border: 1px solid hsl(240,50%, 50%);
}
Zet de opmaak in het stijlblok.
Opmerking
Als je het menu helemaal gelijk wilt maken aan figuur 1, dan moet je de teksten van het menu nog wijzigen in blad 1, blad 2, blad 3, blad 4.
Maar dat is verder niet spannend.
Welke stijlregel geldt?
Cascading style sheets betekent dat stijlbladen en stijlregels over elkaar heen gelegd worden. Als twee regels betrekking hebben op dezelfde eigenschappen van dezelfde elementen, dan geldt de laatste.
Kijk bijvoorbeeld wat er gebeurt als je in de head de regel <link rel="stylesheet"href="css/stijlen.css"> achter het stijlblok zet:
figuur 9: de regel met de link naar het stijlblad achter het stijlblok<style>
...
...</style> <linkrel="stylesheet"href="css/stijlen.css">
De tabbladen zijn helemaal verdwenen; het menu ziet er weer uit zoals het was. Hoe komt dat?
Eigenlijk is het simpel. Omdat het stijlblok nu vóór de link met het stijlblad staat, wordt eerst het stijlblok ingelezen, en pas daarna het stijlblad.
De stijlregels van het externe stijlblad overschrijven daarmee de eerder ingelezen regels van het stijlblok.
Onthoud:
Zet een stijlblok altijd na de link naar het stijlblad.
Anders worden de regels van het stijlblok overschreven door die van het stijlblad.
Tabbladen of niet?
Wil je na dit hoofdstuk sjabloon 5 in zijn oorspronkelijke staat terugbrengen?
Wis dan het stijlblok in de head (markeren als commentaar kan ook).
Als je de menu-items andere namen hebt gegeven moet je die terugzetten naar de oorspronkelijke namen.
Wil je het tabblad-menu gaan gebruiken?
Dan moet je de stijlregels die je in het stijlblok in de head hebt gezet (de regels van figuur 3) verplaatsen naar het stijlblad (5.css).
De betreffende oorspronkelijke stijlregels in 5.css vind je tussen regel 204 en regel 241.
De tags <style> en </style> in de head kun je wissen na het verplaatsen van de tussenliggende stijlregels.
