Ik ben bezig om een "simpele" website te maken voor m'n stage (samen met een paar anderen die helemaal geen PHP kennen), maar ik krijg de indeling niet goed. (let niet op de rare kleuren enzo, maar dat is om eerst de indeling duidelijk goed te krijgen)

----index.php----

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
			
<div class="header" id="header"> Hier komt de bovenkant van de pagina.</div>
<div class="navi" id="navi">Hier komt het menu. </div>
<div class="kern" id="kern">Hier komt de kern van de pagina.</div>
<div class="onder" id="onder">Hier komt de onderkant van de pagina.</div>
	
</body>
</html>


----style.css----
.header		{
			width: 100%;
			height: 10%;
			background-color: #812317;
			overflow: auto;
			}
.navi		{
			width: 20%;
			height: 80%;
			background-color: #123141;
			overflow: auto;
			}
.kern		{
			width: 80%;
			height: 80%;
			background-color: #342342;
			overflow: auto;
			}
.onder		{
			width: 100%;
			height: 10%;
			background-color: #745726;
			overflow: auto;
			}


Het is de bedoeling dat de indeling ongeveer zo wordt:
_____________________________
| |
|___________KOP_____________|
| | |
|_MENU_|BODY_______________|
| |
|___________FOOTER___________|

EDIT:

en let ook niet op de overflow, dat weet ik, pas ik zelf nog wel aan :)
Ik heb hem als voorbeeld ff op mijn site een voorbeeld geplaatst, dan kunnen jullie zien wat die nu doet.

En het is niet de stageopdracht zelf, maar gewoon om het thuisfront op de hoogte te houden.
Ik ben al wat verder gekomen, ik heb de divs al een beetje dichter bij elkaar gekregen, alleen nu staan de menu en body div weer onder elkaar :S
Met dit stylesheet kreeg ik hem wel:
.header {
width: 100%;
height: 10%;
background-color: #812317;
overflow: auto;
}
.navi {
float: left;
width: 20%;
height: 80%;
background-color: #123141;
overflow: auto;
}
.kern {
float: left;
width: 80%;
height: 80%;
background-color: #342342;
overflow: auto;
}
.onder {
clear: both;
width: 100%;
height: 10%;
background-color: #745726;
overflow: auto;
}
Kijk, dat is wat ik wou. Super Jelmer. (ik ben nog niet zo heel erg thuis in de positioning met .css) Maar het werkt inderdaad ;)

Reageren