Archief - footer onderaan pagina

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.

Ion1c

Legacy Member
hoi, Heb al een tijd zitten furrelen in html en slaag er maar niet in om mijn footer onderaan de pagina te krijgen. Deze staat onderaan men scherm, maar niet onderaan de content. (footer is div6)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:180px;
	z-index:1;
	background-color: #FF9933;
}
#apDiv2 {
	position:absolute;
	left:50%;
	top:0px;
	width:760px;
	height:180px;
	margin-left:-380px;
	z-index:2;
	background-color: #FFFFFF;
}
#apDiv3 {
	position:absolute;
	left:0px;
	top:180px;
	width:100%;
	height:60px;
	z-index:3;
	background-color: #000000;
}
#apDiv4 {
	position:absolute;
	left:50%;
	top:240px;
	width:225px;
	height:800px;
	margin-left:-380px;
	z-index:4;
	background-color: #FF33CC;
}
#apDiv5 {
	position:absolute;
	left:50%;
	top:240px;
	width:535px;
	height:800px;
	margin-left:-155px;
	z-index:5;
	background-color: #FF33CC;
}
#apDiv6 {
	position:absolute;
	left:0px;
	bottom:0px;
	width:100%;
	height:60px;
	z-index:6;
	background-color: #000000;
}

-->
</style>
</head>
<body>
<div id="apDiv1"></div>
<div id="apDiv2">
  <div align="center"><em><strong>BANNERD</strong></em></div>
</div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
</body>
</html>

adrianhates

Legacy Member
ik peis dat dat met uw position absolute te maken zal hebben..
ge kunt best ook uw divs nog is in ne container zetten..

Die position is hier trouwens ook geheel onnodig
je kan het veel makkelijker doen
Code:
<div id="container">
[INDENT]<div id="header">
</div>[/INDENT]
[INDENT]<div id="content">
</div>[/INDENT]
[INDENT]<div id="footer">
</div>[/INDENT]
</div>

Ion1c

Legacy Member
ok kwil da wel in een container zetten en al, ma weet eigenlijk nie echt hoe en wat er dan zal gebeuren (ben een leek in html). En door google kom ik ook niet echt wijzer.
:help:

adrianhates

Legacy Member
leer dan eerst wat alle functies zijn van css e.d. voor je ze klakkeloos door mekaar begint te gebruiken..

Op w3schools vind ge daar veel informatie van en kunt ge da live testen met de try it editors

Ion1c

Legacy Member
ok weet nu ondertussen hoe dat elkaar zit, maar die footers staan nog altijd onderaan men scherm, maar niet onderaan de pagina. heb al paar tutorials geprobeerd, maar als ik een content heb waardoor ik moet scrollen dan blijft die footer onderaan men scherm en nie onderaan de pagina waardoor hij achter de content loopt.
zo iets werkt bv nie -> Making Your Footer Stay Put With CSS ~ Blog ~ FortySeven Media

GregoryCo

Legacy Member
Het is niet bottom dat je op 0 moet zetten he, maar top

Code:
#apDiv6 {
	position:absolute;
	left:0px;
	[B]top[/B]:0px;
	width:100%;
	height:60px;
	z-index:6;
	background-color: #000000;
}

probeer dat eens
als het niet werkt met px, probeer dan mss eens 0%

Ion1c

Legacy Member
[B!'X!R']['@(V);11172138 zei:
Het is niet bottom dat je op 0 moet zetten he, maar top

Code:
#apDiv6 {
	position:absolute;
	left:0px;
	[B]top[/B]:0px;
	width:100%;
	height:60px;
	z-index:6;
	background-color: #000000;
}

probeer dat eens
als het niet werkt met px, probeer dan mss eens 0%

nope, ma kvind et raar dat hij de footer onderaan men beeld zet, maar nie onderaan de pagina.

GregoryCo

Legacy Member
of probeer eens position relative, probeer gewoon verschillende dingen, of probeer een div aan te maken om al uw divs in te stoppen zoals adrianhates zei

ofwel margin-top:0px; ipv bottom

j design

Legacy Member
Is het gewoon een sticky footer dat je wilt?
Make a Footer Stick to the Bottom of the Page

Snel wat bedoelt wordt

Omsluitende div die je een neg bottom margin geeft, diezelfde waarde geef je de hoogte van de push, deze zorgt ervoor dat je content voldoende ruimte heeft en de footer er niet over komt.
Dan de footer die de push zowat gaat opvullen.

adrianhates

Legacy Member
aaah sorry , khad eigelijk niet door dat je hem onderaan wou laten plakken, ook als je scrolde.. :)
je bedoelt zoiets als die bar bij facebook vanonder?

GregoryCo

Legacy Member
ah zo'n footer? dan moet je toch alleen maar bottom:0%; nemen en position:fixed; niet?
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan