Footer onderaan en achtergrond over hele pagina

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

M o

m o

23/02/2011 15:40:11
Quote Anchor link
Ik wil graag de footer onder aan de pagina hebben (onder aan de pagina, niet onder in beeld!) en ik wil graag dat de div #contentinhoud een height heeft van de hele pagina en ik dus geen open stuk aan de onderkant heb in het geval er maar wijnig content op de pagina staat.

hier mijn huidige index:

Quote:
<body>
<div id="container">
<div id="header"> </div>
<div id="contentinhoud">
<div id="menutopbar">Menu Test </div>
<div id="contentTA">Menu Test</div>
<div id="wsfooter"> Footer Test</div>
</div>
</div>

</body>


Hier de css:
Quote:
html {
height: 100%;
margin: 0;
padding: 0;
}

body {
width: 100%;
text-align: center;
background-image: url(../images/backgroundrepeat.png);
background-repeat: repeat;
margin: 0;
padding: 0;
min-height: 100%;
}

#container {
width:1002px;
margin: auto;
min-height: 100%;
height: auto !important;
position: relative;
overflow: auto;
}

#header {
background-image: url(../images/header.png);
width: 1002px;
height: 213px;
}

#contentinhoud {
background-image: url(../images/backgroundcontent.png);
width: 1002px;
height: 10px;
background-repeat: repeat-y;
min-height: 100%;
height: auto !important;
position: relative;
overflow: auto;
}

#menutopbar {
width: 850px;
height: 25px;
margin-left: 76px;
overflow: hidden;
font-weight: bold;
font-size: 17px;
font-family: "Calibri", Arial, sans-serif;
}

#contentTA {
width: 950px;
margin: 26px;
text-align: left;
font-family: "Calibri", Arial, sans-serif;
font-size: 15px;
min-height: 100%;
height: auto !important;
overflow: hidden;
}

#wsfooter {
height: 24px;
overflow: hidden;
position: bottom center;
}
 
PHP hulp

PHP hulp

11/05/2024 13:06:30
 
Wouter J

Wouter J

23/02/2011 15:43:24
Quote Anchor link
Voor de footer onderaan: Clearen
En voor de content even lang als de sidebar: zoek eens op faux column(voorbeeld)
 
M o

m o

24/02/2011 14:18:43
Quote Anchor link
Wouter J op 23/02/2011 15:43:24:
Voor de footer onderaan: Clearen
En voor de content even lang als de sidebar: zoek eens op faux column(voorbeeld)


Dit is niet wat ik zoek, ik wil graag dat mijn footer onderaan mijn pagina komt staan en als mijn pagina maar de helft van het beeldscherm is wil ik graag dat deze alsnog helemaal onder aan in het scherm komt te staan en dus niet direct onder de content.
Ook wil ik graag dat de div #contentinhoud helemaal verlend word tot de onderkant van het scherm, en niet tot het eind van de content in div
 
Wouter J

Wouter J

24/02/2011 14:22:29
Quote Anchor link
Dan had ik je vraag verkeerd begrepen. Voor de footer helemaal onderaan moet je eens zoeken op Sticky Footer.
En voor de content inhoud tot aan de footer moet je een beetje puzzelen met position: relative; en height: 100%;. Daar heb ik volgens mij nog wel een voorbeeldje van.
 
M o

m o

24/02/2011 15:40:16
Quote Anchor link
Mijn html ziet er nu zo uit:
Quote:
<body>
<div id="container">
<div id="header"> </div>
<div id="contentinhoud">
<div id="menutopbar">Menu Test </div>
<div id="contentTA">Menu Test</div>
</div>
</div>
<div id="wsfooter"> Footer Test</div>
</body>


en mijn css:
Quote:
* {
margin: 0;
}

html {
height: 100%;
margin: 0;
padding: 0;
}

body {
width: 100%;
text-align: center;
background-image: url(../images/backgroundrepeat.png);
background-repeat: repeat;
margin: 0;
padding: 0;
height: 100%;
}

#container {
width:1002px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: auto;
}

#header {
background-image: url(../images/header.png);
width: 1002px;
height: 213px;
}

#contentinhoud {
background-image: url(../images/backgroundcontent.png);
width: 1002px;
height: 10px;
background-repeat: repeat-y;
min-height: 100%;
height: auto !important;
height: 100%;
}

#menutopbar {
width: 850px;
height: 25px;
margin-left: 76px;
overflow: hidden;
font-weight: bold;
font-size: 17px;
font-family: "Calibri", Arial, sans-serif;
}

#contentTA {
width: 950px;
margin: 26px;
text-align: left;
font-family: "Calibri", Arial, sans-serif;
font-size: 15px;
min-height: 100%;
height: auto !important;
height: 100%;
padding-bottom: 40px;
overflow: auto;
}

#wsfooter {
width: 1002px;
height: 40px;
background-color: red;
position: relative;
margin: -40px auto 0px auto;
clear: both;
overflow: hidden;
}


De footer staat nu onderaan (de fout die ik zelf eerder had gemaakt was dat de div in de container stond ipv er buiten), nu heb ik alleen nog het probleem dat de div #contentinhoud niet tot aan de onderkant van de browser verlengt word
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.