[HTML-CSS] div loopt over ander div heen... - Softwareontwikkeling

zaterdag 21 juli 2007 17:29

Acties:

Topicstarter

Ik ben bezig met een pagina. Hier heb ik een head (1 div), content (2 div's) en footer-gedeelte (1 div) in geplaatst. Deze staan allemaal in een container-div.

Nu kan ik de div van de content een bepaalde height geven en hier de height van de container op aanpassen, maar aangezien iedere pagina een andere hoeveelheid content heeft, heb ik de content een height:auto gegeven met css. De container heb ik ook height:auto, min-height:100% en height:100% meegegeven.

Het probleem:
Nu wordt de container te kort, de content-div steekt er uit, zie afbeeldingen. Het probleem doet zich voor in FF en IE7 en lager.

Zoals ik het wil:
Afbeeldingslocatie: http://upload.dezoete.net/test1.png

Afbeeldingslocatie: http://upload.dezoete.net/test1.png

Zoals het nu is:
Afbeeldingslocatie: http://upload.dezoete.net/test2.png

Ik heb vanalles geprobeerd, o.a. relative/absolute positioneren, padding en margin geprobeerd, min-height, display:inline, div's uit de container gehaald, en andere probeersels, maar tot nu toe heeft nog niets geholpen.

De container is relative gepositioneerd en de andere div's absolute, maar ook als ik die relative positioneer doet het probleem zich nog voor.

Weet iemand misschien waardoor dit zich voordoet en hoe ik het kan oplossen?

Hier nog even de relevante code (html+css):

HTML:

<body>
<div id="container">
     <div id="header"></div>
     <div id="1"></div>
     <div id="2"></div>
     <div id="3"></div>
</div>
</body>

Cascading Stylesheet:

html, body {
height:100%;
}

div#container {
position:relative;
margin-left: auto; 
margin-right: auto;
min-height: 100%;
height:auto !important; /* voor moderne browsers */
height:100%; /* voor IE */
}

div#header {
position:absolute;
top:24px;
left:196px;
height:190px;
width:585px;
}

div#1 {
position:absolute;
top:233px;
left:17px;
height:auto;
width:560px;
}

div#2 {
position:absolute;
top:233px;
left:596px;
height:auto;
width:159px;
}

div#3 {
position:absolute;
bottom:24px;
left:17px;
height:40px;
width:764px;
}

[ Voor 34% gewijzigd door Cadezo op 21-07-2007 17:53 ]

zaterdag 21 juli 2007 17:37

Acties:

guanche

Cascading Stylesheet:

#container {
 margin: 5px;
}
#div1 {
 float:left;
 margin-right: 10px;
 margin-bottom: 5px;
}
#div2 {
 float: left;
 margin-bottom: 5px;
}
#div3 {
 clear: both;
}

HTML:

<div id="container">
 <div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
</div>

edit: Ik heb hem niet getest, maar je probleem zal opgelost worden met clear: both; in je 3e div en geen height 100% gebruiken.

[ Voor 16% gewijzigd door guanche op 21-07-2007 17:38 ]

zaterdag 21 juli 2007 18:00

Acties:

Cadezo

Topicstarter

guanche schreef op zaterdag 21 juli 2007 @ 17:37

ik heb het even getest, maar als ik die height:100% weglaat, dan wordt de div_container nog kleiner, komt dan boven div1 te staan.

ik heb trouwens wel een oplossing, maar wel een hele omslachtige, namelijk:
Ik maak van een php-bestand een CSS met de juiste header. Daardoor kan ik dan met behulp van de url die opgevraagd wordt bepalen welke pagina het is en welke hoogte de container dan moet hebben en deze dan echo'en, alleen dat is wel een beetje omslachtig als je veel pagina's (ca. 30) hebt.

ik zat ook nog te denken aan een javascript: je vraagt dan de hoogte van div1 op, daar tel je een aantal px bij op (i.v.m. de footer, tussenruimte) en die laat je vervolgens de hoogte van de container zijn, alleen kan je volgens mijn geen javascript in je CSS plaatsen...

zondag 22 juli 2007 11:37

Acties:

guanche

Aah. Ik heb er verder niet in opgenomen om het ook de volledige pagina te laten vullen. Maar als je er genoeg text in div 1 zet zal het zeker wel werken.

Je php oplossing lijkt me niet zo een strak plan, gezien het veel werk is, en je nooit een pagina langer kan maken zonder weer wat te programmeren.

Er zijn goede css oplossingen om div3 aan de benedenkant van je pagina te laten plakken. Volgens mij staat er één op de quirksmode website. Ik zal nog wel even zoeken...

Edit: Een oplossing voor je zou footerstickalt kunnen zijn. Zo kan je een fluid opmaak behouden (dus geen absoluut gedefiniëerde divs) en een footer weergeven. De negatieve margin op de footer is de hoogte van je footer uiteraard. Wel moet je de footer buiten de container plaatsen. Dit samen met de code van mij hierboven zal zeker moeten werken. Succes!

[ Voor 31% gewijzigd door guanche op 22-07-2007 12:01 ]

zondag 22 juli 2007 14:53

Acties:

Cartman!

Niet de oplossing maareh: waarom wil je dat de pagina uitrekt tot volledige scherm grootte? Laat lekker de content bepalen hoe hoog je pagina wordt, nog mooier ook imo.
Overigens is absolute positionering niet wat je wilt gebruiken hiervoor, dat even vooropgesteld. En in guanche zn voorbeeld niet terug te vinden maar zet overal even 'position:relative' bij om problemen te voorkomen in verschillende browsers.

zondag 22 juli 2007 16:51

Acties:

Cadezo

Topicstarter

Cartman! schreef op zondag 22 juli 2007 @ 14:53:
Niet de oplossing maareh: waarom wil je dat de pagina uitrekt tot volledige scherm grootte? Laat lekker de content bepalen hoe hoog je pagina wordt, nog mooier ook imo.

Ik laat de content ook de hoogte bepalen, wilde alleen dat div3 onder div1 zou komen te staan, ongeacht de hoogte van div1...

Het is inmiddels gelukt!

Ik heb gebruik gemaakt van 2 stylesheets...

Voor Firefox, Opera, Safari, etc.:
Ik heb div1 en div3 static gepositioneerd, daarna met margin en padding geplaatst. Misschien niet de beste oplossing, maar het werkt perfect...

Voor IE:
Ik heb div1 een float:left, meegegeven. Daarna heb ik div3 static gepositioneerd. Geeft precies hetzelfde effect als FF.

Guanche bedankt voor de tip van floats gebruiken!