[CSS] Optionele kolommen

[RwD]

Ik ben momenteel bezig met een website waar ik een header, 3 kolommen en als laatste een footer heb. Nou heb ik niet echt een probleem om die footer beneden de content te houden en ook doorlopende kolommen krijg ik voor mekaar. Maar met geen mogelijkheid krijg ik het voor elkaar dat de meest rechtse kolom optioneel is.

Wat ik graag wil is een rechterkolom die niet per se aanwezig hoeft te zijn, en als hij er dan niet is moet de 2de kolom de plaats van de rechterkolom innemen. Ik heb alle voorbeelden over kolommen op ALA al doorgenomen, maar bij geen 1 was de rechterkolom optioneel.

Ik kan niet echt een voorbeeld posten of als ik het doe is het heel gesimplificeerd:

HTML:

<div id="header">
  <h1>Ik ben header</h1>
  <ul>
    <li>Menuoptie1</li>
    <li>Menuoptie2</li>
  </ul>
</div>

<div id="kolom1">Kolom 1</div>
<div id="kolom2">Hoofdgedeelte</div>
<div id="Kolom3">Sidebar</div>

<p id="footer">Ik ben voetzoeker</p>

Maar in principe staat de structuur van de gegevens nog niet per definitie vast; ik weet nog niet of ik nog een container rond de kolommen wil hebben of niet. Maar dat is van latere zorg. Om sommige stylesheets te laten werken had ik er een br tussen gezet met clear:both. Maar of dat nu de perfecte oplossing er voor is

Een stylesheet kan ik er niet bij geven, ze werkten allemaal niet afdoende hopelijk kan iemand hier me verder helpen?

Nu is mijn probleem niet echt nijpend, ik kan gewoon vantevoren checken of de kolom optioneel is en zo ja een andere stylesheet includen (zoals het centered design op GoT). Maar ik zou het graag zonder programmeertruukjes oplossen om het design niet afhankelijk te maken van de aanwezige informatie (zoals kolom 3)

Een andere "oplossing" is stiekem toch tabellen te gebruiken, een cel weg laten en de rest neemt de plaats in; zo gepiept. Dat vindt ik geen slechtere oplossing dan een <br style="clear:both;"> aangezien die er ook alleen maar staat voor de layout!

[Verwijderd]

RwD schreef op maandag 21 februari 2005 @ 16:42:
Een andere "oplossing" is stiekem toch tabellen te gebruiken, een cel weg laten en de rest neemt de plaats in; zo gepiept. Dat vindt ik geen slechtere oplossing dan een <br style="clear:both;"> aangezien die er ook alleen maar staat voor de layout!

Dat is iig wel een slechtere oplossing.

Als je css zo in elkaar zit dat het belangrijk is om te weten of je een 2 of 3 koloms pagina hebt dan zou ik afhankelijk daarvan in een containerDiv een className zetten.

Cascading Stylesheet:

div.layout3Col div#col1 {kolom 1 css meuk}
div.layout3Col div#col2 {kolom 2 css meuk}
div.layout3Col div#col3 {kolom 3 css meuk}

div.layout2Col div#col1 {kolom 1 css meuk}
div.layout2Col div#col2 {kolom 2 css meuk}

Semantiek-guru's zullen wel gruwelen van elke Div teveel maar naar mijn mening is een div een dermate neutraal object dat ik om layout correct te krijgen (box-model, padding gedoe, enz.) liever een Div erbij zet dan te vertrouwen op css-hacks enz.... (ff offtopic)

[Michali]

je kunt toch gewoon de kolom met display: none laten verdwijnen en dan de margin van het hoofdgedeelte tot de rand weer 0 maken oid.

[Ibex]

Ik zou opteren om gewoon de kolommen naast elkaar te zetten met float's. Om de onderste div dan werkelijk onderaan te krijgen - wat ook de float is van de meest rechtse "kolom-div" - is het normaal voldoende om clear: both; te gebruiken in de css van die onderste div.

Voor zover ik me herinner, don't shoot me .

[RwD]

Verwijderd schreef op maandag 21 februari 2005 @ 17:06:
[...]
Dat is iig wel een slechtere oplossing.

Als je css zo in elkaar zit dat het belangrijk is om te weten of je een 2 of 3 koloms pagina hebt dan zou ik afhankelijk daarvan in een containerDiv een className zetten.

Cascading Stylesheet:

div.layout3Col div#col1 {kolom 1 css meuk}
div.layout3Col div#col2 {kolom 2 css meuk}
div.layout3Col div#col3 {kolom 3 css meuk}

div.layout2Col div#col1 {kolom 1 css meuk}
div.layout2Col div#col2 {kolom 2 css meuk}

Dan kan ik net zo goed die andere stylesheet includen zoals GoT doet voor een gecentreerde weergave, niet?

Michali schreef op maandag 21 februari 2005 @ 17:08:
je kunt toch gewoon de kolom met display: none laten verdwijnen en dan de margin van het hoofdgedeelte tot de rand weer 0 maken oid.

Die margin weer 0 maken is een aanpassing in de stylesheet. Dan is een andere stylesheet includen net zo makkelijk

Ibex schreef op maandag 21 februari 2005 @ 17:42:
Ik zou opteren om gewoon de kolommen naast elkaar te zetten met float's. Om de onderste div dan werkelijk onderaan te krijgen - wat ook de float is van de meest rechtse "kolom-div" - is het normaal voldoende om clear: both; te gebruiken in de css van die onderste div.

Voor zover ik me herinner, don't shoot me .

Ik heb je suggestie uitgeprobeerd, maar je suggestie is eigenlijk bedoeld om de footer beneden te houden. Waar het mij om gaat is eigenlijk de maximale breedte van de 2de kolom. Met floaten blijft een bloklevel element niet zijn maximale breedte innemen omdat hij niet meer in de normale flow van elementen zit. Hieronder mijn poging op jouw suggestie. Maar als ik de vaste grootte van kolom 2 weg haal werkt het niet meer en met vaste grootte ben ik net zo ver als ik al was

HTML:

<html>

<head>

    <style>
    * {
        padding:0;
        margin:0;
    }

    #header {
        background-color:#f70;
        width:800px;
    }

    #body {
        background-color:gray;
        width:759px;
        height:100px;
    }

    #kolom1 {
        background-color:yellow;
        width:159px;
        float:left;
    }

    #kolom2 {
        background-color:green;
        width:420px;
        float:left;
    }

    #kolom3 {
        background-color:blue;
        width:180px;
        float:right;
    }

    #footer {
        background-color:red;
        width:800px;
        clear:both;
    }
    </style>
</head>

<body>

<div id="header">
  <h1>Ik ben header</h1>
  <ul>
    <li>Menuoptie1</li>
    <li>Menuoptie2</li>
  </ul>
</div>

<div id="body">
    <div id="kolom1">Kolom 1</div>
    <div id="kolom2">
        <h1>Hoofdgedeelte</h1>
        <p>blahdieblah</p>
    </div>
    <div id="Kolom3">Sidebar</div>
</div>

<p id="footer">Ik ben voetzoeker</p>

</body>

</html>

Dus voor zo ver ik kan zien heb ik drie opties:

1. Lastig doen en een aparte stylesheet met die width anders,
2. Tabel gebruiken; makkelijk werkt zoals beschreven van zichzelf,
3. Iets anders.

Voor die iets anders hoop ik dat er uberhaupt nog iets anders mogelijk is, want na alles wat ik hier altijd gezien heb, en wat ik met zelf proberen tegenkom weet ik echt niet of het kan

[ Voor 7% gewijzigd door RwD op 21-02-2005 20:16 ]

[Savantas]

Als je nu kolom 1 en kolom 3 in kolom 2 zet (of eigenlijk in Body, kolom 2 wordt overbodig...).

code:

<div id="body">
    <div id="kolom2">
        <div id="kolom1">Kolom 1</div>
        <div id="Kolom3">Sidebar</div>
        <h1>Hoofdgedeelte</h1>
        <p>blahdieblah</p>
    </div>
</div>

Geplakt in bovenstaande dus, en nu expres voor de duidelijkheid even body en kolom2 laten staan.
Als je nu <div id="kolom2"> er even uit haalt dan hoef je alleen nog te zorgen dat de andere twee kolommen altijd maximale hoogte hebben (was ook met clear: both; geloof ik..., zie anders bv. ALA)

[ Voor 59% gewijzigd door Savantas op 22-02-2005 10:52 . Reden: familie van de Typosomatica Errorum ]

[RwD]

Savantas schreef op dinsdag 22 februari 2005 @ 10:34:
Als je nu kolom 1 en kolom 3 in kolom 2 zet (of eigenlijk in Body, kolom 2 wordt overbodig...).

code:

<div id="body">
    <div id="kolom2">
        <div id="kolom1">Kolom 1</div>
        <div id="Kolom3">Sidebar</div>
        <h1>Hoofdgedeelte</h1>
        <p>blahdieblah</p>
    </div>
</div>

Geplakt in bovenstaande dus, en nu expres voor de duidelijkheid even body en kolom2 laten staan.
Als je nu <div id="kolom2"> er even uit haalt dan hoef je alleen nog te zorgen dat de andere twee kolommen altijd maximale hoogte hebben (was ook met clear: both; geloof ik..., zie anders bv. ALA)

Tricky gedeelte hierbij is dat kolom 3, als deze aanwezig is, de maximale hoogte moet krijgen. Dit krijg ik echt niet voor elkaar. Om hem op de juiste hoogte te krijgen als je een vaste hoogte in hebt gesteld is overigens geen probleem. Hier mijn code van jouw suggestie (meteen ook maar validerend)

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>

    <title>test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">

    <style type="text/css">
    * {
        padding:0;
        margin:0;
    }

    #header {
        background-color:#f70;
        width:800px;
    }

    #body {
        background-color:gray;
        width:759px;
        height:100px;
    }

    #kolom1 {
        background-color:yellow;
        width:159px;
        height:100%;
        float:left;
    }

    #kolom3 {
        background-color:blue;
        width:180px;
        height:100%;
        float:right;
    }

    #footer {
        background-color:red;
        width:800px;
        clear:both;
    }
    </style>

</head>

<body>

<div id="header">
  <h1>Ik ben header</h1>
  <ul>
    <li>Menuoptie1</li>
    <li>Menuoptie2</li>
  </ul>
</div>

<div id="body">
    <div id="kolom1">Kolom 1</div>
    <div id="kolom3">Sidebar</div>
    <h1>Hoofdgedeelte</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>

<p id="footer">Ik ben voetzoeker</p>

</body>

</html>

Dit is een leuke suggestie, maar helaas is 100% niet echt 100% voor de divs. Ik zou zeggen als de parent groter dan ingesteld wordt dat 100% dan ook meer is en de elementen meegroeien.... Maar logisch gedrag is er niet bij

Let op dat de resultaten in FF en IE niet gelijk zijn! Omdat ik het niet meteen kon verklaren had ik even de nederlandse tekst over overflow opgezocht die zegt dat de container mee moet groeien bij overflow:visible. Aangezien de container van de lorem ipsum tekst grijs is zou je zeggen dat FF vergeten is de grijze container groter te maken.

[Savantas]

Voor dat laatste hoef je bij #body alleen height te veranderen in min-height. Maar volgens mij staan er ondertussen al 3 topics over het 100% uitvullen, en dat alleen al vandaag. (Zie bv. Clay in http://gathering.tweakers...message/22805294#22805294.
Toch absurd dat nog geen echte workaround/hack hiervoor is...

[RwD]

Helaas, dit had ik gisteren al geprobeerd. Internet explorer snapt min-height niet. En voor Firefox is min-height weer geen rede om de boxen links en rechts 100% groot te houden.

(Ik heb ook combinaties van height en min-height geprobeerd)

[ Voor 16% gewijzigd door RwD op 23-02-2005 13:51 ]

[JJvG]

Je firefox probleem met min-heigth kan je oplossen door een element in je DIV te zetten (bijv. H1) en dat een width van 100% te geven. Hierdoor wordt de breedte automatisch gemaximaliseerd en zal het over de hele breedte worden gestrech-ed.

Verder over je code. Je moet een wrapper om je je totale kolom verdeling zetten en die de gewenste totaal-breedte geven (bijv. 95%) en een wrapper om de laatste twee kolommen zetten en die geen breedte geven, maar een float: left; geven. Heb zo gauw hier geen tools om uit te werken, maar pseudo html staat hieronder.

code:

<div id="header">
  <h1>Ik ben header</h1>
  <ul>
    <li>Menuoptie1</li>
    <li>Menuoptie2</li>
  </ul>
</div>
<div id="maincontainer">
    <div id="kolom1">Kolom 1</div>
    <div id="kolomcontainer">
        <div id="kolom2">Hoofdgedeelte</div>
        <div id="Kolom3">Sidebar</div>
    </div>
</div>

<p id="footer">Ik ben voetzoeker</p>