Kako postaviti pametne telefone i računala. Informativni portal
  • Dom
  • U kontaktu s
  • Fiksni raspored u dva stupca. Popravljena plutajuća bočna traka Bitrix popravak bannera bočna traka promjena php

Fiksni raspored u dva stupca. Popravljena plutajuća bočna traka Bitrix popravak bannera bočna traka promjena php

29.06.2020 U kontaktu s

Koji su zahtjevi za izgled:

  • Gumeni dvostupni raspored
  • bočna traka fiksne širine 300px
  • sadržaj se razvlači na cijelu preostalu širinu.
  • podnožje pritisnuto na dno (u ovoj lekciji neću pokazati kako se to radi).
Koji CSS problemi nastaju prilikom postavljanja takvog izgleda: 1. metoda.

Ako blokove učinite lebdećima, morate im dati fiksnu širinu (ne možete postaviti 1 bočnu traku na 300 px i sadržaj na 100%). U tom će slučaju ili sadržaj kliziti prema dolje ili će se pojaviti horizontalni pomak od 300 px ulijevo. Pa, glavna stvar je shvatiti da nam ova metoda ne odgovara.


Metoda 2.

Mnogi dizajneri izgleda nude ovu metodu, o čemu uopće razmišljaju?! Bit metode je da možete postaviti bočnu traku na lebdenje sa širinom od 300, ali sadržaj ne bi trebao biti lebdeći i dati mu margin-left:300px. To je dobar način i čini se da sve tako dobro funkcionira. Da budem iskren, mislio sam da je ovo najbolji način, ali ova metoda ima svojih zamki. Razlozi za napuštanje ove metode su da ako iznenada u sadržaju postavljamo, na primjer, izbornik s plutajućim li ili bilo kojim drugim plutajućim blokovima, a zatim ih želimo očistiti koristeći clear:both, tada donja granica ovog bloka klizi prema dolje do razine donjeg ruba bočne trake (što i nije čudno budući da je sloj očišćen, to se može izbjeći ako se lebdećem bloku da fiksna visina, ali to uopće nije slučaj s postavljanjem fiksne visina).


3 načina.

Možete koristiti apsolutni položaj za bočnu traku, ali samo ako ste apsolutno sigurni da će sadržaj biti veći u visini od bočne trake, inače će se cijeli sadržaj bočne trake popeti na podnožje (na kraju krajeva, apsolutno pozicioniranje ga izbacuje iz opći tok).

ali za mene ni ovo nije baš dobar način!


4 načina.

"To je izvrsna metoda, ako ima nedostataka, molim vas komentirajte, ali mislim da je ovo najbolji način."

  • Prednosti ove metode: prvo, DOMe sadržaj će ići prije bočne trake, što je dobro za tražilice.
  • ništa ne stane na podnožje
  • bilo koji blokovi se mogu obrisati i ništa neće kliziti do donje granice (ovo je način na koji smo prevladali probleme druge metode).

Općenito, kako to funkcionira: pogledajte kod, sadržaj je prvi, a zatim bočna traka. postavite float za ova dva bloka (naravno, bočna traka klizi prema dolje). nakon toga postavljamo svojstvo bočne trake margin-left: -100%. super, vratio se na svoje mjesto, a sadržaj uvlačimo s margin-lerft:300px.


html css .sidebar(
širina:300px;
prikaz: blok;
plovak: lijevo;
marža: 0 0 0 -100%;
}
.sadržaj(
min-width:723px;
prikaz: blok;
plovak: lijevo;
margina: 0 0 0 220px;
}

Pozdrav, dragi čitatelji bloga. Ovo je više napomena za sebe, da ne zaboravim što sam točno napravio kad budem htio vratiti sve natrag. Sve je počelo kada je jedan od čitatelja predložio pisanje o dodatku za WordPress pod nazivom Q2W3 Fixed Widget (Sticky Widget), koji može učiniti bilo koji widget na bočnoj traci plutajućim ili, drugim riječima, fiksiranim.

Oni. Dok se pomičete po stranici, vidjet ćete da će glavni dio bočne trake ići prema gore, ali widget koji će se nalaziti na samom dnu ostat će u području za gledanje bez obzira koliko se daleko pomaknete niz tekst. Odmah ću rezervirati da je postavljanje kontekstualnog oglašavanja na ovaj način zabranjeno i da možete biti kažnjeni za to (kao što se pokazalo u komentarima, YAN to dopušta, ali Adsense to zabranjuje).

Dodatak je prekrasan, ali widgeti su onemogućeni u mojoj temi, pa sam riješio ovaj problem pomoću nekoliko redaka JavaScript koda koji sam pronašao na internetu.

Kao rezultat toga, moj gornji izbornik fiksiran je na samom vrhu okvira za prikaz (za to je u biti bio dovoljan samo CSS kod, ali ne tražimo lake načine), a donji dio bočne trake fiksiran je u gornjem desnom kutu zaslon kada dođete do njega dok listate po stranici. Ne znam hoće li to pomoći, ali rješenje je stvarno jednostavno.

Zašto popraviti izbornik i napraviti plutajuću bočnu traku?

Zašto popravljati gornji izbornik, pitate se? Pa, općenito, ovo je mali eksperiment na temu poboljšanja. Čisto hipotetski, možemo pretpostaviti da bi to moglo uzrokovati povećanje broja pregledanih stranica i vremena koje korisnik provede na stranici.

S druge strane, pretjerana nametljivost ovako fiksne ploče može izazvati negativnu reakciju čitatelja, pa ostaje otvoreno pitanje svrsishodnosti ove radnje. Morat ćete pogledati rezultat nakon tjedan dana korištenja - ako izbornik više nije fiksiran (prikovan za gornji rub područja za gledanje), eksperiment je bio neuspješan. Za svaki slučaj napravit ću screenshot kako se sve dogodilo.

Plutajuća bočna traka u WordPressu napravljena je iz malo drugačijeg razloga – da privuče više pažnje na nešto. U principu, ovdje možete umetnuti i popis kategorija i popis popularnih ili nedavnih postova, koji će opet pokušati služiti zadatku poboljšanja onih u ponašanju. Ali najčešće se oglašavanje postavlja u takav plutajući blok (kontekstualno oglašavanje nije dopušteno, kao što sam već spomenuo), što bi, čisto hipotetski, trebalo povećati prihod webmastera. Vidjet ćemo rezultat za tjedan dana.

Kako popraviti gornji izbornik u WordPressu

Našla sam rješenje za sebe na internetu. Za korištenje ove metode mora biti uključena biblioteka jQuery. Kako to učiniti detaljno je opisano u članku o učitavanju sadržaja.

Ako se sjećate, u članku o optimizaciji brzine učitavanja stranice morate pokušati spojiti sve CSS i JS u jedan zajednički (u smislu dva - jedan za stilove, a drugi za skripte). Dakle, zapravo sam takvoj datoteci dodao retke koda date ispod. Iako ih možete dodati izravno u Html kod, okružujući ih oznakama skripte. Na primjer, to se može učiniti u predlošku header.php unutar oznaka glave.

Također možete implementirati popravljanje gornjeg izbornika koristeći čisti CSS - da nam pomognete. Zapravo, ovdje se također koristi pozicioniranje pomoću ovog CSS svojstva, ali također postaje moguće početi prikazivati ​​fiksni izbornik ne odmah, već neko vrijeme nakon početka pomicanja (na određenoj udaljenosti od vrha).

U mom slučaju kod za popravljanje gornjeg izbornika izgleda ovako:

