Footer centreren

Status
Niet open voor verdere reacties.
R

Roelant

Gebruiker
Lid geworden
20 mrt 2007
Berichten
112
Hallo, ik probeer een footer te centreren, maar op de een of andere manier wordt de regel text-align:center genegeerd. Ik had deze regel eerst in het #footer a{} gedeelte staan, maar dat werkte niet, daarna heb ik het op onderstaande manier geprobeerd, maar dat werkt ook niet. De rest voor de footer werkt wel. Kan iemand mij vertellen wat ik nu fout doe?

HTML: 
		<div id="footer">
		<a href="mailto:****.com">Neem contact op</a>
		</div>


stylesheet
Code: 
body{
	font-family : arial, sans-serif;
	text-align:center;
}
h1 {
	color : #0099ff;
}
.favorieten{
	font-weight:bold;
	color:red;
}
img{
border:none;
}
a{
color:#0099ff;
text-decoration:none;
}
a:hover{
color:blue;
}
#menu a{
color:green;
border-left:2px solid green;
border-bottom: 1px solid green;
}
#menu a:hover{
color:#0099ff;
border-left:2px solid #0099ff;
border-bottom: 1px solid #0099ff;
}
#sitenaam{
border-bottom:2px solid #0099ff;
}
#terug img{
width:50px;
height:50px;
}
.afbeelding{
font-size:10px;
}
#footer{
text-align:center;
}
#footer a{
font-size:10px;
color:#999999;
position:absolute;
bottom: 0px;
}
 
de footer moet in ieder geval een width hebben wil je hem kunnen centreren. Daarna zou ik hem een margin:0 auto; geven.
 
Ok, dankjewel, hij doet het nu inderdaad.

Alleen wat ik me dan nog afvraag is wat precies het effect van die margin:0 auto is.
Ik zie zo snel geen verschil als ik margin:0 auto gebruik of margin:auto of margin:10 auto.
 
Margin:0 auto;

betekent in andere woorden, ik wil de margin-top&bottom:0px hebben en ik wil de margins left en right gelijk verdeeld hebben. waardoor het item in het midden van het scherm beland. over het algemeen werkt margin:0 auto; bij zo goed als elke browser, vandaar deze notatie.

Gr ScorpionX
 
Ik zie zo snel geen verschil als ik margin:0 auto gebruik of margin:auto of margin:10 auto.
Klik om te vergroten...
Dat kan kloppen. De horizontale margins zijn in alle gevallen auto, en samen met een opgegeven breedte zorgt dit voor het centreren.
De verticale margins spelen in dit geval geen rol, omdat deze zijn vastgemaakt aan de #footer. Maar binnen de #footer zit een <a> met een absolute positie t.o.v. de bottom (onderkant scherm). En de <a> is specifieker dan de #footer, dus de style van de <a> wint, en de eventuele verticale margins van de #footer zijn buiten spel gezet.

Om dezelfde reden werkte de text-align:center niet. De <a> was door de position:absolute losgemaakt uit de "normal flow".
Daarom kan het weer wel met text-align:center, als de absolute positie niet in de <a> maar in de <div id="footer"> zelf zit:
Code: 
#footer{
   position:absolute;
   width: 700px; /* pagina-breedte */
   bottom: 0px;
   text-align:center;
}
#footer a{
   font-size:10px;
   color:#999999;
}
Zo leiden er met css altijd verschillende wegen naar Rome! :)

Met vriendelijke groet,
CSShunter
 
Ik snap ongeveer wat je hier zegt, maar ik heb eens even die absolute position naar #footer sectie gezet, maar daarna is het resultaat niet meer zoals het hoort. De tekst staat niet meer gecentreerd en ook de breedte van het veld lijkt smaller te zijn geworden.

Ik heb er nu dit van gemaakt:

Code: 
#footer{
width:170px;
margin:0 auto;
position:absolute;
bottom: 0px;
text-align:center;
}
#footer a{
font-size:11px;
color:#999999;
}
 
Hoi Roelant,
De #footer-breedte heb je op 170px gezet, en die begin te tellen vanaf de linkerkant van de #content. Als de #content breder is (wat wel het geval zal zijn), moet de #footer op de breedte van de #content gezet worden. Dan komt de inhoud van de #footer weer wel in het midden onder de #content te staan.

Een andere manier is nog, om de #footer op 100% breedte te zetten, en deze een left:0 te geven.

  • Toegepast: www.developerscorner.nl/csshunter/tests/gecentreerde-footer-2.htm

  • Hier zit meteen een correctie in: de #footer hoort geen position:absolute te hebben, maar een position:fixed. Anders gaat het mis bij een hoge pagina.
  • De padding-bottom van de #content moet een waarde krijgen die afhankelijk is van de hoogte van de #footer, dan kunnen de laatste regels van de #content nooit onder de #footer verborgen blijven. In verband met het kunnen schalen van de lettergrootte moet die padding dan ook in de em eenheid opgegeven worden.
  • Zo is het mogelijk dat ook in IE de lettergrootte door de bezoeker naar smaak wordt ingesteld.
  • En ook bij "alles inzoomen" of "alles uitzoomen" blijft het werken, zelfs in IE. :)
Met vriendelijke groet,
CSShunter
 
Die oplossing met een breedte van 100% klinkt het meest logisch, dus die heb ik ook met succes gebruikt!

Alleen dat gedeelte van #content volg ik niet helemaal. Wat bedoel je nou precies met #content?
 
Hoi Roelant,
Als je even in de broncode van m'n voorbeeld kijkt, zie je dat de <div id="content">...</div> het blok is waarin al het andere dan de footer zit.

Deze <div> met alles van de pagina er in moet aan de onderkant een vrije strook van minstens de hoogte van de footer hebben, anders blijft het onderste deel verscholen achter de footer als je gaat scrollen. Die vrije strook maak je met wat padding-bottom (= opvulling aan de onderkant) voor de #content.

Kijk:
  • Zonder padding-bottom:
    www.developerscorner.nl/csshunter/tests/gecentreerde-footer-3.htm

  • Met een extra <div>'je is de padding (boven/links/rechts) te zien als lichtblauwe background.
  • De footer heeft een semi-transparante background, en een rood gestippeld bovenrandje, zodat je goed kunt zien wat er onder gebeurt.
  • Daar zit de laatste regel verstopt! ;)
En als je wel rekening houdt met wat de #footer van het scherm afpikt:
Met vriendelijke groet,
CSShunter
_________
PS: Bij dit soort dingen is het handig om zowel een korte pagina te maken (met weinig hoogte > bv. de helft van de schermhoogte) als een flink lange pagina, waarbij je een eind moet scrollen.
In dit geval zou je het probleem niet zien bij een korte pagina! :P

Hier komt bij: een korte pagina bij de ene (grote) resolutie kan bij een lagere resolutie scrollen nodig maken, dus als iets het er goed van af brengt bij het ontwerpen op een pittig beeldscherm, is nog niet gezegd dat het altijd goed gaat. Testen op verschillende resoluties is altijd goed!
 
Laatst bewerkt:
Duidelijk verhaal! En ik zie het verschil inderdaad.

Maar nu zul je me wsl wel een zeur vinden, maar ik vind het eigenlijk niet logisch dat die footer blijft staan op het scherm, dwars door je tekst. Je footer is toch gewoon altijd onderaan je pagina te zien? Dus als je je scherm klein maakt, dan zie je het toch gewoon niet en heb je pech gehad? Dat is eigenlijk wat ik er van wil maken. Ik vind mijn footer niet zo belangrijk dat hij altijd dwars door al m'n tekst te zien is. Ik heb dit eigenlijk ook nog nooit zo op een website gezien!
 
Hola-die-ola!
De footer had ik alleen als voorbeeld een semi-transparantie gegeven, zodat je in levende lijve kan zien wat er zich in het laagje onder de footer afspeelt.
In het echt geef je de footer natuurlijk géén transparantie :p, dan zie je ook niet dat er iets onderdoor scrollt:
=====
Dus als je je scherm klein maakt, dan zie je het toch gewoon niet en heb je pech gehad?
Klik om te vergroten...
Nou, door die padding-bottom aan te brengen, zie je bij scrollen altijd wel de laatste regel: ook bij een minder hoog scherm (probeer maar aan je venster te sleuren).
Niemand kan meer pech hebben dan te moeten scrollen om alles te zien! :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Ik neem aan dat je dat stukje waarin je het transparant maakt en een rood lijntje geeft niet hebt opgenomen in de getoonde broncode? Want anders zie ik het verschil niet!:)

Dat heb je dan ook op de #footer sectie gedaan toch? Met een extra class of zo die ik hier niet zie? (ik schrijf maar even het eerste wat er in me opkomt zoals ik het zou doen...)

En ik denk dat we dan trouwens iets anders denken over een footer. Sommige wil je wel zien, sommige wil je niet zien. Ik wil mijn regel gewoon onderaan de pagina hebben, en niet als het niet op scherm past. Moet ik dan de afstand tot de laatste regel altijd gelijk zetten? Ik kan me voorstellen dat dat niet echt gaat werken als mensen een groter scherm hebben dan ik, of een grotere resolutie in ieder geval. Het moet dan nog steeds helemaal onderaan de pagina staan, maar de afstand tot de voorlaatste regel is dan wel groter. Maar als je het scherm dan ook gewoon kleiner maakt, dan wil ik de footer NIET meer zien! Ik ga vanavond sowieso wel even het een en ander uitproberen hiermee, maar wat hulp is natuurlijk altijd welkom! :)
 
Ah, misverstandje. Ik dacht dat je bedoelde dat je de footer altijd aan de onderrand van het scherm geplakt wilde hebben.
Als dat niet zo is (zelf ben ik er ook niet zo'n voorstander van), kan het ook:
Dat is een korte pagina. Er zit een link in voor een lange pagina, met dezelfde css. :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Ja, dat wat je daar laat zien, is precies wat ik wil! Maar je raadt het al, het lukt niet!!
De html heb ik precies zo opgebouwd zoals jij met 2 <div id=""> secties in de body, te weten de content en de footer.

De CSS code ziet er voor deze onderdelen als volgt uit:
Code: 
body{
	font-family : arial, sans-serif;
	text-align:center;
	position:relative;
	min-height:100%;
}
#content{
padding-bottom:1.2em;
}
#footer{
position:relative;
width:100%;
height:1.2em;
left:0;
bottom:0;
text-align:center;
background:white;
}
#footer span{
padding:5px;
font-size:11px;
color:#999999;
}

Ik heb hier nu de position van de footer op relative gezet. Het verschil tussen absolute en relative wat ik nu merk is dat hij in het geval van absolute 'onderaan het laatste element wordt geplakt, er overheen dus.' Bij relative komt ie precies onder het laatste element te staan, maar nóóit staat de footer helemaal onderaan het scherm zoals in jouw korte-tekst-voorbeeld. Ik snap eigenlijk totaal niet waarom, want volgens mij heb ik het precies zo ingesteld zoals jij voordoet.

Waar het eigenlijk op neerkomt. Zoals in de code hierboven gaat het voor een klein scherm goed. De footer staat direct na het laatste element. Maak je het scherm groot, dan blijft het daar staan en gaat het niet naar het onderste deel van het scherm, of de viewport zoals dat zo mooi heet.:)
 
Laatst bewerkt:
Ik heb hier nu de position van de footer op relative gezet.
(...)
volgens mij heb ik het precies zo ingesteld zoals jij voordoet.
Klik om te vergroten...
Nee dus: bij mij staat de #footer op absolute; en dat is precies waarom het bij jou niet werkt. :p

