Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • U kontaktu sa
  • Fiksan raspored sa dve kolone. Fiksna plutajuća bočna traka Bitrix popravka banera promena bočne trake php

Fiksan raspored sa dve kolone. Fiksna plutajuća bočna traka Bitrix popravka banera promena bočne trake php

29.06.2020 U kontaktu sa

Koji su zahtjevi za izgled:

  • Gumeni dvostupni raspored
  • sidebar fiksna širina 300px
  • sadržaj se rasteže na cijelu preostalu širinu.
  • podnožje pritisnuto na dno (u ovoj lekciji neću pokazati kako se to radi).
Koji Css problemi nastaju pri postavljanju takvog izgleda: 1. metod.

Ako blokove učinite da plutaju, morate im dati fiksnu širinu (ne možete postaviti 1 bočnu traku na 300px i sadržaj na 100%).U tom slučaju, sadržaj će kliziti prema dolje ili će se pojaviti horizontalni skrol od 300px 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?! Suština metode je da možete postaviti bočnu traku da pluta sa širinom od 300, ali sadržaj ne bi trebao biti plutajući i dati mu margin-left:300px. To je dobar način i čini se da sve dobro funkcionira. Da budem iskren, mislio sam da je ovo najbolji način, ali ova metoda ima svoje zamke. Razlozi za napuštanje ove metode su da ako odjednom u sadržaju postavljamo, na primjer, meni sa plutajućim li ili bilo kojim drugim float blokovima i onda želimo da ih obrišemo koristeći clear:both, onda donju ivicu ovog bloka klizi do nivoa donje ivice bočne trake (što i nije čudno budući da je foat očišćen, to se može izbeći ako se plutajućem bloku da fiksna visina, ali to uopšte nije slučaj sa postavljanjem fiksne visina).


3 way.

Možete koristiti apsolutnu poziciju za bočnu traku, ali samo ako ste potpuno sigurni da će sadržaj biti veći po 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šti tok).

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


4 way.

"To je odlična metoda, ako ima bilo kakvih nedostataka, napišite komentar. Ali mislim da je ovo najbolji način."

  • Prednosti ove metode: prvo, DOMe sadržaj će ići ispred bočne trake, što je dobro za pretraživače.
  • ništa ne staje na podnožje
  • bilo koji blok se može obrisati i ništa neće kliziti do donje granice (ovako smo prevazišli probleme druge metode).

Općenito, kako to funkcionira: pogledajte kod, sadržaj je na prvom mjestu, a zatim sidebar. postavite float na ova dva bloka (prirodno, bočna traka klizi prema dolje). nakon toga postavljamo marginu svojstva bočne trake-lijevo: -100%. odlično, vratio se na svoje mjesto i uvlačimo sadržaj sa margin-lerft:300px.


html css .sidebar(
širina:300px;
displej: blok;
float: lijevo;
marža: 0 0 0 -100%;
}
.content(
min-width:723px;
displej: blok;
float: lijevo;
margina: 0 0 0 220px;
}

Pozdrav, dragi čitaoci blog stranice. Ovo je više napomena sebi, da ne zaboravim šta sam tačno uradio kada želim sve da vratim. 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 plivajući ili, drugim riječima, fiksnim.

One. Dok skrolujete po stranici, videćete da će glavni deo bočne trake ići gore, ali widget koji će se nalaziti na samom dnu ostaće u zoni za pregled bez obzira koliko se pomerite niz tekst. Odmah ću rezervirati da je postavljanje kontekstualnog oglašavanja na ovaj način zabranjeno i da za to možete biti kažnjeni (kako se pokazalo u komentarima, YAN to dozvoljava, ali Adsense to zabranjuje).

Dodatak je divan, ali su widgeti onemogućeni u mojoj temi, pa sam ovaj problem riješio koristeći nekoliko redova JavaScript koda koji sam našao na internetu.

Kao rezultat toga, moj gornji meni je fiksiran na samom vrhu prozora za prikaz (u suštini samo CSS kod je bio dovoljan za ovo, ali ne tražimo lake načine), a donji deo bočne trake je fiksiran u gornjem desnom uglu ekran kada dođete do njega kada se krećete po stranici. Ne znam da li će ovo biti od koristi, ali rešenje je zaista jednostavno.

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

Zašto popravljati gornji meni, pitate se? Pa, općenito, ovo je mali eksperiment na temu poboljšanja. Čisto hipotetički, 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 ovakvog fiksnog panela može izazvati negativnu reakciju čitatelja, pa pitanje korisnosti ove akcije ostaje otvoreno. Moraćete da pogledate rezultat nakon nedelju dana korišćenja - ako meni više nije fiksiran (prikovan za gornju ivicu oblasti za gledanje), onda je eksperiment bio neuspešan. Za svaki slučaj, napraviću screenshot kako se sve dogodilo.

Plutajuća bočna traka u WordPress-u je napravljena iz malo drugačijeg razloga - da privuče više pažnje na nešto. U principu, ovdje možete umetnuti i listu kategorija i listu popularnih ili nedavnih objava, koje će opet pokušati poslužiti zadatku poboljšanja onih u ponašanju. Ali najčešće se oglašavanje stavlja u takav plutajući blok (kontekstualno oglašavanje nije dozvoljeno, kao što sam već spomenuo), što bi, čisto hipotetički, trebalo povećati prihod webmastera. Da vidimo rezultat za nedelju dana.

Kako popraviti gornji meni u WordPress-u

Našao sam rješenje za sebe na internetu. Da biste koristili ovu metodu, jQuery biblioteka mora biti uključena. 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, u stvari, dodao sam linije koda date odmah ispod u takvu datoteku. Iako ih možete dodati direktno u Html kod, okružujući ih skriptnim oznakama. Na primjer, to se može učiniti u header.php šablonu unutar oznaka head.

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

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

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

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

  • Datoteka sa ekstenzijom .js koja živi u fascikli sa temom koju koristite (/wp-content/themes/theme). Pogodan je za vas samo ako je za njega u datoteci header.php napisana linija za učitavanje zajedno sa web stranicama vašeg sajta, što može izgledati ovako:
  • Možete koristiti samu datoteku header.php, zatvarajući ovaj kod između početne i završne oznake glave i uokvirujući ga u oznake skripte, na primjer, ovako: $(function())( $(window).scroll(function() ( var top = $(dokument).scrollTop(); if (vrh< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • Takođe možete napisati ovaj kod u skript oznake na bilo kom drugom mjestu. Glavna stvar 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 direktno ovaj kod. Ispostavilo se da je nakon 10 piksela od vrha relativno pozicioniranje zamijenjeno fiksnim (pogledajte članak na linku datom gore). Ako je potrebno, tada u redu sa else možete odabrati vrijednost koja nije nula kao vrijednost za vrh, i tada će se meni fiksiran na vrhu povući od gornje ivice prozora za prikaz 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 menija smanjila u širini, što bi pokvarilo cijelu sliku.

    Gledajte, radi jasnoće, daću HTML kod sa kojim se formira gornji meni u mom WordPress šablonu bloga (živi u mom header.php fajlu od ):

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

    Kako koristiti:

  • Preuzmite dodatak.
  • Mi instaliramo.
  • Hajde da ga aktiviramo.
  • Idite na admin panel na kartici: Dizajn -> Widgeti. Otvorite widget koji želimo popraviti.
  • Označite polje pored "Popravi widget" i kliknite na dugme "Sačuvaj".
    • Drugi načini implementacije kliznih blokova

    Činili su mi se manje zgodnim i ne tako jasnim kao dvije gore navedene metode. Ali svejedno ću vam pričati o njima.

    Opcija #1 (bez jQueryja)

    Umetnite u bočnu traku:

    Pišemo stilove u HTML-u (bolje ih je dodati direktno u CSS):


    .ljepljivo(
    pozicija: fiksna;
    z-indeks: 101 ;
    }
    .stop(
    pozicija: relativna;
    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 je nula zamijenjena brojem, blok će se zalijepiti prije nego što gornja ivica prozora pretraživača dosegne gornju ivicu elementa. Može biti negativan broj
    window.addEventListener("scroll" , Ascroll, false) ;
    document.body.addEventListener("scroll" , Ascroll, false) ;
    funkcija Ascroll() (
    ako (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 || Sa[ i].indexOf("padding" ) == 0 || Sa[ i].indexOf("border" ) == 0 || Sa[ i].indexOf("outline" ) == 0 || 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 gornje ivice koje morate otkačiti ljepljivi element; Math.round() je samo za IE; ako je nula zamijenjena brojem, tada će se blok zalijepiti prije nego što donja ivica elementa dođe do podnožja
    ako ((Ra.top - P)

    Najbolji članci na ovu temu

    Period i frekvencija Kako se u fizici mjeri frekvencija oscilacija?
    Period i frekvencija Kako se u fizici mjeri frekvencija oscilacija?
    Kako izračunati talasnu dužinu Fizika dugih talasa
    Kako izračunati talasnu dužinu Fizika dugih talasa
    Kako napraviti laser i šta treba da znate za ovaj kućni laser
    Kako napraviti laser i šta treba da znate za ovaj kućni laser
    Kategorije:
    © 2023 bumotors.ru. Kako podesiti pametne telefone i računare. Informativni portal.