Az oldalelrendezés legalsó vízszintes blokkját gyakran "láblécnek" nevezik. Ebben, csakúgy, mint az oldal többi blokkjában, a design elemek is elhelyezésre kerülnek, de másokkal ellentétben gyakran sajátos problémák merülnek fel az adott blokk elhelyezésével kapcsolatban. Összekapcsolódnak azzal a ténnyel, hogy a különböző böngészők eltérően értik a CSS nyelv szabványait, és meglehetősen nehéz lehet elérni, hogy a lábléc a böngészőablak alsó szélén legyen. Az alábbiakban a probléma megoldásának egyik kódja található.
Szükséges
A CSS és a HTML alapismeretei
Utasítás
1. lépés
Az oldal forráskódjának legelső sorában tegyen hivatkozást az XHTML 1.0 Transitional specifikációra:
2. lépés
Helyezze az oldalszerkezet fő blokkjait a dokumentum törzsébe (a és a tagek közé). A blokknak, amelybe a fő tartalom kerül, két beágyazott rétegből kell állnia. Például hagyja, hogy a külső legyen az OuterDiv azonosítóval, a belső pedig az InnerDiv azonosítóval:
Itt lesz az oldal fő tartalma.
Mögöttük helyezzen el egy láblécblokkot azonosítóval, például FooterDiv:
Az oldal láblécét.
3. lépés
Helyezzen a HTML-kód fejrészébe (a és a tagek közé) egy hivatkozást egy külső fájlra a css stílusok leírásával:
@import "footerStyle.css";
4. lépés
Mentse a teljes törzsoldali kódot egy HTML kiterjesztésű fájlba. Ez így nézhet ki:
Préselt lábléc
@import "footerStyle.css";
Itt lesz az oldal fő tartalma.
Az oldal láblécét.
5. lépés
Hozzon létre egy stíluslapfájlt - egy egyszerű szöveges fájlt, amelyet a css kiterjesztéssel és a HTML-kódban megadott névvel kell menteni (footerStyle.css). Írja ebbe a fájlba az oldalon használt blokkok következő stílusleírásait:
* {margó: 0; párnázás: 0}
html, body {magasság: 100%;}
body {
pozíció: rokon;
szín: # 222222;
}
#OuterDiv {
margó: 0;
min-magasság: 100%;
háttér: #aaaaaa;
szín: # 222222;
}
* html #OuterDiv {magasság: 100%;}
#FooterDiv {
pozíció: rokon;
egyértelmű: mindkettő;
margin-top: -60px;
magasság: 60px;
szélesség: 100%;
háttérszín: DarkBlue;
text-align: center;
szín: #eeeeff;
}
. InnerDiv {
szélesség: 100%;
balra lebeg;
}
