Layout: 2 kolommen (volgens Blizt)

Info 
Door: Blizt Moeilijkheidsgraad: 2/3
Views:30.703Reacties: 12(Bekijken)
  Log in om zelf te reageren
 Waardering:6.3/10 (3 stemmen)



Wat is een 2 kolomslayout?


Dit is misschien wel één van de meest tradiotionele layouts die er is: header, 2 kolommenen een footer. Nu kunnen we dit allemaal maken met behulp van wat tabelletje, maar het wordt voor velen al lastiger als ze het met CSS moeten doen. Daarom ga ik in deze tutorial uitleggen hoe je dat doet.

Het begin


Laten we beginnen een HTML-document op te stellen, zoals we dat geleerd hebben in het semantiek-artikel. :) Ik heb het volgende document opgesteld:
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>2 column layout testcase</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen">
<h1>2 kolommen met CSS</h1>
<ul id="nav">
<li><a href="#">Home</a>
<li><a href="#">About</a>
<li><a href="#">Links</a>
<li><a href="#">Contact</a>
</ul>

<div id="maincontent">
<p>Zie <a href="">2 kolommen layout in CSS</a> voor het artikel waar dit voorbeeld bij hoort.
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sit amet ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed tellus lectus, rutrum sit amet, malesuada suscipit, ultrices vel, ante. Praesent fermentum. Suspendisse non urna. Nulla leo. Mauris blandit quam. Maecenas varius odio egestas wisi. Morbi ultrices euismod pede. Maecenas in ligula. In eu tellus malesuada sapien scelerisque tempus. Praesent odio pede, pulvinar eget, mattis mollis, varius sed, ligula.
<p>Pellentesque quis quam. Proin eu dolor. Curabitur pretium lacinia lacus. Nunc fringilla condimentum risus. Pellentesque pellentesque pellentesque ligula. Praesent lobortis varius nunc. Donec orci. Integer a wisi. Nulla facilisi. Sed a diam at ante aliquam auctor. Duis dictum venenatis diam. Nullam vel urna. Nam in dolor ac dolor gravida varius. Mauris hendrerit egestas elit. Duis euismod, nisl ac porta imperdiet, nibh massa viverra metus, sed consequat nulla tortor vitae arcu. Pellentesque tempor lacus in elit. Aliquam erat volutpat. In et lorem. Cras non wisi. Duis vitae nibh eu tortor fringilla lobortis.

<h2>Nulla quis mauris</h2>
<p>Nulla quis mauris. Suspendisse non ligula sed erat interdum tincidunt. Donec sed odio sit amet justo pretium dignissim. Vestibulum vitae diam. Morbi rhoncus lorem. Nullam mi diam, gravida a, eleifend eget, venenatis ut, ligula. Suspendisse in ipsum. Aliquam erat volutpat. Donec rutrum vehicula nunc. Proin a ante eu eros commodo semper. Pellentesque consectetuer libero tristique lacus ullamcorper dapibus. Sed vel nibh. Pellentesque id sem. Cras aliquet tempus est.

<h2>Quisque pretium nibh eget orci</h2>
<p>Quisque pretium nibh eget orci. Vivamus varius. Aliquam eu lectus. Curabitur justo enim, bibendum suscipit, suscipit vel, vehicula vel, urna. Proin eu nunc vel lacus vestibulum facilisis. Suspendisse velit magna, imperdiet ullamcorper, fringilla eu, tincidunt eget, lectus. Vivamus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec posuere vulputate lectus. Sed non ipsum. Donec mollis, justo nec laoreet aliquam, quam tellus auctor lorem, in ullamcorper dui mi eget nibh. Nam nec massa. Donec hendrerit placerat justo. Praesent velit. Proin pellentesque quam eget felis. Morbi eu dolor at erat sollicitudin viverra. Nullam quis risus.
<h2>Cum sociis natoque penatibus</h2>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras convallis dolor quis nibh. Maecenas dui quam, molestie sit amet, fringilla sit amet, nonummy non, mauris. Cras at nisl quis magna luctus viverra. In suscipit sagittis neque. Curabitur lacinia adipiscing mi. Maecenas sit amet nisl. Nullam feugiat orci a elit. Donec ante. Aliquam erat volutpat. Aenean nunc odio, condimentum a, consectetuer in, auctor sit amet, magna. Curabitur turpis diam, gravida non, vehicula non, nonummy hendrerit, wisi. Curabitur lacus. Donec pretium gravida ante. Nam purus.

<h2>Vivamus sed mauris</h2>
<p>Vivamus sed mauris. Phasellus enim. Mauris mattis ornare ante. Aliquam erat volutpat. Phasellus semper mi nec dolor. Morbi et lectus ac dolor ornare bibendum. Fusce ullamcorper orci vel metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lorem erat, malesuada eu, cursus sit amet, facilisis sit amet, felis. Vivamus volutpat, metus non malesuada dignissim, neque tellus pharetra wisi, vel pretium nibh ipsum ac magna. Pellentesque mattis. Ut est metus, viverra rhoncus, suscipit a, imperdiet a.
</div>
<p id="copyright">©2005 <a href="http://crystal-labs.nl">Crystal Labs</a>

