Er hebben al een aantal mensen gemailed dat de layout bij hun niet gecentreerd staat en dat is echt zo vreemd, want ik gebruik exact dezelfde codering voor mijn eigen layout en ik geloof dat mijn layout gecentreerd staat in iedere browser. Maar om dit nu op een makkelijke manier op te lossen heb ik een klein stukje code toegevoegd aan de css van body, content en sidebar (namelijk text-align:center/left/right).
Mijn layout tutorial was nogal verouderd. Ik gebruik al een hele tijd geen tabellen meer. Om mijn website nu vorm te geven gebruik ik alleen nog maar CSS. Het is even wennen, maar wanneer je dit eenmaal door hebt wil je niets anders meer.
Voor het gemak kun je de codes hier(index.html) en hier(style.css) kopieren en in je editor plakken en vanuit daar verder bewerken naar eigen wens. Voor verdere uitleg van de codes raad ik je aan de tutorial te lezen.
Hetgeen dat je hierboven hebt gedownload kun je hier op deze voorbeeldpagina bekijken.
Inleiding:
Er zijn 2 verschillende divs; en . Div id gebruik je wanneer iets eenmaal op je pagina voorkomt zoals een container…deze houd je layout bij elkaar. Div class gebruik je wanneer iets meerdere malen voorkomt zoals bijvoorbeeld een (titel)header. Om een div id aan te duiden in je stylesheet gebruik je een (hekje) en om een div class aan te duiden gebruik je een (punt)
1. Open je kladblok en bekijk de volgende code:
#container {
margin: 0px auto;
width: 800px;
background: #fff;}
Hier geef je dus aan dat je een container wilt hebben van 800 pixels breed, die gecentreerd staat op je pagina en waarvan de lettertype Tahoma 11px is (wanneer deze niet aanwezig is op andermans computer wordt de lettertype Verdana gebruikt) en dat de achtergrond wit moet zijn. Wil je i.p.v. een simpele achtergrondkleur een afbeelding dan verwijs ik je naar deze tutorial.
2. Nu wil je in je container een header hebben (het plaatje dat meestal boven je layout staat).
#header {
width: 800px;
height:165px;
background: #DC143C;
}
Hier geef je dus aan dat jouw header (ook) 800 pixels breed is en een hoogte heeft van 165 pixels. De achtergrond is header.jpg (wel even de goede ‘path’ invullen natuurlijk en de achtergrondkleur is (in dit geval) wit (#ffffff) Waarom een achtergrondkleur als er toch een plaatje overheen gaat? Dit doe ik zodat wanneer een bezoeker’s zijn/haar computer traag is ze toch een header zien die een geheel vormt met de rest dus pas de achtergrondkleur aan aan de rest van jouw layout.
3. Hieronder zie je de code voor het contentvlak (waar jouw tekst komt te staan):
#content {
float: right;
padding: 10px 0 0 7px;
width: 600px;
color: #000;
text-align: left;
background: #fff;
}
Nu heb je een vak van 600 pixels breed die aan de rechterkant staat (d.m.v. float: right) die 10 pixels naar beneden de uhm…bovenlijn begint en 7px uit de kantlijn begint. De lettertype is gewoon hetgeen dat jij hebt aangegeven in je , de achtergrondkleur van dit gehele vak is wit (#ffffff) en jouw tekst staat netjes aan de linkerkant.
4. Zo werkt het dus eigenlijk voor iedere code in je stylesheet.
En dan over naar het HTML-gedeelte…
5. Open de gedownloade en dan zal ik hieronder iedere div bespreken waar en waarom die op de desbetreffende plek staat.
<html>
<head>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
<title>Titel van jouw pagina</title>
</head>
<body><div id=”container”>
<div id=”header”>Hier komt jouw header afbeelding te staan</div>
<div id=”content”>Hier plaats je jouw tekst</div>
<div id=”sidebar”>Hier plaats je de tekst/links voor in de sidebar</div>
<div id=”footer”>Hier plaats je de tekst/links voor in je footer</div>
</div>
</body>
</html>
6. De div is eigenlijk niets anders dan een placeholder waar alle andere divs in komen te staan. Zodat je bijvoorbeeld zoals hoe ik het bij mijn layout heb je gehele layout netjes gecentreerd hebt staan.
<div id=”container></div>
7. De (de bovenkant van je website, in mijn geval een gescrapte afbeelding) plaats je dus in de container.
<div id=”container><div id=”header”></div></div>
8. Dit doe je ook voor je content(vak), je contentvak komt ook in de container NA de header, want je wilt je content natuurlijk onder je header weergeven.
<div id=”container><div id=”header”></div><div id=”content”>HIER PLAATS JE JOUW TEKST</div></div>
9. Je plaats je voor of na je
<div id=”container><div id=”header”></div><div id=”sidebar”>HIER PLAATS JE JOUW TEKST</div><div id=”content”></div></div>
10. En dan als laatste je die plaats je helemaal onderaan voor de laatste div zodat hij nog steeds “vastzit” in de .
<div id=”container><div id=”header”></div><div id=”sidebar”>HIER PLAATS JE JOUW TEKST</div><div id=”content”></div><div id=”footer”>Hier komt de tekst voor in je footer</div></div>
Let op!!
Vergeet geen enkele <div> te sluiten, dus iedere <div> die je opent heeft een “sluittag” </div>
11. Ga daarna naar je browser, en zoek de op. Zoals je ziet heb jij nu een div layout gemaakt.
