Hvordan Juster en DIV til nederst på en side

Hvordan Juster en DIV til nederst på en side


I HTML kan du bruke "div" tag for å lage en rekke containere du igjen kan bruke til å vise navigasjons barer, verktøytips, søkeverktøy, innhold eller omtrent alt du kan tenke deg. Div container er kompatibel med mange CSS-stiler for å gi den dynamisk funksjonalitet og la den gli inn i det omkringliggende design eller synes å være 3D. Å få en div til å justere til bunnen av en webside til enhver tid kan være vanskelig med bruk av konvensjonell HTML. For å oppnå dette trikset, bruker CSS "posisjon" attributt.

Bruksanvisning

1 Åpne HTML-dokumentet, og plasser markøren på slutten av innholdet, like over den avsluttende </ body> -koden. Skriv inn din første div tag og gi den en unik ID:

<Div id = "footer">

Dette div vil forankre innholdet til bunnen av siden - selv om du endrer størrelsen på vinduet.

2 Skriv inn din andre div under den første, og gi det sin egen unike ID:

<Div id = "footer">
<Div id = "footerbar">

Denne andre div vil inneholde designelement som et navigasjonsfelt, bannerannonse, meldingsboks eller sosiale medier linker.

3 Opprett en ny CSS stil for første div, og gi det en posisjon av "fast" og en bunn avstand på 0 piksler. Du må også sette bredden til "100%" for å gjøre rede for endring av vindustørrelse. For eksempel:

footer {

width: 100%;
stilling: fast;
bottom: 0px;
}

4 Legg en andre CSS stil for andre div, og style det som du ønsker. Hvis du vil at div til sentrum, må du gi den en auto margin. Et eksempel på en link-bar stil vil være:

footerbar {

height: 38px;
width: 980px;
margin: 0 auto; // Sentre baren
background-color: # 000000; // Gjør bakgrunnen svart
border: 1px solid # 333; gir det en mørk grå kant
box-shadow: -1px -1px 5px # 1F1F1F; // Skaper en subtil skygge
border-radius: 5px 5px; // Lager avrundede hjørner

Den "background-color" attributt ovenfor, i kombinasjon med høyde og bredde, vil skape en svart strek 38 piksler høye og 980 piksler bredt. Den "grensen" attributt gir bar en mørk grå kant, mens "box-shadow" attributt vil gi det en subtil skygge langs toppen og siden for å hjelpe den skiller seg ut. Den "border-radius" variable skaper avrundede hjørner og er et eksempel på en av mange CSS-stiler du kan bruke eventuelt til bunn div.

Hint

  • Når du skriver CSS-stiler, husk å legge variabler for alle nettlesere. For eksempel er den borer-radius variabel en CSS3 variabel som er bare kompatibel med de nyeste nettleserversjoner. For å gjøre den kompatibel med eldre nettlesere, må du kopiere den variable ved hjelp av "-moz-border-radius" og "-webkit-border-radius" slik at eldre versjoner av Firefox, Safari og Opera er i stand til å gjengi det riktig.