Hoi lerrie,
Het is hier een combinatie van factoren waardoor het fout gaat, met als belangrijkste: de pagina-structuur van het
voorbeeld wordt niet compleet nageleefd!
- Er is iets mis met de <div>-structuur: "Eerst de html-validator!" doe ik altijd.
- De #container en een aantal elementen daarbinnen hebben een opgegeven hoogte van 100%. Dat geeft onheil: die moeten alleen de hoogte innemen die ze nodig hebben.
- De #container heeft een {padding-bottom: 3em;}. Dat was voor het voorbeeld zo, waar de #footer één html-regel was plus nog wat. Deze padding-bottom is nodig om wat in de #container staat altijd boven de #footer te krijgen als er veel in de #container staat. Maar bij jou is de #footer 250px hoog, dan is die 3em veel te weinig!
- Binnen de #container hebben de <div id="rage"> en de <div id="banner"> alle twee een {float: left;}. Daardoor ontsnappen ze aan de "normal flow" van de html, en nemen binnen hun container geen hoogte in, als na deze floats niet ergens een "clear" wordt gegeven om eronder te komen. Een "clear" legt de onderkant van de hoogste float vast, en daarmee de totale hoogte van de container.
- De #footer staat binnen de #container, in plaats van zelfstandig element te zijn (binnen de <body> op gelijk niveau als de #container).
Wat ik gedaan heb:
- Eerst de <div>-structuur op orde gebracht door systematisch laten inspringen, zodat je precies zit wat waar zit, en daarna wat <div>'jes verhuizen.
- Aanvullend wat inline-styles toegevoegd foor de <div id="facebook"> en de <div id="copy">.
- De #footer uit de #container gehaald en parallel in de html geplaatst.
- De 100% hoogtes overruled met inline-css (hoeft niet als je ze uit het stylesheet haalt).
- De #container een padding-bottom van 270px gegeven, zodat er altijd nog wat speling is voordat de 250px hoge #footer begint.
- Vlak voor het eind van de #container een clearing-div geplaatst.
- Nog even de blauwe border van het klikbare logo afgehaald.
En dan...:
Alle html-errors zijn daar nog niet uit (een deel wordt veroorzaakt door de twitter- enz. scripts: weinig aan te doen, vrees ik); de dubbele id's zou ik er wel uit halen.
In de css zit ergens een </style> die er niet in hoort, en een Conditional Comment voor <IE7. Dat moet in de html komen, niet in de css.
Zo blijft er altijd nog wat te doen.
Met vriendelijke groet,
CSShunter
____________
PS: Als ik "Webdesign door {link}...{/link}" in een footer zie staan, klik ik vaak om te kijken wat er op die website staat. Hier niet! Hier gaat de link zonder te waarschuwen linea recta naar een mailto:email-adres. Als je niet in de statusbalk kijkt waar de link naar toe gaat (of als je in je browser de statusbalk uit hebt staan), klik je erop en dan ... wordt bij mij het Windows standaard-mailprogramma geopend: Outlook Express.
Dat duurt even voordat dat opgestart is, en tegelijkertijd bevriest de browser.
Maar ik mail via de browser en gebruik helemaal geen e-mail programma: CSShunter doet het met gmail! :d
Dus het wachten was voor niets: ik kan Outlook Express weer onverrichter zake afsluiten, met wel een beetje de pest in. Voor hotmailers enz. geldt hetzelfde.
Dus ik zou zeggen: liefst de link naar de site laten gaan, en anders minstens een title="Stuur nu een mailtje" in de link zetten. Dan is de bezoeker gewaarschuwd via die tooltip.
