login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Footer positioneren (Opgelost)

Offline valles10 - 12/05/2014 16:06 (laatste wijziging 12/05/2014 16:06)
Avatar van valles10HTML interesse Hallo allemaal,

Ik ben bezig aan een website en alles zit goed, behalve de footer die plakt aan de bovenkant. Iemand suggesties hoe ik de footer mooi kan laten aansluiten onder de #container? Het is trouwens niet de bedoeling dat hij gewoon fixed onderaan blijft plakken.

styles.css: http://www.plaatscode.be/142343/
start.css: http://www.plaatscode.be/142345/
index.html: http://www.plaatscode.be/142344/

Alvast bedankt!

8 antwoorden

Gesponsorde links
Offline Thomas - 12/05/2014 16:30
Avatar van Thomas Moderator Uhm, #container lijkt dimensie-loos?

Daarnaast is de left_content-div absoluut gepositioneerd, en is daarmee dus al uit de normale "flow" van je pagina getrokken?

Wat als je nu je footer invoegt als laatste element van je left_content-div? Daar staat immers ook je header in? Dit lijkt te doen wat jij wilt als ik het goed begrijp.
Offline valles10 - 12/05/2014 16:50
Avatar van valles10 HTML interesse
FangorN schreef:
Uhm, #container lijkt dimensie-loos?

Daarnaast is de left_content-div absoluut gepositioneerd, en is daarmee dus al uit de normale "flow" van je pagina getrokken?

Wat als je nu je footer invoegt als laatste element van je left_content-div? Daar staat immers ook je header in? Dit lijkt te doen wat jij wilt als ik het goed begrijp.

De content heeft een vaste breedte, terwijl de footer 100% breedte heeft...
Hoe zou ik dat dan moeten doen met die positionering? Ben daar nooit een held in geweest.
Offline Thomas - 12/05/2014 17:02 (laatste wijziging 12/05/2014 17:09)
Avatar van Thomas Moderator Positionering viel me alleen op, het is voor je probleem verder niet echt belangrijk.

Heb je geprobeerd het footer-element in index.html te verplaatsen naar het einde van je left_content-div?

EDIT: je hoeft dus niets in CSS aan te passen, je hoeft alleen maar een HTML-element te verplaatsen.
Offline valles10 - 12/05/2014 17:09
Avatar van valles10 HTML interesse Ja, maar dan is de footer even breed als de left_content-div... En dat is niet de bedoeling, hij moet heel het scherm, in de breedte, inpalmen.. Ik zou die #container opgelost moeten krijgen...
Offline Thomas - 12/05/2014 17:52
Avatar van Thomas Moderator Ik vind dit een lelijke oplossing, maar het lijkt te werken:

- verplaats de footer naar het einde van de left_content-div
- reserveer aan het einde van #content ruimte voor de footer, oftewel voeg de volgende regel toe aan #content:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. margin-bottom: 8rem;

- positioneer de footer ook absoluut en geef deze dezelfde breedte als je container, voeg dus de volgende 3 regels toe aan footer:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. position: absolute;
  2. bottom: 0;
  3. width: 98rem;


Tenzij je alle absolute positionering er uitsloopt zie ik geen andere oplossing.
Bedankt door: valles10
Offline valles10 - 13/05/2014 21:29
Avatar van valles10 HTML interesse
FangorN schreef:
Ik vind dit een lelijke oplossing, maar het lijkt te werken:

- verplaats de footer naar het einde van de left_content-div
- reserveer aan het einde van #content ruimte voor de footer, oftewel voeg de volgende regel toe aan #content:
[..code..]
- positioneer de footer ook absoluut en geef deze dezelfde breedte als je container, voeg dus de volgende 3 regels toe aan footer:
[..code..]

Tenzij je alle absolute positionering er uitsloopt zie ik geen andere oplossing.

Is idd een "lelijke" oplossing.. Ik ga nog wat verder proberen uitzoeken en die positioning anders proberen doen, maar jouw oplossing gaat mijn footer dan weer 980px breed maken, terwijl ik de footer van links op mijn scherm tot rechts op mijn scherm.. dus mijn 100% op mijn document.
Offline Thomas - 14/05/2014 00:17 (laatste wijziging 14/05/2014 00:18)
Avatar van Thomas Moderator Oh, over de gehele breedte van de pagina dus. Mja, dan zal dat toch "inline" moeten denk ik. En de rest dus ook, al zou je de contact-div nog wel absoluut kunnen positioneren wellicht, omdat die waarschijnlijk toch niet bepalend voor de hoogte is.
Offline valles10 - 14/05/2014 10:21
Avatar van valles10 HTML interesse Ik heb heel de website in 3 kolommen verdeeld en gefloat i.p.b. ze absoluut te positioneren. Probleem opgelost!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.164s