Det nedersta horisontella blocket i en sidlayout kallas ofta för en "sidfot". I den, som i andra block på sidan, placeras designelement, men till skillnad från andra uppstår ofta specifika problem med placeringen av just detta block. De är kopplade till det faktum att olika webbläsare förstår standarderna för CSS-språket annorlunda och det kan vara ganska svårt att få sidfoten att vara längst ner i webbläsarfönstret. Nedan följer koden för en av lösningarna på detta problem.
Nödvändig
Grundläggande kunskaper om CSS och HTML
Instruktioner
Steg 1
I den allra första raden i sidans källkod placerar du en hänvisning till XHTML 1.0 Transitional-specifikationen:
Steg 2
Placera sidblockets huvudblock inuti dokumentet (mellan taggarna och). Blocket i vilket huvudinnehållet kommer att placeras måste bestå av två kapslade lager. Låt till exempel den yttre ha identifieraren OuterDiv och den inre - InnerDiv:
Det är här huvudinnehållet på sidan kommer att vara.
Bakom dem placerar du ett sidfotblock med en identifierare, till exempel FooterDiv:
Sidfot på sidan.
Steg 3
Placera en länk till en extern fil i HTML-kodens huvuddel (mellan taggarna och) med en beskrivning av css-stilar:
@import "footerStyle.css";
Steg 4
Spara den fullständiga koden för huvudsidan i en fil med html-tillägget. Det kan se ut så här:
Pressad sidfot
@import "footerStyle.css";
Det är här huvudinnehållet på sidan kommer att vara.
Sidfot på sidan.
Steg 5
Skapa en stilarkfil - en vanlig textfil som ska sparas med css-tillägget och namnet du angav i HTML-koden (footerStyle.css). Skriv till den här filen följande stilbeskrivningar för blocken som används på sidan:
* {marginal: 0; stoppning: 0}
html, kropp {höjd: 100%;}
kropp {
position: relativ;
färg: # 222222;
}
#OuterDiv {
marginal: 0;
min höjd: 100%;
bakgrund: #aaaaaa;
färg: # 222222;
}
* html #OuterDiv {höjd: 100%;}
#FooterDiv {
position: relativ;
tydlig: båda;
margin-top: -60px;
höjd: 60px;
bredd: 100%;
bakgrundsfärg: DarkBlue;
textjustera: centrum;
färg: #eeeeff;
}
. InnerDiv {
bredd: 100%;
flyta till vänster;
}
