DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
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
.
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
.
Ik zou overigens ook de middelste een vaste breedte geven, veel mensen hebben erg brede schermen tegenwoordeig (en resizen hun window niet)
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.
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.
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:
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 | <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 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.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.
minimalist
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.
Vlek: Thanks, logische reden inderdaad.
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 | #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> |
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.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.
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.quote:
Code voorbeeld?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.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #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.
Maar hij wil dus dat de linker en rechter kolom statische breedte hebben en de middelste variabel in breedte is. 
Inderdaadquote: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.
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 bedoeldequote: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.
+ 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
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!
), 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.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
Erg bedankt voor je hulp!
Als je alleen dit hebt en verder niets (gefloat) eronder kun je div clear ook best weghalen. Als je twijfelt, gewoon laten staan.
TS wil middelste kolom variabel hebben. Daar is 'ie statisch op.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.
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 alsquote: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.
| 1 2 3 | 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 .
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
Google even op dingen als '3 column layout CSS', er is vrij veel over te vinden.
Ten percent faster with a sturdier frame
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?
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?
Ik probeer het.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?
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: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.
Het is jouw website, jij wil het zo hebben.quote:Maar hoe krijg ik het allebei voor elkaar? Of is het uberhaupt ook gewoon geen goed idee?
|
|
