Hallo Johan,
je kan met <div> werken, dit staat voor division of "onderdeel". je hebt twee <div> nodig: één voor het menu en één voor het veld waar de tekst zelf (inhoud) komt. Dit kun je zo doen:
styles.css:
div.menu {
position: absolute;
left: 0px;
top: 0px;
width: 800px;
height: 40px;
background-color: green;
border: thin solid blue;
}
div.inhoud {
position: absolute;
left: 0px;
top: 44px;
width: 800px;
height: 400px;
color: red;
border: thin solid black;
}
In je html-code kan je verwijzen naar deze <div>'s door het woordje class te gebruiken. Dus de opmaak-definitie in div.menu, (uit de css-file) zal in de html-file toegepast worden onder <div class="menu">:
<html>
<head>
<title>Test van Johan</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="menu">
</div>
<div class="inhoud">
Dit is de inhoud van de webpagina.
</div>
</body>
</html>
De html is niet volledig (geen doctype enz.), maar voor de bondigheid doe ik het nu zo.
Als je deze code opslaat onder styles.css en home.html, kun je het resultaat in je browser zien.
position: absolute dit wil zeggen dat de positie die zal gegeven worden (left, top, width, height) absoluut zijn. Je hebt nog andere mogelijkheden: relative, static,...
Ik heb voor de minst flexibele oplossing gekozen, want je pagina zal steeds 800 pixels breed zijn. Bij kleine schermen is dat teveel, bij grote schermen is dat te weinig. je kan dat oplossen door niet met px als eenheid te werken, maar de hoogte en breedte uit te drukken in %.
Het mooie is nu dat je in de div class="menu" nog andere <div>'s kunt plaatsen, naast elkaar: de menu-items. Dus je kan <div>'s nesten.
<div class="menu">
<div class="menu_item"
Home
</div>
<div class="menu_item"
Help
</div>
<div class="menu_item"
Shop
</div>
</div>
Als je in de css-file nu een div.menu_item definieert, kun je daarvan de opmaak instellen (breedte, tekst-formaat,...).
Ik hoop dat dit je een beetje op weg zet. Probeer, sukkel , val en sta op... dat is de weg die iedere web-ontwikkleaar aflegt. XD