Tijden veranderen
Footer komt niet onderaan te staan...
Ik zit met een probleem namelijk:
Mijn footer wil zich niet onder de container plaatsen.
Ik gebruik de volgende indeling:
Quote:
<div id="header">
<div id="wrapper"></div>
</div>
<div id="nav">
<div id="wrapper"></div>
</div>
<div id="container">
<div id="wrapper">
<div id="content"></div>
>div id="sidebar"></div>
</div>
</div>
<div id="footer">
<div id="wrapper"></div>
</div>
<div id="wrapper"></div>
</div>
<div id="nav">
<div id="wrapper"></div>
</div>
<div id="container">
<div id="wrapper">
<div id="content"></div>
>div id="sidebar"></div>
</div>
</div>
<div id="footer">
<div id="wrapper"></div>
</div>
Dit is mijn css:
Quote:
#wrapper{
margin: 0 auto 0 auto;
width: 980px;
}
#header{
height: 180px;
background: url('header.jpg') repeat-x;
}
#nav{
height: 70px;
background: url('nav.jpg') repeat-x;
}
#container{
min-height: 500px;
background: #ebebeb;
}
#content{
float: left;
width: 700px;
padding-left: 30px;
padding-top: 30px;
padding-bottom: 30px;
}
#sidebar{
float: left;
width: 190px;
margin-left: 30px;
margin-top: 100px;
}
#footer{
height: 39px;
background: url('footer.jpg') repeat-x;
}
margin: 0 auto 0 auto;
width: 980px;
}
#header{
height: 180px;
background: url('header.jpg') repeat-x;
}
#nav{
height: 70px;
background: url('nav.jpg') repeat-x;
}
#container{
min-height: 500px;
background: #ebebeb;
}
#content{
float: left;
width: 700px;
padding-left: 30px;
padding-top: 30px;
padding-bottom: 30px;
}
#sidebar{
float: left;
width: 190px;
margin-left: 30px;
margin-top: 100px;
}
#footer{
height: 39px;
background: url('footer.jpg') repeat-x;
}
Maar als ik dit ga testen komt mijn footer op dezelfde plaats te staan als de container. Het formaat en de background zijn dan wel precies zoals ik wil.
Dit probleem kan ik oplossen om bij de footer de optie float in te voeren, maar dan wordt de background van de footer niet meer over de hele pagina breedte weergegeven en is dan dus 980px breed en links uitgelijnd. Terwijl de bedoeling is dat de background over de hele pagina te zien is en de tekst van de footer 980px breed is en in het midden van de browser wordt gezet.
Kan iemand mij helpen?
Alvast bedankt
EDIT:
Ik kom er nu achter dat dit alleen het geval is bij FF en GC.
IE gaat er wel mee om zoals het hoort.
Gewijzigd op 22/08/2011 17:06:59 door Jowin de Bondt
Jowin de Bondt op 22/08/2011 16:21:52:
EDIT:
Ik kom er nu achter dat dit alleen het geval is bij FF en GC.
IE gaat er wel mee om zoals het hoort.
Ik kom er nu achter dat dit alleen het geval is bij FF en GC.
IE gaat er wel mee om zoals het hoort.
Ik denk eerder het omgekeerde. FF en GC laat zien zoals het hoort en IE zoals je graag zou willen dat het zou zijn. ;-)