Websites met stijl

19. Menubalk en header

In dit hoofdstuk:

Voorbereiding

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

Eigenschappen van de menubalk

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.

figuur 2: stijlregels voor de menubalk 13nav {
14background-color: hsl(52, 100%, 50%);
15margin: 0;
16padding: 4px 4px 4px 8px;
17position: fixed;
18top: 0;
19left: 0;
20width: 100%;
21z-index: 1;
22}
23
Toelichting

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)

figuur 3: stijlregels voor de menu-items 24nav a {
25background-color: hsl(0, 8%, 40%);
26color: hsl(0, 0% 100%);
27text-decoration: none;
28width: 80px;
29display: inline-block;
30text-align: center;
31}
32
33nav a:hover {background-color: hsl(0, 0%, 30%);}
34
35nav a[href=""] {color: hsl(50, 100%, 50%);}

Toelichting

figuur 4: stijlregels voor de header 38img {width: 100%;}
39
40header {
41position: relative;
42margin-top: 32px;
43}
44
45header h1 {
46position: absolute;
47top: 0;
48right: 1%;
49margin: 0;
50font-family: 'Open Sans Condensed';
51font-size: 2.5em;
52color: white;
53text-shadow: 1px 1px black;
54opacity: .9;
55}
56

Toelichting

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

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:

Experiment 3: Padding in de menubalk

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

Experiment 4: Z-index (regel 21)

Als er verschillende elementen over elkaar liggen of schuien, 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.

Wat zijn jouw bevindingen?
Bij mij schoven bij een positieve z-index alle elementen onder de menubalk door; de meubalk 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:

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.

Experiment 7: schaduw en transparantie

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

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.

Klaar

figuur 7: het stijlblad na hoofdstuk 19 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
13nav {
14background-color: hsl(52, 100%, 50%);
15margin: 0;
16padding: 4px 4px 4px 8px;
17position: fixed;
18top: 0;
19left: 0;
20width: 100%;
21z-index: 1;
22}
23
24nav a {
25background-color: hsl(0, 8%, 40%);
26color: hsl(0, 0% 100%);
27text-decoration: none;
28width: 80px;
29display: inline-block;
30text-align: center;
31}
32
33nav a:hover {background-color: hsl(0, 0%, 30%);}
34
35nav a[href=""] {color: hsl(50, 100%, 50%);}
36
37
38img {width: 100%;}
39
40header {
41position: relative;
42margin-top: 32px;
43}
44
45header h1 {
46position: absolute;
47top: 0;
48right: 1%;
49margin: 0;
50font-family: 'Open Sans Condensed';
51font-size: 2.5em;
52color: white;
53text-shadow: 1px 1px black;
54opacity: .9;
55}
56

Samenvatting

In dit hoofdstuk kwamen de volgende eigenschappen aan de orde. Ze staan in alfabetische volgorde

box-shadowSchaduw om het element: box-shadow: 3px 3px 2px grey; naslag
displayHoe een element wordt getoond (niet, als inline-element, als inline-blok element of als blok-element) naslag
display: none;element wordt niet getoond
marginRuimte om een elementnaslag
opacityOndoorzichtigheid. opacity: 1.0 opacity: .75 opacity: .50 opacity: .25; naslag
paddingRuimte tussen de tekst en de rand van een elementnaslag
positionVier manieren van positioneren: static, relative, fixed, absolutenaslag
position: staticde standaard manier van positioneren: van links naar rechts, regel voor regel
position: relativeVerschoven (met top/bottom, left/right) t.o.v. de standaard manier methode
position: fixedVaste positie (top/bottom, left/right). Scrollt niet mee met de pagina
position: absoluteVaste positie (top/bottom, left/right). Scrollt wel mee met de pagina
selectorGeeft aan voor welke elementen een stijlregel geldt.hfdstk 20
text-alignTekstuitlijningnaslag
text-align: center;tekst gecentreerd
text-align: left;tekst links uitgelijnd
text-align: right;tekst rechts uitgelijnd
text-decorationtext-decoration: underline, line-through, overline, none.naslag
text-shadowSchaduw om de letters.naslag
top, bottom, left, rightBepalen de positienaslag
widthde breedte van een element naslag
max-widthde maximale breedte van een element
min-widthde minimale breedte van een element
z-indexGeeft aan welk element boven ligt: z-index:3 ligt boven z-index:1 ligt boven z-index:-3 naslag