Websites met stijl

19. Menubalk en header

De opmaak van de menubalk

Voorbereiding

• Open het stijlblad terschelling.css in de editor.
• Controleer of het er zo uitziet als in figuur 1.
  (Wat er op de regels 9 en 10 staat, hangt af van je keuze in hoofdstuk 16). figuur 1: het stijlblad na hoofdstuk 16 1@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Open+Sans:400,700';
  2/* Google fonts 'Open Sans Condensed' (vet) voor de kop en 'Open Sans' (normaal en vet) */
  3
  4body {
  5margin: 0;
  6font-family: 'Open Sans', sans-serif;
  7font-size: 110%;
  8color: hsl(0,0%,40%);
  9/* zie hoofdstuk 16 - Welke achtergrond */
  10/* zie hoofdstuk 16 - Welke achtergrond */
  11}
  12
• Verbeter eventuele fouten.
• Sla de verbeterde versie op, maar sluit de editor niet tot je klaar bent met dit hoofdstuk.

Eigenschappen van de menubalk

Het element nav vormt de menubalk. De links erin zijn de menu-items.

Het bijzondere van de menubalk is dat deze op een vaste plaats blijft staan en niet meescrollt. Het menu is zo altijd in beeld. Je hoeft dus niet terug naar boven te scrollen om een andere menukeuze te maken.
Verder willen we de menubalk geel maken. De balk moet de hele breedte van het venster in beslag nemen.
Dit wordt allemaal geregeld in de regels 13-22.

• Tik de regels 13 t/m 22 van figuur 3 in het stijlblad in.
• Controleer en verbeter eventuele fouten en sla het gewijzigde stijlblad op.
• Bekijk de website in je browser. Controleer of de menubalk geel is, en bij het scrollen op zijn plaats blijft helemaal tegen de bovenrand van het venster.

Toelichting

• De selector nav in regel 13 geeft aan dat het de opmaak van het element nav betreft, het menu.
  De accolades { en } in de regels 13 en 22 markeren het begin en eind van de stijlregels voor nav.

  Wen je aan om altijd eerst de selector en de accolades in te tikken en pas daarna de tussenliggende stijlregels. Zonder de accolades en de selector kan je de opmaak niet controleren in de browser.

• Regel 14 maakt de achtergrond geel.
• Regel 15 maakt de marges 0. Voor de zekerheid - bij de meeste browsers is dat de standaard waarde.
• Regel 16 maakt de paddings boven, rechts en onder 4px, de padding links 8px.
  Daardoor ontstaat er ruimte tussen de menu-items en de rand van de balk.
• Regel 17 fixeert de menubalk, zodat hij niet meeschuift bij het scrollen.
• Regel 18 positioneert de menubalk op 0px van boven, helemaal bovenaan dus.
• Regel 19 zet de menubalk tegen de linkerkant aan.

  Ook regel 18 en 19 zijn voor de zekerheid. De bekende browsers positioneren standaard linksboven.

• In regel 20 wordt de breedte van de menubalk teruggezet op 100%.
  Dit is nodig omdat regel 17 position: fixed de 'bijwerking' dat de breedte van de menubalk wordt aangepast aan de inhoud van de balk. De balk vult daardoor niet meer de hele breedte.

  zie hoofdstuk 18

• Regel 22 zorgt dat de menubalk boven andere elementen ligt. (Die andere elementen hebben z-index: 0.)

  zie hoofdstuk 18

Aan het einde van dit hoofdstuk doen we nog wat experimenten met de regels 17-22, zodat je beter ziet wat er allemaal gebeurt.

Opmaak van de menu-items

De opmaak van het menu-items maken we in orde met de stijlregels 24-35 (zie figuur 3)

• Tik de regels 24 t/m 35 van figuur 4 in je stijlblad in.
  
• Controleer en verbeter eventuele fouten en sla het gewijzigde stijlblad op.
• Bekijk de website in je browser. De menu-items moeten nu donkergrijze hokjes zijn, die van kleur veranderen als je ze met de muis aanwijst.

Toelichting

• De selector nav a in regel 24 selecteert alle a-elementen (hyperlinks) binnen het element nav. Dat zijn de menu-items.

  Meer over selectors in hoofdstuk 20.

• Regel 25 en 26 stellen de voor- en achtergrondkleur van de menu-items in, resp. wit en donkergrijs.
• Regel 27 zorgt ervoor dat de menu-items niet onderstreept zijn.
  Links zijn standaard onderstreept. In menu's is dat ongebruikelijk.
  Met de stijlregel text-decoration: none; halen we de onderstreping weg.

  De eigenschap text-decoration kan de volgende waarden aannemen: underline (onderstreping), line-through (doorstrepen), overline (streep boven de letters) en none (geen streep).

• Regel 28 maakt de breedte van de menu-items (de 'knoppen') 80px.
• Regel 29 maakt van het menu-element een inline blok.

  We willen alle menu-items even breed maken. Maar de menu-items zijn hyperlinks. Dat zijn inline elementen; daarvan kan de breedte niet worden ingesteld; die wordt door de inhoud (de hoeveelheid tekst) bepaald. Regel 28, die de breedte instelt op 80px, heeft dus geen effect.
  Met regel 29 maken we van de menu-items inline-blok elementen. Die kennen wel een breedte; en die breedte is in regel 28 ingesteld op 80px.

• Regel 30 centreert de teksten in de 'knoppen'.

  De eigenschap text-align regelt de horizontale uitlijning. De meest gebruikte waarden zijn: left (links uitgelijnd), center (gecentreerd), right (rechts uitgelijnd).

  Meer info in de naslag

• Regel 33 verandert de achtergrondkleur van een menu-item als dit met de muis wordt aangewezen. Door het veranderen van de kleur bij aanwijzen is duidelijk dat het om een menu-item, een link, gaat.

  Een met de muis aangewezen element kan worden geselecteerd door achter de selector voor dat element de toevoeging :hover te plaatsen. nav a selecteert het element nav a (een link binnen nav, kortom een menu-item), dus nav a:hover selecteert een menu-item als dit wordt aangewezen..

  Meer hierover in hoofdstuk 20.

