Példák HTML és CSS - nyomja meg a lábléc az oldal aljára
Az egyes példák kezdjük a tény, hogy az elrendezés a helyén a szokásos szerkezetét (az elrendezés eltérő lehet, de hogyan univerzális):
Nyomja meg a lábléc, hogy az alján a helymeghatározás
Leírás példa
- Minden elrendezés blokkokat helyezünk egy kiegészítő blokk átalakító id = „wrapper”. amely meghatározza a minimális magasság (CSS min-height tulajdonság) 100%, hogy ez kifeszített teljes magassága a böngésző ablakot, de ha szükséges, akkor is húzza tovább és tovább. Ugyanakkor, mivel a százalékok képest a szülő, akkor az összes dolgozott ki, mi volt egyértelműen meg kell határozni a magasság (CSS magasság) címkézni és .
- A következő lépés az volt, abszolút pozicionálás (CSS helyzetben) képest Lábjegyzet csomagoló egységet az alsó (CSS alul). Így beláttuk Lábjegyzet tűzött a az oldal alján.
- Mivel az abszolút helymeghatározás elem húz egy patak, majd hozzáadjuk információnak egységekben a tartalom és a menü, akkor hagy egy részét nyomják a lábléc. Ennek elkerülése érdekében, az elemek id = „tartalom” és id = „menü” állítottak alsó padding (CSS padding) egyenlő a magassága a lábléc. Most akkor megy a lábléc, és nyomja lefelé.
- Mivel van egy blokk elrendezés menü úszó (CSS float), a lábléc még akkor nem veszik észre, és ennek megfelelően a menü nem fog nyomja le. másik blokk (class = „tiszta”) hozott létre, hogy helyes ez, amely megszakítja az áramlás körül (CSS tiszta tulajdonság). By the way, ha nem tervezi, hogy végre támogatást IE6 és IE7, akkor használd inkább a blokk az utolsó blokk előtt footer (itt ez a „tartalom”) után ál, és csak kellett, hogy egy megszakítás áramlását.
Az első bekezdést alkalmazták CSS tulajdonsággal minimális magasság, amely nem érti az Internet Explorer 6 De érti a magasság tulajdonság csak a minimális magasságot. Továbbá, ez a böngésző bizonyos esetekben általában figyelmen kívül hagyja! Fontos. Ez a két tulajdonság, és azt ebben a példában használt létrehozni egy hack. rávenni, hogy tegyenek meg minden szükséges anélkül, hogy más böngészők.
Nyomja Lábjegyzet az aljára a további blokkok
Leírás példa
- Minden egység, kivéve a lábléc elrendezés becsomagoltuk egy kiegészítő blokk id = „wrapper”. hogy a minimális magasság van beállítva (CSS min-height) 100%. Erre azért került sor annak érdekében, hogy megakadályozza a burkolat legalább nyújtva teljes magassága a böngésző ablakot, de ha szükséges (ha a tartalom egy csomó) is húzza tovább és tovább. Most a magassága pakolásaink egyenlővé vált a magassága a böngésző ablakot, és a magassága a teljes HTML-page = magasság + magassága lábléc wrapper.
- Ennek eredményeként a fellépések az első bekezdés a mi lábléc, bár szorítva az oldal alján, de elhagyta az alsó határ a böngésző ablakot, ami nem jó. Hogy emelje meg a láthatósági zónában, a felső mező negatív (CSS margin-top) mérete megegyezik a magassága a lábléc már meg érte. Minden Lábjegyzet rögzített és az oldal alján.
- Mivel az előző pontban megnyomta Lábjegyzet mondtuk felső negatív mezőben, azzal a kiegészítéssel, információt blokkokra tartalmat, vagy egy menüt, egy részét fog menni a lábléc. Ennek elkerülése érdekében, egy másik blokk jött létre az id = „footer_correct”. amelynek magassága egyenlő (lehet még egy kicsit), a magassága a lábléc. Így a javítás blokk megy alá nyomva Lábjegyzet és nyomja le, hogy a tájékoztatás rejtőzik.
- Javító egység adunk megszakítás flow (CSS tiszta), így nem folyik a menüben, ha ez nagyobb, mint a magassága a tartalmat. Ennek megfelelően a következő lábjegyzetet megszakítja flow eltávolítjuk a felesleges.
Csakúgy, mint az első példában, egy speciális hack IE6 már itt alkalmazott, ez lehetővé teszi, hogy a minimális magasságot.
- Hogyan készítsünk egy honlapot
magát ingyenes - HTML bemutató
kezdőknek - CSS Tutorial
kezdőknek - Irodalom
HTML és CSS - példák
HTML és CSS - referenciák
Hasznos weboldalak webmestereknek - szerszámok
Programok a weboldalak létrehozására