Javított kétoszlopos elrendezés. Javítva a felső menü és a lebegő oldalsáv a WordPressben A leghatékonyabb módszer
Mik az elrendezési követelmények?
- Gumi kétoszlopos elrendezés
- oldalsáv fix szélessége 300px
- a tartalom a szélesség többi részéig ki van feszítve.
- láblécet az aljára nyomva (ebben az oktatóanyagban nem mutatom be, hogyan kell ezt csinálni).
Milyen CSS-problémák merülnek fel egy ilyen elrendezés elrendezése során:
1 út.
Ha lebegtesz blokkokat, akkor fix szélességet kell adni nekik(1 oldalsávot nem lehet 300 képpontra, a tartalmat 100%-ra állítani.) Ilyenkor vagy lecsúszik a tartalom, vagy megjelenik egy 300 képpontos vízszintes görgetés balra. Nos, a legfontosabb, hogy megértsük, hogy ez a módszer nem felel meg nekünk.
2 út.
Sok szedő kínálja ezt a módszert, mire gondolnak?! A módszer lényege, hogy beállíthatjuk, hogy az oldalsáv 300-as szélességben lebegjen, és ne lebegjen a tartalom, és a margó balra: 300px. Jó módszer, és úgy tűnik, minden olyan jól működik. Őszintén szólva azt hittem, ez a legjobb módszer, de ennek a módszernek megvannak a maga buktatói. A módszer elhagyásának az az oka, hogy ha hirtelen pótolunk a tartalomban például egy menüt lebegtetett li-vel vagy bármilyen más lebegő blokkal, majd ezeket a clear:bottal törölni akarjuk, akkor ennek a blokknak az alsó szegélye elcsúszik. le az oldalsáv alsó szegélyének szintjéig (Mi és nem furcsa, mivel a hab kitisztul, ezt elkerülheti, ha állítson be egy úszó blokkot egy fix magasságba, de egyáltalán nem érdemes fix magasságot beállítani).
3 út.
Használható oldalsáv pozíció abszolút de csak ha te biztosak vagyunk benne, hogy a tartalom magasságban nagyobb lesz, mint az oldalsáv ellenkező esetben az oldalsáv teljes tartalma elfér a láblécben (elvégre az abszolút pozicionálás kilóg az általános áramlásból).
De ami engem illet, ez sem túl jó módszer!
4 irányú.
"Remek módszer, ha bármilyen hibája van, kérjük, írja meg véleményét. De szerintem ez a legjobb módszer."
- A módszer előnyei: először is a DOM-tartalom az oldalsáv elé kerül, ami jó a keresőmotoroknak.
- a láblécbe semmi sem fog beleférni
- Bármely blokk törölhető, és semmi sem fog lecsúszni az alsó szegélyre (Tehát a második módszer problémáin túljutottunk).
Általában hogyan működik: nézd meg a kódot, először jön a tartalom, majd az oldalsáv. erre a két blokkra úszót állítottunk be (persze az oldalléc lecsúszik). ezután beállítjuk az oldalsáv tulajdonság margin-left:-100%. nagyszerű, visszakerült a helyére, és a tartalom behúzása a margó-leir:300 képponttal.
html
css
.oldalsáv(szélesség: 300 képpont;
display:block;
balra lebeg;
árrés: 0 0 0 -100%;
}
.tartalom(
min-szélesség: 723 képpont;
display:block;
balra lebeg;
margó: 0 0 0 220 képpont;
}
Lebegő blokk (vagy ahogy más néven mozgó, rögzített, beragadt) szükséges az oldalon, hogy a felhasználó az oldal görgetése során egy rögzített elemet lásson, amelyben a leggyakrabban a reklámok helyezkednek el (teaser, banner vagy kontextus).
Jaj, az adsense szabályai ezt tiltják nekünk. Sok webhelytulajdonos azonban saját felelősségére figyelmen kívül hagyja a szabályokat. Talán nem is büntetik ezért, de nem tanácsolom a kockázatot.
Ilyen blokkokban helyezem el a YAN-t, a teasereimet/bannereimet, és néha reklám helyett hasonló bejegyzéseket, vagy valamilyen hasznos információt jelenítek meg a látogató számára.
Elmondjuk, hogyan készíthetsz lebegő blokkot a webhelyeden.
Feladat: az oldalsáv (oldalsáv) utolsó blokkját lebegővé tenni. Sőt, hogy csak abban a pillanatban ragadjon meg, amikor a felhasználó görgetéssel eléri, és ne azonnal az oldal megnyitásakor. Ezenkívül a blokknak „le kell ragadnia”, el kell érnie a láblécet (azaz nem kell átfednie azt).
A leginkább működő mód
A ragadós blokknak számos megvalósítása létezik, de nem mindegyik működik megfelelően. Személyes tapasztalatból mondom: ugyanaz a blokk-telepítési módszer működhet az egyik oldalon, és a jambok megjelennek egy másik oldalon.
Az alábbiakban egy példa látható egy lebegő blokkra, amely szinte minden olyan webhelyen működött, amelyre telepítettem. Nem voltak kecskék. A motor sem fontos (DLE, WordPress, LiveStreet stb.).
Illessze be a következő HTML-kódot az oldalsáv kívánt helyére:
$(window).scroll(function() (
var sb_m = 20 ; /* felső és alsó párnázás */
var mb = 300; /* pincemagasság margóval */
varst = $(ablak).scrollTop() ;
var sb = $(".sticky-block" ) ;
var sbi = $(".sticky-block .inner" ) ;
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height () ;
If(sb_h + $(document).scrollTop() + sb_m + mb< $(document)
.height
()
)
{
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("paddingTop" : h) ) ;
}
más(
sb.css(( "paddingTop" : 0 ) );
}
}
}
)
;
Ebben a kódban beállíthatja a lábléc tetejét, alját és magasságát, pl. az a magasság, ahol a blokknak meg kell állnia.
Most a JS-t is beszámítjuk. Ehhez írja be a HEAD szakaszba: