[CSS] div position vragen.

[saviour]

Goed'dag iedereen

Ik ben pas begonnen aan het maken van een kleine site voor mezelf, dit deed ik eerst met behulp van tabellen, zoals je hier kunt zien.

Echter, nadat ik meer had gelezen over CSS etc en een aantal discussies in dit subforum, heb ik geprobeerd om datzelfde te maken, maar dan in CSS.

Nu moet ik zeggen dat het mij redelijk gelukt is om hetzelfde na te maken. Dat valt hier te zien.

Je kan hier mijn stylesheet zien. Meteen door de validator gehaald, dus het zou goed moeten zijn.

Toelichting op de desbetreffende classes:

.logo is de bovenste div waar "logo" instaat.
.menu spreekt ook voor zich.
.body is de div met daarin "This is some text".
.powered is de div met de plaatjes erin.
.vhtml is voor het "valid html" plaatje.
.vcss is voor het "valid css" plaatje.
.deb is voor het "powered by debian" plaatje.
.apache is voor het "powered by apache" vraagje.

Ik kamp alleen met een probleem;

Als je kijkt naar de versie die gebruik maakt van tabellen, zie je dat de onderste cel (met de "powered by" logo's erin) netjes onder de "body" cel wordt gezet.
Standaard is de "body" cel net groot genoeg om goed weergegeven te worden bij 1024 * 768 en als je er meer tekst inzet, wordt hij gewoon groter en verschuift de onderste cel netjes mee.

Nu probeer ik datzelfde voor elkaar te krijgen met CSS, het lukt me alleen niet.
Als ik een absolute position meegeef aan die "powered by" div, staat hij er netjes onderaan. Maar zodra de "body" div groter wordt, verschuift hij niet mee. Ik kreeg het ook niet voor elkaar met een relative position, omdat ik hem niet relatief kreeg aan die andere div

Ik heb gezocht hier en op w3schools etc. Maar nu moet ik zeggen dat ik zo snel niet een oplossing zag, waarschijnlijk ook omdat ik niet echt weet waar ik precies op moet zoeken (behalve "css div position").

De site doet het trouwens prima onder IE6 en opera7, maar niet onder Opera6.05. Is dat een fout van mijn kant, omdat ik eigenlijk andere CSS had moeten gebruiken?

Ik hoop dat het verhaal duidelijk genoeg is.
Als het zo simpel is dat ik het niet had mogen plaatsen etc, geef me dan ajb een sluitpost met daarin een richting om te zoeken

Hartelijk dank,

[ Voor 16% gewijzigd door saviour op 23-03-2003 17:10 ]

[Verwijderd]

wanneer je niet werkt met absolute posities word alles netjes onder elkaar gezet. Je kan dan met float: left, float: right positioneren op het scherm. Zie ook (http://www.compazg.nl/new). De navigatie onderaan wordt op 15px van het laagste object gezet, zodat deze altijd mooi onderaan staat.

Om een div zijn hoogte te kunnen berekenen met javascript moet je deze niet in de externe stylesheet zetten, maar inline. Dus bv. <div id="myDiv" style="height: 100px"></div>. Je kan dan met javascript de hoogte pakken van de DIV. Let op hierbij dat verschillende versies browsers verschillende aanpakken nodig hebben. (bv. getElementById, de nieuwste browsers ondersteunen deze methode).

code:

var hoogte = document.getElementById("myDiv").style.height;
document.getElementById("andereDiv").top = hoogte + 15;

Trouwens, wat een heerlijke post, mijn complimenten, zo zouden elke post gesteld moeten worden (incl. de mijne )

Ik zie dat je je site nu nog html 4.01 transitional hebt, waarom probeer je niet XHTML 1.1 stict nu je toch bezig bent?

[ Voor 28% gewijzigd door Verwijderd op 23-03-2003 17:34 ]

[drm]

De stijl hoeft niet inline gezet te worden. De (evt. door de browser berekende) hoogte en breedte van een element kun je resp. opvragen met offsetHeight en offsetWidth.

edit:

En dit geldt dan ook voor offsetLeft en offsetTop overigens...

[ Voor 18% gewijzigd door drm op 23-03-2003 17:37 ]

[Verwijderd]

kijk eens, dat wist ik niet... thnx!!

[saviour]

Nou, kijk eens aan

Ik ga nu even het één en ander proberen. Als dit lukt kijk ik dalijk wel naar XHTML, wat het is etc.

Hartelijk dank, ik edit deze post dalijk wel

edit:
Het wil nu wel veel beter lukken zoals weer te zien op http://soulz.org/~saviour/test.html

Dit gebruik ik daar nu voor (dit is van de .menu class):

position: relative;
top: 15px;
left: 50px;
float : left;

Het onderste divje verplaatst nu mooi mee
Er kloppen alleen 3 dingen niet;

- De laatste regel in de "body" div wordt er buiten geplaatst ipv erbinnen (opera).
- De onderste div moet ik zo positioneren:
position: relative;
float: left;
top: 30px;

Om heb 15 pixels onder de "body" div te krijgen. hoe komt dit? Ik kan de andere divjes namelijk wel positioneren met "top: 15px;".

- In opera laat hij mooi de hele pagina zien, alleen in IE laat hij slechts een gedeelte van de onderste div zien .

Iemand nog tips hoe ik het beter kan maken?

Ohja, ik weet dat de plaatjes nog niet goed staan, dat doe ik morgen wel

edit:
http://validator.w3.org/c...Esaviour%2Ftestxhtml.html

Simpel een doctype instellen is niet voldoende
Maar ook dat is iets om morgen mee aan de slag te gaan...

[ Voor 95% gewijzigd door saviour op 24-03-2003 12:05 ]

[saviour]

Ik heb nou wel een geldige XHTMl 1.0 pagina:
http://soulz.org/~saviour/test.html

Alleen de problemen zijn er nog steeds.
IE schaalt de "body" div mooi mee, waardoor alles erin past, alleen laat hij de "powered by" div niet helemaal zien.

Opera laat de "powered by" div wel goed zien, maar schaalt de "body" div niet, waardoor niet alles erin past.

Er zal vast ergens een denkfout van mij zitten.
Het liefste heb ik dat hij alle divjes goed laat zien En dat de "body" div netjes geschaald wordt, zodat ik niet per pagina een hoogte hoef in te stellen.

edit:
Nu laat hij de pagina bijna goed zien in IE, behalve 1 image (rechtsonderin). Maar onder opera klopt het nog steeds niet. Ik kom er iig niet uit

[ Voor 25% gewijzigd door saviour op 24-03-2003 15:42 ]