$(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (top< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Dopustite mi da vas podsjetim da ovaj dio koda možete zalijepiti u:

  • Datoteka s nastavkom .js koja se nalazi u mapi s temom koju koristite (/wp-content/themes/theme). Prikladan vam je samo ako je za njega napisan redak u datoteci header.php za njegovo učitavanje zajedno s web stranicama vaše stranice, što može izgledati ovako:
  • Možete koristiti samu datoteku header.php, prilažući ovaj kod između početnih i završnih oznaka glave i uokvirujući ga u oznake skripte, na primjer, ovako: $(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (top< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • Također možete napisati ovaj kod u oznakama skripte na bilo kojem drugom mjestu. Glavno je da se učitava na pravim stranicama bloga. Na primjer, možete to učiniti u footer.php prije završne oznake tijela.

    • Sada pogledajmo izravno ovaj kod. Ispada da se nakon 10 piksela od vrha relativno pozicioniranje zamjenjuje fiksnim (pogledajte članak na gornjoj poveznici). Ako je potrebno, tada u retku s else možete odabrati vrijednost različitu od nule za vrh, a zatim će se izbornik fiksiran na vrhu povući od gornjeg ruba prozora za ovu vrijednost piksela (po mom mišljenju, ovo je nepotrebno ).

    Za razliku od originalnog koda, morao sam dodati i širinu: "100%", jer bi se inače veličina izbornika smanjila u širini, što bi pokvarilo cijelu sliku.

    Gledajte, radi jasnoće, dat ću Html kod s kojim je formiran gornji izbornik u mom predlošku WordPress bloga (živi u mojoj datoteci header.php od ):

    U vašem će predlošku najvjerojatnije biti naveden prikaz stavki izbornika pomoću, na primjer, takve konstrukcije (funkcije), ali to nije važno.

    Kako koristiti:

  • Preuzmite dodatak.
  • Mi ugrađujemo.
  • Aktivirajmo ga.
  • Idite na administrativnu ploču u kartici: Dizajn -> Widgeti. Otvorite widget koji želimo popraviti.
  • Označite okvir pored "Popravi widget" i kliknite gumb "Spremi".
    • Drugi načini implementacije kliznih blokova

    Činile su mi se manje prikladnim i ne tako jasnim kao dvije gore navedene metode. Ali svejedno ću vam reći o njima.

    Opcija #1 (bez jQueryja)

    Umetnite u bočnu traku:

    Stilove pišemo u HTML-u (bolje ih je dodati izravno u CSS):


    .ljepljiv(
    položaj: fiksni;
    z-indeks: 101;
    }
    .Stop(
    položaj: relativan;
    z-indeks: 101;
    }

    Sada dodajemo samu skriptu na stranicu (bolje je staviti je u zasebnu datoteku, kao u "Najradnijoj metodi"):


    (funkcija() (
    var a = document.querySelector("#aside1") , b = null, P = 0; // ako se nula zamijeni brojem, blok će se zalijepiti prije nego što gornji rub prozora preglednika dosegne gornji rub elementa. Može biti negativan broj
    window.addEventListener("scroll" , Ascroll, false) ;
    document.body.addEventListener("scroll" , Ascroll, false) ;
    funkcija Ascroll() (
    if (b == null) (
    var Sa = getComputedStyle(a, "" ) , s = "" ;
    za (var i = 0; i< Sa.length; i++) {
    if (Sa[ i].indexOf("box-sizing" ) == 0 || Sa[ i].indexOf("overflow" ) == 0 || Sa[ i].indexOf("width" ) == 0 ||.[ i].indexOf("padding" ) == 0 ||.indexOf("border" ) == 0 Sa[ i]. Sa[ i].indexOf("box-shadow" ) == 0 ||. Sa[ i].indexOf("background" ) == 0 ) (
    s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
    }
    }
    a.innerHTML = "" +a.innerHTML+"" ;
    b = a.djeca[ 0 ] ;
    a.style .height = b.getBoundingClientRect() .height + "px" ;
    a.style .padding = "0" ;
    a.style .border = "0" ;
    }
    var Ra = a.getBoundingClientRect() ,
    R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer" ) .getBoundingClientRect() .top + 0 ) ; // selektor blokova, kada dođete do gornjeg ruba kojeg trebate otkvačiti ljepljivi element; Math.round() je samo za IE; ako se nula zamijeni brojem, blok će se zalijepiti prije nego što donji rub elementa dosegne podnožje
    ako ((Ra.top - P)

    Najbolji članci na temu

    Upravitelj preuzimanja u Androidu - što je to i kako koristiti program Upravitelj preuzimanja za android
    Upravitelj preuzimanja u Androidu - što je to i kako koristiti program Upravitelj preuzimanja za android
    Džepni Wi-Fi repetitor
    Džepni Wi-Fi repetitor
    Pretvarač istosmjernog napona. DC-DC pretvarači MAXIM. Pretvarači napona kondenzatora
    Pretvarač istosmjernog napona. DC-DC pretvarači MAXIM. Pretvarači napona kondenzatora
    Kategorije:
    © 2024 bumotors.ru. Kako postaviti pametne telefone i računala. Informativni portal.