Opravené rozloženie v dvoch stĺpcoch. Pevná horná ponuka a plávajúci bočný panel vo WordPress Najfunkčnejší spôsob
Aké sú požiadavky na rozloženie?
- Gumové rozloženie v dvoch stĺpcoch
- bočný panel pevná šírka 300px
- obsah je natiahnutý na zvyšok šírky.
- päta stlačená nadol (v tomto návode neukážem, ako sa to robí).
Aké problémy Css vznikajú pri usporiadaní takéhoto rozloženia:
1 spôsob.
Ak plávate bloky, vy musí im dať pevnú šírku(nemôžete nastaviť 1 bočný panel na 300 pixelov a obsah na 100 %). V tomto prípade sa obsah posunie nadol alebo sa zobrazí horizontálne posúvanie o 300 pixelov doľava. Hlavnou vecou je pochopiť, že táto metóda nám nevyhovuje.
2 spôsobom.
Mnoho sadzačov ponúka túto metódu, o čom premýšľajú?! Podstatou metódy je, že môžete nastaviť postranný panel tak, aby plával so šírkou 300, a neplávať obsah a nastaviť mu margin-left: 300px. Dobrý spôsob a zdá sa, že všetko funguje tak dobre. Aby som bol úprimný, myslel som si, že je to najlepší spôsob, ale táto metóda má svoje vlastné úskalia. Dôvody na upustenie od tejto metódy sú, že ak zrazu v obsahu vytvoríme napríklad menu s floated li alebo akýmkoľvek iným float blokom a potom ich chceme vymazať s clear:both, tak sa spodná hranica tohto bloku posunie až po úroveň spodného okraja bočného panela (Čo a nie je to divné, keďže je vyčistený, tomu sa môžete vyhnúť, ak nastavte plávajúci blok na pevnú výšku, ale vôbec nejde o nastavenie pevnej výšky).
3 spôsob.
Môže byť použitý pre absolútna poloha bočného panela ale iba ak ty sme si istí, že obsah bude na výšku väčší ako bočný panel v opačnom prípade sa celý obsah bočného panela zmestí do päty (napokon absolútne umiestnenie vytrháva zo všeobecného toku).
Ale pokiaľ ide o mňa, toto tiež nie je veľmi dobrý spôsob!
4 spôsob.
"Skvelý spôsob, ak má nejaké nedostatky, prosím komentujte. Ale myslím si, že toto je najlepší spôsob."
- Výhody tejto metódy: po prvé, obsah DOM pôjde pred bočný panel, čo je dobré pre vyhľadávače.
- na pätu sa nič nezmestí
- akékoľvek bloky sa dajú vyčistiť a nič sa neposunie na spodnú hranicu (Takže sme prekonali problémy druhej metódy).
Vo všeobecnosti, ako to funguje: pozrite sa na kód ako prvý príde obsah a potom bočný panel. nastavíme float na tieto dva bloky (samozrejme bočná lišta sa posúva dole). potom nastavíme vlastnosť bočného panela margin-left:-100%. skvelé, je to späť na svojom mieste a odsadenie obsahu pomocou margin-lerft:300px.
html
css
.sidebar(šírka: 300px;
displej:blok;
plavák: vľavo;
marža: 0 0 0 -100 %;
}
.content(
min-width:723px;
displej:blok;
plavák: vľavo;
okraj: 0 0 0 220px;
}
Plávajúci blok (alebo ako sa tiež nazýva pohyblivý, fixný, uviaznutý) je na stránke potrebný, aby používateľ pri rolovaní stránky videl jeden pevný prvok, v ktorom sa najčastejšie umiestňuje reklama (upútavky, bannery alebo kontext).
Bohužiaľ, pravidlá adsense nám to zakazujú. Mnohí majitelia stránok však pravidlá ignorujú na vlastné riziko. Možno za to nie sú ani potrestaní, ale neradil by som riskovať.
Do takýchto blokov umiestňujem YAN, svoje teasery/bannery a občas namiesto reklamy zobrazím podobné príspevky alebo nejaké užitočné informácie pre návštevníka.
Povedzme si, ako môžete na svojej stránke vytvoriť plávajúci blok.
Úloha: urobte posledný blok v bočnom paneli (bočnom paneli) plávajúcim. Navyše tak, aby sa nalepil až v momente, keď sa k nemu užívateľ dostane rolovaním, a nie hneď pri otvorení stránky. Blok by sa mal tiež „odlepiť“ a dosiahnuť pätu (t. j. neprekrývať ho).
Najpracovnejší spôsob
Existuje mnoho implementácií lepiaceho bloku, ale nie všetky fungujú správne. Z osobnej skúsenosti vám poviem: rovnaký spôsob inštalácie bloku môže fungovať na jednej stránke a zárubne sa objavia na inej.
Nižšie je uvedený príklad plávajúceho bloku, ktorý fungoval takmer na každej stránke, na ktorú som ho nainštaloval. Neboli tam žiadne kozy. Engine tiež nie je dôležitý (DLE, WordPress, LiveStreet atď.).
Prilepte nasledujúci kód HTML na požadované miesto na bočnom paneli:
$(okno).scroll(funkcia() (
var sb_m = 20 ; /* horné a spodné čalúnenie */
var mb = 300; /* výška suterénu s okrajom */
varst = $(okno).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) );
}
inak(
sb.css(( "paddingTop" : 0 ) );
}
}
}
)
;
V tomto kóde si môžete nastaviť vrch, spodok a výšku vašej päty, t.j. výška, v ktorej sa má blok zastaviť.
Teraz zahrnieme JS. Ak to chcete urobiť, napíšte do sekcie HEAD: