[CSS] Footer wil niet zakken :(

Hoi,

Ik heb een probleempje met een site.

http://www.broodjeliefde.be/clients/coc/site/index.php
(never mind the content, is maar dummy)

Zoals je ziet gaat die footer te hoog. bij een langere dummytext zit ie laag genoeg, maar als mijn rechter content kleiner wordt, dan komt de footer hoger.

Kan iemand vertellen wat er fout is, en vooral: kan iemand me vertellen waar ik de fundamentele fout maak in mijn redenering bij de opbouw van de css? Want het zijn dergelijke problemen die me vaak te lang bezig houden.

Dank bij voorbaat,
EL

[code:1:8d5b7881d9]#footer { display:block; position:relative; margin: 20px 0px 0px 0px; padding-top: 12px; font-size: 10px; text-align: center; color: white; background-image: url(../assets/footer_bg.png); background-repeat: repeat-x; height: 68px; background-color: #006DDA; width: 100%; }[/code:1:8d5b7881d9]

probeer

[code:1:8d5b7881d9]#footer {
display:block;
position:relative;
margin: 20px 0px 0px 0px;
padding-top: 12px;
font-size: 10px;
text-align: center;
color: white;
background-image: url(…/assets/footer_bg.png);
background-repeat: repeat-x;
height: 68px;
background-color: #006DDA;
width: 100%;
clear:both;
}[/code:1:8d5b7881d9]

en het zou moeten werken

Nee, toch niet :oops:

Heb je hier al naar gekeken?

A List Apart - Exploring Footers

Even een paar vraagjes, en misschien een mogelijke oplossing ;)

Waarom doe je dit:

[code:1:d3818a1eb2]<a href=’?pageID=1&amp;sectionID=7’>sociaal tolken en vertalen</a><br />
<a href=’?pageID=1&amp;sectionID=8’>kwaliteitskring STVD</a><br />
<a href=’?pageID=1&amp;sectionID=9’>links</a><br /> [/code:1:d3818a1eb2]
In plaats van er een list van te maken zoals:

[code:1:d3818a1eb2]<ul>
<li><a href=’?pageID=1&amp;sectionID=7’>sociaal tolken en vertalen</a></li>
<li><a href=’?pageID=1&amp;sectionID=8’>kwaliteitskring STVD</a></li>
<li><a href=’?pageID=1&amp;sectionID=9’>links</a></li>
</ul>[/code:1:d3818a1eb2]

En ik zie dat je heel netjes div’s gebruikt, maar dan ineens tabellen voor de content… van wat ik kan zien zit daar ook je probleem. Je footer heb je nu als het ware onder je tabellen (je content) geplakt. Als je [b:d3818a1eb2]tussen[/b:d3818a1eb2] je footer en je content een [i:d3818a1eb2]clear:both[/i:d3818a1eb2] gebruikt, zou je van het probleem af moeten zijn.

Maar is het niet makkelijker (in dit geval zeker) om je content gewoon netjes op te maken met “p” en headertags (h1, h2, h3)? Dat maakt het een stuk overzichtelijker, waardoor je dit soort euvel veel makkelijker zelf kan vinden :slight_smile:

De table is voor het tonen van data op bepaalde pagina's, waarvoor tables ook gemaakt zijn. Dus ook in dat geval moeten ze werken.

normaal gaan ze ook gebruik maken van headertags en p’s, maar er moeten veel data in tables kunnen getoond worden.

Maar ik krijg met die clear nog altijd geen goed resultaat :expressionless:

De lists in de navigatie komen er nog :wink:

Je moet de opbouw van je Html ffies aan herstructureren. Wat een stuk handiger werkt is zowizo een container d'r omheen dus iets als dit:

[code:1:c4e9c73225]
<container>

&lt;header&gt;
	hier je headerdingen
&lt;/header&gt;

&lt;wrapper&gt;
	&lt;left&gt;&lt;/left&gt;
	&lt;content&gt;&lt;/content&gt;
&lt;/wrapper&gt;

</container>
[/code:1:c4e9c73225]

En omdat je toch niks in je footer hebt staan zou je in je css dit mee kunnen geven:

[code:1:c4e9c73225]
body,html {
height:100%;
}

#container {
background:url(image.jpg) repeat-x bottom;
height:100%;
}

#wrapper {
margin-bottom: <de hoogte van je footer>px;
}

[/code:1:c4e9c73225]

Mocht je er wel dingen in willen zetten kan je ook nog je Footer div postition:absolute; bottom:0px mee kunnen geven en je wrapper evengoed die margin meegeven.

Het is heel vreemd. Ik heb nu die wrapper es een opvallende kleur gegeven en het probleem ligt blijkbaar bij het "partners"-block. Die wordt niet mee opgenomen in die wrapper.

En ik heb geen idee hoe dat komt :frowning:

ik zou zeggen begin overnieuw en hou de structuur simpel, geen div's om div's in te stoppen die het zelfde zijn en als je een tabel of list hebt geef je deze de id of class aan die nu de div er omheen heeft.

verder kijk eens naar fauxcollomns ik denk dat je met deze techniek het probleem van je footer oplost.http://alistapart.com/articles/fauxcolumns/