[CSS] CSS faux columns (?)

[MuddyMagical]

Ik zit al een paar dagen te vechten met een layout die ik niet voor elkaar krijg. Meerdere sites gelezen over Faux Columns en ook hier op GoT zitten zoeken omdat ik vermoed dat ik deze techniek nodig heb, maar ik krijg het niet voor elkaar.

Op http://dev.estupreta.net/test.html vind je een klein testdocumentje.
Zoals je ziet zijn 'content_right' en 'content_left' niet even hoog als de 'content_main'. Ik heb naar aanleiding van wat tutorials op het internet al zitten testen met een transparante png in de 'content' div die als container dient, maar ook dit lijkt niet te werken.
De overige div's die je ziet hebben allemaal een vaste hoogte en dan is het ook geen probleem.

Ook het debuggen met Firebug krijg ik niet voor elkaar. Verschillende versies hebben al de revue gepasseerd maar ik kijk óf ergens compleet overheen óf het kwartje valt gewoon nog niet.

Ik zit al even te twijfelen of ik het hier moet posten want ik vrees dat het echt een simpele oplossing is terwijl ik te moeilijk zit te denken.

De bedoeling is dat 'content_right' en 'content_left' een background krijgen van een sprite. Ik heb ze in het voorbeeld even wat breder gemaakt wat makkelijker is voor het voorbeeld.

[posttoast]

Hoe bedoel je "een background van een sprite"? De oplossing is namelijk gewoon om #content_main een achtergrondafbeelding te geven in de "vorm" van die drie kolommen. Dat is de faux-columns methode.

[MuddyMagical]

posttoast schreef op dinsdag 21 juni 2011 @ 16:48:
Hoe bedoel je "een background van een sprite"? De oplossing is namelijk gewoon om #content_main een achtergrondafbeelding te geven in de "vorm" van die drie kolommen. Dat is de faux-columns methode.

Je bedoelt een afbeelding die de volledige breedte van alle drie de kolommen heeft?

Zo ja, dan begrijp ik zelf ook niet waar ik die transparante pixel heb gelezen.

[posttoast]

MuddyMagical schreef op dinsdag 21 juni 2011 @ 16:50:
[...]

Je bedoelt een afbeelding die de volledige breedte van alle drie de kolommen heeft?

Zo ja, dan begrijp ik zelf ook niet waar ik die transparante pixel heb gelezen.

Ja, dat bedoel ik. En waar die transparante pixel voor zou moeten dienen snap ik ook niet

Waarom hebben #top_header, #menu, #content_wrapper en #footer_wrapper een float: left trouwens?

[ Voor 12% gewijzigd door posttoast op 21-06-2011 16:53 ]

[OkkE]

Het idee van faux-columns is inderdaad dat je "valsspeelt" door een background-image te gebruiken waardoor het lijkt als of de columns doorlopen.

Een image zo breed als je volledige #content_wrapper waar de achtergrond kleur van de twee zij-columns al in zit en die verticaal laten herhalen.

[MuddyMagical]

Crap, ja nu zie ik het ook.

Ik had dat valsspelen wel door, maar heb daar ergens in mijn zoektocht over het internet een transparante pixel in mijn hoofd gekregen. Heb nu even een sprite gemaakt van 1100 px breed en die in de 'content' div geduwt. Nu gaat het inderdaad wel.

Zoals ik al zei:

Ik zit al even te twijfelen of ik het hier moet posten want ik vrees dat het echt een simpele oplossing is terwijl ik te moeilijk zit te denken.

Heren, bedankt voor jullie moeite deze prutser te helpen!!