Layout website

[Kligham]

Ik ben nu beginnen knutselen met CSS, maar zit hier nu toch met een probleempje. Mijn footer staat namelijk niet onderaan de pagina. Ik vroeg me af of iemand weet wat ik verkeerd doe? Zie Hier

Ps: Het lijstje van sitemap, disclaimer zou normaal gezien rechts moeten staan, dit heb ik getracht te doen met float:right; maar die heeft niet het gewenste resultaat.

 

[Leon d]

Geef je #footer de property

clear:both

hierdoor geef je aan dat er geef floating objecten links en rechts van de footer div mogen staan.

Verder weet ik niet hoe de footer indeling moet zijn. Je hebt nu een div met id footer een hoogte mee gegeven van 20px de blokken die erin komen zijn zogenaamde block elements, de <p> en de <div>. Deze beginnen (mits een aanpassing in de css) altijd op een nieuwe regel. Hierdoor komen ze ook nog eens buiten de footer div te staan.

 

[Kligham]

Na redelijk wat geknutsel, klopt bijna alles behalve, de achtergrond van de div body.

Zoals je wel zult merken loopt de witte achtergrond niet volledig door. (zie hier). Ik werk met drie overkoepelende div's namelijk header, body en, footer. header en footer zijn correct, alleen de body rekent de hoogte niet van het begin van zijn div maar van de top van de pagina waardoor hij header overlapt.

Heeft iemand een idee om dit te verhelpen?

 

[Frenske123]

Het lijkt wel een gevangenis zoveel diefjes

Mischien kun je eens opnieuw beginnen een container met daarin head , nav(links) content(rechts) en een footer

Ik denk dat het nu wat te veel door elkaar gelopen is!!!

 

[Leon d]

Het lijkt wel een gevangenis zoveel diefjes

Mischien kun je eens opnieuw beginnen een container met daarin head , nav(links) content(rechts) en een footer

Ik denk dat het nu wat te veel door elkaar gelopen is!!!

Frenske123 heeft inderdaad gelijk, maar als je nu even snel de div achtergrond goed wilt hebben, moet je bij #body even de volgende property toevoegen wederom:
clear: both;

gr,

 

[Leon d]

Overigens als je Firefox gebruikt moet je even de volgende plugin installeren:
https://addons.mozilla.org/en-US/firefox/addon/1843

Hiermee kun je elk element inspecteren, zien hoe groot het is, propertys uitschakelen en toevoegen etc.

hiermee kun je met je css aanklooien en gelijk zien wat het doet, zonder dat je je huidige css bestand hoeft te wijzigen.

 

[Kligham]

De reden dat die div body daar staat is om die witte boorden te verkrijgen rond mijn div links en div rechts (dmv margin 5px te gebruiken). Ik heb er voor geopteerd op zowel header, body als footer ipv. de grote div container de achtergrond te geven omdat enkel mijn body zal veranderen van grootte, dan moet ik enkel daar in de div body knutselen per pagina.

Die both:clear; doet wel zijn werk, maar dan nog word mijn header meegerekend in mijn body.

 

[Kligham]

Tof, k'had zojuist met die firebug plugin opgemerkt dat er bij #body{} geen float:left; stond. Nu werkt het wel juist.

Toch bedankt voor de hulp en de tip:thumb:

 

[Kligham]

Er is nu nog een probleem die ik moet wegwerken: namelijk de footer. Website: hier

Er zijn 3 delen en die zouden zo in de div footer geplaatst worden:

<p id="pfooter"> -> links uitgelijnd
<p id="ppfooter"> -> gecentreerd
<ul> -> rechts uitgelijnd

Nu kan ik deze drie wederom in een div steken en laten floaten, maar ik vroeg me af of er geen betere manier is? Iemand enig idee?

 

[That Guy]

nope, gewoon laten floaten.
Anders moet je position:relative gaan gebruiken en dan positioneren.

:thumb:

 

[Leon d]

Nee niet dat ik weet iig.

Je kan een iets doen als:

<div class="footer">
© 2009 PJ, Belgïe. Alle rechten voorbehouden
<div class="center">
Valid XHTML etc...
</div>
<div class="right">
de UL
</div>
</div>

en css

.footer{
}
.center{
display:inline;
margin-left: auto;
margin-right: auto;
}
.right{
display: inline;
float:right;
}

Niet getest overigens... maar zoiets zou je moeten doen denk ik

 

[Jedi]

Valid XHTML 1.1 & CSS 2.1

Echt waar ?, volgens mij ziet je pagijna er dan toch echt anders uit als wat je nu hebt.

 

[Kligham]

Echt waar ?, volgens mij ziet je pagijna er dan toch echt anders uit als wat je nu hebt.

Grapjas

EIDT: Nu is hij wel valid