[CSS] 3 kolommen schaalbaar in hoogte + min height

[_Brake_]

Beste Tweakers,

Het zoveelste 3 columns topic. Ik heb me kapot gezocht op GoT en Google, na een dag lang van alles geprobeerd te hebben. De oplossing leek te liggen in faux columns, maar daar geloof ik niet meer in.

Waar het om draait: http://www.inlustris.nl/allerhanden

Ik zal even uitleggen wat de bedoeling eigenlijk is.

Er moeten 3 kolommen komen, met een minimale hoogte van 862px (alle 3 kolommen). Dit is de hoogte van de rechter kolom ivm de achtergrond. Indien de kolommen hoger worden, zal de standaard achtergrond van de linker en rechter kolom aangevuld worden met een oneindige aaneenschakeling van plaatjes. De middelste kolom is altijd wit.

Er moet dus een minimale hoogte komen van 862px, en als 1 van de kolommen hoger wordt (in de praktijk de middelste kolom, soms de rechter kolom) dan moeten de overige 2 ook meeschalen met die hoogte.

Het geheel moet tegen de linker zijkant geplakt zijn.

De code die ik tot nu toe heb (gebasseerd op faux columns):

Cascading Stylesheet:

body, #container {
    width: 100%; 
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    background: #FFF url('images/background.jpg') no-repeat;
    background-attachment: fixed;
}
#container {
    text-align: left; /* centreer de content-wrapper */
}
#content-wrapper {
    width: 780px;
    margin: 10px 0 0 0; /* centreer de content-wrapper, deel 2 */
    text-align: left; /* zet de tekst weer links */
    background: url('repeat.gif') repeat-y center;
    overflow: auto; /* clear de floats */
}

#collumn1background {
    background: url('images/background_left_repeat.jpg') repeat-y;
    width: 60px;
    float: left;
}

#collumn1content {
    background: url('images/background_left.jpg') no-repeat;
    width: 60px;
    float: left;
}

#collumn2background {
    background: url('images/background_center_repeat.jpg') repeat-y;
    width: 470px;
    float: left;
}

#collumn2header {
    background: url('images/header.jpg') no-repeat;
    width: 470px;
    height: 150px;
    float: left;
}

#collumn3background {
    background: url('images/background_right_repeat.gif') repeat-y;
    width: 230px;
    float: left;
}

#collumn3 {
    background: url('images/background_right.gif') no-repeat;
    width: 230px;
    float: left;
}

De   staan in de code om de zijkolommen op te laten rekken zodat je het idee ziet van de herhalende achtergrond hierin. Wie ziet waar het fout gaat?

[Verwijderd]

"U bent niet gemachtigd om deze pagina te bekijken"

[_Brake_]

Nu wel Het was nog index2.html, is nu opgelost. Daarnaast ff snel nieuwe geupload (met een iets kortere linkerbalk, zodat dit ook duidelijk is dat het nog niet schaalt).

[Verwijderd]

Hmm... toevallig net nog wat gezien hier op GoT, nu kan ik het alleen niet meer vinden.

De zoekterm was in ieder geval Faux-Columns:

http://alistapart.com/articles/fauxcolumns/

succes

[_Brake_]

Over fauxcolumns heb ik ook al veel gelezen, maar dit is volgens mij geen oplossing omdat ik geen repeating achtergrond heb aan de bovenkant. Dat komt later pas... Het neppe, optische bedrog kan bij mij dus niet toegepast worden!

[moozzuzz]

Je kan ofwel naar een template-website gaan, er zijn er op GoT in dit soort threads al enkele genoemd.

Je kan ook gewoon je html css'eren

HTML:

<div id="container">
   <div id="content">
   tekst
   position: relative; padding-left: 150px; padding-right: 150px; background:...
   </div>
   <div id="left">
   <!-- ziet er leeg uit? -->
   position: absolute; width: 1px; height: 8xx px;  background:...
   </div>
   <div id="right">
   <!-- ziet er leeg uit? -->
   position: absolute;  background:...</div>
   <div id="header">
   <!-- menu wellicht? -->
   position: absolute; </div>
   <div id="footer">
   <!-- ziet er leeg uit? -->
   position: relative; </div>
</div>

Volgens mij moet je dan wat prutsen met de hoogte van left (fixed heigth), de padding van de content en de header.

JavaScript:

#container { 
    text-align: left; /* centreer de content-wrapper */ 
} 

Je hebt overigens blindelings zitten kopiëren denk ik van een ander project

[ Voor 10% gewijzigd door moozzuzz op 02-11-2006 17:28 ]

[_Brake_]

Er is dus geen header of footer he! Die header die genoemd is in de CSS die ik heb gegeven, zit in de middelste kolom van de site. Maar dat is voor de basis niet echt van belang (als ik die 3 kolommen maar heb!). En het idd gekopieerd van een ander project (met commentaar), namelijk 1 van een faux colums voorbeeld... Maar zoals ik al zei, dit gaat waarschijnlijk ik mijn geval helaas niet werken Die "container" is waarschijnlijk dan ook overbodig...

[Verwijderd]

Het kan aan mij liggen hoor, maar ik zie maar 1 kolom op dit moment.

1 achtergrondplaatje voor het html element: de "knoest", fixed
1 achtergrondplaatje voor het body element: de drie gekleurde stroken links, het wit, de golvende lijn en de rechte lijn rechts, deze achtergrond herhaalt zich verticaal
1 achtergrondplaatje voor de container: links het hefstblad (ofzo), aan de bovenkant de rechte lijn, het woordmerk, het CBW logo, de twee donkere bredere lijnen en rechts de ronde hoek en de stoel en de vertikale tekst. Het wordt dus een soort omgekeerde u-vorm.
Een beetje creatief knippen dus.
Ik denk dat je het best alles met gif plaatjes kunt doen.

[Bweap]

Zelf gebruik ik : http://www.projectseven.c...ss/pvii_columns/index.htm wel eens.

Dit gaat wel doormiddel van een javascript.
Momenteel gebruik ik het op mijn php knutsel site ook http://www.balkenbrij.com
Let op ! site under construction

[Verwijderd]

Ik weet niet of je hier iets aan hebt:

Ook van alistapart maar dan een andere link

En hier nog een link, het is niet je oplossing helemaal maar misschien bevat het wat informatie:

http://www.gigadesign.be/...ommen-fluid-de-uitdaging/

[_Brake_]

Wat ik wilde, zit eigenlijk standaard in een tabel... Die schaalt altijd mee

http://www.inlustris.nl/allerhanden/tabel.html

En de code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ALLERHANDEN - Meubelatelier Allerhanden Bellingwolde</title>

<style type="text/css">

body {
    background: #FFF url('images/background.jpg') no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 10px 10px;
    border: 0;
}

#columnleft {
    background: url('images/background_left.jpg') no-repeat;
    position: relative;
    top: 0px;
    width: 60px;
    height: 565px;
}

#columnmiddle {
    background: url('images/header.jpg') no-repeat;
    position: relative;
    top: 0px;
    padding-top: 200px;
    width: 470px;
    height: 150px;
}

#columnright {
    background: url('images/background_right.gif') no-repeat;
    position: relative;
    top: 0px;
    padding-top: 300px;
    width: 230px;
    height: 862px;
}

table {
    border-collapse: collapse; 
    border-spacing: 0px;
}

td {
    padding: 0px;
    margin: 0px;
    vertical-align: top;
}

td.left {
    background: url('images/background_left_repeat.jpg') repeat-y;
    width: 60px;
}

td.middle {
    background: white;
    width: 470px;
}

td.right {
    background: url('images/background_right_repeat.gif') repeat-y;
    width: 230px;
    height: 862px;
}
</style>

</head>

<body>
<table>
<tr>
<td class="left">
    <div id="columnleft"></div>
</td>
<td class="middle">
    <div id="columnmiddle"><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p><p>middle</p></div>
</td>
<td class="right">
    <div id="columnright"><p>- NEWS -</p></div>
</td>
</tr>
</table>
</body>
</html>

Jaja, tabellen zijn niet voor opmaak... Maar ze maken het in dit geval wel erg makkelijk!

[moozzuzz]

Ik denk dat er meer dan genoeg hinten gegeven zijn, tem rechtstreekse linken toe. Ik denk dat je best op zoek gaat naar een 2-column-oplossing, want in je "linker"kolom staat geen "content":

Een content-column die wat toegesnoerd wordt met padding (left/right) en een absoluut gepositioneerde menu/news-column over de rechter-padding.