Térjünk át egy működő példára

Amit látunk elrendezési hibák a szögelt lábléc effektus megvalósítása szempontjából? Ezt látjuk
1) A webhely lábléce egy id=layout blokkon belül van, amelynek nincs százalékos magassága. Elméletileg azt, a szülőket és a .content-left tartalomblokkot 100%-os magasságra kell állítani. Utóbbival problémák merülnek fel – nem erre van kiképezve. Ezért egy rétegközi blokk hiányzik, vagy a lábléc rossz szinten van. Kívül,
2) a lábléc magassága változó (ez függ a lista elemeinek számától és a betűmérettől, ez nem HTML-ből, hanem CSS-ből látszik). ÉS
3) felett #elrendezés van egy hirdetési blokk, amelynek fix magassága 90 képpont;
4) nincsenek igazítási blokkok sem a láblécben, sem (általánosan szólva) a blokkban #elrendezés(Igen, de a blokk felett .rotated_posts; azonban talán a láblécnek kellene tulajdonítani).

4. pont – forgatókönyvvel kell rajzolni.
Úgy tűnik, könnyű lenne kitalálni a harmadik pontot a #layout(margin-top:-90px;) hozzáadásával, de ne feledje, hogy ez a blokk nem biztos, hogy létezik - a szalaghirdetés elnyomja, vagy a hirdetők hirtelen úgy döntenek, hogy nem Mutasd meg. Számos olyan oldal van az oldalon, ahol nem. Ezért a függőség margin-top egy hirdetésblokkból rossz ötlet. Sokkal jobb - helyezze be #elrendezés Akkor nem áll útban.

Az első pont az, hogy ahhoz, hogy a szögezett lábléc egyáltalán működjön, alá kell helyezni a láblécblokkot #elrendezés. A javascript segítségével azonban más körmös lábléc sémákat is meg lehet valósítani, de mindenesetre szükség van a JS-re vagy az eredetileg helyes elrendezésre, hogy ezt nélkülözze.

Mivel nem lehetünk erősebbek az oldal legfrissebb layout tervezőjénél, aki a láblécet „becsapta” a tartalomba, elhalasztjuk a lábléc helyes elhelyezésének gondolatát a jövőbeli oldalunkon (ami tehát „menőbb” lesz) mint a Habr!), és a Habr-t javascripttel (userscript) boncolgatjuk a megfelelő állapotokra. (Mondjuk rögtön, nem a tördelő, nem a váltó a hibás, hanem a helyszín típusa természetesen meghatározza a projektmenedzsment stratégiai döntését.) Így nem érjük el az ideálist, mert a betöltési folyamat első egy-két másodpercében az oldal rossz elrendezésű lesz. De fontos számunkra a koncepció és a képesség, hogy felülmúljuk az informatikusok világának legnépszerűbb oldalát.

