Layout: 2 kolommen (volgens thekoekoek)

Info 
Door: thekoekkoek Moeilijkheidsgraad: 2/3
Views:32.349Reacties: 20(Bekijken)
  Log in om zelf te reageren
 Waardering:8.5/10 (4 stemmen)



Met css en html positioneren
Uit mijn eigen ervaring is het als beginner lastig om met css te positioneren. Daarom deze tutorial. Ik zal hierin een aantal veel voorkomende fouten bespreken.
Veel mensen gebruiken tabellen om hun site mee te positioneren. Dit kan, maar daar is het niet voor bedoeld. Hier kan ik een heel verhaal over schrijven, maar ik geef je de voordelen van css tegenover tabellen:
- Google vind je sneller
- De laadtijd is sneller
- Veranderingen zijn makkelijker door te voeren.
- etc.

Voordat je deze tutorial leest is het handig (maar niet noodzakelijk) dat je de basis van css begrijpt.

We gaan uit van het volgende structuur:
http://www.tweakzone.nl/f/g/327098e9rA9hq.jpg

Zoals je in het voorbeeld ziet hebben we een header, een menu, een content, een bottom en de body nodig. Ook hebben we een container nodig die om de header, menu, content en bottom komt. Deze zorgt ervoor dat alles gecentreerd staat, en voor de achtergrond van het menu en content, hierover later meer. Wat we dus nodig hebben gaan we alvast in de css file zetten:

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
}

.container {
}

.header {
}

.menu {
}

.content {
}

.bottom {
}

