3-kolommen website in CSS

» index

» digital corner

pi_55952543
registreer om deze reclame te verbergen
Voor mijn werk moet ik onze website die nu nog met tabellen gebouwd is, omzetten naar een CSS-website. Dat kan op verschillende manieren die me allemaal wel gaan lukken, maar ik wil vantevoren even goed bedenken wat de handigste manier is, ook mbt tot andere browsers. De website bestaat uit 3 kolommen, waarvan de twee buitenste een vaste breedte moeten hebben. Kan ik dan het beste met de floating-property werken of beter met absolute positioning? Wat is gebruikelijker? En wat veroorzaakt de minste problemen met browsers als Firefox etc.?

Misschien dat deze vraag al lang een keer gesteld is (ongetwijfeld zelfs), in dat geval sorry en dan ben ik heel blij met een verwijzing naar de toenmalige discussie .
pi_55952581
floating
pi_55952613
Ik zou overigens ook de middelste een vaste breedte geven, veel mensen hebben erg brede schermen tegenwoordeig (en resizen hun window niet)
pi_55952937
registreer om deze reclame te verbergen
Hmmm das op zich wel een goeie ja. Er is wel zoiets als een max-width property maar dat werkt niet in IE geloof ik he? Vind alleen dat die variabele breedte juist hét voordeel is van CSS, dat raak je dan juist kwijt.

Maar waarom is het zo overduidelijk floating? Je klinkt wel overtuigend op zich

En is het dan het handigste om de middelste kolom als een right float in een left float element te maken waarin de linker- en middelste kolom zitten? Zoals hier: http://www.positioniseverything.net/piefecta-rigid.html
Ik zie het nut er niet echt van in namelijk.
  vrijdag 11 januari 2008 @ 15:53:09 #5
88208 SharQueDo
Kutuser en baggeraar. :7
pi_55953087
wrapper divje, vaste breedte (desnoods margin: 0 auto voor centreren (of divje daarom heen met width: 100% en text-align: center))
daarin 3 divjes, elk float left. eerste = linkerkolom, 2e = middenkolom, 3e = rechterkolom. per kolom id mee gegeven en met css breedte geven
daaronder nog een div met clear: both om het af te maken als je nog een footer daaronder wilt in de wrapper.

voorbeeld:
1
2
3
4
5
6
7
8
9
10
11
12
13
14		HTML
<div id="wrapper">
    <div id="linkerkolom">linkerkolom</div>
    <div id="middelkolom">middelkolom</div>
    <div id="rechterkolom">rechterkolom</div>
    <div class="clear">
</div>

CSS
#wrapper { width: 800px; margin: 0 auto; }
#linkerkolom { float: left; width: 100px; }
#middelkolom { float: left; width: 600px; }
#rechterkolom { float: left; width: 100px; }
.clear { clear: both; }
Op vrijdag 26 oktober 2012 11:07 schreef LompeHork het volgende:
Aardappelzakken met extra kipfilet in dozen gestouwd samen met shampoo.
  vrijdag 11 januari 2008 @ 15:54:00 #6
71513 _Liquid_
Pimp maintenance
pi_55953107
kak
:r Patty Brard :r
pi_55953724
registreer om deze reclame te verbergen
quote:
Op vrijdag 11 januari 2008 15:46 schreef Jiggle het volgende:
En is het dan het handigste om de middelste kolom als een right float in een left float element te maken waarin de linker- en middelste kolom zitten? Zoals hier: http://www.positioniseverything.net/piefecta-rigid.html
Ik zie het nut er niet echt van in namelijk.
Op deze manier zet je in de source de middelste div bovenaan. Een zoekmachine leest je source van boven naar beneden, en komt dus de middelste div met content als eerste tegen. 9 van de 10 keer staat in zown middelste div ook de belangrijste content. Hierdoor zou je een beter zoekresultaat moeten krijgen.
minimalist
pi_55954071
SharQueDo, dit zal inderdaad prima werken. Maar bij een kleinere resolutie zal de rechterkolom nu naar beneden verschieten toch? Ik wil graag dat de linker- en rechterkolom een vaste positie houden en dat de middenkolom met de werkelijke content kan inkrimpen indien nodig. Betekent ook dat de breedte variabel zal moeten zijn.

