Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ
  • në shtëpi
  • Në kontakt me
  • Paraqitja e fiksuar me dy kolona. Rregulloi shiritin anësor lundrues Bitrix fix banner ndryshimi i shiritit anësor php

Paraqitja e fiksuar me dy kolona. Rregulloi shiritin anësor lundrues Bitrix fix banner ndryshimi i shiritit anësor php

29.06.2020 Në kontakt me

Cilat janë kërkesat për paraqitjen:

  • Paraqitja me dy kolona gome
  • shirit anësor gjerësi fikse 300px
  • përmbajtja shtrihet në të gjithë gjerësinë e mbetur.
  • futeri i shtypur deri në fund (në këtë mësim nuk do të tregoj se si bëhet kjo).
Cilat probleme Css lindin kur shtroni një plan urbanistik të tillë: Metoda 1.

Nëse i bëni blloqet të notojnë, duhet t'u jepni atyre një gjerësi fikse (nuk mund ta vendosni 1 shirit anësor në 300 px dhe përmbajtjen në 100%). Epo, gjëja kryesore është të kuptojmë se kjo metodë nuk na përshtatet.


Metoda 2.

Shumë dizajnerë layout e ofrojnë këtë metodë, për çfarë po mendojnë madje?! Thelbi i metodës është që ju mund të vendosni shiritin anësor të notojë me një gjerësi prej 300, por përmbajtja nuk duhet të jetë e lëvizshme dhe t'i jepni asaj margin-left:300px. Është një mënyrë e mirë dhe gjithçka duket se funksionon kaq mirë. Për të qenë i sinqertë, mendova se kjo ishte mënyra më e mirë, por kjo metodë ka të metat e saj. Arsyet e braktisjes së kësaj metode janë se nëse papritmas në përmbajtje po shtrojmë, për shembull, një meny me li të float ose ndonjë blloqe tjetër float dhe më pas duam t'i pastrojmë duke përdorur clear:dy, atëherë kufiri i poshtëm i këtij blloku rrëshqet deri në nivelin e kufirit të poshtëm të shiritit anësor (i cili dhe nuk është i çuditshëm meqenëse shkuma është pastruar, kjo mund të shmanget nëse bllokut të notuar i jepet një lartësi fikse, por kjo nuk është aspak rasti me vendosjen e një fikse lartësia).


3 mënyra.

Ju mund të përdorni pozicionin absolut për shiritin anësor, por vetëm nëse jeni absolutisht i sigurt se përmbajtja do të jetë më e madhe në lartësi se shiriti anësor, përndryshe e gjithë përmbajtja e shiritit anësor do të ngjitet në fund (në fund të fundit, pozicionimi absolut e heq atë nga rrjedha e përgjithshme).

por edhe për mua kjo nuk është një mënyrë shumë e mirë!


4 mënyra.

"Një mënyrë e shkëlqyer, nëse ka ndonjë mangësi në të, ju lutem komentoni. Por unë mendoj se kjo është mënyra më e mirë."

  • Përparësitë e kësaj metode: së pari, përmbajtja DOMe do të kalojë përpara shiritit anësor, gjë që është e mirë për motorët e kërkimit.
  • asgjë nuk përshtatet në fund
  • çdo blloqe mund të pastrohet dhe asgjë nuk do të rrëshqasë në kufirin e poshtëm (Kështu i kapërcejmë problemet e metodës së dytë).

Në përgjithësi, si funksionon: shikoni kodin, përmbajtja vjen e para, e ndjekur nga shiriti anësor. vendosni një notim në këto dy blloqe (natyrisht, shiriti anësor rrëshqet poshtë). pas kësaj ne vendosëm pronësinë e shiritit anësor margjina në të majtë: -100%. shkëlqyeshëm, është rikthyer në vend dhe ne e vendosim përmbajtjen me margin-lerft:300px.


html css .bar anësor(
gjerësia: 300 px;
shfaqja: bllok;
noton: majtas;
marzhi: 0 0 0 -100%;
}
.përmbajtje(
min-gjerësia:723px;
shfaqja: bllok;
noton: majtas;
margjina: 0 0 0 220 px;
}

Përshëndetje, të dashur lexues të faqes së blogut. Ky është më shumë një shënim për veten time, për të mos harruar se çfarë kam bërë saktësisht kur dua të kthej gjithçka. Gjithçka filloi kur një nga lexuesit sugjeroi të shkruante për një shtojcë për WordPress të quajtur Q2W3 Fixed Widget (Sticky Widget), i cili mund të bëjë çdo miniaplikacion në shiritin anësor të lundrojë ose, me fjalë të tjera, të fiksohet.

Ato. Ndërsa lëvizni faqen, do të shihni se pjesa kryesore e shiritit anësor do të ngjitet lart, por miniaplikacioni që do të jetë në fund do të mbetet në zonën e shikimit, pavarësisht sa larg lëvizni poshtë tekstit. Unë do të bëj menjëherë një rezervë që vendosja e reklamave kontekstuale në këtë mënyrë është e ndaluar dhe ju mund të ndëshkoheni për të (siç doli në komente, YAN e lejon këtë, por Adsense e ndalon këtë).

Shtojca është e mrekullueshme, por miniaplikacionet janë çaktivizuar në temën time, kështu që e zgjidha këtë problem duke përdorur disa rreshta kodi JavaScript që gjeta në internet.

Si rezultat, menyja ime e sipërme është fiksuar në krye të portit të shikimit (në thelb vetëm kodi CSS ishte i mjaftueshëm për këtë, por ne nuk po kërkojmë mënyra të thjeshta), dhe pjesa e poshtme e shiritit anësor është fiksuar në pjesën e sipërme djathtas të ekranin kur e arrini kur lëvizni faqen. Nuk e di nëse kjo do të jetë e dobishme, por zgjidhja është vërtet e thjeshtë.

Pse të rregulloni menunë dhe të krijoni një shirit anësor lundrues?

Pse të rregulloni menunë e sipërme, ju pyesni? Epo, në përgjithësi, ky është një eksperiment i vogël në temën e përmirësimit. Thjesht hipotetikisht, mund të supozojmë se kjo mund të shkaktojë një rritje të numrit të faqeve të shikuara dhe kohës së shpenzuar nga përdoruesi në sit.

Nga ana tjetër, ndërhyrja e tepërt e një paneli të tillë fiks mund të shkaktojë një reagim negativ nga lexuesit, ndaj çështja e dobisë së këtij veprimi mbetet e hapur. Ju do të duhet të shikoni rezultatin pas një jave përdorimi - nëse menyja nuk është më e fiksuar (gozhduar në skajin e sipërm të zonës së shikimit), atëherë eksperimenti ishte një dështim. Për çdo rast, do të bëj një pamje nga ekrani se si ndodhi gjithçka.

Një shirit anësor lundrues në WordPress është krijuar për një arsye paksa të ndryshme - për të tërhequr më shumë vëmendje për diçka. Në parim, këtu mund të futni një listë kategorish dhe një listë postimesh të njohura ose të fundit, të cilat përsëri do të përpiqen t'i shërbejnë detyrës për të përmirësuar ato të sjelljes. Por më shpesh, reklamimi vendoset në një bllok të tillë lundrues (reklamimi kontekstual nuk lejohet, siç e përmenda tashmë), i cili, thjesht hipotetikisht, duhet të rrisë të ardhurat e webmasterit. Le të shohim rezultatin në një javë.

Si të rregulloni menunë kryesore në WordPress

Kam gjetur një zgjidhje për veten time në internet. Për të përdorur këtë metodë, duhet të përfshihet biblioteka jQuery. Si ta bëni këtë u përshkrua në detaje në artikullin në lidhje me ngarkimin e përmbajtjes.

Nëse ju kujtohet, në artikullin për optimizimin e shpejtësisë së ngarkimit të faqeve, duhet të përpiqeni të kombinoni të gjitha CSS dhe JS në një të përbashkët (në kuptimin e dy - një për stilet dhe tjetra për skriptet). Pra, në fakt, shtova linjat e kodit të dhëna pak më poshtë në një skedar të tillë. Edhe pse mund t'i shtoni direkt në kodin Html, duke i rrethuar me etiketa skripti. Për shembull, kjo mund të bëhet në shabllonin header.php brenda etiketave të kokës.

Ju gjithashtu mund të zbatoni rregullimin e menysë së sipërme duke përdorur CSS të pastër - kjo do të na ndihmojë. Në fakt, pozicionimi përdoret gjithashtu këtu duke përdorur këtë pronë CSS, por gjithashtu bëhet e mundur që të filloni të shfaqni një menu fikse jo menjëherë, por disa kohë pas fillimit të lëvizjes (në një distancë të caktuar nga lart).

Në rastin tim, kodi për rregullimin e menusë së sipërme duket si ky:

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

Më lejoni t'ju kujtoj se mund ta ngjisni këtë pjesë të kodit në:

  • Një skedar me shtesën .js që jeton në dosjen me temën që po përdorni (/wp-content/themes/theme). Ai është i përshtatshëm për ju vetëm nëse një rresht është shkruar për të në skedarin header.php për ta ngarkuar atë së bashku me faqet e internetit të faqes tuaj, të cilat mund të duken kështu:
  • Ju mund të përdorni vetë skedarin header.php, duke e mbyllur këtë kod midis etiketave hapëse dhe mbyllëse të kokës dhe duke e inkuadruar në etiketa skripti, për shembull, si kjo: $(function())( $(window).scroll(function() ( var top = $(dokument).scrollTop(); nëse (lart< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • Ju gjithashtu mund ta shkruani këtë kod në etiketat e skriptit në çdo vend tjetër. Gjëja kryesore është që ajo të ngarkohet në faqet e duhura të blogut. Për shembull, mund ta bëni në footer.php përpara etiketës së mbylljes së trupit.

    • Tani le të shohim drejtpërdrejt këtë kod. Rezulton se pas 10 pikselëve nga lart, pozicionimi relativ zëvendësohet nga një fiks (shih artikullin në lidhjen e dhënë pak më lart). Nëse është e nevojshme, atëherë në rreshtin me tjetër mund të zgjidhni jo-zero si vlerë për pjesën e sipërme, dhe më pas menyja e fiksuar në krye do të tërhiqet nga skaji i sipërm i portit të pamjes me këtë vlerë piksel (për mendimin tim, kjo është e panevojshme ).

    Ndryshe nga kodi origjinal, më duhej të shtoja edhe gjerësinë: "100%", sepse përndryshe madhësia e menusë do të zvogëlohej në gjerësi, gjë që do të prishte të gjithë foton.

    Shikoni, për qartësi, unë do të jap kodin Html me të cilin formohet menyja kryesore në shabllonin tim të blogut WordPress (ai jeton në skedarin tim header.php nga ):

    Në shabllonin tuaj, ka shumë të ngjarë, shfaqja e artikujve të menusë do të specifikohet duke përdorur, për shembull, një ndërtim (funksion) të tillë, por kjo nuk është e rëndësishme.

    Si të përdorni:

  • Shkarkoni shtojcën.
  • Ne instalojmë.
  • Le ta aktivizojmë.
  • Shkoni te paneli i administratorit në skedën: Design -> Widgets. Hapni miniaplikacionin që duam të rregullojmë.
  • Kontrolloni kutinë pranë "Fix widget" dhe klikoni butonin "Ruaj".
    • Mënyra të tjera për të zbatuar blloqe rrëshqitëse

    Më dukeshin më pak të përshtatshme dhe jo aq të qarta sa dy metodat e mësipërme. Por unë do t'ju tregoj për to gjithsesi.

    Opsioni #1 (pa jQuery)

    Futni në shiritin anësor:

    Ne shkruajmë stile në HTML (është më mirë t'i shtoni ato drejtpërdrejt në CSS):


    . ngjitet(
    pozicioni: fiks;
    z-indeksi: 101 ;
    }
    .ndal(
    pozicioni: i afërm;
    z-indeksi: 101 ;
    }

    Tani e shtojmë vetë skriptin në faqe (është më mirë ta vendosni në një skedar të veçantë, si në "Metodën më të punës"):


    (funksioni () (
    var a = document.querySelector("#aside1") , b = null, P = 0; // nëse zero zëvendësohet me një numër, blloku do të ngjitet përpara se skaji i sipërm i dritares së shfletuesit të arrijë skajin e sipërm të elementit. Mund të jetë një numër negativ
    window.addEventListener("scroll" , Ascroll, false);
    document.body.addEventListener("scroll" , Ascroll, false);
    funksioni Ascroll() (
    nëse (b == null) (
    var Sa = getComputedStyle(a, "" ), s = "" ;
    për (var i = 0; i< Sa.length; i++) {
    if (Sa[ i].indexOf("sizing-box-sizing" ) == 0 || Sa[ i].indexOf("mbushje" ) == 0 || Sa[ i].indexOf("width" ) == 0 ||. Sa[ i].indeksOf("mbushje") == 0 || Sa[ i].indexOf("box-hije") == 0 ||.
    s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + ";
    }
    }
    a.innerHTML = "" +a.innerHTML+"" ;
    b = a.fëmijët[ 0] ;
    a.style .lartësia = b.getBoundingClientRect() .lartësia + "px" ;
    a.style .padding = "0" ;
    a.style .border = "0" ;
    }
    var Ra = a.getBoundingClientRect(),
    R = Math.round(Ra.top + b.getBoundingClientRect() .lartësia - document.querySelector("footer") .getBoundingClientRect() .lart + 0); // përzgjedhës blloku, kur të arrini skajin e sipërm të të cilit duhet të zhblloqni elementin ngjitës; Math.round() është vetëm për IE; nëse zero zëvendësohet me një numër, atëherë blloku do të ngjitet përpara se skaji i poshtëm i elementit të arrijë fundin
    nëse ((Ra.lart - P)

    Artikujt më të mirë mbi këtë temë

    Mjetet e TIK-ut dhe klasifikimi i tyre Çfarë do të thotë TIK?
    Mjetet e TIK-ut dhe klasifikimi i tyre Çfarë do të thotë TIK?
    Gjithçka rreth skedarëve bat. Krijimi i skedarëve BAT. Shkarkoni skedarin Bat
    Gjithçka rreth skedarëve bat. Krijimi i skedarëve BAT. Shkarkoni skedarin Bat
    Udhëzime për rinisjen e kompjuterit tuaj nga tastiera e tastierës së rindezjes së Windows 8
    Udhëzime për rinisjen e kompjuterit tuaj nga tastiera e tastierës së rindezjes së Windows 8
    Kategoritë:
    © 2024 bumotors.ru. Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ.