Hvorfor er min bunntekst i midten av nettsiden min?

En nettside footer kan vises midt på websiden og ikke på bunnen av en rekke årsaker. En av de vanligste er at innholdet på nettsiden er liten og fotfeltet er presset opp til midten. Containerene med bunnteksten kan være kodet feil, margenene eller polstringen kan være feil, og "float" - egenskapen kan være feil.

Bunnposisjon

Foten CSS "posisjon" -egenskapen bestemmer hvor fotfeltet er plassert på nettsiden i forhold til de andre sideelementene, for eksempel topptekst og hovedinnhold. De fem typer posisjonering er statisk posisjon, fast posisjon, relativ stilling, overlappende posisjon og absolutt posisjon. Absolutt posisjonering i bunnteksten brukes slik at bunnelementet ikke oppfører seg i forhold til de andre elementene. Legg til "posisjon: absolutt;" koding inne i "#footer" braketten "{" og "}" -kodene. I tillegg legger du til "bunn: 0;" i linjen rett under "posisjon" -kodingen. Nå er bunnteksten plassert helt nederst på websiden "DIV" -beholderen.

Bunnbredde og høyde

Fodbredden og høydeegenskapene kan forstyrre fotfotsposisjoneringen. Hvis bunnteksten er for stor, tar det opp for mye plass nederst på nettsiden. Innenfor "#footer" -brakettens tagger av "{" og "}" er oppført "bredde: Xpx;" og "høyde: Xpx;" koding. Endre bredden til "100%" for å gjøre fotfoten så bred som resten av innholdet på nettstedet. Endre høyden til ønsket pikselstørrelse, for eksempel "60px" eller "75px." Disse to endringene kan bidra til at fotfeltet presses ned til bunnen av nettsiden.

Marger og polstring

Krymping av margen og polstring kan forstyrre bunnposisjonen. Når bunnmarginene er for smale eller polstringen er for bred, skifter bunnposisjonen og kan flytte til midten av nettsiden. En enkel løsning er å fjerne margene og polstringene helt, slik at disse bunntekstene tilsvarer resten av kodingen. Finn "#footer" -egenskapen i websiden koding. Innen parentesetikettene "{" og "}" er "margin: Xpx Xpx Xpx Xpx;" og "polstring: Xpx Xpx Xpx Xpx;" koding. Nå er bunnmarginene og utfyllingen bestemt av "#body" og "#container" -koder øverst på websiden. Fjern begge kodelinjer og oppdatere nettsiden.

Container Layout

En nettside footer er ett element som er plassert i den generelle DIV container layout. Når beholderlayoutegenskapene er ukorrekte, kan det påvirke bunntekstposisjonen på nettsiden. Inne i "#container" -brakettens tagger av "{" og "}" er de samme "høyde" og "posisjon" -egenskapene. Endre "høyde" til 100% og endre "posisjon" til relativ. Legg til en ny kodelinje til "#container" og skriv "min høyde: 100%;", som gir hele beholderoppsettet en ny minimumshøyde. Nå vil hele nettsiden forbli full skjermhøyde, uansett mengden innhold. Den relative posisjonen interagerer også positivt med den absolutte posisjonen til bunnteksten.