HTML - Website bouwen met div's


Websites werden vroeger vaak opgezet met behulp van tabellen. Dit kan uiteraard maar beter en handiger is om een pagina met div's op te zetten. Het voordeel is dat deze manier van bouwen flexibeler is en een basis met div's bevat tevens minder code. Div is de afkorting van Division en het positioneren en het toepassen van opmaak gaat met CSS.

Net als dat voor andere elementen kan geef je om opmaak (hoogte, breedte, etc.) toe te toepassen een div een class of een ID mee. Een ID mag 1 keer gebruikt worden op de pagina, een class meerdere keren. Een voorbeeld van een div inclusief een class wordt dan als zoals hieronder, de class wordt dan weer gedefinieerd in de CSS voor de opmaak.

<div class="classnaam">Content</div>


Het opbouwen van een website met div's kan op meerdere manieren en dit is afhankelijk van hoe je een website wilt gaan inrichten. Als voorbeeld wordt er hieronder uitgegaan van een 'Header' voor een logo met een hoofdmenu er direct naast, aan de linkerkant een submenu. In het midden dan de content en rechts een extra balk voor eventuele links, of advertenties. Uiteraard is het mogelijk om de verschillende onderdelen weg te laten.

Hieronder wordt een aantal keer verwezen naar een demo. In deze demo is standaard al opmaak voor tekst opgenomen die verder niet wordt besproken , deze opmaak is als volgt.

td, div, th, span {
        vertical-align:top;
        text-align:left;
        border:0px solid #ffffff;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
        line-height:18px;
        color:#000000;
}


In dit geval heeft de website een vaste breedte en wordt de website gecentreerd in het midden van het venster. Om de website een vaste breedte te geven en deze in het midden te krijgen plaats een div als basis, de container. Dit is de div waarin alles wordt geplaatst.

<div class="container"></div>


Deze div krijgt als classnaam container die weer terugkomt in het externe CSS bestand op de onderstaande manier. Je kunt uiteraard hier ook een eigen naam voor opgeven. De container krijgt in dit geval een breedte van 950 pixels, de regel 'margin:0px auto;' zorgt ervoor dat de container daadwerkelijk wordt gecentreerd in het midden van het venster.

div.container {
        width:950px;
        margin:0px auto;
}


Hiermee heb je de basis van de pagina, dan kan de content volgen te beginnen met een Header waarin je de titel van de pagina plaatst of een logo met direct eronder het menu.

<div class="header">Logo</div>
<div class="menu">Menu</div>


De code voor in de CSS wordt dan als volgt.

/* header */
div.header {
        width:950px;
        height:100px;
        background-color:#666666;
}

/* menu */
div.menu {
        width:950px;
        height:20px;
        background-color:#CCCCCC;
}


In de bovenstaande code staat eerst de Header, hierin is aangegeven dat deze een breedte heeft van 950 pixels wat gelijk is aan de breedte van de website, dit is ook zo ingesteld voor het menu. Onder de breedte is dan de hoogte opgegeven wat in dit geval 100 pixels is, de hoogte van het menu is ingesteld op 20px. Beide hebben dan ook als laatste een achtergrondkleur. Een demo van het bovenstaande kun je hier bekijken.

Omdat de tekst in de header direct tegen de kant staat kun je hier een padding voor instellen. Trek de waardes die je hiervoor instelt dan af van de hoogte en de ingestelde breedte om de originele afmetingen te behouden. Meer over Margin en Padding lees je hier in de tutorial: CSS, Margin en padding. De volledige HTML ziet er dan als volgt uit.

<div class="container">
        <div class="header">Logo</div>
        <div class="menu">Menu</div>
</div>


Onder het menu komt dan de linkerbalk als eerste, daarna de content en rechts de rechterbalk. Hiervoor plaats je drie div's op dezelfde manier zoals hierboven is gedaan.

<div class="leftcontent">Links</div>
<div class="maincontent">Content</div>
<div class="rightcontent">Rechts</div>


De CSS code voor deze drie kolommen wordt iets anders dan de eerder geplaatste elementen. Voor alle drie wordt een float:left ingesteld in de CSS. Hiermee wordt aangegeven dat de div's naar de linkerkant zweven waardoor ze straks allen netjes naast elkaar gaan komen. Meer over het positioneren: CSS, Positioneren van een element.

Bij alle drie is er een breedte opgegeven die bij elkaar opgeteld niet over het totaal van de container mag komen. Als laatste heeft zowel de linkerkant als de rechterkant een vaste hoogte gekregen. Een demo van het onderstaande is te bekijken via de link: Demo 2.

/* leftcontent */
div.leftcontent {
        float:left;
        width:160px;
        height:350px;
        background-color:#999999;
}

/* maincontent */
div.maincontent {
        float:left;
        width:630px;
        background-color:#FFFFFF;
}

/* rightcontent */
div.rightcontent {
        float:left;
        width:160px;
        height:350px;
        background-color:#999999;
}


Dan staat in principe de eerste basis en kun je nadere opmaak gaan bepalen in de CSS zoals bepaalde Margin en Padding, Achtergrondafbeeldingen en opmaak van de tekst. Een demo met padding en margins kun je bekijken via de volgende link: Demo 3.

<!DOCTYPE HTML>
<html>
        <head>
                <title>WebSonic.nl Template</title>
                <meta name="description" content="" />
                <link href="css/styles.css" rel="stylesheet" type="text/css" />
                <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
        </head>
        <body>
                <div class="container">
                        <div class="header">Header</div>
                        <div class="menu">
                                <a href="http://www.websonic.nl">Menuitem</a> -
                                <a href="http://www.websonic.nl">Menuitem</a> -
                                <a href="http://www.websonic.nl">Menuitem</a> -
                                <a href="http://www.websonic.nl">Menuitem</a> -
                                <a href="http://www.websonic.nl">Menuitem</a>
                        </div>
                        <div class="leftcontent">Linkercontent</div>
                        <div class="maincontent">
                                <h1>Heading 1</h1>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus quis eros. Donec ac sem vitae enim aliquet aliquam. In hac habitasse platea dictumst. Nunc ullamcorper tempor ligula. Quisque convallis. Ut commodo, arcu ac dignissim hendrerit, magna eros suscipit dolor, id elementum ligula pede eu est. Aenean non nibh porttitor lorem scelerisque elementum. Aenean adipiscing sem. Nullam pretium pede quis pede. <a href="http://www.websonic.nl">www.websonic.nl</a> Fusce mollis velit sit amet mauris. Duis rutrum erat eu est. Nulla nec felis. Sed elit mi, dapibus quis, sapien.</p>
                                <h2>Heading 2</h2>
                                <p>Quisque pulvinar aliquet dolor. Integer tempus lacus at elit. Ut eget risus. Mauris hendrerit magna vitae magna. Phasellus consequat eros. Pellentesque lorem.</p>
                        </div>
                        <div class="rightcontent">
                                <strong>Rechterkant</strong>
                         </div>
                        <div class="footer"><strong>&copy; Footer</strong></div>
                </div>
        </body>
</html>