Site index
Portals
Artikelen
Software
Links
Contact3 Column Layout
7 berichten
• Pagina 1 van 1
3 Column Layout
door Baby Ghost » 20 Sep 2008 19:26
Inleiding
Ik moest voor een project van me een 3-column website maken. Het probleem was echter dat ik dit niet eerder had gedaan, omdat ik altijd een 2-column of een 1-column layout gebruikte. In het begin maakte ik me geen zorgen over en zette ik er gewoon een scrollbar neer, maar tot een gegeven punt moest ik daar toch me handen aan vies maken.
Allereerst gebruikte ik natuurlijk eerst onze grote vriend google en zocht wat voorbeelden op. Er waren layouts bij die goed uitzagen maar toen ik de code eenmaal zag met alle hacks voor Internet Explorer en Firefox, Opera en voor op een mac-pc werd ik duizelig.
En toen besloot ik zelf de layout maar te maken, zo simpel mogelijk en geen hacks, zonder fratsen dus.
In dit artikel neem ik aan dat je redelijk tot goed kennis hebt van HTML en CSS.
De HTML
Een goede HTML-pagina begint met de juiste header en de doctype is een belangrijk onderdeel (dit wordt weleens onderschat). Hierdoor weet de browser hoe hij het website moet opbouwen. De titel en de meta-tags kan je ook niet missen voor goede page-ranking en het helpt ook voor de vertaling van je website
Wat ook niet onbelangrijk is, is de link naar je CSS-bestand. Ik gebruik het liefst externe bestanden voor me CSS, maar in artikelen wordt dit vaak intern gedaan voor het gemak. Echter onze CSS-code wordt niet een klein lapje dus zal ik een extern bestand gebruiken.
HTML
De CSS
En dan komt nu het echte werk, waar we de jongens van de mannen scheiden. We gaan alle stukjes rustig doorlopen en ik zal zo veel mogelijk uitleg geven zodat je niet verdwaald.
De html en body tags
CSS
Omdat we de gehele hoogte willen gebruiken zeggen we dat het html en body 100% hoog moet zijn en er moet geenmargin noch padding zijn.
De container
Om alle div's heen komt een container-div, ook wel bekend als wrap. Het gaat erom dat deze aanwezig is en alle anders div's opvangt.
CSS
De kop
En dan nu de header van je website, hierin kan je een banner zetten, of wat anders naar jou wensen.
CSS
Dit stukje code is redelijk simpel, het moet 100% breedte aannemen. In dit geval zal het 900px zijn omdat deze div in de container div zit, dus 100% staat gelijk aan 900px.
De linker kolom
Nu komt de linker kolom, meestal wordt deze als menu gebruikt.
CSS
De sleutelwoorden hier zijn position, top, bottom en left.
Let op dat de absolute positie hier: absolute staat aan de relative container div, dus het left:0 is helemaal links van de container div. Wat ook belangrijk is top en bottom. Meestal wordt hiervan maar 1 gebruikt en de ander wordt dan weggelaten, maar als we beide gebruiken en op 0 zetten dan wordt de div helemaal gerekt van top tot teen. Left staat er slechts voor Internet Explorer, anders gaat het een beetje raar doen. De top staat gelijk aan de hoogte van je header div.
De inhoud kolom
Het inhoud kolom, is ook heel simpel.
CSS
De padding is om de footer goed onder het inhoud-div te houden, dit staat dus ook gelijk aan de hoogte van de "footer". De margin staat gelijk aan de breedte van je linkerkolom anders komt je inhoud kolom onder je linker kolom.
De rechter kolom
Nu komt de rechter kolom waarvan de code nu wel redelijk voor zich zelf spreekt.
CSS
De positie moet absolute zijn, van top tot teen worden gerekt en helemaal rechts staan. De top staat gelijk aan de hoogte van je header div.
De voet van je website
De eisen voor de voet is dat hij altijd onderin staat en wanneer je hoogte van je site groter wordt de voet dan mee naar beneden gaat. Oftewel hij moet altijd onderaan blijven.
CSS
De positie moet absolute zijn en dankzij bottom:0 staat hij altijd onderaan.
Ik moest voor een project van me een 3-column website maken. Het probleem was echter dat ik dit niet eerder had gedaan, omdat ik altijd een 2-column of een 1-column layout gebruikte. In het begin maakte ik me geen zorgen over en zette ik er gewoon een scrollbar neer, maar tot een gegeven punt moest ik daar toch me handen aan vies maken.
Allereerst gebruikte ik natuurlijk eerst onze grote vriend google en zocht wat voorbeelden op. Er waren layouts bij die goed uitzagen maar toen ik de code eenmaal zag met alle hacks voor Internet Explorer en Firefox, Opera en voor op een mac-pc werd ik duizelig.
En toen besloot ik zelf de layout maar te maken, zo simpel mogelijk en geen hacks, zonder fratsen dus.
In dit artikel neem ik aan dat je redelijk tot goed kennis hebt van HTML en CSS.
De HTML
Een goede HTML-pagina begint met de juiste header en de doctype is een belangrijk onderdeel (dit wordt weleens onderschat). Hierdoor weet de browser hoe hij het website moet opbouwen. De titel en de meta-tags kan je ook niet missen voor goede page-ranking en het helpt ook voor de vertaling van je website
Wat ook niet onbelangrijk is, is de link naar je CSS-bestand. Ik gebruik het liefst externe bestanden voor me CSS, maar in artikelen wordt dit vaak intern gedaan voor het gemak. Echter onze CSS-code wordt niet een klein lapje dus zal ik een extern bestand gebruiken.
HTML
- Code: Alles selecteren
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="default.css" rel="stylesheet" type="text/css" />
<title>3-Column Layout</title>
</head>
<body>
<div id="container">
<div id="header">
Kop
</div>
<div id="links">
Linker kolom
</div>
<div id="inhoud">
Hoofd kolom
</div>
<div id="rechts">
Rechter kolom
</div>
<div id="footer">
Voet
</div>
</div>
</body>
</html>
De CSS
En dan komt nu het echte werk, waar we de jongens van de mannen scheiden. We gaan alle stukjes rustig doorlopen en ik zal zo veel mogelijk uitleg geven zodat je niet verdwaald.
De html en body tags
CSS
- Code: Alles selecteren
html, body {
height:100%;
margin:0;
padding:0;
}
Omdat we de gehele hoogte willen gebruiken zeggen we dat het html en body 100% hoog moet zijn en er moet geen
De container
Om alle div's heen komt een container-div, ook wel bekend als wrap. Het gaat erom dat deze aanwezig is en alle anders div's opvangt.
CSS
- Code: Alles selecteren
#container {
background:#eee; /* dit is tevens het achtergrondkleur voor de inhoud */
border-width:0 1px;
border-style:solid;
border-color:#000;
position:relative;
height:auto !important;
height:100%;
min-height:100%;
width:900px;
margin:0 auto;
}
- De background en border spreken voor zich.
- De relatieve positionering houdt de div's op zijn plaats binnen de container.
- De heights vertellen dat de container de gehele hoogte in beslag moet nemen, de min-height zorgt ervoor dat als er meer inhoud komt dan de gehele hoogte, dat het layout dan gaat rekken. Let op: min-height en "!important" wordt niet door Internet Explorer herkent; voor Internet Explorer is de normale height genoeg.
- En de margin natuurlijk zodat de website mooi in het midden staat.
De kop
En dan nu de header van je website, hierin kan je een banner zetten, of wat anders naar jou wensen.
CSS
- Code: Alles selecteren
#header {
background:#ccc;
width:100%;
height:100px;
}
Dit stukje code is redelijk simpel, het moet 100% breedte aannemen. In dit geval zal het 900px zijn omdat deze div in de container div zit, dus 100% staat gelijk aan 900px.
De linker kolom
Nu komt de linker kolom, meestal wordt deze als menu gebruikt.
CSS
- Code: Alles selecteren
#links {
background:#fff;
width:20%;
position:absolute;
top:100px;
left:0; /* deze is voor IE, FF kan er zonder, maar IE natuurlijk weer niet */
bottom:0;
}
De sleutelwoorden hier zijn position, top, bottom en left.
Let op dat de absolute positie hier: absolute staat aan de relative container div, dus het left:0 is helemaal links van de container div. Wat ook belangrijk is top en bottom. Meestal wordt hiervan maar 1 gebruikt en de ander wordt dan weggelaten, maar als we beide gebruiken en op 0 zetten dan wordt de div helemaal gerekt van top tot teen. Left staat er slechts voor Internet Explorer, anders gaat het een beetje raar doen. De top staat gelijk aan de hoogte van je header div.
De inhoud kolom
Het inhoud kolom, is ook heel simpel.
CSS
- Code: Alles selecteren
#inhoud {
width:60%;
padding:0 0 50px; /* bottom padding voor de footer */
margin:0 0 0 20%;
color:#000;
}
De padding is om de footer goed onder het inhoud-div te houden, dit staat dus ook gelijk aan de hoogte van de "footer". De margin staat gelijk aan de breedte van je linkerkolom anders komt je inhoud kolom onder je linker kolom.
De rechter kolom
Nu komt de rechter kolom waarvan de code nu wel redelijk voor zich zelf spreekt.
CSS
- Code: Alles selecteren
#rechts {
background:#bbb;
width:20%;
position:absolute;
top:100px;
bottom:0;
right:0;
}
De positie moet absolute zijn, van top tot teen worden gerekt en helemaal rechts staan. De top staat gelijk aan de hoogte van je header div.
De voet van je website
De eisen voor de voet is dat hij altijd onderin staat en wanneer je hoogte van je site groter wordt de voet dan mee naar beneden gaat. Oftewel hij moet altijd onderaan blijven.
CSS
- Code: Alles selecteren
#footer {
background:#ccc;
height:50px;
width:100%;
position:absolute;
bottom:0;
}
De positie moet absolute zijn en dankzij bottom:0 staat hij altijd onderaan.
- Baby Ghost
- Teamlid
- Berichten: 509
- Geregistreerd: 28 Mei 2006 02:09
- Woonplaats: den haag
Re: 3 Column Layout
door Topdancer » 27 Feb 2009 20:37
Ik zie dat jij in je html bij de divs het volgende doet:
Je gebruikt de \
Mijn code zal er zo uit zien:
Waarom gebruik jij de \ er tussen ?????
als ik dat ga gebruiken zo op die manier dan komt me site er niet uit te zien namelijk!
- Code: Alles selecteren
<div id=\"container\"></div>
Je gebruikt de \
Mijn code zal er zo uit zien:
- Code: Alles selecteren
<div id="container"></div>
Waarom gebruik jij de \ er tussen ?????
als ik dat ga gebruiken zo op die manier dan komt me site er niet uit te zien namelijk!
Opzoek naar een programmeur die mij qua sponsoring wilt helpen 
Ik heb een cms systeem hier maar er moeten modules voor komen, ieder die zin heeft ga je gang en spreek me aan!!!!!!!!!!
Ik heb een cms systeem hier maar er moeten modules voor komen, ieder die zin heeft ga je gang en spreek me aan!!!!!!!!!!- Topdancer
- Teamlid
- Berichten: 333
- Geregistreerd: 26 Aug 2008 01:11
- Woonplaats: Arnhem
Re: 3 Column Layout
door Theo » 28 Feb 2009 10:52
Ik denk dat er iets mis was in de database / phpbb3, hoe dan ook horen die slashes daar niet en heb ik ze weggehaald. 
I rather feel pain than nothing at all
- Theo
- Oprichter
- Berichten: 1795
- Geregistreerd: 11 Jun 2005 17:43
- Woonplaats: in_array()
Re: 3 Column Layout
door Topdancer » 14 Jul 2009 16:18
Ok ik ben hier mee aan de slag gegaan en tot alles zo ver goed behalve me content dus de inhoud
Ik heb dat content genoemd in me html en in me css.
Echter zet hij het niet netjes tussen me right en left menu in maar het lijkt wel dat hij het iets achter me left menu zet hoe kan ik dit fixen?
Ik heb dat content genoemd in me html en in me css.
Echter zet hij het niet netjes tussen me right en left menu in maar het lijkt wel dat hij het iets achter me left menu zet hoe kan ik dit fixen?
Opzoek naar een programmeur die mij qua sponsoring wilt helpen Ik heb een cms systeem hier maar er moeten modules voor komen, ieder die zin heeft ga je gang en spreek me aan!!!!!!!!!!
Ik heb een cms systeem hier maar er moeten modules voor komen, ieder die zin heeft ga je gang en spreek me aan!!!!!!!!!!- Topdancer
- Teamlid
- Berichten: 333
- Geregistreerd: 26 Aug 2008 01:11
- Woonplaats: Arnhem
Re: 3 Column Layout
door Fluring Lifes » 14 Jul 2009 16:49
Heb je een online voorbeeld? Ik kan je namelijk niet verder helpenz onder te zien wat je gedaan hebt.
-
Fluring Lifes - Beheerder
- Berichten: 1155
- Geregistreerd: 28 Sep 2005 19:54
- Woonplaats: Alkmaar - Nederland
Re: 3 Column Layout
door Topdancer » 14 Jul 2009 16:58
Ik heb alles letterlijk zo over genomen.
Echter is het me nu gelukt door met margins te gaan werken, dus margin-left en margin-top maar dat staat niet in de uitleg van baby dus wel vreemd
Echter is het me nu gelukt door met margins te gaan werken, dus margin-left en margin-top maar dat staat niet in de uitleg van baby dus wel vreemd
Opzoek naar een programmeur die mij qua sponsoring wilt helpen Ik heb een cms systeem hier maar er moeten modules voor komen, ieder die zin heeft ga je gang en spreek me aan!!!!!!!!!!
Ik heb een cms systeem hier maar er moeten modules voor komen, ieder die zin heeft ga je gang en spreek me aan!!!!!!!!!!- Topdancer
- Teamlid
- Berichten: 333
- Geregistreerd: 26 Aug 2008 01:11
- Woonplaats: Arnhem
Re: 3 Column Layout
door eXo » 15 Jul 2009 09:33
heb alles gekopieerd en werkt prima hier is de code
- Code: Alles selecteren
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Mastercode</title>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
}
#container {
background:#eee; /* dit is tevens het achtergrondkleur voor de inhoud */
border-width:0 1px;
border-style:solid;
border-color:#000;
position:relative;
height:auto !important;
height:100%;
min-height:100%;
width:900px;
margin:0 auto;
}
#header {
background:#ccc;
width:100%;
height:100px;
}
#links {
background:#fff;
width:20%;
position:absolute;
top:100px;
left:0; /* deze is voor IE, FF kan er zonder, maar IE natuurlijk weer niet */
bottom:0;
}
#inhoud {
width:60%;
padding:0 0 50px; /* bottom padding voor de footer */
margin:0 0 0 180px;
color:#000;
}
#rechts {
background:#bbb;
width:20%;
position:absolute;
top:100px;
bottom:0;
right:0;
}
#footer {
background:#ccc;
height:50px;
width:100%;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><h1>header</h1></div>
<div id="links"><h1>links</h1></div>
<div id="inhoud"><h1>inhoud</h1></div>
<div id="rechts"><h1>rechts</h1></div>
<div id="footer"><h1>footer</h1></div>
</div>
</body>
</html>
- eXo
- Berichten: 75
- Geregistreerd: 23 Dec 2008 13:53
7 berichten
• Pagina 1 van 1
Wie is er online?
Gebruikers in dit forum: Geen geregistreerde gebruikers en 1 gast