A "Lábléc" általában a weblap elrendezésének legfelső része. A lábléc elhelyezésének leggyakoribb nehézsége az, hogy mindig az ablak alján helyezkedjen el, függetlenül az oldal teljességétől vagy a böngésző típusától. A blokkelrendezésre való hatalmas áttérés óta meglehetősen sok megoldás létezik a problémára, és az egyiket alább mutatjuk be.
Szükséges
A CSS és a HTML alapismeretei
Utasítás
1. lépés
Vegyük alapul a leggyakoribb oldalelrendezési sémát - három blokkot helyezünk egymás fölé. A felsőt (fejlécet) mindig az ablak felső határához, az alsót (lábléc) - az alsó határhoz kell igazítani, a főnek (törzs) pedig mindig ki kell töltenie a köztük lévő összes helyet. A forráskódnak tartalmaznia kell egy linket az XHTML 1.0 átmeneti specifikációra, és a stílusok leírását egy külső CSS fájlba kell helyezni (az Opera 9. XX problémáinak elkerülése érdekében). A struktúra HTML leírását a fő az oldal törzse. Természetesen a legfelső blokktól kezdődik, amelynek címkéjében egy értéket tartalmazó azonosító attribútumot kell elhelyezni, például: divHead:
Fejléc blokk.
A fő blokknak pár beágyazott blokkból kell állnia. A külső megkapja a divOut azonosítót, a belső pedig a divContent:
Központi téma.
A lábléc beállítása divFoot:
Oldal lábléc.
2. lépés
Az oldal teljes HTML-kódjának így kell kinéznie:
Három blokk
@import "style.css";
Ez egy fejlécblokk.
Központi téma.
Ez az oldal lábléce.
3. lépés
A stílusleírás a következő elrendezési mechanizmust valósítja meg: a középső blokk (divOut) 100% magasságra van állítva, a felső blokk (divHead) abszolút pozícionálást kap, az alsó pedig relatív. A fő tartalmi blokkban (divContent) fent kell lennie egy szabad helynek, amely megegyezik a fejléc blokk magasságával, hogy ne fedje át az oldal fő tartalmát. Az alsó blokknak (láblécnek) pedig a tetején negatív margóval kell rendelkeznie, amely megegyezik a blokk magasságával. Ez a böngészőablak alsó határa fölé emeli. Ez a mechanizmus a következő tartalmú css fájl segítségével valósítható meg: * {margin: 0; párnázás: 0}
html, body {magasság: 100%;} body {
pozíció: rokon;
szín: # 000;
}
#divOut {
margó: 0;
min-magasság: 100%;
háttér: #FFF;
szín: # 000;
}
* html #divOut {magasság: 100%;}
#divHead {
pozíció: abszolút;
bal: 0;
felső: 0;
szélesség: 100%;
magasság: 80px;
háttér: # 2F5000;
túlcsordulás: rejtett;
text-align: center;
szín: #FFF;
} #divFoot {
pozíció: rokon;
egyértelmű: mindkettő;
margin-top: -60px;
magasság: 60px;
szélesség: 100%;
háttérszín: # 2F5000;
text-align: center;
szín: #FFF;
}
.divContent {
szélesség: 100%;
balra lebeg;
topding-top: 81px;
} A stíluslapnak a HTML-kódban megadott neve: style.css.