Dit is op zich niets bijzonders, dus ik denk dat iedereen er wel mee weg kan. Wat we straks willen is bovenaan onze header, links de navigatie, rechts de inhoud en onder de footer. We beginnen met alles kleuren te geven:
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
html,body
{
background-color:#F0F;
}

p#copyright,h1
{
background-color:#000FFF;
}

ul#nav
{
border:5px dashed #F00;
background-color:#0F0;
}

div#maincontent
{
border:1px solid #00F;
background-color:#FF0;
}

Nu kun je duidelijk de verschillende vakken onderscheiden. Vervolgens gaan we zorgen dat de inhoud naast het menu komt te staan:
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul#nav
{
float:left;
border:5px dashed #F00;
background-color:#0F0;
width:10%;
}

div#maincontent
{
float:right;
width:80%;
border:1px solid #00F;
background-color:#FF0;
}

Als het goed is staat de navigatie nu naast de inhoud en onder de header. De footer staat echter nog wat raar geplaatst, hier komen we zo bij. Ik ga eerst uitleggen wat we nu echt gedaan hebben, behalve beide elementen een breedte meegeven.
We gebruiken float om de navigatie links te zetten en de content rechts. Dit doen we door de boxen te laten "zweven" in het venster.

De footer goedzetten


Ten slotte gaan we ons copyright goed zetten. Dit doen we met de volgende CSS:
#Code
1
2
3
4
p#copyright
{
clear:both;
}

Met clear kun je aangeven, hoe het element zich moet gedragen t.o.v. 'zwevende' elementen. Met "both" geven we aan dat we hier onder alle floatende elementen willen, waardoor het copyright op z'n plek komt.
In principe ben je nu klaar, hoewel het een ieder uiteraard vrijstaat om de pagina verder op te maken. Veel plezier er mee, en stel gerust verdere vragen!

12 reacties
ji0nathan Geplaatst op 26-04-2009 om 01:02
 

Regular
Ik heb nu een site gemaakt met behulp van deze tutorial. Als ik een link toevoeg verschijnt hij niet in het menu.
De site: http://j0nathan.1sthost.org/
En de pagina die ik had toegevoegd: http://j0nathan.1sthost.org/test.php


EDIT:is al opgelost
De menu code op iedere pagina:
<ul id="nav">
<li><a href="index.htm">Home</a>
<li><a href="about.htm">About</a>
<li><a href="links.htm">Links</a>
<li><a href="contact.htm">Contact</a>
<li><a href="test.php">Test page</a>
</ul>
nepe Geplaatst op 12-02-2008 om 20:10
 

Regular
Je voegt best nog iets toe hieraan zodat als je de pagina zelf laad (hier test.php) home.php ook wordt getoond.

Het wordt dus als volgt:

if ($pagina=="index" || $pagina==""){

include('home.php');


}

home.php wordt dus getoond wanneer variabele pagina leeg is (dus als test.php wordt geladen) en wanneer de variabele pagina gelijk is aan home.
nanobot Geplaatst op 21-08-2007 om 12:28
 

Regular
links in body kan zo:
<html>

<head>
<title>voorbeeld php met divs</title>
</head>
<body>
<ul id="nav">


<a href="test.php?pag=index">index</a><br>
<a href="test.php?pag=links">links</a><br>
<a href="test.php?pag=projecten">Projecten</a>
</ul>

<div id="maincontent">

<?php
$ip = $_SERVER['REMOTE_ADDR'];
$bestand = fopen("log.txt", "a");


$pagina = $_GET['pag'];

if ($pagina=="index"){

include('home.php');


}
if ($pagina=="links"){
include('links.php');

}
if ($pagina=="projecten"){
include('projecten.php');

}

?>
</div>
</body>

</html>

en dan in home.php, links.php en projecten.php gewoon html zetten, met de css van het tweede voorbeeld, en hij doet het!!


als je in de body een link wilt zetten, met dit voorbeeld, doe je dat met:

<a href="?pag=links>linkspagina</a>
Mc B Geplaatst op 03-08-2007 om 12:49
 

Regular
Leuke uitleg ! Hij springt wel met tamelijk grote sprongen maar 't is te doen.
Toch een vraagje : ik heb juist een trialversie van Dreamweaver CS3 gedownload. Ik heb nu de indruk dat dingen als ul#nav en p#copyright,h1 niet werken. De rest van je oefening werkt dus wel. Kan je me even uitleggen hoe ik iets dergelijks in DM CS3 kan doen? Of in MX2004, daar heb ik een versie-met-licentie van.

greetz
Chapie Geplaatst op 26-03-2007 om 09:18
 

Regular
Maar hoe kun je dan die links in de body laten openen? of is dit niet mogelijk? Ze worden nu in een nieuwe pagina geopend.

Pagina 1 2 3 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder