footer niet te hoog laten komen

Status
Niet open voor verdere reacties.
H

harypjotr

Gebruiker
Lid geworden
22 aug 2008
Berichten
48
Hallo,

Ik ben bezig met een website, alleen nu heb ik een probleem dat mij footer te hoog komt, als er niet een X- aantal enters staat.
Iemand enig idee hoe ik dit op kan lossen?

Groetjes,
 
Daar is zo niets van te zeggen, want dat kan tig oorzaken hebben. Heb je 'n link naar waar het staat? Of kun je anders de code hier neerzetten?

clear: both; heeft alleen zin als wat erboven staat is gefloat, en dat weet je niet. En dan nog zorgt het er alleen maar voor dat de footer onder wat erboven staat komt te staan. Misschien is dat wel de bedoeling, maar misschien ook niet. Dus iets meer info lijkt me handig.
 
Mijn code:

PHP: 
<!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>***</title>
<style type="text/css">
<!--
.titel {
	height: 10%;
	position: absolute;
	width: 99%;
	text-align: center;
	top: 0px;
}
.onderkant {
	height: 6%;
	position: absolute;
	text-align: center;
	width: 99%;
	bottom: 0px;
}
	
.tekst {
	margin-top: -128px;
	margin-left: 25%;
	width: 75%;
	height: 600px;
	margin-bottom: 7%;
}
.menu {
	margin-left: 10%;
	height: 128px;
	width: 132px;
	margin-top: 8%;
	position: static;
}
.menu li a {
	height: 32px;
  	height: 24px;
	text-decoration: none;
	}	
	
.menu li a:link, .menu li a:visited {
	color: #000000;
	display: block;
	background:  url(menu.gif);
	padding: 8px 0 0 35px;
	}
	
.menu li a:hover {
	color: #fff;
	background:  url(menu.gif) 0 -32px;
	padding: 8px 0 0 35px;
	}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
-->
</style>
</head>
<body>
<div class="titel" id="titel"><img src="titel.jpg" width="80%" height="100%"/></div>
<div class="menu">
  <ul>
    <li><a href="index.php" >Home</a></li>
    <li><a href="index.php" >Wie ben ik</a></li>
    <li><a href="index.php" >Foto's</a></li>
    <li><a href="contact.php" >Contact</a></li>
  </ul>
</div>
<div class="tekst">
  <p>Op dit moment ben ik druk bezig mijn website te bouwen.</p>
  <p>Mijn excuus voor het ongemak.</p>
</div>
<div class="onderkant" id="onderkant"><img src="onderkant.jpg" width="80%" height="100%"/></div>
</body>
</html>
 
Laatst bewerkt:
Hallo,

Ik heb er 'n tijdje mee zitten spelen, maar dat gaat zo niet lukken. Althans: ik weet niet precies wat het zou moeten worden, en het zit technisch niet goed in elkaar.
* Op http://validator.w3.org/ kun je de code controleren op fouten. Die moeten er in ieder geval uit. Bij xhtml, zoals jij gebruikt, mag je alleen kleine letters gebruiken, bijvoorbeeld. Dus geen <A href, maar <a href
De base-tag is overbodig (en mag niet daar), want standaard wordt altijd in hetzelfde venster geopend (tenzij de bezoeker dat anders heeft ingesteld, maar daar kun je toch geen invloed op uitoefenen).
* Ik zou geen hoofdletters in namen van plaatjes en zo gebruiken, maar alleen kleine letters. Op windows maakt dat geen verschil, op servers wel. Het is 'n eeuwigdurende bron van fouten.

Goed, je vraag.
Is het de bedoeling dat de footer alleen onder de inhoud van je pagina komt te staan, of moet de footer altijd onderaan het scherm 'plakken', ongeacht hoe weinig er op de pagina staat?
Je hebt links 'n menu. Moet dat 'n hele kolom worden, of alleen het blokje wat het nu is?
(Dit lijken misschien zeurvragen, maar het heeft te maken met hoe je die footer z'n plaats leert kennen: onderaan.)

Je footer e.d. hebben soms maten in procenten, soms in px. Dat gaat nooit goed werken op deze manier.
Normaal genomen doe je iets als dat header, menu, content en footer samen in 'n overkoepelende div staan. Die kun je dan eventueel 'n breedte in procenten geven.
Daarbinnen geef je dan meestal footer en header de volle breedte, en 'n vaste hoogte. Als je 'n hoogte in procenten gaat geven is het vrijwel onmogelijk 'n fatsoenlijke lay-out te krijgen, omdat alles alle kanten uitspringt bij 'n andere lettergrootte of venstergrootte.
Eventueel 'n maat in em, die verandert dan mee met de lettergrootte, maar procenten zou ik niet doen.

Het menu links: als dat 'n blokje wordt zoals nu, prima (behalve al die procenten). Als het 'n hele kolom moet worden, dan wordt daar meestal ook 'n vaste breedte voor genomen, eventueel in em, maar geen procenten. De content, tekst kan dan de rest opvullen, die varieert dan in breedte.
Anders krijg je bij 'n smal scherm of 'n grote letter dat de links op twee regels komen en zo, en op 'n breed scherm dat je heel veel lege ruimte hebt.

Los van de fouten die de validator geeft dus even de volgende vragen:
Moet de footer onderaan het scherm staan?
Moet het menu 'n kolom worden of gewoon 'n vierkant blokje zoals nu?
Hoe hoog moet de footer zijn?
Hoe hoog moet het menu zijn?

Ik ben trouwens wat uithuizig op het moment, dus 't kan best dat iemand anders 't beantwoordt voor mij. Maar die zal - denk ik - ongeveer dezelfde vragen hebben.
 
Laatst bewerkt:
Goeroeboeroe zei:
Hallo,
.......

Los van de fouten die de validator geeft dus even de volgende vragen:
Moet de footer onderaan het scherm staan?
Moet het menu 'n kolom worden of gewoon 'n vierkant blokje zoals nu?
Hoe hoog moet de footer zijn?
Hoe hoog moet het menu zijn?

........
Klik om te vergroten...

Ik wil de footer minimaal onderin het scherm, en als mijn tekst langer word, dat hij mee gaat naar onderen.
Mijn menu moet het vierkanten blok worden zoals nu.
Het menu is 128 px hoog.
Mijn footer mag 60 px hoog zijn.
 
Zoiets?
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>***</title>
<style type="text/css">
html {
     margin: 0;
     padding: 0;
     height: 100%;
}
body {
     margin: 0;
     padding: 0;
     height: 100%;
}
#titel {
     height: 60px;
     text-align: center;
     background: yellow;
}
#container {
     position: relative;
     min-height: 100%;
}
#content {
     padding-bottom: 60px;
}
.menu {
     margin-left: 140px;
     height: 128px;
     width: 132px;
     margin-top: 90px;
     background: green;}
ul {
     list-style: none;
     margin: 0;
     padding: 0;
}
.menu li a {
     height: 24px;
     text-decoration: none;
}
.menu li a:link, .menu li a:visited {
     color: #000000;
     display: block;
     background:  url(menu.gif);
     padding: 8px 0 0 35px;
}
.menu li a:hover {
     color: #fff;
     background:  url(menu.gif) 0 -32px;
     padding: 8px 0 0 35px;
}
.tekst {
     margin-top: -128px;
     margin-left: 320px;
     height: 400px;
     text-align: center;
     background: orange;
}
#onderkant {
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 60px;
     background: #0ff;
     text-align: center;
     line-height: 0;
}
</style>
</head>
<body>
<div id="container">
  <div class="titel" id="titel"><img src="titel.jpg" width="80%" height="50" alt="" /></div>
  <div id="content">
    <div class="menu">
      <ul>
        <li><a href="index.php" >Home</a></li>
        <li><a href="index.php" >Wie ben ik</a></li>
        <li><a href="index.php" >Foto's</a></li>
        <li><a href="contact.php" >Contact</a></li>
      </ul>
    </div>
    <div class="tekst">
      <p>Op dit moment ben ik druk bezig mijn website te bouwen.</p>
      <p>Mijn excuus voor het ongemak.</p>
    </div>
  </div>
  <div id="onderkant"><img src="onderkant.jpg" width="80%" height="50" alt="" /></div>
</div>
</body>
</html>
De footer blijft onderaan het scherm staan, ook als er weinig tekst in staat. Als er meer tekst in komt dan op het scherm past, schuift de footer omlaag.
Werkt in IE 6, 7, 8, Google Chrome, Safari, Opera en Firefox.

* Als de inhoud van de footer te hoog wordt, verschijnt er 'n kier onder de footer in sommige browsers. Dat was het geval met die hoogte in procenten van de afbeelding, die heb ik in px veranderd daarom. Moet je dus even goed uittesten als je image erin staat, dat die niet te hoog is.
* Ik heb alles even 'n achtergrondkleurtje gegeven zodat 't zichtbaar is. Zoals je kunt zien aan de subtiele kleurtjes is er eigenlijk 'n Picasso aan mij verloren gegaan.
* De truc is om de hele handel in 'n div#container te zetten, die altijd minimaal 100% hoog is, dus even hoog als het scherm. Daarin zet je aan de onderkant de footer en ziedaar: de footer getemd.
Dit zou in Internet Explorer 6 niet horen te werken, want die kent geen min-height. Maar deze ongeluksbrowser bevat in dit geval 'n bug die dat tekort weer opheft: hij positioneert volkomen foutief en zonder enige opdracht de footer ten opzichte van de body. Tja.
* De meeste maten heb ik veranderd van % naar px. Als je bijvoorbeeld het menu 'n flexibele breedte wilt geven, kun je beter em gebruiken. Dan past de breedte zich aan de lettergrootte aan. De margin-left bij .tekst moet je dan ook naar em omzetten, zodat die ook mee verandert.
* Als je de pagina wilt centreren of 'n maximum-breedte wilt geven, kun je dat doen bij div#container. Bijvoorbeeld: max-width: 970px, margin: 0 auto;
* De margin-left bij .tekst zorgt ervoor dat de tekst naast het menu komt te staan en niet eroverheen. Die moet dus breed genoeg zijn.
* De padding-bottom bij #content zorgt ervoor dat de footer vrij blijft. Die moet dus even hoog zijn als de footer. Desnoods in em, als 't maar evenveel is.
* .tekst heeft geen breedte meer. Die vult nu gewoon de rest van #content.
* Je kunt natuurlijk alle breedtes en hoogtes en zo aanpassen.

Als je nog vragen hebt, horen we 't wel.
Succes!
 
Heel erg bedankt.

Hij is nu helemaal SUPER!!!
Ik begrijp nu ook waar de container div voor is.
 
Laatst bewerkt:
Dan zijn er twee mogelijkheden (denk ik):
* Ik heb 'n fout gemaakt
* Jij hebt 'n fout gemaakt.

Overigens is dat geen klein probleempje, grinnik, want dat vroeg je juist.
Weet je zeker dat je de code goed hebt overgenomen? Wat kan helpen om zo'n fout op te sporen is om alles wat niet echt nodig is even weg te commentariëren. Dus html tussen <!-- en -->, en css tussen /* en */
En in welke browser gebeurt het?
 
Oef. Was ik toch even bang dat ik vandaag m'n jaarlijkse fout had gemaakt :D
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan