Css layout 3 kolommen

[Guillome]

Hoi,

Ik wil mijn layout omzetten van tabellen naar divs omdat dat altijd overal geroepen wordt zo te doen.
Echter, ik probeer alles wat ik maar tegen kom qua tutorials etc maar niets werkt.

Wat ik wil:
* 3 kolommen
* de inhoud van elke kolom kan verschillen van hoogte
* de 3 kolommen moeten allemaal reiken tot de onderkant van de langste kolom
* de 3 unieke achtergrond-afbeelding van de 3 kolommen moeten ook reiken tot de onderkant van de langste kolom

Gevonden:
* een methode die de borders gebruikt voor achtergrond kleur, maar daar kan dus geen afbeelding in: http://www.alistapart.com...mnlayouts/3ColLiquid.html
* verder alleen maar methodes met een achtergrondafbeelding in de wrapper die de kolommen kleurt, en dus valsspelen is.

HTML:

    <div class="left">
      test<br /><br /><br /><br /><br /><br /><br /><br /><br />test
    </div>
    <div class="right">
      
    </div>
    <div class="content">
      
    </div>
    
    <clear></clear>

Cascading Stylesheet:

.left {
  width:196px;
  float:left;
  background:url("./webimages/layout/dash_v_vet.gif") repeat-y top right red;
}
.right{
  width:270px;
  float:right;
  background:orange;
}
.content{
  background:url("./webimages/layout/dash_v_vet.gif") repeat-y right top white;
  margin-left:200px;
  margin-right:270px;
}

Resultaat:


Nu ben ik erg benieuwd naar die mensen die tabellen verafschuwen of gewoon afraden hoe dit dan wél moet zonder andere rare hacks. Ik wil geen vaste achtergrond afbeelding, of 2 wrapperdivs met background:url() 200px top en 800px top ofzo.

[RaZ]

En als je het HolyGrail artikel van a list apart aanhoud: http://www.alistapart.com/articles/holygrail/

[NederB]

let me modbreak that for you

We hebben geen behoefte aan dit soort reacties.

[Voor 82% gewijzigd door MueR op 10-05-2011 12:19]

[Guillome]

@RaZ: Leuk geprobeerd van ze, en het werkt mooi in firefox, maar niet in IE zonder veel ranzige hacks en CSS code.. Het is nog altijd een ramp om een layout wat met een tabel zo gemakkelijk is na te bouwen met divjes lijkt het wel..

[Flowmo]

Guillome schreef op dinsdag 10 mei 2011 @ 13:17:
@RaZ: Leuk geprobeerd van ze, en het werkt mooi in firefox, maar niet in IE zonder veel ranzige hacks en CSS code.. Het is nog altijd een ramp om een layout wat met een tabel zo gemakkelijk is na te bouwen met divjes lijkt het wel..

Wat er in dat artikel uitgelegd wordt, zou dus *wel* moeten werken in IE, wordt ook nadrukkelijk gezegd. Daarnaast worden er geen hacks gebruikt, alleen valide CSS regels die toevallig door andere browsers niet worden opgepakt.

Tevens zijn er dan nog JS oplossingen die de hoogte van al je divs gelijk trekken.

En nog eentje: faux columns. Daarbij zijn de kolommen zelf niet even hoog, maar door een achtergrond afbeelding lijkt het wel zo. Snap ook niet waarom dit "valsspelen" is. Het gaat er toch om dat het optisch even hoog is?

[Voor 14% gewijzigd door Flowmo op 10-05-2011 13:27]

[Guillome]

@Flowmo, je snapt mijn punt niet denk ik.
Ten eerste geef ik aan dat faux columns niet werkt voor mij, uitgelegd in TS.
Ten tweede is JS wel het laatste wat ik wil voor mijn layout.
Ten derde heb je voor zowat elke browser extra wrappers en extra CSS nodig om het te laten werken. Ok, officieel geen hacks, maar zonder die extra`s per browser werkt het niet zoals een tabelletje.
Ten 4e werkt hun oplossing niet in IE7..

Waarom heeft deze CSS methode de voorkeur dan op tabellen? Tabel = minder code en vooral: veel minder CSS en overzichtelijker dan zoveel divjes met extra wrappers.

[Voor 3% gewijzigd door Guillome op 10-05-2011 13:32]

[RaZ]

IE is wel een erg ruim begrip he. Je hebt 6, 7, 8 & 9 inmiddels.

Toen ik met sites begon in 2006 had ik ook gewoon de faux coloms, en dat werkte prima in IE6. Daar gebruikte ik toen een creator voor, maar die is er geloof ik niet meer, ik kan hem niet meer vinden.

[OkkE]

Guillome schreef op dinsdag 10 mei 2011 @ 13:31:
Waarom heeft deze CSS methode de voorkeur dan op tabellen? Tabel = minder code en vooral: veel minder CSS en overzichtelijker dan zoveel divjes met extra wrappers.

Tabellen zijn niet bedoelt voor layout. Tabellen zijn minder flexibel. Tabellen zijn over het algemeen niet minder code, eerder meer. Tabellen zijn niet overzichtelijker wanneer je CSS snapt.

Heb je misschien een screenshot van je uiteindelijke design? Of een iets betere uitleg? Want je zegt dat faux-columns niet werkt, maar het enige dat ik zie is een screenshot met rode en oranje balk, wat in mijn ogen prima te doen is.

[Guillome]

Tabellen zijn danwel niet bedoeld voor layout, ze werken als enige zonder veel gedoe zoals het moet. Waarom zijn tabellen minder flexibel? Tabellen zijn minder code als je ziet wat een CSS en wrappers je nodig hebt voor Divjes. En voor de info: ik snap CSS..

Screenshot van boven zegt genoeg, die rode en witte en oranje balk moeten tot onderaan reiken (het gaat om de vertikale schuin-gestreepte borders/lijnen) en de witte moet variabel qua breedte zijn. Dus faux heeft géén zin.

En ik heb alleen maar weer reacties in de trant van "tabellen zijn taboe" gezien zonder nette werkende alternatieve oplossing zonder veel poespas.

[Voor 13% gewijzigd door Guillome op 10-05-2011 14:22]

[OkkE]

Guillome schreef op dinsdag 10 mei 2011 @ 14:20:
Screenshot van boven zegt genoeg, die rode en witte en oranje balk moeten tot onderaan reiken (het gaat om de vertikale schuin-gestreepte borders/lijnen) en de witte moet variabel qua breedte zijn. Dus faux heeft géén zin.

Heb je een voorbeeld met tabellen dat laat zien hoe je het precies wil hebben? Want als ik zo je CSS zie, dan heeft alles gewoon een vaste breedte. Moeten alle vlakken % van het scherm zijn? Alleen het witte vlak fluid en de rest vast?

[Guillome]

HTML:

    <table cellpadding="0px" cellspacing="0px">
      <tr>
        <td class="left">

        </td>
        <td class="content">

        </td>
        <td class="right">
          
        </td>
      </tr>
    </table>

Css:

Cascading Stylesheet:

.left { 
  width:196px;
  background:url("./webimages/layout/dash_v_vet.gif") repeat-y top right red; 
} 
.right{ 
  width:270px;
} 
.content{ 
  background:url("./webimages/layout/dash_v_vet.gif") repeat-y right top white;
}

[OkkE]

Zoiets? http://azwart.nl/got/got5.html

---

Voor de toekomst, mocht de bovenstaande link niet meer werken, hier nog eens de gehele code:
.

HTML:

<!DOCTYPE html> 
<html lang="en" class=""> 
<head> 
<meta charset="UTF-8" /> 
<title>FAUX</title> 
<style type="text/css"> 
html,body{margin:0;padding:0;height:100%;}
html{background:url('got5l.gif') repeat-y left top;}
#container{zoom:1;background:url('got5r.gif') repeat-y right top;overflow:hidden;}
#wrapper{float:left;width:100%;}
#content{margin: 0 215px;height:1000px;}
#left,#right{padding:0 10px;}
#left{float:left;width:195px;margin-left:-100%;}
#right{float:left;width:195px;margin-left:-215px;}
</style> 
</head> 
<body> 
 
<div id="container"> 
    <div id="wrapper"> 
        <div id="content">content</div> 
    </div> 
    <div id="left">left</div> 
    <div id="right">right</div> 
</div> 
    
</body> 
</html>

[Voor 91% gewijzigd door OkkE op 10-05-2011 16:53]

[Guillome]

Leuke foefjes ja, met een bg op de html tag.. Leg mij nu eens uit waarom dit overzichtelijker en flexibeler is? Op deze manier kán het in zo`n kaal voorbeeld, maar je hebt je left bg op je html element, en de right op de wrapper.

[Voor 6% gewijzigd door Guillome op 10-05-2011 15:21]

[OkkE]

Het hoeft niet op de <html>, kan ook op een extra <div> net wat je wil.

Overzichtelijker, vind ik, omdat je alleen je content in je HTML hebt zitten. Normaal zou je ook geen #left en #right gebruiken, maar bijvoorbeeld #nav en #aside. Flexibeler; wil je dan #nav naar rechts, hoef je alleen je CSS aan te passen; niet gelijk je HTML structuur. Wil je #left vast zetten, ben je met een position:fixed; ook klaar. Overgens renderen veel browsers, vooral de IE's, tabellen over het algemeen een stuk trager t.o.v. <div>'s.

Maar het blijkt dat jij je niet wil laten overtuigen. Prima. Als je liever tabellen gebruikt, hou ik je niet tegen.

[Guillome]

Die laatste zin is erg jammer. Ik vraag juist oplossingen om me te overtuigen. Kinderachtig.

Daarnaast heb ik al in mijn TS genoemd dat het kan met 2 wrapper divs en meer van zulke truukjes.
Je noemt idd een paar mooie voordelen, en ik snap ze goed.
Toch blijft het omslachtig om het zo te doen.

[MsG]

Nou ja ik ben het wel met de TS eens dat veel semantisch bedoelde manieren nog niet eens werken zonder technisch gezien misbruiken van tags, truukjes en andere hacks. Tabellen is niet alles, maar soms zijn "slechtere" methodes gewoon sneller en beter werkend in alle browsers. Net als je soms ziet met de center-tag.

[Flowmo]

MsG schreef op dinsdag 10 mei 2011 @ 15:36:
Nou ja ik ben het wel met de TS eens dat veel semantisch bedoelde manieren nog niet eens werken zonder technisch gezien misbruiken van tags, truukjes en andere hacks. Tabellen is niet alles, maar soms zijn "slechtere" methodes gewoon sneller en beter werkend in alle browsers. Net als je soms ziet met de center-tag.

Pardon? center tags? table layouts? Wat is dit? Gaan we weer 10 jaar terug in de tijd? Straks gaan we weer gewoon font tags en marquee gebruiken! Waarom is CSS uberhaupt ooit uitgevonden? De oude tags voldeden toch gewoon? >_>

Zo komen we natuurlijk nooit ergens. Een iets minder semantisch geplaatste div tov table layouts heeft in welk geval dan ook mijn voorkeur. Evenals iets meer CSS tov table layouts.

Tables zijn niet voor layouts, daar hebben we divs en CSS voor. Dus of je doet het met divs en CSS, of je neemt een stap van 10 jaar terug in de tijd en kiest voor tables. Wat je zelf wilt. Er zijn genoeg oplossingen aangedragen en daar mag je uit kiezen welke je neemt. Meer smaken hebben we niet.

[Guillome]

Waarom moet het altijd zo fel door sommigen bij deze discussies? Ik vraag in dit topic juist hoe het moet Ik heb 1 voorbeeld gezien wat echt werkt, en ik ga dat denk ik maar toepassen. Het voordeel wat Okke in zijn laatste post noemde haalt mij over. Het is, vind ik, wat onlogischer qua html, maar dat moet dan maar.

Een reactie als die van jou vind ik volledig nutteloos helaas..

[Flowmo]

Feit is dat er verschillende aanpakken zijn en jij ze een beetje achteloos van de kaart veegt vanwege "foefjes, truuks en hacks" terwijl dat in feite helemaal niet is. Tenminste, die indruk kreeg ik er een beetje van.

Het leek erop dat we gewoon niet tot je door konden dringen met onze oplossingen en dat je steeds terug bleef vallen op table layouts. Gelukkig heb je nu een oplossing gevonden welke je gaat toepassen en stap je af van table layouts (gelukkig ).

[OkkE]

Guillome schreef op dinsdag 10 mei 2011 @ 16:30:
Waarom moet het altijd zo fel door sommigen bij deze discussies? Ik vraag in dit topic juist hoe het moet

Als ik voor mezelf spreek; het is voor een deel frustratie omdat webdesign niet serieus genomen wordt. Met name het semantische aspect; accessability, usability, etc. En het is vrij lastig om jaren lange ervaring even in 3 regels samen te vatten, waaorm deze manier beter is.

En verder is het best vervelend dat oplossingen inderdaad worden afgedaan als "truukjes" en "hacks", terwijl dat opzich gewoon prima manieren zijn.

Ik heb 1 voorbeeld gezien wat echt werkt, en ik ga dat denk ik maar toepassen. Het voordeel wat Okke in zijn laatste post noemde haalt mij over. Het is, vind ik, wat onlogischer qua html, maar dat moet dan maar.

Het is gewenning. Voor mij zijn tabellen ontzettend onlogisch, zeker bij gebruik van colspan en rowspan. Er zijn overgens nog tal van voordelen.

• Beter indexeerbaar door Google, etc.
• Over het algemeen minder code.
• Beter te onderhouden.
• Snellere laadtijden
• Beter toegankelijk (voor o.a. screenreaders).
• Veel makkelijker geschikt te maken voor mobile devices.
• Meer mogelijkheden (qua design).

En zo zijn er nog meer, maar daar voor raad ik je aan eens wat rond te zoeken op internet.

[Voor 5% gewijzigd door OkkE op 10-05-2011 16:52]

[MsG]

Flowmo schreef op dinsdag 10 mei 2011 @ 16:17:
[...]

Pardon? center tags? table layouts? Wat is dit? Gaan we weer 10 jaar terug in de tijd? Straks gaan we weer gewoon font tags en marquee gebruiken! Waarom is CSS uberhaupt ooit uitgevonden? De oude tags voldeden toch gewoon? >_>

Zo komen we natuurlijk nooit ergens. Een iets minder semantisch geplaatste div tov table layouts heeft in welk geval dan ook mijn voorkeur. Evenals iets meer CSS tov table layouts.

Tables zijn niet voor layouts, daar hebben we divs en CSS voor. Dus of je doet het met divs en CSS, of je neemt een stap van 10 jaar terug in de tijd en kiest voor tables. Wat je zelf wilt. Er zijn genoeg oplossingen aangedragen en daar mag je uit kiezen welke je neemt. Meer smaken hebben we niet.

Mijn punt is dat men altijd zeg "ja het mag niet zo en zo, het moet zo en zo" en vervolgens werkt die nieuwe standaard maar half. Ik gebruik ook zoveel mogelijk de juiste technieken, maar dat we in 2011 massaal moeten truuken met faux columns, of javascript moeten verkrachten om de hoogte van elementen moeten bepalen, omdat we het niet anders kunnen defineren laat mij soms wel stevig janken.

[Rann]

Soms moet je gewoon terugvallen op tabellen... Net als het centreren van afbeeldingen.. Dat wil dus ook voor geen meter met CSS

[MsG]

En verticaal tekst centreren in een div van variabele hoogte is ook zoiets wat in 2011 nog niet normaal kan . De web-evoluties mogen wel wat sneller imo.

[NederB]

The Perfect 3 Column Liquid Layout
Ik quote: "No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser & iPhone compatible."

http://matthewjamestaylor.com/blog/perfect-3-column.htm

[F.West98]

ehm....
jquery? (wel classes naar id's)

JavaScript:

var hoogte = document.getElementById('left').style.height;
$('#right').attr("height",hoogte);

oid... (ben er niet heel goed in)

[Chesta]

F.West98 schreef op dinsdag 10 mei 2011 @ 21:14:
ehm....
jquery? (wel classes naar id's)

JavaScript:

var hoogte = document.getElementById('left').style.height;
$('#right').attr("height",hoogte);

oid... (ben er niet heel goed in)

waarom half jQuery? Doe dan gelijk zo:

JavaScript:

$('#right').attr("height",$('#left').attr("height"));

of

JavaScript:

document.getElementById('right').style.height = document.getElementById('left').style.height;

[Guillome]

Hou op hou op, dit is toch verschrikkelijk! Dan is het écht divjes gebruiken om het mee-doen met de meute en kijk-mij-eens-geen-tabellen-gebruiken attitude. Jech bah verschrikkelijk

Die 'the perfect 3 colomn' ga ik even bekijken, dank je

ps: die jquery kan korter:

JavaScript:

$('#right').height($('#left').height());

[Voor 16% gewijzigd door Guillome op 11-05-2011 08:51]

[OkkE]

MsG schreef op dinsdag 10 mei 2011 @ 20:35:
En verticaal tekst centreren in een div van variabele hoogte is ook zoiets wat in 2011 nog niet normaal kan . De web-evoluties mogen wel wat sneller imo.

Niks mis met de technieken. Het ligt aan Internet Explorer, die loopt belachelijk ver achter met ondersteuning.
.

Cascading Stylesheet:

.va { vertical-align: middle; display: table-cell; }

[Guillome]

display table-cell maar nee ik wil geen tabellen gebruiken..

[OkkE]

Inderdaad, want één <div> met de eigenschappen van een tabel-cel is véél minder code, véél flexibeler, véél logischer en dus véél beter dan een hele table + tr + td om iets verticaal uit te lijnen.

De eigenschap had ook anders kunnen heten, maar toevallig waren tabel-cellen eerder, dus heet het zo. Dat het 't zelfde heet betekend niet dat het 't zelf is. Maar dat heb ik nu al genoeg proberen uit te leggen.

----

Grappen herkennen gaat makkelijker wanneer er smilies gebruikt worden.

[Voor 8% gewijzigd door OkkE op 11-05-2011 09:44]

[Guillome]

Eindelijk, kan je nu leren lezen en grapjes leren herkennen
Ik had al gezegd dat ik jouw posts als 1 van de weinigen echt nuttig vond en ga toepassen

[DrFlash]

Guillome schreef op woensdag 11 mei 2011 @ 09:41:
Eindelijk, kan je nu leren lezen en grapjes leren herkennen
Ik had al gezegd dat ik jouw posts als 1 van de weinigen echt nuttig vond en ga toepassen

Grapjes werken niet op een forum geef het maar op. In ieder geval fijn dat je een oplossing hebt gevonden die voor jou werkt. css en uitlijning blijft een hot issue, 1 ding wat ik je wel kan vertellen dat als je het eenmaal goed voor mekaar heb dat je er nooit meer naar hoeft te kijken, tegenover tabellen waar je bij elke wijziging moet controleren of die nog wel kloppen.

[MueR]

Modbreak:

Is het nu over met dat welles nietes en de steken onder water?

[MsG]

OkkE schreef op woensdag 11 mei 2011 @ 09:34:
Inderdaad, want één <div> met de eigenschappen van een tabel-cel is véél minder code, véél flexibeler, véél logischer en dus véél beter dan een hele table + tr + td om iets verticaal uit te lijnen.

De eigenschap had ook anders kunnen heten, maar toevallig waren tabel-cellen eerder, dus heet het zo. Dat het 't zelfde heet betekend niet dat het 't zelf is. Maar dat heb ik nu al genoeg proberen uit te leggen.

----

Grappen herkennen gaat makkelijker wanneer er smilies gebruikt worden.

Feit blijft is dat het ding dan een soort wordt geoutput alsof het een tabel is. het werkt vast wel, maar waarom werkt die vertical-align: middle niet los überhaupt al. Dat impliceert toch al een uitlijning in het midden? Dat soort dingen vind ik dus bar en bar slecht in webland.

[OkkE]

MsG schreef op woensdag 11 mei 2011 @ 10:32:
Feit blijft is dat het ding dan een soort wordt geoutput alsof het een tabel is. het werkt vast wel, maar waarom werkt die vertical-align: middle niet los überhaupt al. Dat impliceert toch al een uitlijning in het midden? Dat soort dingen vind ik dus bar en bar slecht in webland.

Dat zit in 't verschil tussen block-level en inline elementen.
Leesvoer: http://css-tricks.com/what-is-vertical-align/

[NederB]

OkkE schreef op woensdag 11 mei 2011 @ 09:26:
[...]

Niks mis met de technieken. Het ligt aan Internet Explorer, die loopt belachelijk ver achter met ondersteuning.
.

Cascading Stylesheet:

.va { vertical-align: middle; display: table-cell; }

IE7 en lager kent table(-cell/-row) niet