Hvordan lage bunnteksten til siden ("bunntekst") til å holde seg til nederste kant av vinduet - dette er sannsynligvis det vanligste problemet i utformingen av sidene. Det er selvfølgelig løsninger, og det er flere av dem. Nedenfor er en måte å sikre at bunnteksten alltid er trykket til bunnen av siden, uavhengig av innholdsmengde og nettlesertype.
Det er nødvendig
Grunnleggende kunnskap om CSS og HTML
Bruksanvisning
Trinn 1
La oss ta et av de mer typiske paginasjonsskjemaene som et eksempel - det vil ha et loft (topptekst), hovedblokk og bunntekst. Selvfølgelig, hvis nødvendig, kan du plassere flere kolonner i hovedblokken, men vi vil ikke gjøre dette her, vi vil bare fokusere på å ikke plassere bunnteksten. HTML-koden til siden vil begynne med erklæringen om spesifikasjonen:
Mellom kodene og, i tillegg til sidetittelen, vil vi plassere en indikasjon på kodingen: I tillegg til en lenke til en ekstern CSS-fil som inneholder en beskrivelse av stiler: @import "styles.css"; Vi vil ikke plassere beskrivelse av stiler direkte inn i html-koden på siden for å unngå komplikasjoner med Opera-nettleseren i den niende versjonen. Mellom kodene og plasser blokkstrukturen på siden. Den første er selvfølgelig tittelblokken. Vi gir den topptekstidentifikatoren for å kunne stille stiler for denne blokken:
Denne overskriften er alltid øverst i vinduet.
Deretter - hovedblokken på siden. Den vil bestå av to nestede - ytre (identifikator - ytre) og indre (identifikator - ytre omslag):
Dette er hoveddelen.
Og til slutt bunnteksten:
Det er bunntekst - alltid nederst i vinduet!
Hele siden vil se slik ut:
Hvordan presse ned bunnteksten
@import "styles.css";
Denne overskriften er alltid øverst i vinduet.
Dette er hoveddelen.
Det er bunntekst - alltid nederst i vinduet!
Steg 2
La oss nå gå videre til innholdet i stilarket. Den implementerer følgende skjema: hovedsiden er satt til 100% høyde, tittelen vil være absolutt plassert, og bunnteksten vil være relativt. For å forhindre at overskriften overlapper hovedinnholdet på siden, plasseres dette hovedinnholdet i en ekstra rute i hovedboksen, og denne tilleggsboksen er satt til en toppmarge som er lik høyden på overskriftsboksen. Og bunnteksten får en negativ toppmarge som er lik høyden - på denne måten vil den bli hevet over underkanten av vinduet til full høyde. Fullt innhold av css-filen: * {margin: 0; polstring: 0}
html, kropp {høyde: 100%;} kropp {
farge svart;
posisjon: relativ;
}
#outer {
min høyde: 100%;
margin: 0;
bakgrunn: hvit;
farge svart;
} * html #outer {høyde: 100%;}
#Overskrift {
posisjon: absolutt;
topp: 0;
venstre: 0;
bredde: 100%;
høyde: 70px;
bakgrunn: # 304a00;
overløp: skjult;
farge: hvit;
tekstjustering: sentrum;
} #footer {
posisjon: relativ;
margin-top: -50px;
klar: begge deler;
bredde: 100%;
høyde: 50px;
bakgrunnsfarge: # 304a00;
farge: hvit;
tekstjustering: sentrum;
}
.outerwrap {
flyte: venstre;
bredde: 100%;
polstring-topp: 71px;
} Denne filen skal lagres med navnet vi spesifiserte i html-koden til siden - styles.css.
