Hvordan få en webside for å klistret til bunnen
Når du oppretter en bunntekst for nettstedet ditt, ofte, er det vanskelig å få dette elementet for å holde seg til bunnen av siden. Problemet oppstår når du ikke har nok innhold til å fylle siden din, noe som gjør bunnteksten innholdet vises høyere opp. Heldigvis kan du skrive en serie av Cascading Style Sheets (CSS) regler for å løse dette problemet. Bruk din tekst editor program for å lage CSS som sikrer dine webside pinner til bunns i alle de store nettleserne.
Bruksanvisning
1 Ta opp din tekst editor program og lansere websiden dokumentet du ønsker å endre. Plasser markøren før den avsluttende </ head> -taggen og skriv inn følgende CSS-kode:
<Style type = "text / css">
html, body {}
.footer, .Kjør {}
.innhold{ }
</ Style>
Elementene er oppført mellom stil koder skape plassholdere for reglene som får websiden footer å holde seg til bunnen.
2 Plasser markøren mellom klammeparenteser i "html, body" regelen og skriv "height: 100%;" inne i parentesene. Dette attributtet gjør at besøkende til å minimere eller maksimere Web side i et nettleservindu.
3 Type "height:;" i .footer, .Kjør stil og angi en tallverdi for å angi hvor høyt du vil at bunnteksten innholdet skal vises. For eksempel:
.footer, .Kjør {height: 175 piksler; }
4 Skriv "min-height: 100%;" og "height: 100%;" og "height: auto viktig;!" inne i ".content" regelen som formaterer området der du skriver din webside informasjon. Videre skriver du "margin: 0 auto;" og angi negative margin på bunnteksten høyde. Din komplette CSS-kode nå ser ut som følgende:
<Style type = "text / css">
html, body {height: 100%; }
.footer, .Kjør {height: 175 piksler; }
.content {min-height: 100%; height: 100%; ! Height: auto viktig; margin: 0 auto -175px; }
</ Style>
5 Plasser markøren under begynnelsen <body> -taggen, og skriv inn HTML-kode som gjelder CSS på websiden:
<Div class = "content">
<P> Skriv inn din webside informasjon her. </ P>
<Div class = "flytte"> </ div>
</ Div>
<Div class = "footer">
<P> Skriv inn din footer innhold her. </ P>
</ Div>
6 Lagre filen og forhåndsvise det i en nettleser for å se den nye nettsiden bunntekst.
Hint
- Den ".Kjør" delen av stilen regel hjelper websiden pinne til bunnen.
- Den "! Viktig" erklæring etter en egenskap som gjør at attributtet alltid følges selv om noe annet etterpå motsier det.
- Hvis du legger til padding eller border attributter i .footer, .Kjør regel, sørg for å ta hensyn til denne verdien når du oppretter en negativ margin i .content stil.