• Regel 35 maakt de voorgrondkleur van het actieve menu-item geel.

  Het menu van een webpagina bevat ook een knop voor de pagina in beeld. (De pagina polder bevat bv. de menu-knop polder.
  Ik noem z'n knop maar de 'active knop' of het 'actieve menu item') . Die knop moet geen link bevattten, want een link naar een pagina die al in beeld is, is niet zinvol. Daarom hebben we zulke knoppen in de html een 'lege href' gegeven: <a href="">; We maken de voorgrondkleur (de tekstkleur) ervan geel om aan te geven dat de betreffende knop geen link is.

  Er is een manier om een elementen te selecteren waarvan een eigenschap een bepaalde waarde heeft. Dat gaat door achter de selector de eigenschap met de speciale waarde te zetten, tussen vierkante haken [ ].
  [href=""] achter een element selecteert dus dat element, als de eigenschap href ervan leeg is: href="".
  De complete selector: nav a[href=""]

  Meer over selectors in hoofdstuk 20.

De opmaak van de header

• Tik de regels 38 t/m 55 van figuur 4 in je stijlblad in.
  
• Controleer en verbeter eventuele fouten.
• Sla het stijlblad op, maar sluit het niet.
• Bekijk de website in je browser.

Toelichting

Breedte afbeeldingen 100%

• Regel 38 maakt de breedte van afbeeldingen 100%.
  Die opgegeven breedte geldt t.o.v. de parent, het omhullende element.

  De parent van de header is body, die het hele venster vult. De header foto vult dus de hele breedte van het venster en groeit en krimpt mee als het venster groter of kleiner wordt gemaakt.

  De foto's in de aside, de zijbalk, krijgen de volle breedte van hun parent, de zijbalk.

Positionering van de header (regel 40-43)

• Met de declaratie position: relative in regel 41 wordt de header het referentie element voor de h1-kop.
  (zie de 'truc' in hoofdstuk 18).
• In regel 42 krijgt de header een bovenmarge van 32px. Waarom?
  Dat is omdat de menubalk is gefixeerd. Daarmee is die 'losgemaakt' van de rest van de webpagina, hij zweeft er als het ware boven. De header 'ziet' de bovenbalk niet meer en schuift dus naar boven, tegen de bovenrand van het venster. Het bovendeel van de foto zit daarbij achter de menubalk en is niet meer zichtbaar.
  Met de bovenmarge van 32px schuift de header precies genoeg naar beneden om weer helemaal zichtbaar te zijn.

  Hoe ik aan die 32px kom? Gewoon wat waarden proberen tot de header precies aansluit op de menubalk.
  In de experimenten aan het eind van dit hoofdstuk ga je dat ook doen.

Opmaak van de h1-kop 'Terschelling' (regel 45-55)

De kop wordt rechtsboven in de kopfoto gezet, in een ander lettertype getoond, voorzien van een schaduwrandje en iets doorzichtig gemaakt:

• In regel 46 krijgt de header een absolute (=vaste) positie op de website t.o.v. de rand. In de regels 47 en en 48 worden die nader opgegeven: helemaal boven (top: 0) en 1% van rechts.

  Ik had ook kunnen kiezen voor een vaste afstand van rechts, bijvoorbeeld 20px. Maar als de website bekeken wordt op een mobieltjes is 20px van rechts wat veel. Bij het opgeven van een percentage groeit of krimt de rechter marge mee met het venster.

• Regel 49 zet alle marges op 0. Waarschijnlijk is dit de standaard waarde - voor de zekerheid dus.
• In regel 50 wordt het lettertype 'Open Sans Condended' gekozen, een smalle variant van het gebruikte letertype 'Open Sans'. De gewone Open Sans staat niet zo mooi in de kop.

  Vergeet niet een gekozen Google-Font lettertype vooraan het stijlblad te downloaden. In je stijlblad is dat gedaan in regel 1 (voor Open Sans en Open Sans condensed.

• Regel 51 en 52 maakt de grootte van de letters 2.5em (2.5 maal zo groot als standaard) en de kleur wit.
• Regel 53 zet een kleine schaduw om de letters. Daardoor springen de letters er wat meer uit.

  Text-shadow: 1px 1px black betekent dat de schaduw 1px naar rechts is verschoven en 1px naar onder; en dat de schaduw zwart is.

  Meer over schaduwen in de naslag

• Regel 54 maakt de titel een heel klein beetje doorzichtig

  Opacity betekent 'ondoorzichtigheid'. Een opacity van 1 is helemaal ondoorzichtig, een opacity van 0 is helemaal transparant. Opacity: .9 betekent 90% ondoorzichtig, dus 10% transparant. Je ziet door het element een beetje de achtergrond.

  Meer over opacity in de naslag

Experimenteren

Hieronder vind je een aantal voorstellen voor experimentjes. Ze helpen je de verschillende stijlregels te doorgronden.

Lees eerst nog even de tips.

Experiment 1. De menubalk fixeren

• Bekijk eerst in je browser het gedrag van de menubalk. Als het goed is blijft die op zijn plaats bij het scrollen.
• Maak de regels 17 (position: fixed;), 20 (width: 100%;) en 42 (margin-top: 32px;) leeg.
  Nu moet de menubalk bij het scrollen meebewegen met de pagina. Verder is er niets veranderd.
  figuur 5
• Zet regel 17 weer terug op position: fixed; en bekijk de verandering in je browser. figuur 6
  Waarschijnlijk zijn de volgende dingen veranderd:
  • de menubalk scrollt niet meer mee (dat is de bedoeling)
  • de menubalk vult niet meer de hele breedte.
    Als een element de eigenschap position: fixed krijgt, verliest het (gedeeltelijk) zijn block-eigenschappen. De balk wordt nu zo breed dat de menu-items er precies in passen.
  • de kopfoto is naar boven geschoven. Kijk maar de rode kopel van de vuurtoren, die staat nu naast de menubalk in plaats van eronder.
    Ook dat komt doordat de position van de menubalk nu fixed is. De menubalk zweeft als het ware boven de webpagina, in een aparte laag, en de andere elementen 'zien' de menubalk niet meer. Die schuiven nu naar boven op, alsof de menubalk er niet meer is.

  We gaan nu eerst de kopfoto wat naar beneden schuiven, door de header van een bovenmage te voorzien:

• Zet in regel 42 margin-top: 50px;. Daarmee maak je de bovenmarge 50px.
  Als je de webpagina in je browser bekijkt zal je zien dat de kopfoto nu te laag staat. De bovenkant van de kopfoto sluit niet aan op de onderkant van de menubalk.
• Stel de bovenmarge bij, net zo lang tot de kopfoto precies aansluit op de menubalk.
  figuur 8
  Waarschijnlijk staat de bovenmarge dan op 32px. Dat is bij mij teminste het geval in de browsers Chrome, Explorer, Opera en Safari.

  Alleen in Firefox heb ik een bovenmarge van 33px nodig. Kennelijk maakt Firefox de menubalk 1px hoger dan de andere browsers!
  je kan het beste de bovenmarge 32px maken. Dan staat de kopfoto in bijna alle browsers goed. Alleen in Firefox staat een miniem randje onder de menubalk, maar dat zie je niet.

• Geef tenslotte de menubalk weer zijn volle breedte door regel 20 weer terug te zetten op width: 100%;. Nu ziet de webpagina er weer uit als in figuur 6.

Experiment 2: Positie van de menubalk

De menubalk staat helemaal bovenaan, maar dat hoeft niet. Je zou hem ook onderaan kunnen zetten of ergens anders:

• Zet de menubalk onder aan de pagina door regel 21 te veranderen in: bottom: 0;
  Bekijk het resultaat in de browser.
• Verander regel 21 in: top: 100px;
  Bekijk het resultaat in de browser. Nu staat de balk 100px van boven.
  Zo kun je elementen positioneren waar je wilt.
• Probeer de menubalk eens onder de kopfoto te zetten.

  Als je dan de webspagina scrollt ziet die menubalk in het midden er maar raar uit (vind ik).

• Zet regel 21 terug op: top: 0;

Experiment 3: Padding in de menubalk

Regel 16 dient ervoor om wat ruimte rond de menuknoppen te maken.

• Haal de paddings op regel 16 weg, sla op en bekijk de website in de browser. Er is nu geen ruimte meer om de knoppen.
• Zet regel 16 weer terug op padding: 4px 4px 4px 8px;
• Experimenteer eventueel nog wat met de paddings. Zet daarna weer terug op padding: 4px 4px 4px 8px;

Experiment 4: Z-index (regel 21)

Als er verschillende elementen over elkaar liggen of schuiven, bepaalt z-index welk element boven komt en welk onder. Hiervoor gelden de volgende regels:

1. Z-index mag positief en negatief zijn: z-index: 32;, z-index: -2;, z-index: 0;.
2. Het element met de hoogste z-index komt boven. z-index: 2; komt boven z-index: 1;
3. Elk element waarvoor geen z-index is ingesteld heeft z-index: 0;
4. Als twee elementen met dezelfde z-index elkaar overlappen weet je niet welke boven komt en welke onder.

Dit gaan we bekijken aan de hand van de menubalk. Nu die vast staat schuiven de andere elementen er overheen of er onderdoor. Dat wordt geregeld door de z-index in regel 21.

• In regel 21 staat z-index: 1;
  Bekijk welke elementen bij het scrollen over de menubalk heenschuiven, welke er onderdoor.
• Maak z-index achtereenvolgens z-index: -1; en z-index: 0; en kijk steeds welke elementen over de menubalk heenschuiven. Klopt dat met de regels?
• Probeer als je dat wilt ook andere waarden van z-index, bv. z-index: 3; of z-index: -182;
• Maak regel 21 vervolgens leeg en bekijk dan welke elementen over de balk heen schuiven en welke er onderdoor.
• Zet tenslotte regel 21 weer terug op z-index: 1;.

Wat zijn jouw bevindingen?
Bij mij schoven bij een positieve z-index alle elementen onder de menubalk door; de menubalk was altijd boven.
bij een negatieve z-index schoven bj mij alle elementen over de menubalk heen, ook de tekst.
Bij z-index: 0 (en ook als ik regel 21 leeg maakte) schoof de menubalk onder de kopfoto door en over alle andere elementen heen.
Dat is allemaal in overeenstemming met de bovengenoemde regels 1-4

Experiment 5: De opmaak van de menu-items

Nav a regelt de opmaak van de hyperlinks in de menubalk, de menu-items dus (regel 24-31). De meeste regels spreken voor zich. Je zou bijvoorbeeld de volgende experimentjes kunnen doen:

• Achtergrondkleur en letterkleur
  Je zou in regel 25 bij kunnen proberen een andere achtergrondkleur in te stellen en in regel 26 een andere letterkleur.
  Zet de regels 25 en 26 weer terug zoals ze waren.
  
• Onderstreping
  Haal regel 27 weg. Dan krijgen de links hun standaard onderstreping.
  Zet daarna regel 27 weer terug.
• Breedte en uitlijning
  Maak in regel 28 de width 30px en zie dat de teksten nu niet meer passen.

  Wat er met de tekst gebeurt, wordt bepaald door de eigenschap overflow .

  • Zet de width in regel 28 op 180px. Nu passen de teksten ruim.
  • Laat de width op 180px staan en verander regel 30 achtereenvolgens in text-align: left; en text-align:  right;
    Het zal je niet verbazen dat de tekst nu links- resp. rechts uitgelijnd wordt.
    Zet de text-align weer terug op center.
• Regel 29
  Haal tenslotte regel 29 weg (leeg) en kijk wat er gebeurt met de breedte van de menu-knoppen: die krimpen zodat de tekst er precies in past.
  Dat komt omdat een link een inline element is, dat geen breedte kent. De inhoud bepaalt de breedte. Als je regel 29 weer terug zet, wordt de link getoond als een inline-blok element. Dat heeft een breedte, dus de in regel 28 ingestelde breedte krijgt nu effect.
• Bij aanwijzen met de muis
  In regel 33 wordt geregeld wat er gebeurt als je met de muis een menu-item aanwijst. Kijk in de browser hoe de kleur dan verandert. Maak vervolgens regel 33 leeg en controleer in de browser dat de kleur nu niet meer verandert bij aanwijzen.
• Links met een lege href
  In regel 35 worden menu-items met een lege href voorzien van gele letters. (Dat is bij index.html home, bij polder.html polder, bij duin.html duinen en bij wad.html wad.)
  Als je regel 35 weg haalt verdwijnen die gele letters. Dan zien alle menu-items er hetzelfde uit.
• Zet tenslotte de regels 24-35 weer terug op hun oorspronkelijke waarden (zie daarvoor figuur 3).

Experiment 6: Positionering van de titel 'Terschelling'

De regels 46-48 bepalen de positie van de titel. Regel 46 position: absolute; geeft aan dat het element absolute wordt gepositioneerd. Met de eigenschappen top, bottom (resp van boven, en van onder) en left, right kan je een (absoluut) element precies plaatsen.Dat is gebeurd in de regels 47 en 48.

• Probeer het element ergens anders binnen de header te plaatsen door de regels 47 en 48 te veranderen bv. met top: 50px; right: 50px; of met bottom: 30px; left: 50px; of wat je maar wilt.
  De afstanden kunnen worden opgegeven in px, % of een combinatie (bv. top in %, left in px).
  Merk op dat de afstanden steeds gelden t.o.v. de randen van de header (de kopfoto).
• Zet regel 46 op bottom: 0; en regel 47 op left:0; om de titel aan de linker onderkant van de header te positioneren.
  Maak dan regel 46 leeg en bekijk het resultaat. Nu staat de titel links onderaan het scherm!

  Een absoluut geplaatst element wordt gepositioneerd t.o.v. het referentie element, dat is het eerste niet statische parent-element. De procedure is als volgt: eerst wordt gekeken naar de parent (het omhullende element). Is dat niet relative, absolute of fixed dan kijken we verder bij diens parent. Zo gaan we door tot we een relative, absolute of fixed element vinden. Dat is de referentie. Vinden we geen enkele parent die voldoet, dan is de body het referentie-element

  Door regel 49 leeg te maken is er geen niet-statisch parent element meer. Dus is nu de body referentie.

Zet de regels 46-48 weer terug op hun oude waarden.

Experiment 7: schaduw en transparantie

In regel 53 is met text-shadow" 1px 1px black; een heel subtiele schaduw ingesteld.

• Maak de schaduw maar eens groter en geef die een andere kleur (bv. text-shadow: 5px 10px blue; of wat je wilt).
• Je kan ook het woord text-shadow vervangen door box-shadow. Dan krijgen niet de letters een schaduw, maar het de hele titel.
• Zet regel 53 weer terug op zijn oude waarde.

In regel 54 opacity: .9; wordt de opaciteit ingesteld. Opaciteit is het omgekeerde van tranparantie (doorzichtigheid). Het wordt eaangegeven met een getal tussen 0 (volledig transparant) en 1 (volledig ondoorzichtig). Met een opacity van 0.9 is de titel iets doorzichtig. In de praktijk merk je er niets van. Ik heb de regel eigenlijk alleen toegevoegd om de eigenschap opacity te laten zien.

• Bekijk het effect van verschillende waarden van de opacity, bv. 0 (helemaal transparant, dus niet zichtbaar), 0.4, 1.
• Zet de opacity terug op .9.

Klaar

• Zet na afloop van de experimenten alle regels weer terug op de oorspronkelijke waarden, zoals hierondef in figuur 7.
• Sla het stijlblad op (als steeds onder de naam terschelling.css)