Vlek: Thanks, logische reden inderdaad.
  vrijdag 11 januari 2008 @ 17:07:41 #9
88208 SharQueDo
Kutuser en baggeraar. :7
pi_55954982
quote:
Op vrijdag 11 januari 2008 16:27 schreef Jiggle het volgende:
SharQueDo, dit zal inderdaad prima werken. Maar bij een kleinere resolutie zal de rechterkolom nu naar beneden verschieten toch? Ik wil graag dat de linker- en rechterkolom een vaste positie houden en dat de middenkolom met de werkelijke content kan inkrimpen indien nodig. Betekent ook dat de breedte variabel zal moeten zijn.

Vlek: Thanks, logische reden inderdaad.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<style>
#wrapper { width: 90%; margin: 0 auto; }
#linkerkolom { float: left; width: 100px; background-color: #f00; }
#middelkolom { margin: 0 100px; background-color: #0f0; }
#rechterkolom { float: right; width: 100px; background-color: #00f; }
.clear { clear: both; }
</style>

<div id="wrapper">
   <div id="linkerkolom">linkerkolom</div>
   <div id="rechterkolom">rechterkolom</div>
   <div id="middelkolom">middelkolom</div>
   
   <div class="clear">
</div>
Op vrijdag 26 oktober 2012 11:07 schreef LompeHork het volgende:
Aardappelzakken met extra kipfilet in dozen gestouwd samen met shampoo.
pi_55962264
quote:
Op vrijdag 11 januari 2008 16:15 schreef Vlek het volgende:

[..]

Op deze manier zet je in de source de middelste div bovenaan. Een zoekmachine leest je source van boven naar beneden, en komt dus de middelste div met content als eerste tegen. 9 van de 10 keer staat in zown middelste div ook de belangrijste content. Hierdoor zou je een beter zoekresultaat moeten krijgen.
Ik ben niet echt into search maar belangrijkste is volgens mij goede benaming in wat content is en wat navigatie. Dus nav ipv left en right, en dan zal de hoogte in het bestand weinig uitmaken.
pi_55962304
quote:
Op vrijdag 11 januari 2008 17:07 schreef SharQueDo het volgende:

[..]
[ code verwijderd ]
Dat maakt geen verschil: de wrapper heeft een breedte van 90%, als het scherm te klein is zal die 90% minder pixels groot zijn dan de kolommen breed. Breedte van de container gelijk (of iets groter) maken dan alle breedtes van de kolommen (plus marges!) samen.
  vrijdag 11 januari 2008 @ 23:27:57 #12
88208 SharQueDo
Kutuser en baggeraar. :7
pi_55963156
quote:
Op vrijdag 11 januari 2008 22:54 schreef the_disheaver het volgende:

[..]

Dat maakt geen verschil: de wrapper heeft een breedte van 90%, als het scherm te klein is zal die 90% minder pixels groot zijn dan de kolommen breed. Breedte van de container gelijk (of iets groter) maken dan alle breedtes van de kolommen (plus marges!) samen.
Code voorbeeld?
Op vrijdag 26 oktober 2012 11:07 schreef LompeHork het volgende:
Aardappelzakken met extra kipfilet in dozen gestouwd samen met shampoo.
pi_55963591
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		<style>
#wrapper { width: 600px; margin: 0 auto; }
#linkerkolom { float: left; width: 100px; margin: 0px; background-color: #f00; }
#middelkolom { margin: 0 50px; width: 400px; background-color: #0f0; }
#rechterkolom { float: right; width: 100px; margin: 0px; background-color: #00f; }
.clear { clear: both; }
</style>

<div id="wrapper">
   <div id="linkerkolom">linkerkolom</div>
   <div id="rechterkolom">rechterkolom</div>
   <div id="middelkolom">middelkolom</div>
   
   <div class="clear">
</div>

(zag dat je de middelste geen breedte hebt toegekend, dan zou het indd wel werken, maar dan is die gehele container nutteloos als het gaat om te voorkomen dat een kolom niet onder ipv naast de andere staat.

middelste is 400 px, buitenste 100. plus de 50px marge aan 2 kanten van de middelste > 600px.
  zaterdag 12 januari 2008 @ 02:54:43 #14
88208 SharQueDo
Kutuser en baggeraar. :7
pi_55966389
Maar hij wil dus dat de linker en rechter kolom statische breedte hebben en de middelste variabel in breedte is.
Op vrijdag 26 oktober 2012 11:07 schreef LompeHork het volgende:
Aardappelzakken met extra kipfilet in dozen gestouwd samen met shampoo.
pi_56002666
quote:
Op zaterdag 12 januari 2008 02:54 schreef SharQueDo het volgende:
Maar hij wil dus dat de linker en rechter kolom statische breedte hebben en de middelste variabel in breedte is.
Inderdaad

En dan is de door jou genoemde manier de meest gebruikelijke momenteel? Wat zijn de evt voor- en nadelen? Tis op zo ontzettend veel verschillende manieren in te steken maar ze hebben allemaal subtiele verschillen en consequenties.
  maandag 14 januari 2008 @ 09:00:19 #16
88208 SharQueDo
Kutuser en baggeraar. :7
pi_56016971
quote:
Op zondag 13 januari 2008 17:15 schreef Jiggle het volgende:

[..]

Inderdaad

En dan is de door jou genoemde manier de meest gebruikelijke momenteel? Wat zijn de evt voor- en nadelen? Tis op zo ontzettend veel verschillende manieren in te steken maar ze hebben allemaal subtiele verschillen en consequenties.
+ Het werkt zoals je bedoelde
+ Content in 3 verschillende <div>jes, met middelste variable breedte, linker en rechter statische breedte
-/+ Eerst wordt content container gerenderd, daarna de linker en rechter container. Maar als je goed systematisch gaat vullen met PHP (of alleen HTML gaat gebruiken) mag dat niet uitmaken
Op vrijdag 26 oktober 2012 11:07 schreef LompeHork het volgende:
Aardappelzakken met extra kipfilet in dozen gestouwd samen met shampoo.
pi_56020267
Thanks, moet inderdaad goedkomen volgens mij. Nog wel een vraagje, (waarvan ik een beetje bang ben dat hij niet al te slim is ), waarom moet de div-functie clear er eigenlijk inzitten? Wat gaat er mis als dat er niet bijstaat?

Erg bedankt voor je hulp!
pi_56020517
http://www.pmob.co.uk/temp/3colcentred_2c.htm
Hele handige site om de layout van te pakken.
  maandag 14 januari 2008 @ 12:14:19 #19
88208 SharQueDo
Kutuser en baggeraar. :7
pi_56020586
quote:
Op maandag 14 januari 2008 11:59 schreef Jiggle het volgende:
Thanks, moet inderdaad goedkomen volgens mij. Nog wel een vraagje, (waarvan ik een beetje bang ben dat hij niet al te slim is ), waarom moet de div-functie clear er eigenlijk inzitten? Wat gaat er mis als dat er niet bijstaat?

Erg bedankt voor je hulp!
Voor als je daaronder nog meer wilt floaten. Met clear gaat ie er wel onder ipv er naast. Probeer div clear maar eens tussen content en left te zetten ofzo.

Als je alleen dit hebt en verder niets (gefloat) eronder kun je div clear ook best weghalen. Als je twijfelt, gewoon laten staan.
quote:
Op maandag 14 januari 2008 12:11 schreef Darkomen het volgende:
http://www.pmob.co.uk/temp/3colcentred_2c.htm
Hele handige site om de layout van te pakken.
TS wil middelste kolom variabel hebben. Daar is 'ie statisch op.
Op vrijdag 26 oktober 2012 11:07 schreef LompeHork het volgende:
Aardappelzakken met extra kipfilet in dozen gestouwd samen met shampoo.
pi_56022103
staan er meer o[p.
pi_56023653
quote:
Op vrijdag 11 januari 2008 15:46 schreef Jiggle het volgende:
Hmmm das op zich wel een goeie ja. Er is wel zoiets als een max-width property maar dat werkt niet in IE geloof ik he? Vind alleen dat die variabele breedte juist hét voordeel is van CSS, dat raak je dan juist kwijt.
Ten eerste, explorer kent misschien dan wel geen max-width, maar wel de zeer machtige 'expression' propertie welke het mogelijk maakt scripting toe te passen binnen css-properties, en dus bv zoiets te doen als
1
2
3		DIV#blah {
   width( expression: Math.min( 600, Math.floor(document.body.offsetWidth * 0.5 )))
}


Een tweede opmerking, je uitspraak "die variabele breedte juist hét voordeel is van CSS" is nogal onzin, variabele breedte is in geen enkele wijze gekoppeld aan CSS en is er ook geen voordeel van..
ook met traditionele oude HTML zonder enige CSS is na te maken...
Dat wil je natuurlijk niet omdat het werkelijke voordeel van CSS namelijk is dat door de scheiding van content en layout je veel flexibeler bent .
Sij comen bij paren | Om te vergaren | In Den Haegh | Sij sijn ’er so graegh.
Sij drinken een glas | Sij pissen een plas | En laten de saak soo als hij was.
  maandag 14 januari 2008 @ 14:32:25 #22
53267 TC03
Catch you on the flipside
pi_56023897
Google even op dingen als '3 column layout CSS', er is vrij veel over te vinden.
Ten percent faster with a sturdier frame
pi_56077141


[ Bericht 100% gewijzigd door Jiggle op 16-01-2008 17:02:26 ]
pi_56096025
Hmm ik loop nu tegen een aantal dingen aan die hierboven min of meer al besproken zijn maar me nog niet helemaal helder zijn. Ik wil mijn site twee eigenschappen meegeven die ik allebei kan maken met behulp van bovenstaande tips, maar niet tegelijkertijd. Kan iemand me helpen?

In de middelste kolom staat de content, platte tekst dus. De bedoeling is dat deze kolom een variabele breedte is, dus dat als je de website kleiner maakt de tekst krimpt. Dat lukt op de manier die SharQueDo aangeeft.
Maar de kolommen moeten ook allemaal een gelijke hoogte hebben, afhankelijk van de hoogte van de middelste kolom. Het is een dynamische site dus de hoeveelheid tekst in de middelste kolom is elke keer anders, ik kan dus geen vaste hoogte meegeven. Dat zou lukken met die geneste float volgens mij.

Maar hoe krijg ik het allebei voor elkaar? Of is het uberhaupt ook gewoon geen goed idee?
  donderdag 17 januari 2008 @ 10:30:04 #25
88208 SharQueDo
Kutuser en baggeraar. :7
pi_56096252
quote:
Op donderdag 17 januari 2008 10:19 schreef Jiggle het volgende:
Hmm ik loop nu tegen een aantal dingen aan die hierboven min of meer al besproken zijn maar me nog niet helemaal helder zijn. Ik wil mijn site twee eigenschappen meegeven die ik allebei kan maken met behulp van bovenstaande tips, maar niet tegelijkertijd. Kan iemand me helpen?
Ik probeer het.
quote:
In de middelste kolom staat de content, platte tekst dus. De bedoeling is dat deze kolom een variabele breedte is, dus dat als je de website kleiner maakt de tekst krimpt. Dat lukt op de manier die SharQueDo aangeeft.
Maar de kolommen moeten ook allemaal een gelijke hoogte hebben, afhankelijk van de hoogte van de middelste kolom. Het is een dynamische site dus de hoeveelheid tekst in de middelste kolom is elke keer anders, ik kan dus geen vaste hoogte meegeven. Dat zou lukken met die geneste float volgens mij.
Probeer eens die 3 kolommen een height: 100% in de CSS mee te geven. Volgens mij pakken ze dan de hoogte van de parent object (de wrapper), die weer uitgerekt wordt door de hoogste kolom (in dit geval de middelste). Ik weet niet 100% zeker of het werkt (omdat de parent geen fixed height heeft), cba om het nu te testen. Maar volgens mij moet dit iig in 1 van 'de browsers' (IE of FF) werken.
quote:
Maar hoe krijg ik het allebei voor elkaar? Of is het uberhaupt ook gewoon geen goed idee?
Het is jouw website, jij wil het zo hebben.
Op vrijdag 26 oktober 2012 11:07 schreef LompeHork het volgende:
Aardappelzakken met extra kipfilet in dozen gestouwd samen met shampoo.
3-kolommen website in CSS
» index

» digital corner

nieuwe topics registreren inloggen menudown custom menu actieve topics ibood.comProefabo? SMS!
Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')