Ezért a szkriptben a megfelelő helyre (korábban, az oldalbetöltés végén) írjuk a reklám DOM blokkjainak és a láblécnek az átvitelét a megfelelő helyre. (Készüljünk fel arra, hogy a userscriptek miatt a megoldás bonyolultabb lesz, mint egy tiszta.)
var dQ = function(q)(return document.querySelector(q);) //a var topL = dQ("#topline") rövidítéséhez, lay = dQ("#elrendezés"), láb = dQ("#láb" ); if(topL && lay) //banner - a tartalomblokkon belül lay.insertBefore(topL, lay.firstChild); if(lay && láb && lay.nextSibling) //a lábléc áthelyezése lay.parentNode.insertBefore(footer, lay.nextSibling);
A blokkokat a helyükre helyezzük - most már csak hozzá kell rendelni a szükséges tulajdonságokat az elemekhez. A lábléc magasságát pontosan be kell állítani, egyszerűen azért, mert a felhasználói szkript érvénybe lépésekor (oldalbetöltés végén) már tudjuk. A felhasználói szkript triggerpontja miatt, amint azt fentebb tárgyaltuk, elkerülhetetlen a lábléc megjelenítése az oldalon. Megpróbálhatsz „jó arcot” vágni, de „rossz játékkal”? Miért? Az oldal "rossz játéka" lehetővé teszi, hogy szuper erőfeszítések nélkül készítsen koncepciót, amely elegendő lesz a minőség értékeléséhez, és nem lesz szükség rá, ha "helyesen játszik" a projektben.
if(foot)( //block-aligner

láblécben h.apnd_el((clss:"clear", appendTo: lábléc)); var footH = láb.offsetHeight; //...és mérje meg a lábléc magasságát ) if(topL && lay && lábléc && lay.nextSibling)( //igazítsa a kívánt magasságú blokkot a tartalomban ("layout") h.apnd_el((clss:" clear", css:( magasság: (láb ||0) +"px"), appendTo: lay)); lay.style.minHeight ="100%"; h.addRules("#layout(margin-bottom:- "+ lábH +"px !fontos)html, test (magasság:100%)"); )
Itt megengedtük magunknak egy önállóan írt függvény alkalmazását h.apnd_el, ami nagyjából ugyanazt csinálja, mint a jQuery -
$("").css((magasság: lábH ||0)).appendTo($(lábléc))
És akkor - egy másik tipikus CSS-szabály-befecskendezési funkció - h.addRules. Itt nem lehet nélküle, mert egy szabályt kell deklarálni a " !fontos" - csak a felhasználói szkript stílusprioritásainak sajátosságai miatt.

Ezekkel a kódrészletekkel láthatjuk a szegezett láblécet a felhasználói szkriptben (leugrás után), és teljesen megértjük, hogyan kell felépíteni az oldal elrendezését. A pattogós dizájn napi rendszeres használata nem kellemes, ezért ajánlatos pusztán bemutató és tesztelés céljából elkészíteni. A HabrAjax felhasználói szkriptben egy hasonló szkriptet telepítettem, az „underFooter” beállítással zárva (a beállítások listájában „pipát” tegyünk a „lábléc aljára szegezett” elé), a 0.883_2012-09- verziótól kezdve. 12.

A szögezett lábléc befolyásolja a ZenComment stílusok frissítésének szükségességét, ha be vannak állítva? Dehogynem. Az összetett stílus-predenciális lánc miatt, amelyben a userscript által beillesztett stílusok a legalacsonyabb prioritásúak, kissé módosítanunk kellett a felhasználói stílusokat lehetőségeket munka szögezett lábléccel. Ha nem frissíti a felhasználói stílusokat (2.66_2012-09-12+ értékre), a lábléc pontatlanul fog működni.

Blokk rotated_post (három népszerű bejegyzés a múltból) logikusabban néz ki a lábléccel, így a valódi szkriptben is átkerül a láblécbe.

A második elem (az elrendezési hibák listájából) a tisztán Habr indoklása (nem vonatkoznak a felhasználói szkriptre, és részben megismétlik az előzőeket).

Az oldalakkal van egy probléma, amely megakadályozza, hogy szögezett láblécet készítsenek tiszta CSS- meghatározatlan lábléc magasság a böngésző alapértelmezett betűméretétől függően. A lábléc CSS-ben való megvalósításához ki kell választania a betűtípusok relatív magasságát, de előfordulhat, hogy ezek nem működnek, ha a felhasználó számítógépe nem rendelkezik a megadott betűtípusokkal. Ezért a megoldásnak tartalmaznia kell egy javascriptet, amely átmenetekkel tudja a lábléc hozzávetőleges pozícióját a pontos pozícióhoz igazítani. Illetve, miután megvizsgálta a felhasználói szkripten elkészített megoldás elfogadhatóságát különböző platformokon, készítsen egy szögezett lábléc kiszámított telepítését - az első megfigyelések azt mutatják, hogy a megoldás praktikus.

Következtetés: az elrendezést teljesen elrendezheti a Habré-n, de ehhez olyan elrendezéstervezőre van szükség, aki egyértelműen megérti az elrendezés viselkedését, és a blokkokat a megfelelő sorrendbe rendezi. (Most a lábléc és a felső szalaghirdetés „nincs ott”, és nem úgy, hogy egyszerűen szögezett láblécet kapjanak stílusokkal.) A JS nélkül is megteheti, ha a lábléc magasságát relatív egységekben állítja be, némi margót véve hely a betűtípus határozatlanságához.

Végrehajtás

Ha engedélyezi a HabrAjax 0.883+ verziót, látni fogjuk a „szegezett lábléc” működését. Szkriptek segítségével magasságban alkalmazkodik. Lehetővé teszi, hogy értékelje, mennyivel néznek ki jobban a szögezett láblécű oldalak a hagyományos oldalakhoz képest. A ZenComment felhasználói stílusok kompatibilisek a szkriptekkel, de a helyes működés leszögezve velük a láblécet, telepítenie kell a ZenComment 2.66_2012-09-12+ verzióját.

Megvalósítási viselkedési tények

A láblécekkel, stílusokkal és forgatókönyvekkel ellátott sámánizmus sámánizmus (csak az elmélet támogatja). BAN BEN különböző böngészők kissé eltérő viselkedés, de néhány helyen - váratlan. Felhasználói szkriptek és blokkok átrendezése nélkül az eredmény más lesz. Ezt adták a felhasználói szkripten végrehajtott kísérletek.

1) Firefox - a lábléc ugrások váratlan hiánya. Furcsa, hogy nincsenek ott – a renderelés a lábléc alulra helyezése után történik.

2) Chrome - meglepett egy "vándortekerccsel" - az oldal alján másodpercenkénti egyszeri üres helyek kerülnek az oldalra - valami hiba történik a magasságszámítással. A kezelés a html,body(magasság:100%) hozzáadásával történik a felhasználói stílushoz, de nem garantált, hogy mindig működni fog. Megbízhatóbb annak ellenőrzése, hogy a dokumentum nem haladja meg az ablak magasságát, és ha nem, akkor mozgassa a láblécet, különben semmi. Az ugrással - minden rendben van, ez van.

3) Opera – nincs ugrás (v. 12.02) az első oldal betöltésekor, de a gyors újratöltésnél lábléc ugrás jelenhet meg. Egyébként nem kevésbé helyesen vezet, mint az Fx.

Nos, konkrétan meg kell tanítania a Chrome-ot a helyes viselkedésre (szkripttel), és ki kell terjesztenie a verziót felülvizsgálatra ezen az űrlapon. Ezért a felhasználói szövegrész egy kicsit bonyolultabb, mint a cikkben megadott.

Emlékeztetni kell arra, hogy ez nem egy teljes megvalósítás – például nem veszi figyelembe az ablakok felhasználó általi átméretezésének eseteit. Az áthelyezés előtti és utáni láblécmagasság-változtatások ritka (gyakorlatilag) kombinációi is megtalálhatók, ahol a logika kudarcot vallana anélkül, hogy kellemetlenséget okozna. A hiányosságokat szándékosan hagyják el, mert megmarad a revízió összetettségének és az ideiglenes megoldásnak az egyensúlya.

Ennek eredményeként kiderült, hogy ez egy teljesen működőképes munkaséma, legalábbis a gyors asztali számítógépek számára. Ha a lábléc helytelen viselkedését észleli, akkor az "under Footer" beállítást le kell tiltani.

Milyen oldalakon hasznos?

Egy szabványos webhelyen, felhasználói stílusok nélkül, még a rövid kérdezz-felelek oldalak is hosszabbak 1500 képpontnál, ami a legtöbb esetben észrevehetetlen vízszintes monitoron. De még a közönséges monitoroknál is gyakran találkoznak a felhasználók körülbelül 1300 pixel magasságú személyes oldalai, ahol a szeg nélküli lábléc teljes dicsőségében jelenik meg. Nem túl hosszú és számos oldal a felhasználói beállításokban.

A ZenComment felhasználói stílusok alkalmazásakor nagymértékben csökkentik a szükséges oldalmagasságot, és előfordulhat, hogy a HabrAjax felhasználói szkript nem jeleníti meg az oldalsávok egy részét vagy mindegyikét. Ezért a szkriptek és stílusok esetében sokkal gyakrabban figyelhető meg a szeg nélküli lábléc hatása. Ezért logikus, hogy a láblécjavítás először a HabrAjaxban jelent meg. De még egy normál webhelyen is van számos olyan oldal, ahol hasznos lenne egy szögezett lábléc.

Lesz-e támogatás?

Az oldal viselkedése az elmúlt évben azt mutatja, hogy a fejlesztők (és így a menedzsment) olyan funkciókat kezdtek megvalósítani, amelyek korábban csak a felhasználói szkriptekben és felhasználói stílusokban léteztek. Például év elején írtam, ahol sok apró kívánságot gyűjtöttem össze. Hat hónappal később visszatértem hozzá, és elégedetten vettem tudomásul (közvetlenül a szövegben; olvasható az "UPD" és a dátumok), hogy számos kívánságként leírt funkció már megvalósult az oldalon.

Ezután nézzük a „nyilakat” a négyzetek helyett a megjegyzések értékeléséhez. Körülbelül 3 éve jelentek meg az almalexa ("Prettifier") felhasználói erőiben, és körülbelül 2 évvel ezelőtt kerültek be a ZenCommentbe. Körülbelül 2-3 hónapja jelentek meg az oldalon. Kezdi azt hinni, hogy egy idő után a nyilak egy bizonyos távolságot el fognak terjeszteni, ahogyan azt a ZenCommentben teszik (egy nyíl a számtól balra, a második jobbra), hogy kevesebbet tévesszen el. Címkék hozzáadása

Valószínűleg nem egyszer láttad már az oldal aljára rögzítve a láblécet, függetlenül a tartalom mennyiségétől. CSS-el csináljuk!

Hogyan rögzíthetünk láblécet (láblécet) vagy láblécet a weboldal aljára?

1. Kezdjük a stílusokkal – style.css fájl

html,body(
margó: 0;
display:table;
magasság: 100%;
szélesség: 100%
font-család: Calibri, sans-serif;
}

Csomagoló (
kitöltés: 20 képpont
magasság: auto;
}

lábléc(
háttér: #f1f1f1;
display:table-row;
magasság: 1px;
}

2. HTML kód
Itt található az összes jelölés és lorem ipsum (sablonszöveg).

3. Mindkét fájlnak ugyanabban a könyvtárban kell lennie.
Most átméretezzük a böngészőablakot, és megnézzük, hogyan van rögzítve a lábléc alul.

4. Nézzünk egy példát az alul rögzített lábléc munkájára.

Hogyan tolja a láblécet az oldal aljára? Ezt a kérdést sokan teszik fel, akik szembesülnek a webhely elrendezésével. A helyzet az, hogy ha ezekben az elrendezésekben a blokkok magassága nincs kifejezetten megadva, akkor ez a tartalmuk mennyiségétől függ, illetve ha ez a tartalom elég kicsi, akkor a teljes elrendezés a böngészőablaknál kisebb magasságot foglalhat el. . Természetesen mindez nem tűnik túl szépnek. Most bemutatok néhány módszert, amellyel a láblécet az oldal aljára tolhatja, és ezáltal vonzóbbá és ismerősebbé teheti az elrendezést.

Mindegyik példában abból indulunk ki, hogy webhely elrendezése a következő szokásos szerkezettel rendelkezik (az elrendezés eltérhet, de a módszerek univerzálisak):

Továbbá a kívánt eredmény elérése érdekében további blokkokat, CSS-tulajdonságokat stb. adnak hozzá az elrendezéshez. Azonban abban az elrendezésben, ahol úgy dönt, hogy a láblécet az oldal aljára helyezi, előfordulhat, hogy ezek a blokkok vagy egyes tulajdonságok már jelen vannak, így nem kell újra hozzáadnia őket. Minden olyan CSS-tulajdonság, amely közvetlenül részt vesz a lábléc aljára szögezésében, megjegyzésekkel van ellátva.

Nyomja le a láblécet a pozicionálás segítségével

A példa leírása

1. Az összes elrendezési blokkot egy további wrapper blokkba csomagolták, id= "wrapper" , amely 100%-os minimális magasságot (CSS tulajdonság) kapott, így a böngészőablak teljes magasságáig nyúlt, de szükség esetén tovább nyúlhatott. Mivel azonban a százalékos értékek az elődhöz viszonyítva vannak, kifejezetten meg kellett adnunk a magasságot (CSS ) a és címkék számára, hogy működjön.
2. A következő lépés a lábléc abszolút pozicionálása (CSS) volt a burkolóblokkhoz képest annak alsó oldalához (CSS). Így kiderült, hogy a lábléc a lap aljára van nyomva.
3. Mivel az abszolút pozicionálás kihúzza az elemet a folyamatból, amikor információt ad hozzá tartalmi blokkokhoz és menükhöz, azok egy része a nyomott lábléc alá kerül. Hogy ez ne forduljon elő, az id= "content" és id= "menu" elemek alsó paddingot (CSS ) kaptak, amely megegyezik a lábléc magasságával. Most bemennek a lábléc alá, és lenyomják.
4. Mivel az elrendezésünkben a menüt tartalmazó blokk lebegő (CSS ), a lábléc továbbra sem veszi észre, és ennek megfelelően a menü nem nyomja le. Ennek javítására egy újabb blokkot hoztak létre (class="clear" ), amely megszakítja a burkolást (CSS tulajdonság). Mellesleg, ha nem tervezi az IE6 és IE7 támogatását, akkor e blokk helyett alkalmazhat egy pszeudoelemet a lábléc előtti utolsó blokkhoz (itt ez a "tartalom"), és egyszerűen megtörheti. az áramlás.

Az első bekezdésben egy CSS tulajdonságot alkalmaztak a minimális magasság megadására, ami nem érthető internet böngésző 6. De ő a tulajdonságot éppen úgy érti, mint a minimális magasságot. Ez a böngésző bizonyos esetekben figyelmen kívül hagyja a szabályt. Ebben a példában ezt a két funkciót használtuk a létrehozáshoz haka hogy a megfelelő dolgot tegye anélkül, hogy ez más böngészőkre hatással lenne.

Nyomja le a láblécet további blokkok segítségével

A példa leírása

1. A lábléc kivételével az összes elrendezési blokkot egy további id= "wrapper" blokkba csomagolták, amely 100%-os minimális magasságot (CSS ) kapott. Ez azért történt, hogy a burkolóblokk legalább a böngészőablak teljes magasságáig nyúljon, de szükség esetén (ha sok a tartalom) tovább is nyúljon. Most a burkolónk magassága egyenlő lett a böngészőablak magasságával, és a teljes HTML oldal magassága = a burkoló magassága + a lábléc magassága.
2. Az első bekezdés akciói következtében láblécünk bár az oldal aljára volt nyomva, de túljutott a böngészőablak alsó határán, ami nem jó. Hogy látható legyen, negatív felső margót (CSS ) adtak rá, melynek mérete megegyezik magának a láblécnek a magasságával. Minden, a lábléc le van nyomva, és az oldal alján van.
3. Mivel az előző bekezdésben a rögzített láblécnél jeleztük a felső negatív margót, tartalmi blokkokhoz vagy menükhöz való információ hozzáadásakor annak egy része ebbe a lábléc alá kerül. Ennek elkerülésére egy újabb blokkot hoztak létre id= "footer_correct" -vel, melynek magassága megegyezik (akár kicsit többet is tehet) a lábléc magasságával. Így ez a korrekciós blokk megy a nyomott lábléc alá, és nyomja le, megakadályozva az információk elrejtését.
4. Egy lebegő törés (CSS ) lett hozzáadva a felülírási mezőhöz, hogy ne kerüljön körbe a menüben, ha meghaladja a tartalom magasságát. Ennek megfelelően ezt az áramlási megszakítást, mint szükségtelent, magából a láblécből eltávolítottuk.

Az első példához hasonlóan itt is egy speciális feltörést alkalmaztak az IE6-hoz, amely lehetővé teszi a minimális magasság beállítását.