Stap 7 | Modern Markup

Stap 7: Het secundaire menu

In deze laatste stap hebben we, zoals te zien is, het secundaire menu opgemaakt en aan de rechterkant van de pagina geplaatst. We zijn begonnen met dat laatste d.m.v. de volgende CSS code:

#content {
	float:left;
	margin:2em 0 .1em;
	width:75%;
}

#side-menu {
	float:right;
	margin:2em 0;
	width:20%;
}

Hiermee zorgen we ervoor dat het content gedeelte aan de linkerkant van de pagina komt (float:left) en 75% van de pagina breedte in beslag neemt (width:75%). Bij het secundaire menu zeggen we eigenlijk het omgekeerde. Deze plaatsen we aan de rechterkant van de pagina (float:right) die daar een breedte heeft van 20% van de overgebleven 5% van de pagina breedte (width:20%). De overige 5% zorgt voor wat ruimte tussen de twee delen.

Nu alles goed op z'n plaats staat kunnen we beginnen met het opmaken van het secundaire menu. Zoals te zien is in de HTML van deze pagina bestaat het menu uit een DL element die, vanzelfsprekend, bestaat uit meerdere DT en DD elementen. De koppen met de zwarte achtergrond zijn de DTs. De overige links met de licht blauwe achtergrond zijn DDs.

We beginnen met het opmaken van de DTs. Zoals je ziet hebben ook deze elementen ronde hoeken aan beide kanten dus moet er weer wat verzonnen worden met de achtergrondafbeeldingen. We hebben er deze keer weer voor gekozen om het met twee afbeeldingen zoals we dat ook met het navigatie menu hebben gedaan zodat we geen extra HTML elementen hoeven toe te voegen. We hebben nu namelijk per DT maar twee elementen nodig om de achtergronden op toe te passen. En die hebben we!

Het DT element zelf;
en de link (A element) die in elke DT zit.

Als eerste moeten we er natuurlijk voor zorgen dat de achtergronden goed in elkaar overlopen dus moeten de A elementen in de DTs even groot zijn als de DTs zelf, anders krijg je namelijk het volgende effect:
het effect dat optreedt als het A element niet even groot is als het DT element.

Om ervoor te zorgen dat de As in de DTs even groot zijn maken we simpelweg de A element block-level. Hierdoor worden de breedte en hoogte van dit element automatisch net zo breed als het element waar het in zit: de DT. Nu kunnen we d.m.v. het padding eigenschap de hoogte van de DTs veranderen zodat onze achtergrondafbeelding erin past. We komen dan uit op de volgende CSS code:

#side-menu dt {
	margin-top:1em;
	background:#000 url(/style/dt-bg.png) right no-repeat;
}

#side-menu dt a {
	display:block;
	padding:3px .5em;
	background:url(/style/dt-left.png) left no-repeat;
}

Dan zijn de DDs aan de beurt. Zoals te zien is hebben alle DDs een lichtblauwe achtergrond en lichtgrijze randen aan de zijkanten. Ook zit onder elke link een lichtgrijze rand die niet helemaal de zijkanten raakt. Deze effecten hebben we voor de verandering niet gemaakt d.m.v. een achtergrondafbeelding, maar enkel met pure CSS (background en border eigenschappen).

Het lastigste onderdeel van de DDs is om de rand onder elke link niet helemaal tot aan de zijkanten door te laten lopen. Dit doen we door de rand d.m.v. het border eigenschap toe te passen op de link die in elke DD zit. Vervolgens maken we de link, net zoals we deden in de DTs, block-level waardoor de link net zo breed wordt als de DDs waar de links in zitten. Maar we willen de links eigenlijk iets smaller dan de DDs. Dit doen we d.m.v. padding die we gebruiken op alle DDs. Hierdoor ontstaat, vanzelfsprekend, een kleine ruimte tussen de zijkanten van de DDs en de links. Hieronder de CSS code die dit verwezenlijkt:

#side-menu dd {
	padding:.25em .7em 0;
}

#side-menu a {
	display:block;
	border-bottom:1px solid #E7E7E7;
}

Nu alles in het menu een beetje vorm begint te krijgen, rest ons alleen nog de simpele dingen zoals het geven van de achtergrondkleur, de randen en het opmaken van de links. Door een aantal background, border en color eigenschappen toe te voegen hebben we ook het secundaire menu afgerond. Het enige wat ons nog overblijft is de onderste regel tekst: de copyright. Dit onderdeel hoort helemaal onderaan de layout te komen, onder de tekst en het secundaire menu. Het probleem is echter dat door het gebruik van het float eigenschap op de DIV met de content en het DL element van het secundaire menu, de copyright onder het secundaire menu is gekomen i.p.v. helemaal onderaan de layout. Om ervoor te zorgen dat de copyright helemaal onderaan komt te staan gebruiken we een speciaal eigenschap: clear.

Het clear eigenschap zorgt ervoor dat het element waarop het wordt toegepast onder de elementen komen waarop float is toegepast. De DIV en DL elementen hebben beide float dus komt de copyright onder deze twee elementen. Verder maken we de tekst nog een beetje op door een rand toe te voegen, wat padding en de tekst te centreren. We komen hiermee uit op deze CSS code. Dit is de complete CSS; alles wat de layout van Modern Markup maakt zoals die is.

Evaluatie

In de afgelopen 7 stappen zijn we begonnen met enkel de structuur van de layout: de HTML. Langzaam hebben we de layout per onderdeel opgebouwd en zijn we gekomen op dit eindresultaat.

Zoals je misschien hebt gemerkt is de echte moeilijkheid van CSS eigenlijk hoe je de afbeeldingen die we als decoratie gebruiken optimaal gebruikt. Sommigen kiezen ervoor om de layout van hun website een vaste breedte te geven. Meestal wordt een breedte van ±700 pixels gebruikt. Het voordeel hiervan is, is dat de maker van de layout weet dat de layout altijd 700 pixels breed zal zijn en kan hiermee rekening houden als hij/zij de afbeeldingen maakt. Wij hebben er echter voor gekozen om de breedte van de pagina af te laten hangen van de schermresolutie die de gebruiker gebruikt. Hierdoor hebben wij niet de luxe dat we weten hoeveel pixels breed de layout zal zijn en moeten we dus d.m.v. een aantal complexe CSS technieken de afbeeldingen toevoegen.

Wat wellicht ook duidelijker is geworden is de kracht van het float eigenschap die we hebben gebruikt om de visuele structuur van de layout aan te passen. Dit eigenschap zal vooral erg handig zijn bij het maken van nog complexere layouts.

Hopelijk is het nu ook duidelijker geworden hoe je jouw kennis van HTML en CSS echt kan toepassen door een layout te creëren. Voor meer informatie over HTML en CSS kan je uiteraard terecht op de HTML & CSS handleiding en de referentie.

Terug naar Modern Markup »