Nu is de position-eigenschap één van de lastigste dingen van css. In dit geval komt het er op neer:
  • De <body> heeft een minimale hoogte van 100% gekregen. Dat is nodig om de achtergrondkleur van de body ook bij korte pagina's helemaal tot onderaan te laten doorlopen.
  • Als je nu de #footer een position:relative geeft, staat de #footer relatief in de volgorde: d.w.z. hij komt direct na de #content. Altijd = ook bij een korte pagina!
  • Door de #footer een position:absolute te geven, schroef je 'm los van de "normal flow", de normale bewegingsrichting van de html.
    Tenminste als de <body> een position:relative krijgt (ten opzicht van het venster), anders staat de #footer wel beneden op het scherm, maar gaat hij mee omhoog scrollen bij een lange pagina. Oorzaak: de #footer staat binnen de <body> (dat kan natuurlijk niet anders).
  • Met de absoluut neergezette #footer kan deze, los van wat de rest in de <body> doet, naar elke plek t.o.v. het venster gerangeerd worden. In ons geval onderaan: bottom:0.
  • Kortom: de #footer is onafhankelijk geworden van de <body>.
  • Bij een lange pagina, die meer dan 100% hoog is, gaat de <body> (in wezen: de #content: het enige element dat nog vastzit aan de <body>) uitrekken. Totdat de <body> "op is", d.w.z. meteen na de laatste regel van de #content.
  • Als je niets doet, staat de laatste regel dus vlak boven de onderkant van het scherm.
  • Maar daar staat de #footer al. Die wordt eroverheen geplakt, en je ziet de laatste regel niet meer.
  • De oplossing is, om onder de laatste regel een "verlengstukje" van de #content te maken, zodat de #content in totaal hoger wordt, en de laatste regel boven de #footer komt te hangen.
  • Het verlengstukje moet dus net zo hoog zijn als (of iets hoger dan) de hoogte van de #footer.
  • Dat wordt bereikt door de #content een padding-bottom (= lege opvulling onderop) te geven.
Zo, bent u daar nog? ;)
In m'n voorbeeld is voor de #content een padding-bottom:3em; ingesteld, passend bij de hoogte van de daar gebruikte #footer.
Als je een andere hoogte van de #footer hebt, zal de padding-bottom:3em; dus moeten worden aangepast.

Gaat het zo lukken?
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Het probleem is hier een beetje dat ik wel snap wat je zegt, maar het werkt bij mij op de een of andere manier niet.

Wat ik in mijn vorige bericht probeerde te zeggen is dat ik het eerst ook geprobeerd had door de #footer op absolute te zetten, maar toen werd de footer over het laatste element gezet en niet onderaan de pagina. Dus of die min-height van 100% werkte niet, of die padding-bottom van de #content werkt niet, of gewoon allebei, daar lijkt het na het lezen van je laatste bericht in ieder geval op, want blijkbaar wordt het einde van de #content ook gezien als het einde van de body.

Daarom had ik het dus op relative gezet, omdat dan de footer in ieder geval niet óver het laatste element werd geplaatst maar er onder.

Maar in géén van beide gevallen word de footer op de bodem geplaatst bij een volledig scherm!

Heb je enig idee waar dit nu aan kan liggen? Zijn er andere factoren die de werking van de regels kan beïnvloeden? Ik heb er namelijk meer regels tussen gedrukt dan jij in je voorbeeld...
 
Hoi Roelant,
Via een PM'etje heb ik de patiënt gezien. Het medicijn is:
HTML: 
html {
   height: 100%;
   }
Die staat er in de css van mijn voorbeeld bij, maar niet in jouw css. Mijn fout: in de tekst van het voorbeeld had ik dit ook bij "essentiële css" moeten zetten!
Intussen er snel bij gefrommeld in het voorbeeld. ;)
Reden voor de noodzaak van de 100% html-hoogte: anders weet de <body> niet waarop de min-height:100% gebaseerd moet worden.

Verder kan de:
Code: 
#content {
   padding-bottom:1.2em;
   }
beter wat meer worden:
Code: 
#content {
   padding-bottom:2.1em;
   }
dan kan de #footer de laatste regel van de #content niet gedeeltelijk overlappen bij een kleine hoogte van het beeldscherm.

Zo beter?
Met vriendelijke groet,
CSShunter
 
Ja, dat werkt! Maar er is helaas weer een maar...

Hij maakt de totale pagina nu groter dan mijn scherm. Het footer gedeelte is daardoor net niet zichtbaar en krijg je aan de zijkant zo'n scroll-balk, wat volgens mij totaal niet nodig is, aangezien (bij een volledig scherm) de pagina kleiner is dan mijn scherm. Of in ieder geval, dat hoort ie te zijn...

Je kunt de patiënt uiteraard met dezelfde link weer bekijken.:)

Waar ligt dit nu aan?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan