[css] 3 kolommen.

[robindv]

De meeste 3-kolommen sites proberen. 2 menu's (links en rechts) met een vaste grootte, en dan in het midden met de overige ruimte. (css-holy-grail)

Ik wil het omgekeerde bereiken zonder tabellen. Ik heb een vast midden (960px) en 2 zijkanten die groter/kleiner worden aanvankelijk van de pagina grootte.. (ik snap dat een main tabel met margin-left/right: auto; makkelijker is, maar dit is noodzakelijk voor mijn idee, omdat ik de zijkanten moet kunnen stylen)

in een html tabel gaat dit vrij gemakkelijk:

HTML:

<table border="0" width="100%">
<tr>
    <td>test</td>
    <td width="960">test2</td>
    <td>test3</td>
</tr>
</table>

maar de uitdaging is het werkend in css te krijgen, en daar blijf ik hangen

HTML:

<div id="left">links</div>
<div id="main">main</div>
<div id="right">right</div>

en als stylesheet:

Cascading Stylesheet:

body{
    background:     #fff;   
}

#left{

    float:left;
    width:auto;
    clear:none;
    border: 1px dashed red;
    
}

#main{
    width:960px;
    clear:none;
    margin:0;
    margin-left:auto;
    margin-right:auto;
    border: 1px dashed red;
}

#right{
    float: right;
    clear:none;
    width:auto;
    border: 1px dashed red;

}

en krijg je als resultaat dit, http://www.smcextra.com/site/?t=smcextra_new.
In firefox (3.5.2) is de rechter kolom een regel naar beneden, en zijn zowel links als rechts niet op de juiste (variabele) grootte. Om nog maar te zwijgen over IE.
Hoe krijg ik dit werkend?

[robindv]

niemand?

[Verwijderd]

floats moeten aansluiten tot zover ik weet

dus #left #main en #right moeten float:left hebben. probeer dat is????

[wackmaniac]

Ik ben haast geneigd te zeggen dat je dit middels een javascript zou moeten oplossen; de grootte van het venster opvragen en dan de linker en rechterzijde berekenen.

[T-MOB]

Wat wil je precies bereiken? Als je echt die kolommen nodig hebt denk ik dat er weinig anders opzit dan ofwel de tabel pakken ofwel javascript inzetten voor het uitrekenen van de breedtes.
Maar aangezien je aangeeft dat je de "zijkanten moet kunnen stylen" denk ik dat er misschien wel een andere oplossing is. Dan moeten we wel weten wat het hele probleem is (en niet alleen de oplossingsrichting waarin je bent vastgelopen )

[robindv]

allemaal float:left; geeft 1 probleem minder,(right op zelfde regel, ook in IE).
maar als er geen ruimte is, moeten left en right verdwijnen, en niet onder main.
En ze hebben nog steeds niet de opvullende grootte

[robindv]

T-MOB schreef op zondag 30 augustus 2009 @ 15:21:
Wat wil je precies bereiken? Als je echt die kolommen nodig hebt denk ik dat er weinig anders opzit dan ofwel de tabel pakken ofwel javascript inzetten voor het uitrekenen van de breedtes.
Maar aangezien je aangeeft dat je de "zijkanten moet kunnen stylen" denk ik dat er misschien wel een andere oplossing is. Dan moeten we wel weten wat het hele probleem is (en niet alleen de oplossingsrichting waarin je bent vastgelopen )

dit design verwerkelijken: http://smcextra.com/fotos/fotograaf/test/
alleen het zit hem in de groene streepjes balk.
En nu is ie altijd dezelfde grootte. en dat moet aanvankelijk van de venster-grootte altijd passen.

[Herko_ter_Horst]

Even Googlen op "3 column layout fixed width center" leverde dit veelbelovend uitziende resultaat op: http://www.cssplay.co.uk/...column-flex-fix-flex.html (waarom heb je dit zelf niet gevonden/gedaan?)

[ Voor 77% gewijzigd door Herko_ter_Horst op 30-08-2009 15:32 ]

[RaZ]

Ik zou sowieso werken met vaste breedtes.

Je menu's gaan naar de haaien met 1024x768 scherm. 22pixels voor de scrollbar (hanteer ik dan). Borders bij elkaar zijn al 6 pixels.

1024 - (960 + 6 + 22) / 2 = 18 pixels per menu, succes om daar iets in te zetten

[robindv]

Herko_ter_Horst schreef op zondag 30 augustus 2009 @ 15:29:
Even Googlen op "3 column layout fixed width center" leverde dit veelbelovend uitziende resultaat op: http://www.cssplay.co.uk/...column-flex-fix-flex.html (waarom heb je dit zelf niet gevonden/gedaan?)

ziet er wel goed uit, maar
1. de zijkanten moeten exact dezelfde grootte hebben
2. als ik die 200px naar 960px verrander, wordt het een chaos..

[RaZ]

Dat doe je zelf, zie m'n vorige post

[robindv]

maar hoe is de vraag...

[NiteSpeed]

Je zit helemaal verkeerd te denken. In principe heb je maar één column namelijk. Kijk eens naar dit simpele voorbeeld:

code:

<html>
<body>
Hier je content
</body>
</html>

Dat is 1, en dan je CSS

code:

html {background: plaatjeurl hier doen;}
body {width: 800px; margin: 0px auto;}

Op die manier schaalt de zijkant automatisch (want er is eigenlijk geen zijkant die schaalt) en je kan gewoon met een simpele background image dat gevulde effect creeeren.

Natuurlijk gaat dit verhaal niet op als je content naast de middelste div wilt plaatsen, maar gezien je ontwerp lijkt me dat verre van praktisch.

[Herko_ter_Horst]

Komt er ook echt content in die linker en rechter kolom? Want anders heb je volgens mij helemaal geen 3 kolommen nodig...

Edit: zoals NiteSpeed zegt dus...

[ Voor 13% gewijzigd door Herko_ter_Horst op 30-08-2009 15:50 ]

[RaZ]

Hij wil de totale website 960 px hebben. Niet enkel de main.

Cascading Stylesheet:

body {
 text-align: center;
 margin-left: auto;
 margin-right: auto;
}

Vergeet niet de text-align weer op links te zetten op je holy grail

[NiteSpeed]

RaZ schreef op zondag 30 augustus 2009 @ 15:57:
Hij wil de totale website 960 px hebben. Niet enkel de main.

Volgens de fipo...

Ik heb een vast midden (960px) en 2 zijkanten die groter/kleiner worden aanvankelijk van de pagina grootte..

...dus toch het midden 960px op een vaste breedte. De hamvraag blijft dus of er content aan de zijkanten van de div moeten komen?

[KabouterSuper]

Wat dacht je van:

Cascading Stylesheet:

#rechterkant
{ 
  left:0px;
  width:50%;
  padding-right:480px; /* = 960/2 */
}

...en dan de linkerkant op soortgelijke wijze.

[robindv]

nee, enkel doorlopende balken. Die door een streepjes patroon het ingewikkeld maakt.
http://smcextra.com/fotos/fotograaf/test/

[RaZ]

Je denkwijze (aan je background te zien) is in tabellen. Je zal je plaatjes dus moeten aanpassen als je met div's wil werken.

Die balk van links naar recht, kan prima 1 plaatje zijn. Daar heb je er geen 3 van nodig. Met tabellen wel ja.

Je kan dus niet zomaar 'even' een layout ombouwen van tables naar divs. De hele opbouw is dan totaal anders.

[ Voor 18% gewijzigd door RaZ op 30-08-2009 16:17 ]

[robindv]

ik ben bang dat de beste oplossing voor dit design, toch een tabel is...

[T-MOB]

robindv schreef op zondag 30 augustus 2009 @ 16:20:
ik ben bang dat de beste oplossing voor dit design, toch een tabel is...

Je hebt voor dit design helemaal geen tabellen nodig... Je maakt 1 plaatje met je streepjespatroon dat horizontaal repeterend is. Dit plaatje wordt de achtergrond van body.
Daaroverheen leg je een container waarin de schaduw zit. Dit is een png met alpha-transparency, dus voor de 3,5 persoon die IE6 gebruikt moet er een alternatief komen. Bijv een gifje met dithering of gewoon een border.

Om het nog duidelijker te maken gooi ik zo wel even een voorbeeldje online...

Zo dus

[ Voor 5% gewijzigd door T-MOB op 30-08-2009 16:44 . Reden: Link toegevoegd ]

[Cartman!]

Je laatste voorbeeld is zo simpel te maken in CSS; 1 div met vaste breedte centreren en de zijkanten zijn geen elementen maar dat is gewoon een background op je body, klaar.

[Verwijderd]

robindv schreef op zondag 30 augustus 2009 @ 15:22:
allemaal float:left; geeft 1 probleem minder,(right op zelfde regel, ook in IE).
maar als er geen ruimte is, moeten left en right verdwijnen, en niet onder main.
En ze hebben nog steeds niet de opvullende grootte

wat staat er in left en right alleen decoratieplaatjes of ook text

[Tarilo]

Als je alleen in het midden dingen gaat plaatsen moet dit helemaal niet moeilijk te maken zijn lijkt mij. Maak gewoon een div waarin je website komt te staan en centreer die. Vervolgens maak je van die balk een zo smal mogelijk plaatje, waarbij je het patroon behoudt en die geef je dan een horizontale repeat mee.

Of ben ik nu helemaal verkeerd aan het denken?

edit: spuit elf

[robindv]

T-MOB schreef op zondag 30 augustus 2009 @ 16:32:
[...]


Je hebt voor dit design helemaal geen tabellen nodig... Je maakt 1 plaatje met je streepjespatroon dat horizontaal repeterend is. Dit plaatje wordt de achtergrond van body.
Daaroverheen leg je een container waarin de schaduw zit. Dit is een png met alpha-transparency, dus voor de 3,5 persoon die IE6 gebruikt moet er een alternatief komen. Bijv een gifje met dithering of gewoon een border.

Om het nog duidelijker te maken gooi ik zo wel even een voorbeeldje online...

Zo dus

ik denk dat ik met jouw demo heel ver ga komen. Danke

[robindv]

edit: verwijderd.

[ Voor 94% gewijzigd door robindv op 05-09-2009 14:09 ]

[robindv]

edit:verwijderd

[ Voor 87% gewijzigd door robindv op 05-09-2009 14:08 ]