Waarom staat mijn voettekst midden op mijn webpagina?

Een voettekst van een website kan om een aantal redenen in het midden van de webpagina verschijnen en niet onderaan. Een van de meest voorkomende is dat de inhoud van de website klein is en de voettekst naar het midden wordt geschoven. De "" containers met de voettekst kunnen verkeerd zijn gecodeerd, de marges of opvulling kunnen verkeerd zijn en de eigenschap "zweven" kan verkeerd zijn.

Voettekstpositie

De footer CSS-functie "positie" bepaalt waar de voettekst op de webpagina wordt geplaatst ten opzichte van de andere pagina-elementen, zoals de koptekst en de hoofdtekstinhoud. De vijf types van positionering zijn statische positie, vaste positie, relatieve positie, overlappende positie en absolute positie. Absolute positionering in de footer wordt gebruikt, zodat het footer-element zich niet gedraagt in relatie tot de andere elementen. Voeg de "positie: absoluut;" toe codering binnen de tags "#footer" -haak "{" en "}". Voeg daarnaast "bottom: 0;" toe in de regel direct onder de codering "positie". Nu staat de voettekst absoluut onderaan de "DIV" -container op de webpagina.

Voettekst breedte en hoogte

De eigenschappen width en height van de voettekst kunnen de positionering van de voettekst verstoren. Als de voettekst te groot is, neemt deze te veel ruimte op aan de onderkant van de webpagina. Binnen de "#footer" -markeringstags van "{" en "}" staat de "width: Xpx;" en "height: Xpx;" codering. Verander de breedte naar "100%" om de voettekst even breed te maken als de rest van de inhoud van de website. Verander de hoogte naar de gewenste pixelgrootte, zoals "60px" of "75px". Deze twee wijzigingen kunnen ertoe bijdragen dat de voettekst naar de onderkant van de webpagina wordt gedrukt.

Marges en opvulling

Marge en opvulcodering kunnen de positie van het voettekstje verstoren. Wanneer de voettermarges te smal zijn of de opvulling te breed is, verschuift de voettekstpositie en kan deze naar het midden van de webpagina gaan. Een eenvoudige oplossing is om de marges en opvulling volledig te verwijderen, zodat die voettekleuren overeenkomen met de rest van de codering. Zoek de eigenschap "#footer" in de codering van de webpagina. Binnen de brackettags van "{" en "}" bevinden zich de "margin: Xpx Xpx Xpx Xpx;" en "opvulling: Xpx Xpx Xpx Xpx;" codering. Nu worden de marges en vulling van het voettekstje bepaald door de tags "#body" en "#container" bovenaan de webpagina. Verwijder beide coderingslijnen en vernieuw de webpagina.

De containerlay-out

Een voettekst van de website is een element dat zich binnen de algemene DIV-containerlay-out bevindt. Wanneer de eigenschappen van de containerlay-out onjuist zijn, kan dit van invloed zijn op de positie van het voettekstvak op de webpagina. Binnen de "#container" -markeringstags van "{" en "}" zijn dezelfde "hoogte" en "positie" -eigenschappen. Verander de "hoogte" in 100% en verander de "positie" in relatief. Voeg een nieuwe regel codering toe aan de "#container" en typ "min-height: 100%;", waarmee de volledige containerlay-out een nieuwe minimumhoogte krijgt. Nu blijft de volledige webpagina op de volledige hoogte van het scherm, ongeacht de hoeveelheid inhoud. De relatieve positie werkt ook positief samen met de absolute positie van de voettekst.