CSS - hoofdstuk 10

-

De container

De laatste stap op weg naar een moderne website is het gebruik van een container. Een container zit om alle divs heen en bepaalt de uiteindelijke vorm van de website.

Bekijk het resultaat van het toepassen van een container hier.

We gebruiken een container met relatieve breedte, bijvoorbeeld 80%. Het centreren krijgen we met marge links en rechts op auto te zetten.

We plaatsen alle divs in een container en geven de div navigatie een float naar links en de div nieuws een float naar rechts:

Deel code:


<style type="text/css">
<!--

#container {

width: 80 %

margin-right: auto;

margin-left: auto;

}
#navigatie {
float: left;
width: 15%;
}
#nieuws {
float: right;
width: 20%;
}
#inhoud {
float:left;
width:64%;
}
#voettekst{
clear:both;
}
</style>

<body>

<div id="container">
<div id="koptekst"></div>
<div id="navigatie"></div>

<div id="inhoud"></div>
<div id="nieuws"></div>

<div id="voettekst"></div>

</div>
</body>
</html>

De HTML-code kan dus weer in de “gewone” volgorde. Het voordeel van deze manier (relatief) is dat de invloed van een andere monitorgrootte en of resolutie gering is.

 

Opdrachten:

1. Open het bestand cryptografie.html. Dit is een kaal bestand zonder enige opmaakkenmerken. Maak deze pagina op, zodat je onderstaande pagina krijgt.


Je kunt het bestand nog verder bewerken, kijk maar hier

3. Pas de code dusdanig aan dat je bovenstaand ontwerp krijgt.

achtergrond

plaatje cryptografie

Koppel het aan je website als "cryptografie"

4. Pas een container toe op de website met de bananen, het uiteindelijk resultaat wordt zoiets als dit.

koppel dit aan je website als "oefening container"

 

 

 

 

 

 

 

 

©jw webdesign