als je een serieuze site wil moet je niet zelf even gaan leren hoe het moet. Dan moet je dat structureel leren (opleiding/cursus) en niet simpelweg wat hier navragen.
Dus dan maakt de frames toch niet uit..
dat klopt toch niet: je kan beter meteen de goede manier leren, d.w.z. voldoen aan de normen va het w3c-consortium, ook al is de site 'slechts' een hobby-projectje. Frames worden dus afgeraden voor indeling van een site, alsook tabellen: deze dienen om gegevens op een geordende manier te presenteren. Aan <div></div> is trouwens toch niets moeilijks?
Het is zelfs veel gemakkelijker als je later bijvoorbeeld beslist dat de tekstkleur van je menu niet groen maar rood moet.
Onderschat ook het aantal mensen niet dat noodgedwongen met alternatieve browsers moet werken. Gelieve daar ook rekening mee te houden. Bovendien raken browsers meer en meer verspreid over steeds kleinere apparaten. Om op zulke kleine browsers een site te kunnen weergeven, voldoet hij best aan de normen.
Antwoord aan TO:
Maak een file styles.css, waarin de opmaak van de verschillende elementen gedefinieerd wordt:
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;
}
De verschillende elementen wijzen zichzelf uit: left, top bepalen de linkerbovenhoek (gemeten van de linkerbovenhoek van de browser).
De html-pagina die deze opmaak-file gebruikt, kan er zo uitzien:
<html>
<head>
<title>Test</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>
Met de <link rel=... wordt aangeduid dat de opmaak zich bevindt in de file styles.cs.
Er wordt met het woordje "class" verwezen naar de opmaakprofielen uit je styles.css
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.
