www.css-voorbeelden.nl

Hallo allemaal!

Mijn naam is Chris en ik ben momenteel bezig met een website voor mijn vader. Het betreft hier een website (Joomla 2.5.6) met een webshop (Virtuemart 2.0.10) Link!

Wat ik dolgraag zou willen is de bekende sticky footer. Ik heb deze stappen doorlopen https://www.css-voorbeelden.nl/position ... #a-bekende maar jammer genoeg lukt of snap ik het niet. Ik heb geen CSS of PHP opleiding/cursus gehad maar ben ook niet compleet onbekend hiermee.

Voordat ik met allerlei informatie begin te gooien zou ik graag willen weten of iemand me hierbij wil/kan helpen en welke info hiervoor nodig is.

Ik heb deze vraag ook al op een ander forum gesteld maar heb jammer genoeg geen reactie gekregen.

Hopelijk wil/kan iemand mij hiermee helpen. Alvast heel erg bedankt!

Groetjes, Chris

Hoi Chris,

In principe kun je hier worden geholpen met je vraag. Alleen is dit bepaald geen heel druk forum, vergeleken met veel andere. Dat heeft twee nadelen: het kan even duren voor je antwoord krijgt, want tot nu toe ben ik de enige die hier antwoord. Het tweede nadeel is dat er geen of heel weinig mensen meelezen, vergeleken met drukkere forums, zodat fouten minder snel worden opgepikt.
Los van die twee nadelen ben je van harte welkom met je vraag.
In principe is een sticky footer niet heel moeilijk. Dan ga ik er even vanuit dat je Internet Explorer 6 niet meer wilt ondersteunen, want dan wordt het 'n stuk ingewikkelder. (Ik heb IE6 niet eens meer geïnstalleerd, dus daar kan ik verder ook niet bij helpen. Maar IE6 wordt inmiddels nog maar heel weinig gebruikt.)

Aan een sticky footer zit inmiddels alleen een levensgroot nadeel. Een (heel) groot deel van mobiele apparaten kan er niet mee overweg. Nieuwere mobiele browsers kunnen het meestal wel, maar er zijn nog ontzettend veel oudere browsers in omloop, want (gelukkig) holt niet iedereen naar de winkel om onmiddellijk de nieuwste virtuele wind van Apple aan te schaffen.
Dat kan betekenen dat een sticky footer bijvoorbeeld in sommige browsers over de rest van de pagina komt te staan, waardoor een deel onzichtbaar wordt.
Tot nu toe is er eigenlijk geen waterdichte manier om mobiele browsers te onderscheiden van desktopbrowsers, dus dit is wel even iets om over na te denken. Je kunt op de server testen of 'n browser mobiel is of niet, maar dat is nogal veel werk. En niet 100% waterdicht. (En daar heb ik zelf ook geen ervaring mee, zie je gelijk het nadeel van 'n klein forum.)
Bij nieuwere voorbeelden gebruik ik zelf wat JavaScript om te kijken of een browser aanrakingen herkent. Als dat zo is, zal het wel een mobiele browser zijn, en zou je de sticky footer kunnen uitschakelen. Op mobiele apparaten zal JavaScript altijd aan staan, omdat je anders niet veel meer heb dan 'n duur horloge. Deze methode is niet heel ingewikkeld, maar ook niet helemaal waterdicht. Opera Mini bijvoorbeeld beweert hardnekkig dat het geen mobiele browser is.

Beste Goeroeboeroe,

Dank voor uw reactie. Helemaal geen probleem zo'n klein forum. Ik krijg hier al eerder antwoord dan op de grotere forums.

Ik wil IE6 inderdaad niet meer ondersteunen. Mobiele apparaten hoeven ook niet ondersteund te worden.

Waarschijnlijk heeft u de website al bekeken? Uw uitleg is hartstikke duidelijk en denk dan ook (Lees: Ik weet zeker) dat ik het fout doe.

Zo weet ik niet precies in welk bestand ik de codes moet toepassen. Wat heeft u van mij nodig om mij hierbij te ondersteunen?

Hoi,
U is gewoon jij, hoor
Ik heb de code van 'n paar pagina's op je site even bekeken, en volgens mij zou het niet echt moeilijk moeten zijn, omdat al die pagina 's (toevallig?) al de juiste elementen hebben. Maar je loopt ongetwijfeld wel tegen wat onverwachte probleempjes aan, want dat is altijd zo. Marges die even moeten worden aangepast of zo.
Deels staat bepaalde css er al bij jou, maar ik geef het voor de volledigheid toch even allemaal op hieronder.

html en body geef je beide height: 100%;
Nu is de pagina altijd even hoog als het venster, ongeacht de hoogte van het venster.

Bij #main voeg je aan de css toe: min-height: 100%;
Nu is de inhoud van de pagina altijd even hoog als <body>, en die is even hoog als het venster van de browser, dus ook weer tot de onderkant, ongeacht hoeveel of hoe weinig erin staat. Omdat je min-height gebruikt, zal bij meer inhoud dan op het scherm past de hoogte gewoon toenemen.
Ook voeg je bij #main nog toe: position: relative;
Dit heeft verder geen invloed, maar zorgt ervoor dat je de footer kan positioneren ten opzichte van #main.

De footer staat bij jou binnen #wrapper. Daar moet de footer uit, hij moet ónder #wrapper komen te staan, gelijk boven de afsluitende </div> die bij #main hoort. Eigenlijk niets meer dan twee keer </div> van onder de footer naar boven de footer verplaatsen, als ik het goed zie.

Nu de footer los is gekoppeld van de rest van de pagina, kun je hem apart neer gaan zetten. Daarvoor voeg je aan de css voor de footer toe:
position: absolute;
bottom: 0;
Nu wordt de footer tegen de onderkant (bottom) van #main neergezet: onderaan het scherm. Ongeacht de hoeveelheid inhoud van de pagina. #main is minimaal even hoog als het venster, dus bij weinig inhoud staat de toch footer onderaan het venster. Bij meer inhoud groeit #main mee en schuift de footer, die is gekoppeld aan de onderkant van #main, gewoon mee omlaag.

Blijft er nog één klein probleempje op te lossen: een absoluut gepositioneerd element zoals de footer is volslagen asociaal: zonder enig schuldgevoel gaat het element gewoon over andere inhoud heen staan. Als de tekst tot onderaan #main doorloopt, staat de footer gewoon vrolijk over die tekst heen, want de footer staat áltijd aan de onderkant van #main.

Om dat te voorkomen geef ja aan #wrapper, waar de rest van de pagina in staat, een marge aan de onderkant. Die marge moet even hoog zijn als de footer hoog is (of iets hoger, als je wat speling wilt hebben). Die marge zorgt voor lege ruimte aan de onderkant van #wrapper, en daar kan de footer mooi staan.

Succes en als het niet lukt, hoor ik het wel.

Heel erg bedankt voor de uitleg!

Ik ga het proberen en laat zeker wat weten.

En daar is ik weer

Ik ben eens flink gaan stoeien, copietjes, backups, bestanden aanpassen, teruggezet, opnieuw aanpassen, gevloekt (dat hielp ook niet) en de hele backup weer teruggezet. Zodoende ben ik weer bij het beginpunt beland. Waarschijnlijk pas ik de verkeerde bestanden aan of heb ik te weinig kaas gegeten van HTML/CSS/PHP. Met de beste wil van de wereld kom ik er niet achter welke bestanden ik in dat geval moet aanpassen. Moet ik in de templatemap zijn? Styles.css? /templates/TEMPLATENAAM/css? En waar vind ik die HTML en Body?

Sorry, waarschijnlijk kom ik nu compleet N0ob over. Normaliter heb ik snel iets door of kom ik er na enige tijd wel achter maar hier kom ik even niet verder.

Hoi,

Ik heb nu even wat grondiger gekeken, en heb nu gezien dat het een cms is (Joomla). Oei, dat maakt het 'n stuk ingewikkelder.
Op zich is het nog steeds niet heel moeilijk, maar Joomla! heeft er nogal 'n onoverzichtelijk geheel van gemaakt met nogal veel styles en zo.
Ik heb zelf ooit wel 'ns wat gestoeid met Joomla, maar ik heb daar bepaald niet echt veel ervaring mee. Ik codeer alles 'met de hand', dus ik heb er geen flauw idee van hoe je met Joomla! deze wijzigingen moet aanbrengen. (Daarvoor is het te lang geleden dat ik het heb bekeken). Als het niet lukt om dit handmatig te doen, dan kun je je vraag waarschijnlijk beter stellen op een Joomla-forum. Die mensen weten (hopelijk) in ieder geval hoe Joomla werkt.

