Descendant selectors toepassen

Transcriptie

1 HTML EN CSS de basis Oefening 13.4 Descendant selectors toepassen Maak een lijst binnen een definitielijstlijst en geef de binnenste lijst een totaal andere vormgeving Verticaal navigatieblok Een veelgebruikte toepassing van een niet-genummerde lijst is een navigatiekolom met hyperlinks. Het uiterlijk van zo n lijst is op vele manieren aan te passen. Uitgangspunt voor de navigatiebalk voor de rest van dit hoofdstuk is het volgende stukje html: C <ul id= navigatie > <li><a href= home.html >Home</a></li> <li id= huidig ><a href= docenten.html >Docenten</a></li> <li><a href= leerlingen.html >Leerlingen</a></li> <li><a href= oefeningen.html >Oefeningen</a></li> <li><a href= contact.html >Contact</a></li> </ul> Vijf hyperlinks zijn opgenomen in een niet-genummerde lijst. Het ul-element heeft een identificatie (navigatie) zodat we ernaar kunnen verwijzen in een stijlblad. Een van de vijf li-elementen heeft de identificatie huidig. Daarmee zullen we later aangeven op welke pagina de bezoeker momenteel is. WAAROM EEN ONGEORDENDE LIJST? Voor een rijtje hyperlinks is een ongeordende lijst (ul) de beste oplossing. Het is immers een ongenummerde opsomming van gelijksoortige onderdelen. Een link vormt in zijn eentje geen alinea, dus een p-element ligt minder voor de hand. Afbeelding laat zien hoe een browser het ul-element weergeeft met zijn interne stijlblad. Met andere woorden: zonder dat wij een stijlblad hebben opgegeven. Afbeelding Een ul-element met vijf list items weergegeven zonder stijlblad.

2 13 Lijsten HET KAN OOK ANDERS Er zijn verschillende manieren waarop een navigatiebalk vormgegeven kan worden. In deze paragraaf wordt een mogelijke oplossing getoond, maar er zijn andere oplossingen denkbaar Aanpassing van de lijst De meeste aandacht zal uitgaan naar de list items (li) en de ankers (a) binnen de lijst, maar we beginnen met de lijst als geheel. Voor een navigatiebalk zijn de bullets voor elk item niet nodig, dus die halen we weg. Margin en padding zullen we later toekennen aan de li-elementen, voor de lijst als geheel zetten we ze op nul. Dat levert een eerste stijlblad op met de volgende inhoud: C #navigatie { list-style : none; /* bullets weg */ margin : 0; padding : 0; /* komt bij li s */ Met het hekje verwijzen we naar een id (zie hoofdstuk 12 over de attributen class en id), in dit geval naar het element met de identificatie navigatie. In afbeelding ziet u dat deze eerste opruiming er meteen voor zorgt dat de links minder lijken op een opsommingslijst. Afbeelding De bullets voor de list-items zijn verdwenen List items We richten de aandacht nu op de list items en proberen ze meer op een soort knoppen te laten lijken. Daartoe geven we de li-elementen een achtergrondkleur, voegen we een border toe en geven we de tekst wat ruimte met verticale padding. Horizontale padding is niet nodig omdat we de tekst van de links centreren met de eigenschap textalign. Aan het stijlblad voegen we het volgende toe (wat er al stond blijft staan):

3 HTML EN CSS de basis C #navigatie li { background border-style border-width border-color padding text-align : orange; : solid none solid none; : 1px; : maroon; : 5px 0px 3px 0px; : center; Na het aanpassen van de li-elementen, ziet het verticale navigatieblok eruit als in afbeelding Afbeelding De lijstonderdelen krijgen een kleur en een rand Breedte instellen Een ul-element is een block-element (aan het eind van dit hoofdstuk leest u meer over block-elementen) en dat betekent dat het in principe de gehele breedte van de pagina beslaat. Voor onze verticale navigatiebalk is het de bedoeling dat hij wat smaller is. Vandaar dat we het ul-element een breedte geven. We voegen width : 10em toe aan de navigatie. De nieuwe versie is dan als volgt: C #navigatie { list-style : none; /* bullets weg */ margin : 0; padding : 0; /* komt bij li s */ width : 10em; BREEDTE IN EM Omdat de lijst met links is opgebouwd uit tekst, ligt het voor de hand de breedte ervan op te geven in de eenheid em. Op die manier schaalt de navigatiebalk automatisch mee met verandering van de grootte van de letters.

4 13 Lijsten Afbeelding toont het effect van het aanpassen van de breedte tot 10 em. Welke breedte geschikt is, hangt af van de lengte van de trefwoorden. In het algemeen is het beter de breedte ruim te nemen om te voorkomen dat een onderdeel van de navigatiebalk twee regels in beslag neemt. Zo n uitzondering is meestal geen mooi gezicht. Afbeelding Breedte van het ul-element aangepast tot 10 em. BREEDTE AAN JUISTE ELEMENT Als we niet de breedte van het ul-element (de lijst als geheel) zouden aanpassen, maar alleen de breedte van de afzonderlijke list items (li) dan lijkt het alsof we hetzelfde resultaat bereikt hebben. Dat is echter schijn, zoals we kunnen zien als we het ul-element een achtergrondkleur zouden geven. De li-elementen zijn dan wel smaller, maar het ul-element beslaat nog steeds de volledige breedte van het scherm Links Na het aanpassen van de lijst als geheel (ul), en de list items (li) is het nu de beurt aan de werkelijke links (a). Als eerste zullen we de onderstreping verwijderen. Bij een navigatiebalk heeft de bezoeker van de website niet de gewoonlijk gewenste aanwijzing van onderstreping nodig om te zien dat het hier om links gaat. We gebruiken de methode van overerving uit hoofdstuk 11 en kennen text-decoration: none toe aan het element a in het algemeen. Automatisch geldt die waarde dan ook voor de situaties die we met de pseudo-classes aangeven. Het verschil tussen een niet-bezochte link en een bezochte link geven we aan door een subtiele kleurverandering van de link-tekst (twee verschillende soorten grijs). Als hover-effect heb ik hier gekozen voor gekleurde balkjes aan boven- en onderzijde van de link. C #navigatie a { text-decoration: none;

5 HTML EN CSS de basis #navigatie a:link { color : #222; #navigatie a:visited { color : #555; #navigatie a:hover { border-style border-width : solid none solid none; : 5px 0px 3px 0px; border-color : #c60; /* donker oranje */ Afbeelding laat zien hoe de simpele niet-genummerde lijst van afbeelding onherkenbaar is getransformeerd in een verticale navigatiebalk met hover-effect. Afbeelding De verticale navigatiebalk is gereed. Oefening 13.5 Verticaal navigatieblok Maak op een webpagina een navigatieblok, maar kies daarbij een andere manier om het hover-effect aan te geven dan in deze paragraaf wordt gedemonstreerd. EXPERIMENTEER Om bij een navigatiebalk een resultaat te bereiken dat bevalt, zal het vaak nodig zijn veel te experimenteren. U kunt van alles en nog wat variëren bij een knoppenbalk: de achtergrondkleur, de hoeveelheid padding, de weergave van de tekst (uitlijning, vet enzovoort), alle aspecten van de border (dikte, plaats, stijl en kleur) en het effect dat optreedt bij hover.

6 13 Lijsten 13.8 Horizontale navigatiebalk De verticale knoppenbalk die we in de vorige paragraaf hebben gemaakt, is met een paar kleine ingrepen om te werken tot een horizontale balk. Als eerste moeten we de breedte van de lijst (nu 10 em) veranderen in 100%. Omdat er vijf links zijn, geven we elk li-element een breedte van 20%. Het enige wat er daarna nog hoeft te gebeuren is de li-elementen naast elkaar te plaatsen. Dat kunnen we doen door een float:left toe te voegen aan de stijl van de li-elementen. De aangepaste versies zien er dan als volgt uit. De wijzigingen zijn aangegeven in vet: C #navigatie { list-style : none; /* bullets weg */ margin : 0; padding : 0; /* komt bij li s */ width : 100%; #navigatie li { background : orange; border-style : solid none solid none; border-width : 1px; border-color : maroon; padding : 5px 0px 3px 0px; text-align : center; width : 20%; float : left; De rest van het stijlblad blijft ongewijzigd. De horizontale versie van de navigatiebalk is te zien in afbeelding Afbeelding Met enkele kleine aanpassingen is de verticale navigatiebalk omgewerkt tot een horizontale navigatiebalk. Oefening 13.6 Horizontale navigatiebalk Werk het navigatieblok uit oefening 13.5 naar een horizontale versie.

7 HTML EN CSS de basis 13.9 Huidige pagina Bezoekers van een webpagina stellen het op prijs als ze kunnen zien op welke pagina ze zich bevinden. We hebben daar vanaf het begin rekening mee gehouden door in de html-tekst een id toe te kennen aan de li van de huidige pagina: C <li id= huidig ><a href= docenten.html >Docenten</a></li> De pagina waarover we het hebben is kennelijk docenten.html. We kunnen ervoor zorgen dat er bij het woord docenten in de knoppenbalk geen hover-effect zichtbaar is als we dat hover-effect al bij voorbaat toekennen. We voegen aan het stijlblad de volgende css-rule toe: C #huidig a { border-style : solid none solid none; border-width : 5px 0px 3px 0px; border-color : #c60; /* donker oranje */ De selector betekent: de volgende declaraties gelden voor elk a-element binnen het li-element met de id huidig. Als de bezoeker de muisaanwijzer boven de verschillende links beweegt, verschijnt er boven en onder het woord een balkje. Maar bij het woord docenten staan die balkjes er al en er lijkt dus niets te gebeuren. Afbeelding probeert een indruk te geven. Het aanwijshandje bevindt zich op het onderdeel Oefeningen en daar is het hover-effect zichtbaar. De huidige pagina is Docenten, wat wordt aangeduid met statische balkjes boven en onder. Afbeelding Huidige pagina aangegeven, zodat er op dat onderdeel geen hover-effect te zien is. Oefening 13.7 Huidige pagina Het resultaat van een hover-effect en een blijvend effect bij het onderdeel dat de huidige pagina aangeeft is eigenlijk alleen goed te demonstreren op een echte webpagina. Maak die webpagina Display Er is een bezwaar aan te voeren tegen de navigatiebalk, vooral tegen de verticale versie. De links werken alleen als er geklikt wordt op het linkwoord. Het zou mooier zijn

8 13 Lijsten GEEN LINK De bezoeker van de webpagina ziet geen hover-effect meer bij het woord dat de huidige pagina aanduidt. Maar het is nog steeds een link. De bezoeker kan erop klikken en krijgt dan dezelfde pagina in beeld die er al staat. Dat kan verwarrend zijn. Als u het helemaal goed zou willen doen, dan hoort de vermelding van de huidige pagina geen link te zijn. als er op de hele rechthoek geklikt kan worden, ook naast het woord. Dat is mogelijk in css, maar daarvoor is het nodig eerst wat technische achtergrond te geven. Als u dat te ingewikkeld lijkt, dan kunt u de rest van dit hoofdstuk overslaan en verdergaan met het volgende hoofdstuk. Binnen css onderscheidt men onder meer deze twee typen elementen: block; inline Block Elementen van het type block vormen een rechthoek die in principe de volledige breedte vult van het omliggende element. De blocks worden bij het opbouwen van de webpagina onder elkaar gelegd (tenzij een stijlblad daarop ingrijpt, bijvoorbeeld via een float, zie hiervoor hoofdstuk 14). Voorbeelden van elementen van het type block zijn: p, h1 t/m h6, ul, ol en table Inline Elementen van het type inline kunnen een deel van een regel beslaan en over verschillende regels verdeeld zijn. Voorbeelden van dit type zijn: a, img, em (voor benadrukte tekst) en strong. Binnen html geldt dat een inline-element altijd binnen een block moet zijn beschreven. Andersom kan een inline-element geen block bevatten (een p- element binnen een a-element is niet correct) Weergave als block Met cascading style sheets kunnen we de weergave van een element veranderen met de eigenschap display. Deze eigenschap kan een hele reeks waarden hebben. De belangrijkste waarden van de eigenschap display zijn: FLOAT WORDT BLOCK Een inline-element dat wordt gefloat wordt daarna behandeld als een element op block-niveau.

9 HTML EN CSS de basis none inline block Een element met de waarde none wordt niet weergegeven. Een element dat de waarde inline krijgt, gedraagt zich als een inline-element; een element dat de waarde block krijgt, gedraagt zich als een block-element. Om de a-elementen die inline zijn zich te laten gedragen als block kunnen we het volgende toevoegen aan de stijlbeschrijvingen voor het a-element: C display : block; Deze aanpassing heeft een aantal gevolgen. De horizontale balkjes strekken zich nu uit over de gehele breedte. Dat is volgens verwachting. Maar doordat de a-elementen nu ook de hele hoogte van een li-element innemen, worden ze groter als er een border bij komt. In afbeelding is te zien dat de a-elementen niet meer passen binnen de padding van de li-elementen. Afbeelding Weergave van de a-elementen als block heeft als gevolg dat ze niet meer passen op de balk. We kunnen dit probleem op verschillende manieren oplossen. We zouden een ander hover-effect kunnen kiezen, bijvoorbeeld een verandering van de achtergrondkleur. Wat we hier zullen doen is de padding van de li-elementen uitschakelen en in plaats daarvan bij de a-elementen een border maken in dezelfde kleur als de achtergrond (orange). Het hover-effect wordt daarmee teruggebracht tot het aanpassen van de kleur van de border. Hetzelfde geldt voor het aanduiden van de link die de huidige pagina aangeeft. Het volledige stijlblad voor de verticale navigatiebalk luidt dan als volgt: C #navigatie { list-style : none; /* bullets weg */ margin : 0; padding : 0; /* komt bij li s */ width : 10em; VAN HET EEN KOMT HET ANDER Een wijziging binnen een stijlblad zal heel vaak een onverwacht neveneffect hebben. Dat maakt het nodig om goed te testen en niet meer dan één ding tegelijk te veranderen. #navigatie li {

10 13 Lijsten background : orange; border-style : solid none solid none; border-width : 1px; border-color : maroon; /*padding : 5px 0px 3px 0px;*/ padding : 0; text-align : center; #navigatie a { display : block; text-decoration: none; border-style : solid none solid none; border-width : 5px 0px 3px 0px; border-color : orange; /* achtergrondkleur */ #navigatie a:link { color : #222; #navigatie a:visited { color : #555; #navigatie a:hover, #huidig a { border-color : #c60; /* donker oranje */ Het eindresultaat is te zien in afbeelding Oefening 13.8 Block maken bij horizontale balk Pas de horizontale navigatiebalk die u in oefening 13.6 maakte zodanig aan dat het hele vlak geldt als klikgebied en niet meer alleen het linkwoord. Afbeelding Verticale navigatiebalk met display als block.