PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
R

css ik snap het niet

Door Roel op 24-11-2005 20:30
3.231 views
ik probeer iets super simpels te maken, 1 div widht 100% een bg color, een 2e div in de 1e div widht 100px en ook een bg color :

.div1 {
position: relative;
background-color: #BCD4EA;
height: 10px;
width: 100%;
}

.div2 {
position: absolute;
background-color: #000000;
height: 10px;
width: 100px;
}

en mijn HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
<html>
<head>
<title>Admin</title>
<link rel="stylesheet" type="text/css" href="D:/webserver/styles/fileManager.css"/>
</head>
<body>

<div class="div1">
<div class="div2">
</div>
</div>

</body>
</html>

iemand een idee wat ik verkeerd doe ? ik heb al geprobeerd de margins op 0 of auto of beide te zetten, ik heb geprobeerd de overflow in te stellen, maar ik snap het niet meer
R
Roel
24-11-2005 20:50 gewijzigd op 24-11-2005 20:51
op mijn pagina zie ik in mozilla helemaal niks. Hij plaatst de div's daar niet ? als ik de source bekijk van dezelfde pagina in ie wel divs in mozilla geen divs ? nu breekt mijn klomp :D

edit : oops wel divs, maar geen colors ? moet er in mozilla iets in de divs staan voordat hij deze laat zien ofzow ?
Jan Koehoorn
24-11-2005 20:51
Als je een element op position is absolute zet wordt hij uit de 'flow' van de pagina gehaald. Hij behoudt inderdaad zijn positie ten opzichte van zijn "parent", maar die parent weet niet meer hoe hoog zijn "child" is.
Jan Koehoorn
24-11-2005 20:59
Roel, geef eens een beschrijving van het doel van deze lay-out?
R
Roel
24-11-2005 21:00 gewijzigd op 24-11-2005 21:02
nou misschien dat dit duidelijker is, dit probeer ik te maken, de hoogte van het block is afhankelijk van de grootte van de tekst die erin komt, verder wil ik in 1 van de overige vlakken een plaatje, die sowieso kleiner is als de tekst die erin komt en dus zou ik deze verticaal willen centreren of met een padding op juiste hoogte brengen, maar zoals jullie merken kan ik nog geeneens 2 divs in elkaar zetten welke er in mozilla hetzelfde uitziet als in IE

http://213.46.223.78/images/voorbeeld.JPG

mijn doel is div's leren te begrijpen. In de tutorials die ik gelezen heb is het allemaal zo simpel, misschien omdat ik de voorbeelden van deze tutorials niet met mozilla bekeken heb.

in het plaatje wil ik de "totale" div (container ofzo) wel 100% hebben.
Jan Koehoorn
24-11-2005 21:02 gewijzigd op 24-11-2005 21:04
Is het voor een navigatie-menu?

EDIT:

overigens vind ik het dapper dat je CSS probeert te leren :-)
R
Roel
24-11-2005 21:05 gewijzigd op 24-11-2005 21:06
nee, ik wil gewoon heel graag met div's werken. ik heb al wel iets gemaakt : http://213.46.223.78/index.php met divs, dit is me (naar mijn doen :P ) goed gelukt. Nu wil ik iets wat mij veel simpeler lijkt en werkt het niet in mozilla..

EDIT: dankje, nu maar hopen dat ik het ook echt zal gaan "begrijpen" :)
Jan Koehoorn
24-11-2005 21:10
Die ziet er hier goed uit.
R
Roel
24-11-2005 21:13
dankje, maar een divje in een ander divje lukt met dan weer niet :-) mozilla vertikt het gewoon :-(
Jan Koehoorn
24-11-2005 21:21
Om een rijtje vakken te makken, kun je beter geen div in een div stoppen. Het gaat veel makkelijker met een unordered list. Zal ik daar een voorbeeldje van maken?
R
Roel
24-11-2005 21:23 gewijzigd op 24-11-2005 21:24
ok, ik ben een stap verder. Mozilla bleek de stylesheet niet te pakken, nu pakt hij deze wel.

Nu heb ik dit : http://213.46.223.78/admin/index.php

als je deze pagina met firefox en IE bekijkt zie je ( iig ik :-) ) dat de balk in mozilla veel "lager" is dan in IE. Enig idee hoe dit komt ?

unorderd list zegt me niks. Is het een <ul> <li> gebeuren ? ja ik zou heel graag een voorbeeldje zien, bedankt alvast !

Reageren

Inloggen om te reageren