Ik denk dat iedereen dit nog begrijpt. We gaan beginnen alles in de body te zetten. Voor de duidelijkheid gaan we de body een kleur geven. Ook gaan we de body een margin, padding, width en height geven. We krijgen in onze body het volgende:
#Code
1
2
3
4
5
6
7
8
body {
background-color: #00ff00;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}


De body is klaar, we gaa nu de container maken. Dit is misschien wel het lastigste van alles. We willen een menu en content met een andere kleur. We willen dat er een border omheen komt en we willen dat als de content langer wordt dan het menu, dat de achtergrond zich gewoon aanpast. We gaan voor de achtergrond een image maken. We willen het menu bruin en de content lichtblauw. We gaan deze maken in een programma als psp en het ziet er dan als volgt uit.

http://www.tweakzone.nl/f/g/32709nz2ufrER.jpg

Waar moet je op letten? We gaan als width van de container 760 gebruiken. Dit omdat deze in alle beeldschermen goed te zien is. Dus de image moet 760 pixels breed zijn. Hij hoeft maar 1 pixel groot, voor het gemak voor het plaatje heb ik even 5 pixels gebruikt. Omdat we een border om het menu willen en willen dat de achtergrond goed blijft maken we in het plaatje een lijn van 1 px (Pixel) tussen de menu en content. Als je dit niet doet en je voegt in je menu een border krijg je dit:

http://www.tweakzone.nl/f/g/32709MV8ZP0Bg.jpg

Je ziet, dat is niet mooi en dat willen we niet. Vandaar dat we een border in het menu maken in het plaatje.
Kortom: In de container zetten we dit:
#Code
1
2
3
4
5
6
7
8
.container {
text-align: left; 
margin: 0 auto; 
width: 760px;
background-image: url(�plaatje.jpg�);
background-repeat: repeat-x
border: solid 1px black;
}

Uitleg:
We willen dat de tekst in de container links wordt uitgelijnd, vandaar text-align: left.
Om de container willen we een border, vandaar solid 1px black.
De background-image is het plaatje wat wij net gemaakt hebben, plaatje.jpg moet je veranderen naar jou gemaakte achtergrond.
Ook zien we een background repeat. Dit zorgt ervoor dat de achtergrond herhaald blijft worden. Repeat-x is voor een horizontale herhaling, repeat voor een horizontale en verticale en repeat-y voor een verticale herhaling.


Header
Nu gaan we de header maken. We maken een logo. Deze heeft een breedte van 760px en een we doen als hoogte 150px. Deze hoogte is van belang, omdat we deze moeten aangeven in de css file. We willen ook een bottom border bij de header, omdat daar nog geen border stond. Deze hadden we namelijk niet gemaakt in het plaatje. De code voor de header wordt dan als volgt:
#Code
1
2
3
4
5
.header {
background-image:url("logo.jpg");
height:150px;
border-bottom: solid 1px black;
}

Uitleg:
Het plaatje logo.jpg is dus jou plaatje die jij gemaakt hebt. Verder hebben we de hoogte ingevoerd en een bottom border. Ik denk dat verdere uitleg niet nodig is.


Menu
We gaan het menu maken. We hoeven geen achtergrond in te voeren aangezien deze al in de container zit. Wel willen we dat het menu naast de content komt, hiervoor gebruiken we: float: left; Verder vind ik het wel mooi, als de breedte in totaal 760px is, dat het menu 120px is. De code wordt:
#Code
1
2
3
4
.menu {
float: left; 
width: 120px;
}

Ik denk dat er verder geen uitleg nodig is.

Content
De content is het makkelijkst. Hier hoeven we de minste dingen in te zetten. Het enige wat hier echt van belang is, is dat de tekst, als het ook onder het menu komt, �naast� het menu blijft, en dus niet onder het menu doorgaat. Omdat de breedte van het menu 120 px is, en we niet willen dat de tekst gelijk op de lijn terecht komt, willen we dat de tekst pas bij 121px begint. Voor de content hebben we dus de volgende code nodig:
#Code
1
2
3
.content {
padding: 0 0 0 120px; 
}

Simpel hè? Het wijst allemaal voor zich.

Footer (bottom)
We zijn alweer bij het laatste van de css file gekomen. We willen alleen nog een footer hebben. We hebben een achtergrond kleur nodig, die we blauw maken. We willen boven de footer een border hebben, omdat de rest al een border heeft. En we willen dat de float code wordt afgebroken. Omdat we geen float: right; hebben gebruikt hoeven we dus alleen de left af te breken. Dit doen we door de code clear: left; te gebruiken. Als je float: right hebt gebruikt moet je clear: right; gebruiken. Als je float: left; en float: right hebt gebruikt moet je clear: both; gebruiken. De code die we dus gaan gebruiken is:
#Code
1
2
3
4
5
.footer {
background-color: #0000ff;
clear: left; 
border-top: solid 1px black;
}


Kortom:
De code voor de css file is dus geworden:

#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
30
31
32
33
34
35
36
37
38
body {
background-color: #00ff00;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

.container {
text-align: left; 
margin: 0 auto; 
width: 760px;
background-image: url(�plaatje.jpg�);
background-repeat: repeat-x;
border: solid 1px black;
}

.header {
background-image:url("logo.jpg");
height:150px;
border-bottom: solid 1px black;
}

.menu {
float: left; 
width: 120px;
}

.content {
padding: 0 0 0 120px; 
}

.footer {
background-color: #0000ff;
clear: left; 
border-top: solid 1px black;
}


#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
30
31
32
33
34
35
36
37
38
body {
background-color: #00ff00;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

.container {
text-align: left; 
margin: 0 auto; 
width: 760px;
background-image: url(�plaatje.jpg�);
background-repeat: repeat-x;
border: solid 1px black;
}

.header {
background-image:url("logo.jpg");
height:150px;
border-bottom: solid 1px black;
}

.menu {
float: left; 
width: 120px;
}

.content {
padding: 0 0 0 120px; 
}

.footer {
background-color: #0000ff;
clear: left; 
border-top: solid 1px black;
}


Nu we dit gebruikt hebben willen we ons werk nog in html zetten. Dit kan gemakkelijk door de �div� tag. Ik denk dat iedereen html wel kent en zal dus verder niet ingaan op de html code. Misschien zal ik dit later nog veranderen. De html code wordt:
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Positioneren met css en html</title>
<link rel="stylesheet" type="text/css" href="opmaak.css">
</head>

<body>
    <div class="container">
        <div class="header">Hier komt je logo, zie je dat de hoogte 150px is?
        </div>
            <div class="menu">Hier komt je menu.
            </div>
                <div class="content">Dit is je content.
                </div>
            <div class="footer">hier kan je nog iets kwijt in de footer.
            </div>
    </div>

</body>
</html>


Ik hoop dat jullie er wat aan hebben! Als er iets inzit wat niet goed is hoor ik het graag, opmerkingen zijn ook altijd welkom. Let ook niet op de spellingsfouten:P


Groet,
Michel Koekkoek

20 reacties
drdre007 Geplaatst op 11-11-2008 om 20:12
 

Regular
Voor de content div gebruik je een padding van 120px.
Dat is ook de breedte van de menu div
Kan de style voor de content menu ook aangegeven worden zoals hieronder?
.content {
float :left;
}
Glenn Potter Geplaatst op 03-05-2008 om 12:06
 

Regular
Dit is zo'n goede cursus ik kende in een no-time CSS
timmm Geplaatst op 30-05-2007 om 14:41
 

Regular
heey, als ik er een menu'tje inzet, hoe krijg ik dan als 1 van die links in het menu een webpagina is die webpagina in de content?
Niels1994 Geplaatst op 03-02-2007 om 15:18
 

Regular
repeat-y is verticaal herhalen en reapeat-x horizontaal


trouwens mooie tut
Loesjee Geplaatst op 21-10-2005 om 21:48
 

Regular
Dit heb ik allemaal. Maar hoe kun je het menu enzo er dan in zetten en dat met interne links doen?

Pagina 1 2 3 4 

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