[css] content DIV pakt meer dan 100%

[Verwijderd]

Ik heb het volgende probleem:

Er zijn twee divjes. De eerste staat bovenaan en de tweede daaronder. Allebei zijn ze absoluut in het midden gepositioneerd. De eerste heeft een hoogte van 170px en de tweede volledige 100%. Wat er dan gebeurd is dat de tweede DIV eerst kijkt wat 100% van de container is (wat 100% van het scherm is) en vervolgens wordt ie neergezet. wat dus resulteerd dat mijn pagina vergroot wordt met de hoogte van de eerste DIV.
De tweede DIV is om layout redenen 100%.

Het maakt niet uit of je nou de de top, de margin-top of de padding-top van de tweede DIV veranderd.

code:

.container{
    margin-left: -300px;
    margin-right: auto;
    left: 50%;
    top: 0px;
    height: 100%;
    width: 600px;
    border: 0px solid #000000;
    position: absolute;
}

.div_main{ 
    margin-top: 170px;
    height: 100%;
    width: 600px;
    border: 0px solid #000000;
    position: absolute;
    background-image:  url("../images/bg_content.gif");
    background-repeat: repeat-y;
}

.div_flash{
    position: absolute;
    margin-right: auto;
    margin-left: -300px;
    left: 50%;
    top: 0px;
    height: 170px;
    width: 599px;
    border: 0px solid #000000;
}

hier is de div_main de tweede DIV en de div_flash de eerste

[Rowanov]

Je geeft .div_main een hoogte van 100% (hoogte van de viewport) en daarna een top marge van 170px. Dan is het wenselijk gedrag als hij 170px naar beneden gaat en je dus een scorllbar krijgt. Je kan het oplossen door een compleet andere opzet te nemen zonder absolute positionering. Ook voor je centreren kan je beter margin: 0 auto; gebruiken.

[Verwijderd]

Daar was ik inderdaad achter en het is ook zeker wel logisch. Maar ik wil graag met CSS werken voor mijn layout en wat ik wil is dat de site in het midden gaat staan met een width van 600px. Verder moet een header van flash komen met daaronder de content die variabel is. Daarna als dat lukt moet er ook nog een footer komen...

Dus ja.. enige suggesties!?

[Rowanov]

Voor het centreren wel; de rest probeer ik even in een voorbeeldje te frutten.

Cascading Stylesheet:

body {
  text-align: center;
}
#container {
  width: 600px;
  margin: 0 auto;
  text-align: left;
}

Edit: deze site lijkt te doen wat jij wilt, in plaats van de * html hack moet je dan wel conditional comments gebruiken om het netjes te houden.

[ Voor 33% gewijzigd door Rowanov op 21-06-2006 17:47 ]

[Verwijderd]

het komt wel in de richting inderdaad. Ik heb het toegepast en het is te zien op:

http://www.tsp-computerdiensten.nl/

hier is de css:

code:

html {height:100%;}
body {
margin:0; 
padding:0; 
height:100%;
background-color:#ffffff;
}
#wrap {
min-height:100%;
position:relative;
left: 50%;
margin-left: -300px;
margin-right: 0px;
background-image: url("../images/bg_content.gif");
background-repeat: repeat-y;
}
* html #wrap {height:100%}

#clearfooter {
clear:both;
height:80px;
overflow:hidden;
}
#footer {
position:absolute;
bottom:0;
height:80px;
width:600px;
background-image: url("../images/bg_content_bottom.gif");
background-repeat: no-repeat;
}

edit:
ik heb de background image van #wrap in een #content gezet, maar dan krijg je alleen maar de background te zien van het gedeelte wat content heeft.

[ Voor 14% gewijzigd door Verwijderd op 29-06-2006 12:11 ]

[riezebosch]

Hier worden wel aardig wat mooie voorbeelden gegeven, en met name dit is wel een toffe uitwerking (let op de scrolling)

Blijkbaar stelt ie de marge van de body in en legt dan vervolgens de layers er rondom absolute overheen Vind het de scrolling zelf wat minder, niet echt intuïtief zeg maar. Sowieso mogen van mij het menu en dergelijke wel wegsrollen op een lage resolutie. Maar het idee is wel leuk.

[ Voor 37% gewijzigd door riezebosch op 22-06-2006 00:01 ]

[Verwijderd]

Het probleem is inderdaad op te lossen door de hierboven genoemde links te volgen en te bekijken. Mij heeft het teveel tijd al gekost, dus mijn oplossing is dat ik de footer gewoon tegen de content aan heb geplakt. Er is altijd wel genoeg content zodat het er niet lelijk uit ziet...
Dank voor jullie hulp..