[CSS] Div's uitlijnen

[Verwijderd]

Op bovenstaand plaatje is de indeling van mijn website te zien.
Opzich alles prima... maar... helaas werkt dit in IE6 (en lager) voor geen meter.
Ik werk met divjes omdat ik overal lees dat dit beter is tov tabellen.

Hieronder mijn css:

Cascading Stylesheet:

div.1   {           width: 100%;
                    height: 40px;
                    background-color: #93bbf1;
                    vertical-align:middle
        }
div.2   {           width: 100%;
                    height: 29px;
                    background-color: #ffe8bb;
                    border-top: 1px solid  #6593cf;
        }
div.3   {           position:absolute;
                    top:80px;
                    bottom:5px;
                    left:0px;
                    width: 220px;
                    background-color:#FFFFFF;
                    border:1px solid #6593cf;
        }       
div.4   {           position:absolute;
                    top:70px;
                    bottom:215px;
                    left:0px;
                    right:0px;
                    margin: 10px 10px 0 230px;
                    background-color:#FFFFFF;
                    border:1px solid #6593cf;
        }
div.5   {           position:absolute;
                    margin: 9px 10px 0 230px;
                    height:200px;
                    bottom:5px;
                    right:0px;
                    background-color:#FFFFFF;
                    border:1px solid #6593cf;
        }

Kan iemand mij misschien uitleggen hoe ik dit het beste kan oplossen met positioneren?
Sites als: http://www.cssplay.co.uk/layouts/body4.html heb ik al nageplozen, maar ik krijg het
niet goed.
Hopelijk kan jullie antwoord mij het e.e.a. uitleggen.

ps. De oranje-gekleurde divjes zijn evenwaardig als de anderen. Dit heb ik even gedaan om de structuur wat duidelijker te maken.

[ Voor 4% gewijzigd door Verwijderd op 31-03-2008 22:23 ]

[kalizec]

Je kunt dit het beste oplossen door geen absolute positioning te gebruiken.

Dus geen position, top, left, bottom, right.

[Sebazzz]

div.1?

Zet daar maar div.#div1 neer en noem je div '1' maar div1 met behulp van het attribuut 'id'.

Ik werk met divjes omdat ik overal lees dat dit beter is tov tabellen.

Je moet er van overtuigt zijn.

[Verwijderd]

Sebazzz schreef op maandag 31 maart 2008 @ 19:39:
div.1?

Zet daar maar div.#div1 neer en noem je div '1' maar div1 met behulp van het attribuut 'id'.

Sorry voor de onvolledige informatie, maar in werkelijkheid staat dit ook zo (div#cntleft etc)

kalizec schreef op maandag 31 maart 2008 @ 19:38:
Je kunt dit het beste oplossen door geen absolute positioning te gebruiken.

Dus geen position, top, left, bottom, right.

Misschien een domme vraag, maar hoe kan ik ze dan exact positioneren?

[Boelie-Boelie]

Positioneren doet men vaak zonder 'position:nogwattes', gewoon door breedtes, margins en paddings te gebruiken i.c.m. floats.
http://css.maxdesign.com.au/floatutorial/

Nou noem je alles 'div' en stop je alles in een div... Een div is niet ter vervanging van een tabelcel, anders kun je net zo goed tabellen blijven gebruiken. Dat je moet stoppen met tabellen voor layout betekent niet dat je alles in divs moet stoppen; het is de bedoeling dat je je content een zinnige structuur geeft. Dus een h1 (h2, h3, etc.) voor kopjes, een p voor alinea's, ul of ol voor opsommingen.. Een div(ision) wordt meestal gebruikt om paginagedeelten van elkaar te scheiden, wat zich veelal beperkt tot zaken als header, footer, menu, content. Wat stellen jouw gedeelten voor? Zodra dat duidelijk is, kun je ze ook zinnige namen geven en het aantal divs beperken. Ik heb geen idee wat jouw divs voorstellen, maar ik gok dat div2 en div5 zomaar weg kunnen.

Overigens zou ik CSSplay niet als voorbeeld nemen, dat zijn veelal CSS-experimenten.
www.456bereastreet.com/la...tandards/csslayout/2-col/

[Verwijderd]

Boelie-Boelie alseerst bedankt voor je duidelijke en uitgebreide uitleg!
Om aan je vragen te voldoen:

div1: header
div2: menu-bar (algemeen)
div3: menu-bar (persoonlijk)
div4: content laden
div5: extra mogelijkheden, alleen getoond in hoofdmenu

Als ik jou verhaal goed begrijp kun je div 1 en 2 samenstellen
en div 4 en 5 ook?

ps. Hoe kun je ervoor zorgen dat div 4 en 5 de overige ruimte
opvullen? (ook in IE en lager?)

[ Voor 12% gewijzigd door Verwijderd op 31-03-2008 21:16 ]

[MichielioZ]

zoek eens op "faux columns" op google of hier in GoT, denk dat je daarmee namelijk je layout (dus met "de rest opvullen") kan verkrijgen...

[BtM909]

Begin eerst met je content, gebruik de juiste elementen ervoor en ga daarna kijken hoe de flow van je document gaat lopen. Aan de hand daarvan ga je de HTML elementen positioneren (voorkom absolute zo veel mogelijk).

[wackmaniac]

Wat ik altijd zeg is "denk eerst in rijen en dan in kolommen".

Je header en de div eronder zijn rijen: gewoon divs maken met hoogte. Daaronder een blokje met daarin twee rijen. Dus je deelt eerst dat blok op in links en rechts. Het rechterblok bestaat uit "eenvoudige" rijen, dus gewone divs met een hoogte. Voor de kolommen gebruik je div en voila! Er kan niets mis gaan met andere browsers!

Keep it simple!

Toevoeging: opvulling kan je vaak ook wel bereiken door achtergrondafbeeldingen. Dan wordt het niet echt opgevuld, maar lijkt het wel zo.

[ Voor 16% gewijzigd door wackmaniac op 01-04-2008 10:38 ]