Opdracht 4
In deze opdracht gaan we een menubalk onder de header maken.
- Maak onder de header een nieuw blok (
<div>). - Geef het blok de class
navbar - Zet in de header een aantal linkjes met het element
<a href="#">Link</a> - Zoals je ziet is er ook een link helemaal rechts uitgelijnd. Voeg dus een link toe met als class
right
Voeg nu de css toe aan de navbar:
- Zet de overflow op hidden, dit is eigenlijk om te zorgen dat als er teveel in het blok staat dit wordt verborgen. Maar het heeft ook een bijeffect die we hier gebruiken. Namelijk dat het blok wordt getoond ook al heeft het geen elementen met een bepaalde hoogte.
- Kies een achtergrond kleur
Maak nu linkjes op in de navbar
- display block (dan wordt het een blok element), voeg padding toe
- zet float op left, dan gaan blokken achter elkaar staan vanuit de linkermarge
- kies een kleur
- lijn de tekst in het midden uit
- haal de onderstreping weg (text-decoration)
Je kan ook een effect toevoegen als je met de muis erover gaat met a:hover
- voeg een kleureffect toe
Maak nu ook nog een link met een class right en float deze naar rechts.