[XHTML/CSS] DIVs probleem

[Xurk]

Hallo iedereen!

Ik ben voor het eerst een website volledig DIV-gebaseerd aan het maken, dus zonder tabellen, cellen en al die meuk. Kortom: zoals het eigenlijk moet [volgens de W3]

Het ging allemaal heel aardig, totdat ik bij een DIV kwam die ik "omdat het er cool uitziet" een beetje apart wilde plaatsen. Ik kan het met woorden niet uitleggen, dus even wat screenshots:

Zo moet het er uiteindelijk uit komen te zien [dit is met Photoshop bereikt]
Dit is de situatie in IE6
Dit is de situatie in FF2

Zoals je kunt zien, heeft die "rare" DIV moeite met de andere overlappen, ook als ik met z-indexes kloot. En het lukt wel als ik ook nog position op relative zet en top een negatieve waarde geef, maar dat hoort niet zo, en bovendien blijft de ruimte waarin de DIV zich oospronkelijk bevond [dus als top 0px zou zijn] benut door niets, waardoor als ik daar content wil plaatsen, dat op zijn beurt ook weer een negatieve top moet krijgen etc... dus dat schiet niet op.
De tekst heb ik trouwens wel zo kunnen laten lopen in die DIV door gebruik te maken van enkele spacer.gifs [die witte blokjes die je ziet].

Wat ook in het oog springt, is dat de main DIV [alle DIVs zijn trouwens voor de duidelijkheid even voorzien van borders] niet 100% height heeft, terwijl dat wel hoort. Daardoor lukt het ook niet om de footer DIV precies tegen de onderkant aangeplakt te krijgen, tenzij ik weer met negatieve bottom waarden ga kloten, wat dus kut is. En in FF2 is die footer div al helemaal verneukt, te zien aan de tekst die onder het geheel komt in plaats van in de DIV... en ook in FF2 zie je dat een paar DIVs buiten de main DIV vallen.

Kortom: ik ben het zo onderhand een beetje zat, en vraag hierbij of er iemand nog wat tips heeft

De HTML pagina
Het CSS bestand

Alvast bedankt!

[Xurk]

*subtiele kick*

Niemand ideeën?

[Arunia]

Kun je niet gewoon aangeven waar de Layer op de Z-as moet komen te staan? Dan zorg je er voor dat de leuke vorm achter de andere 2 komt. Overigens geen idee of dit dan ook zo werkt.
In dreamweaver kun je dit aan de rechterkant (bovenste tabblad layers) gewoon aangeven.

Voor je CSS kun je gewoon z-index: 1 t/m oneindig ; invullen.
Dit moet je dan ook voor de andere layers of in iedergeval voor diegene die overlappen doen.

Daarnaast kun je op die manier met invisible en behaviors ook menu's maken.(is ook wel heel erg grappig om te doen).

[ Voor 34% gewijzigd door Arunia op 01-02-2007 11:37 ]

[BtM909]

Je past CSS verkeerd toe. Position: relative en posities opgeven (top en left) werkt niet echt samen

Wat je makkelijk kan doen is eerst een globale indeling maken ipv meteen 1600 divjes proberen te positioneren Geef bijvoorbeeld eens aan wat je met die 'blokjes' wilt doen. Zonder verder ervanaf te weten, zie ik maar drie main gebieden: header, content en footer... Focus eerst daarop en ga doen onderdelen toevoegen

HTH

[Arunia]

Dat was dus wat ik zag aan het CSS.
Je hoeft niet alles op te vullen met lege DIVjes.
Handig is om een main DIV te maken waar je de rest in positioneert.
Als je vaste waardes aangeeft, zullen ze bij het verkleinen van het browser scherm ook niet gaan verschuiven.
Er is ook een manier om bijvoorbeeld je pagina altijd te centreren dmv dat main DIVje.

[Xurk]

Allereerst, bedankt voor de reacties

Arunia schreef op donderdag 01 februari 2007 @ 11:32:
Kun je niet gewoon aangeven waar de Layer op de Z-as moet komen te staan? Dan zorg je er voor dat de leuke vorm achter de andere 2 komt. Overigens geen idee of dit dan ook zo werkt.

Dit heb ik inderdaad al geprobeerd, door alle blokjes die elkaar zouden moeten overlappen z-indexes te geven, maar het is zo ook niet gelukt; dat vond ik wel vreemd, aangezien ik wel vaker DIVs heb laten overlappen met z-index, dus misschien is er iets anders in mijn HTML/CSS wat het overlappen tegenhoudt...

Daarnaast kun je op die manier met invisible en behaviors ook menu's maken.(is ook wel heel erg grappig om te doen).

Inderdaad, dat heb ik ook weleens gedaan, érg handig!

BtM909 schreef op donderdag 01 februari 2007 @ 11:39:
Je past CSS verkeerd toe. Position: relative en posities opgeven (top en left) werkt niet echt samen

Hmm, dan heb ik het altijd verkeerd gedaan denk ik. Ik heb altijd "position: relative" gebruikt om een element ten opzichte van zijn parent-element's width en height te positioneren. Maar jij zegt dus dat top en left eigenlijk alleen voor "position: absolute" zijn?

Wat je makkelijk kan doen is eerst een globale indeling maken ipv meteen 1600 divjes proberen te positioneren Geef bijvoorbeeld eens aan wat je met die 'blokjes' wilt doen. Zonder verder ervanaf te weten, zie ik maar drie main gebieden: header, content en footer... Focus eerst daarop en ga doen onderdelen toevoegen

Dit heb ik ook gedaan; ik heb alleen alles nu heel erg versimpeld om zo verwarring te voorkomen voor de mensen die mij via dit topic proberen te helpen
Er zijn vier main gebieden, header, content, footer inderdaad, en ook menu. De drie grootste blokjes [waaronder dus die "bijzondere"] zijn bedoeld om tekst in te zetten, die twee rechts onder elkaar om random content en een "overflow: auto" in te zetten, die linksonder is om een klein Flash-spelletje in te zetten, en het onderste blokje is bedoeld als een holder voor wat afbeeldingen.
Ik heb dus al deze DIVs al nagenoeg perfect gepositioneerd en werkend, het is alleen die DIV met de spacer.gif's erin waar ik nog over struikel.

Arunia schreef op donderdag 01 februari 2007 @ 11:43:
Handig is om een main DIV te maken waar je de rest in positioneert.
Als je vaste waardes aangeeft, zullen ze bij het verkleinen van het browser scherm ook niet gaan verschuiven.
Er is ook een manier om bijvoorbeeld je pagina altijd te centreren dmv dat main DIVje.

Er is een main DIV aanwezig, deze heet "container" en volgens mij centreert het zoals ik het nu heb altijd alle content zonder dat blokjes verschuiven [er zijn me in ieder geval nog geen fouten opgevallen].

Hopelijk heb ik alle vragen zo een beetje kunnen beantwoorden en kunnen toelichten