Als iets niet gelijk lukt, download ik normaal genomen even de html/css/afbeeldingen/... en bekijk het even bij mijzelf, want daar heb ik alles bij de hand. Dat gaat bij jou niet echt lukken vanwege de ingewikkelde structuur. Nou ja, het zou wel kunnen, maar dat gaat echt zeeën van tijd kosten.

Ik heb gewoon 'n willekeurige pagina genomen en het bij jou op de site uitgeprobeerd. Mogelijk heb je hier toch iets aan. De pagina die ik heb bekeken is Wij bieden aan -> opleidingen. Die is lekker kort, dus die footer zit veel te hoog. Met de wijzigingen hieronder kwam bij mij de footer netjes onderin het venster te staan.

Het basisidee is dat je die footer (die rode balk) loskoppelt van het deel erboven. Dat is nu niet het geval, want footer zit samen met #colmask in #main-content. En #main-content zit weer samen met #header en nog wat divs in #wrapper. En die zit weer in #main.
Je kunt de footer nu niet omlaag zetten, omdat die 'vastzit' aan #colmask met de teksten en zo. Die footer moet dus los van #colmask komen te staan. Dat regel je in de html. Dat moet je dus op élke pagina doen. Als je op een of andere manier met 'n template van Joomla werkt, dan zou je dat ergens centraal moeten kunnen doen, lijkt mij. Maar daar weet ik verder niets van.

Voor <div id="footer"> moet je twee keer </div> zetten. Daarmee sluit je div#main-content en div#wrapper af, waardoor de footer nu rechtstreeks in #main staat. Je hebt nu in #main twee grote blokken: de footer en de rest van de pagina.
Omdat je twee keer </div> hebt toegevoegd vóóŕ <div id="footer">, moet je twee keer </div> onder footer weghalen.

Nu is de footer losgekoppeld van de rest van de pagina. Als het je nu zou lukken om de pagina altijd even hoog te maken als het venster van de browser, zou je de footer altijd onderin het venster kunnen zetten. (Behalve als er meer in de pagina staat dan in het venster past, dan schuift de footer naar onder, zodat hij niet boven de content komt te staan).

Om de pagina altijd even hoog te krijgen als het venster, moet je dat op 'n paar plaatsen opgeven.
(De onderstaande regelnummers kunnen iets afwijken bij jou.)
Bij regel 5 in styles.css bij body voeg je toe: height: 100%;
Nu is de body altijd even hoog als het venster.

Bij regel 80 in styles.css voeg je bij #main toe: height: 100%;
Nu is ook de inhoud van de pagina altijd even hoog als het venster.

Bij regel 29 in styles.css voeg je bij #footer toe:
position: absolute; bottom: 0;
De eerste ouder van #footer met een position is #main. #footer wordt hierdoor gepositioneerd ten opzichte van #main. En omdat #main altijd even hoog is als het venster van de browser, dus tot aan de onderkant, komt #footer altijd onderaan te staan.

Tenslotte moet je onderaan de rest van de pagina nog 'n marge toevoegen, omdat de footer anders over de onderste regels komt te staan (als er genoeg tekst is.)
Bij regel 87 in styles.css voeg je toe: margin-bottom: 30px;
Die 30px moet je even uitproberen. Het moet de hoogte van de footer zijn. Hierdoor krijg je onderaan de tekst e.d. een loze ruime, waar de footer in kan komen te staan.

Veel meer dan dit kan ik vrees ik niet doen. Ik kan zien hoe je het 'met de hand' aan kan brengen en in welke bestanden, maar als dat via 'n editor van Joomla of zo moet, dan kan ik daar niet mee helpen. Dan vrees ik dat je toch bij 'n forum over Joomla uit gaat komen.

Als het helemaal niet lukt, dan wordt het hier lastig. Maar als het gedeeltelijk lukt of zo, of er treden vervelende bijwerkingen op of zo (kan prima), dan kan ik mogelijk nog wel wat helpen.