Buna dragi cititori ai site-ului blogului. Continuăm subiectul aspectului blocurilor, care a fost început și continuat în cele trei articole anterioare. Practic, am reușit deja să creăm atât un aspect al site-ului cu două, cât și trei coloane și am reușit chiar să luăm în considerare nuanțele creării unui aspect de cauciuc.
În plus, în primele articole despre aspectul site-ului (), au fost luate în considerare câteva concepte de bază despre webmastering, fără a înțelege care ar fi destul de dificil să înțelegem nuanțele.
Care sunt problemele cu aspectul site-ului nostru web
Astăzi vom încerca să rezolvăm o mică problemă care poate apărea cu aspectul pe care l-am creat mai devreme. Cel mai adesea, această situație apare atunci când o vizualizați pe monitoare mari (cu rezoluție mare) și când afișați o pagină cu o cantitate mică de informații.
În acest caz, se poate întâmpla ca subsolul să nu fie apăsat pe partea de jos a ecranului, ci să fie situat aproape în mijlocul său în înălțime, ceea ce în cele mai multe cazuri va părea urât și nu va fi plăcut din punct de vedere estetic.
Cu toate acestea, în opinia mea, este necesar să apăsați subsol până în partea de jos a aspectului site-ului, iar acest lucru va fi valabil mai ales în cazul în care înălțimea paginii este mai mică decât înălțimea ecranului utilizatorului. Poate fi reprezentat schematic după cum urmează:
Acestea. comportamentul corect al subsolului pentru o cantitate mică de informații pe pagină și un ecran mare de utilizator ar fi după cum urmează:
Pentru a implementa acest lucru, trebuie să efectuați o serie de manipulări cu codul aspectului nostru. Mai mult, vom face modificări nu numai în fișierul CSS stil Style.css, ci și în Index.html, care conține codul Html și formează blocurile Div. Dar mai întâi lucrurile.
De exemplu, vom folosi aspectul site-ului cu trei coloane pe care l-am creat mai devreme. În acest caz, Index.html va arăta astfel:
Și următoarele proprietăți CSS au fost scrise în fișierul Style.css:
Corp, html (margin: 0px; padding: 0px;) #maket (width: 800px; margin: 0 auto;) #header (background-color: # C0C000;) #stânga (background-color: # 00C0C0; width: 200px ; float: left;) #right (width: 200px; background-color: # FFFF00; float: right;) #content (background-color: # 8080FF; margin-left: 202px; margin-right: 202px;) #footer (fundal-culoare: # FFC0FF; clar: ambele;)
Ei bine, aspectul în sine arăta cam așa:
După cum puteți vedea, subsolul nu este apăsat în partea de jos și, prin urmare, nu îndeplinește cerințele noastre (este întotdeauna situat sub coloana de jos), deci va trebui să faceți ajustări la cod. La fel se poate face și pentru modelele cu două coloane și cauciuc. Metoda este universală.
Cum să împingeți un subsol în partea de jos a aspectului unui site web
Deci, trebuie să mutăm containerul div cu subsolul în partea de jos a ecranului. Pentru a face acest lucru, trebuie mai întâi să setați înălțimea întregii pagini la sută la sută (va ocupa întregul ecran). Acest lucru va fi necesar pentru a redimensiona apoi blocul principal cu aspectul și la 100%.
Întregul conținut al paginii site-ului este plasat în etichetele Body de deschidere și de închidere și, prin urmare, trebuie să adăugăm o altă proprietate CSS la eticheta Body din Style.css care setează înălțimea la 100%:
Corp, html (margine: 0 px; umplutură: 0 px; înălțime: 100%;)
Acest lucru nu va afecta în nici un fel aspectul, dar acum blogul principal poate fi întins la toată înălțimea ecranului. Acestea. era un fel de etapă pregătitoare.
Proprietăți CSS de bază, dacă doriți, le puteți privi. Acum să setăm containerul div, care conține întregul nostru aspect, la o înălțime minimă de 100%:
De asemenea, vreau să-l evidențiez (div cu id \u003d "maket"). Pentru a face acest lucru, setați o margine pentru aceasta utilizând proprietatea Border () adecvată:
Proprietatea bordură: solid 3px negru setează containerul la o bordură negru solidă de 3 px. Acest lucru vă va permite să vedeți vizual că containerul cu aspectul s-a întins la toată înălțimea ecranului, chiar și cu o cantitate mică de informații pe pagină:
Acum va trebui să mutăm blocul de subsol din containerul general și să-l așezăm mai jos, imediat după cel general. Ce va da? Și faptul că, în cele din urmă, se va dedica să coboare în subsol în aspect și nu se va agăța, ca înainte, de cea mai lungă coloană a sa. În acest caz, Index.html va arăta astfel:
Vă rugăm să rețineți că blocul cu subsolul nu mai este situat în interiorul containerului general (maket) și, prin urmare, lățimea acestuia nu mai este controlată de proprietățile CSS setate pentru maket în fișierul Style.css. Footerul se va întinde în lățime pentru a umple întregul ecran, dar va fi în continuare situat în partea de jos a ecranului, chiar sub blocul principal:
Dar din nou apare o problemă, deoarece pentru a vedea subsolul, acum trebuie să derulați ecranul din browser (puteți vedea bara de derulare în imaginea de mai sus).
Se pare că containerul principal (maket) ocupă întreaga dimensiune a ecranului în înălțime (aceasta este determinată de înălțimea minimă: 100% proprietate), iar subsolul este situat imediat în spatele acestuia și va trebui să utilizați derularea pentru a-l vizualiza, ceea ce nu este foarte convenabil și funcțional ...
Puteți rezolva această problemă setând un div negativ pentru containerul cu un subsol, astfel încât acesta să se deplaseze în sus cu o distanță egală cu înălțimea sa. În acest caz, containerul de subsol va trece peste cel principal și se va încadra în înălțimea ecranului browserului (adică nu va trebui să utilizeze derularea pentru a-l vizualiza).
Dar, pentru a seta o marjă negativă din partea de sus, trebuie să cunoașteți chiar această înălțime a subsolului și nu o știm încă.
Prin urmare, setăm mai întâi containerul care conține subsolul la o înălțime setând proprietatea corespunzătoare în Style.css:
#footer (fundal-culoare: # FFC0FF; clar: ambele; înălțime: 50px;)
Și apoi setați o marjă superioară negativă pentru aceasta la o înălțime egală cu înălțimea sa:
Acest lucru va permite subsolului să se ridice exact la propria înălțime și să se încadreze astfel în ecranul browserului (acum putem elimina bordura: proprietate solidă CSS neagră de 3 px din regula maket, astfel încât grosimea chenarului să nu interfereze cu întregul nostru aspect împreună cu subsolul pentru a se potrivi în ecran în înălțime) :
După cum puteți vedea, acum bara de derulare din browser nu apare și întregul nostru aspect cu trei coloane bazat pe aspectul blocului se potrivește într-un singur ecran (în cazul unei cantități mici de informații de pe pagină) și are un subsol situat chiar în partea de jos. Ce trebuie, de fapt, să facem.
Introduceți distanțierul și luptați cu Internet Explorer
Dar există o problemă, care va apărea numai atunci când există mai multe informații pe pagina de aspect și poate apărea următoarea situație:
Se pare că poate apărea o situație atunci când informațiile dintr-una din coloanele aspectului se suprapun subsolului, ceea ce nu va arăta frumos. Acest lucru se întâmplă datorită notorului umplutură negativă pe care am setat-o \u200b\u200bși care a ajutat la ridicarea subsolului nostru cu o lovitură pe containerul principal al aspectului.
Acestea. se pare că două blocuri sunt situate în partea de jos a ecranului, suprapunându-se reciproc în zona subsolului.
Soluția la această problemă este adăugarea unui nou container Div gol (așa-numitul distanțieri) în containerul principal al aspectului nostru (maket), până la locul în care anterior a fost amplasat blocul cu subsolul.
Prin setarea înălțimii acestui nou container la înălțimea subsolului, putem evita coliziunea informațiilor din containerul principal cu blocul cu subsolul. Să dăm acestui container un ID () numit Rasporka și, ca rezultat, Index.html al aspectului nostru cu trei coloane va arăta astfel:
Și în Style.css, pentru aceasta vom scrie (, care setează înălțimea acestui container distanțier egal cu înălțimea subsolului:
#rasporka (înălțime: 50px;)
Ca rezultat, subsolul va fi apăsat de jos nu pentru informațiile conținute în containerul principal (de exemplu, textul din cea mai înaltă coloană), ci pentru o zonă egală cu subsolul înălțimii cu un container distanțier care nu conține nicio informație.
Astfel evităm coliziunile și distorsiunile în aspectul nostru cu trei coloane. Totul va fi clar și frumos (decor și nobil):
Așa cum am menționat deja mai sus, lățimea subsolului ar trebui acum setată separat pentru noi, deoarece acest container nu mai face parte din cel principal. Pentru a face acest lucru, trebuie să adăugați proprietăți suplimentare pentru subsol la fișierul CSS, permițându-vă să setați lățimea acestuia și să îl aliniați orizontal în mijlocul ecranului.
Este logic să setați lățimea egală cu lățimea întregului aspect folosind proprietatea Lățime, iar alinierea orizontală se poate face în același mod ca și noi pentru întregul aspect pe un aspect bloc.
Astfel, va trebui să adăugăm proprietăți suplimentare pentru subsolul ID:
#footer (fundal-culoare: # FFC0FF; clar: ambele; înălțime: 20px; margin-top: -20px; lățime: 800px; margin-left: auto; margin-right: auto;)
Utilizarea lățimii: proprietatea 800px setează lățimea la 800 pixeli și folosirea celor două proprietăți margin-stânga: auto și marginea-dreapta: auto setează automat căptușeala la stânga și la dreapta subsolului, ca urmare a căreia aceste umpluturi vor fi egale și eroul nostru va fi aliniat la mijloc:
Ei bine, se pare că nu mai este nimic de îmbunătățit, dar nu a fost acolo. Ca întotdeauna, browserul nostru preferat Internet Explorer 6 nu înțelege ceva din proprietățile CSS pe care le folosim. În acest browser (și, eventual, și în unele altele vechi), în ciuda tuturor eforturilor noastre, subsolul nu va fi apăsat în partea de jos, ci va rămâne în continuare la cea mai înaltă coloană a aspectului site-ului.
Toate acestea se datorează faptului că (nu înțelege proprietatea min-height: 100%, pe care am folosit-o pentru a seta înălțimea minimă a casetei principale să fie egală cu înălțimea ecranului.
Prin urmare, pentru a rezolva această problemă, va trebui să aplicăm un așa-numit hack care ne permite să explicăm (pe degete) browserele vechi ce trebuie să facem. Înainte de lista proprietăților CSS pentru maket, va trebui să inserați următoarea combinație:
* html #maket (înălțime: 100%;)
Această regulă se va aplica numai pentru browserul Internet Explorer 6, alții nu o vor lua în considerare și nu o vor aplica.
Deci, aspectul final al Style.css cu subsolul apăsat în partea de jos a ecranului va fi după cum urmează:
Corp, html (margine: 0px; umplutură: 0px; înălțime: 100%;) * html #maket (înălțime: 100%;) #maket (lățime: 800px; margine: 0 automată; înălțime minimă: 100%;) # header (background-color: # C0C000;) #left (background-color: # 00C0C0; width: 200px; float: left;) #right (width: 200px; background-color: # FFFF00; float: right;) #content (fundal-culoare: # 8080FF; margin-left: 202px; margin-right: 202px;) #footer (background-color: # FFC0FF; clar: ambele; înălțime: 50px; margin-top: -50px; lățime: 800px; margin-left: auto; margin-right: auto;) #rasporka (înălțime: 50px;)
Ei bine, vizualizarea finală a Index.html a fost afișată chiar mai sus. Gata, această serie de articole dedicate aspectului blocurilor de 2 și 3 coloane fixe și planurilor fluide ale site-ului pot fi considerate complete.
De asemenea, puteți viziona videoclipul „Lucrul cu eticheta div HTML”:
Multă baftă! Ne vedem în curând pe paginile site-ului blogului
S-ar putea să fii interesat
Blocare aspect - Creați aspecte de site cu două coloane, trei coloane și fluide 
Aspect DiV - Creați blocuri pentru un aspect cu două coloane în HTML, determinați dimensiunile și setați poziționarea lor în CSS
Oricine este obișnuit cu paginile de site web cu drepturi depline preferă aspectul „cuie” (lipicios, lipicios) în partea de jos a subsolului paginii. Dar există două probleme pe Internet: câmpurile de intrare care nu cresc și subsolurile care nu sunt cuie (în partea de jos a ferestrei). De exemplu, atunci când deschidem pagini cu înălțime scurtă, cum ar fi habrahabr.ru/settings/social, este imediat izbitor faptul că informațiile concepute pentru a fi în partea de jos a ferestrei se lipesc de conținut și se află undeva în mijloc sau chiar în partea de sus a ferestrei când dedesubt este gol.
Deci, în loc de.
Acest ghid pentru proiectanții de amenajare începători vă va arăta cum să creați un subsol „cuie” în 45 de minute, corectând defectele chiar și unei publicații atât de respectate precum Habr, și să concurați cu aceasta ca o împlinire a proiectului dvs. promițător.
Să ne uităm la implementarea unui tip de subsol cuie preluat din rețea și să încercăm să ne dăm seama ce se întâmplă. css-tricks.com/snippets/css/sticky-footer
CSS:
* (margin: 0; padding: 0;) html, body, #wrap (înălțime: 100%;) body\u003e #wrap (înălțime: automată; min-înălțime: 100%;) #main (padding-bottom: 150px; ) / * trebuie să aibă aceeași înălțime ca subsolul * / #footer (poziția: relativă; marginea-sus: -150px; / * valoarea negativă a înălțimii subsolului * / înălțimea: 150px; clar: ambele;) / * CLEAR FIX * / .clearfix: după (conținut: "."; afișare: bloc; înălțime: 0; clar: ambele; vizibilitate: ascuns;) .clearfix (afișare: bloc în linie;) / * Ascunde din IE-mac \\ * / * html .clearfix (înălțime: 1%;) .clearfix (afișaj: bloc;) / * End hide from IE-mac * /
HTML:
Să începem cu teoria
Implementarea obișnuită a unui subsol cu \u200b\u200bcui se bazează pe proprietatea unică CSS2 că elementele sunt descendenți imediați CORP - menține înălțimea procentuală ( înălțime: 100% sau altul) relativ la fereastră, dacă toți părinții lor au aceeași înălțime procentuală, începând cu eticheta HTML... Anterior, fără doctipuri, dar acum în modul Quirks, înălțimile procentuale ale elementelor sunt acceptate la orice nivel, iar în doctipurile moderne - numai în cadrul elementelor procentuale specificate. Prin urmare, dacă facem un bloc de conținut (să-l numim #layout) care are 100% înălțime, se va derula ca și cum ar fi o fereastră. Tot conținutul (în flux) este introdus în el, cu excepția subsolului și poate a antetului.Un subsol este plasat lângă acest bloc și are 0 înălțime de pixeli. În general, puteți urmări #layout puneți câte blocuri doriți, dar toate trebuie să fie fie de la 0 pixeli în înălțime, fie în afara fluxului documentului (nu poziție: statică). Și există un alt truc important care este de obicei folosit. Nu este necesar să faceți înălțimea egală cu 0. Puteți face înălțimea fixă, dar scădeți-o din blocul principal folosind proprietatea marginea-fund: - (înălțime);.
În termeni umani, stilurile fac un „buzunar” gol în partea de jos, în care este inserat subsolul și se dovedește întotdeauna fie lipit de marginea de jos a ferestrei, fie de marginea de jos a documentului dacă documentul are o înălțime mai mare decât înălțimea ferestrei. Pe Internet și pe Habré, există multe implementări ale subsolului, cu succes diferit în toate browserele. Să continuăm să-l construim pe cont propriu, folosind aspectul lui Habr ca „cal de lucru”.
De la partea de jos a blocului #layout - acesta este un buzunar, ar trebui să fie gol pentru subsol, fără a afișa obiectele paginii. Și aici întâlnim o altă limitare - nu putem face un buzunar gol în detrimentul căptușeală la #layout, pentru că atunci va deveni mai mare de 100%. Nu va salva și marjă - golul trebuie făcut datorită proprietăților elementelor imbricate. În plus față de toate, este necesar să ne asigurăm că elementele plutitoare nu ies sub marginea blocului, ceea ce se face, de exemplu, printr-un bloc
Să ne uităm la structura paginilor experimentului nostru. Cel mai simplu mod de a face acest lucru este să deschideți fereastra Firebug sau o fereastră similară („Instrumente pentru dezvoltatori” (Ctrl-F12)) în Chrome.
Să trecem la un exemplu de lucru
Ce vedem dezavantaje ale aspectului în ceea ce privește implementarea efectului unui subsol cuie? Noi vedem asta1) subsolul de pe site se află într-un bloc cu id \u003d layout, care nu are înălțime procentuală. În teorie, el, părinții și blocul conținut stâng trebuie setate la 100% înălțime. Există probleme cu acesta din urmă - nu este potrivit pentru acest lucru. În consecință, lipsește un bloc interstrat sau subsolul este la un nivel greșit. In afara de asta,
2) înălțimea subsolului este variabilă (depinde de numărul de elemente din listă și de dimensiunea fontului, acest lucru este vizibil nu din HTML, ci din CSS). ȘI
3) peste #layout există o unitate de anunțuri cu o înălțime fixă \u200b\u200bde 90 px;
4) nu există casete de aliniere în subsol sau (în general vorbind) în casetă #layout (da, dar deasupra blocului .posturi_rotate; cu toate acestea, poate ar trebui atribuit subsolului).
Punctul 4 - va trebui să desenați cu un script.
S-ar părea simplu să-ți dai seama de al treilea punct adăugând #layout (margin-top: -90px;) Dar amintește-ți că acest bloc poate să nu existe - este suprimat de un dispozitiv de tăiere a bannerelor, sau agenții de publicitate vor decide brusc să nu-l afișeze. Există un număr de pagini pe site unde nu se află. Prin urmare dependența marginea-sus dintr-o unitate de anunțuri este o idee proastă. Mult mai bine este să-l așezi înăuntru #layout - atunci nu va interfera cu nimic.
Primul punct este că, pentru ca subsolul cuie să funcționeze, trebuie să plasați blocul de subsol #layout... Cu toate acestea, cu ajutorul javascriptului, puteți implementa alte scheme ale subsolului cuie, dar, în orice caz, aveți nevoie de JS sau de aspectul inițial corect pentru a vă descurca.
Deoarece nu putem fi mai puternici decât ultimul proiectant de layout de site care a „blocat” subsolul în interiorul conținutului, vom amâna ideea plasării corecte a subsolului pe viitorul nostru site (care, prin urmare, va fi „mai cool” Habr!), Și disecăm Habr cu javascript (script utilizator) la corect stări. (Să spunem imediat că nu vinovatul este proiectantul de machete sau comutatorul, ci tipul site-ului, desigur, determină decizia strategică a managementului proiectului.) Astfel nu vom ajunge la ideal, deoarece în prima sau două secunde în timpul procesului de încărcare, pagina va avea un aspect greșit. Dar conceptul și capacitatea de a depăși cel mai popular site din lumea IT sunt importante pentru noi.
Prin urmare, în locul potrivit din script (devreme, la sfârșitul încărcării paginii), vom scrie transferurile blocurilor de anunțuri și subsol DOM în locurile necesare. (Să ne pregătim pentru faptul că, datorită scripturilor de utilizator, soluția va fi mai complicată decât una curată.)
var dQ \u003d funcție (q) (return document.querySelector (q);) // pentru prescurtare var topL \u003d dQ ("# topline"), lay \u003d dQ ("# layout"), foot \u003d dQ ("# footer" ); if (topL && lay) // banner - în interiorul blocului de conținut lay.insertBefore (topL, lay.firstChild); if (lay && foot && lay.nextSibling) // împachetarea subsolului lay.parentNode.insertBefore (subsol, lay.nextSibling);
Am pus blocurile în locurile lor - acum rămâne să atribuim proprietățile necesare elementelor. Înălțimea subsolului va trebui setată exact, pur și simplu pentru că o știm deja până când acționează scriptul utilizatorului (încărcarea la sfârșitul paginii). Datorită punctului de declanșare al scriptului de utilizator, așa cum s-a menționat mai sus, un salt în afișarea subsolului pe pagină este inevitabil. Poți încerca să faci o „față bună”, dar cu un „joc rău”? Pentru ce? „Jocul rău” al site-ului vă permite să creați un concept fără super-eforturi, care va fi suficient pentru a evalua calitatea și nu va fi necesar dacă „jucați corect” în proiectul dvs.
if (picior) (// aliniator bloc
Aici ne-am permis să folosim o funcție auto-scrisă h.apnd_elcare face cam același lucru ca în jQuery -
$("") .css ((înălțime: footH || 0)). appendTo ($ (footer))
Și apoi există o altă funcție tipică de injecție a regulilor CSS - h.addRules... Aici nu puteți face fără ea, pentru că trebuie să declarați o regulă cu „ ! important"- doar datorită particularităților priorităților de stil din scriptul utilizatorului.
Cu aceste bucăți de cod, vom putea vedea subsolul cuie în scriptul utilizatorului (după ce l-am sărit în jos) și vom înțelege pe deplin cum să construim aspectul paginii. Este frustrant să folosești zilnic designul săritor, așa că este recomandat să îl faci exclusiv pentru demonstrare și testare. În scriptul de utilizator HabrAjax, am instalat un script similar, închizându-l cu setarea „underFooter” (bifați caseta din lista de setări înainte de „subsol cu \u200b\u200bcui”), începând de la versiunea 0.883_2012-09-12.
Footerul cu cui afectează necesitatea actualizării stilurilor ZenComment dacă este instalat? Da, da. Datorită lanțului complex de priorități de stil, în care stilurile inserate de scriptul de utilizator au cea mai mică prioritate, a trebuit să ajustez ușor stilurile de utilizator pentru capacități lucrați cu un subsol cu \u200b\u200bcui. Dacă nu actualizați stilurile de utilizare (până la 2.66_2012-09-12 +), subsolul nu va funcționa corect.
bloc rotated_post (trei postări populare din trecut) arată mai logic în subsol, deci într-un script real este mutat și în subsol.
Al doilea punct (din lista imperfecțiunilor din aspect) este raționamentul pur pentru Habr (acestea nu se aplică scriptului utilizatorului și se repetă parțial pe cele anterioare).
Paginile au o problemă care le împiedică să redea un subsol cu \u200b\u200bcui în CSS pur - o înălțime de subsol nedefinită, în funcție de dimensiunile de font implicite ale browserului. Pentru a implementa un subsol în CSS, trebuie să alegeți înălțimile relative ale fonturilor, dar este posibil să nu funcționeze dacă fonturile furnizate nu sunt disponibile pe computerul utilizatorului. Prin urmare, soluția ar trebui să includă un javascript care să se potrivească poziției aproximative a subsolului cu tranziții la cea exactă. Sau, analizând acceptabilitatea soluției făcute în scriptul utilizatorului pe diferite platforme, faceți o instalare calculată a subsolului cuie - primele observații arată că soluția este practică.
Concluzie: este posibil să aranjați complet aspectul pe Habré, dar pentru aceasta aveți nevoie de un proiectant care să înțeleagă în mod clar comportamentul aspectului și să plaseze blocurile în ordinea corectă. (Acum subsolul și bannerul de sus nu sunt „acolo” și nu așa încât doar să obțină stiluri pentru a obține un subsol cuie.) Puteți face fără JS dacă setați înălțimea subsolului în unități relative, luând o anumită marjă pentru incertitudinea fontului.
Implementare
Dacă activați HabrAjax 0.883+, vom vedea lucrarea „subsolului cu cui”. Se adaptează în înălțime folosind scripturi. Vă permite să evaluați cât de bine arată paginile cu subsolul cuie în comparație cu cele obișnuite. Stilurile de utilizare ZenComment sunt compatibile cu scripturile, dar pentru ca subsolul cu cui să funcționeze corect, trebuie să instalați versiunea ZenComment 2.66_2012-09-12 + cu ele.Fapte de comportament de implementare
Șamanismul cu subsol, stiluri și scripturi este șamanism (numai pentru a fi susținut de teorie). Comportamentul este ușor diferit în diferite browsere, dar în unele locuri este neașteptat. Fără scripturi de utilizator și rearanjări bloc, rezultatele vor fi diferite. Aceasta este ceea ce au dat experimentele cu implementarea în scriptul utilizatorului.1) Firefox - lipsa neașteptată de salt de subsol. Este ciudat că nu sunt acolo - redarea are loc după plasarea subsolului în partea de jos.
2) Chrome - m-a surprins cu un „rulou rătăcitor” - spațiile goale din partea de jos sunt adăugate pe pagină cu o perioadă de o dată pe secundă - se întâmplă ceva greșit la calculul înălțimilor. Este tratat scriind html, corp (înălțime: 100%) în stilul de utilizare, dar fără garanții că va funcționa întotdeauna. Este mai sigur să verificați dacă documentul nu depășește fereastra în înălțime și, dacă nu, mutați subsolul, altfel nimic. Cu săriturile - totul este în ordine, așa este.
3) Opera - fără sărituri (v. 12.02) la încărcarea primei pagini, dar o reîncărcare pripită poate arăta un salt de subsol. În caz contrar, nu conduce mai puțin corect decât Fx.
Ei bine, va trebui să-l învățați special pe Chrome să se comporte corect (cu un script) și, în această formă, lansați versiunea pentru revizuire. Prin urmare, site-ul din scriptul utilizatorului este puțin mai complicat decât cel dat în articol.
Trebuie reamintit că aceasta nu este o implementare deplină - nu ia în considerare, de exemplu, cazurile de redimensionare a ferestrelor de către utilizator. Puteți găsi, de asemenea, combinații rare (în practică) de schimbare a înălțimii subsolului înainte și după mutare, unde logica va începe să funcționeze defectuos fără a duce la neplăceri. Dezavantajele au fost lăsate în mod deliberat, deoarece se observă echilibrul complexității revizuirii și actualitatea soluției.
Ca rezultat, sa dovedit a fi o schemă de lucru destul de viabilă, cel puțin pentru computerele staționare rapide. Dacă se găsește un comportament incorect al subsolului, setarea „underFooter” ar trebui să fie dezactivată.
Pentru ce pagini este util acest lucru?
Pe un site standard, fără stiluri de utilizator, chiar și paginile scurte de întrebări și răspunsuri se dovedesc a fi mai lungi de 1500 px, ceea ce în majoritatea cazurilor este invizibil cu monitoarele orizontale. Dar chiar și cu monitoarele convenționale, se întâlnesc deseori paginile personale ale utilizatorilor cu o înălțime de aproximativ 1300 pixeli, unde apare un subsol neîntrerupt în toată splendoarea sa. Nici un număr de pagini din setările utilizatorului nu sunt foarte lungi.Dacă utilizați stiluri de utilizator ZenComment, acestea reduc foarte mult înălțimea de pagină necesară, iar scriptul de utilizator HabrAjax poate să nu afișeze unele sau toate barele laterale din bara laterală. Prin urmare, cu scripturi și stiluri, efectul unui subsol nesetat este observat mai des în mod vizibil. Prin urmare, este logic ca o soluție de subsol să apară pentru prima dată în HabrAjax. Dar chiar și un site normal are un număr de pagini în care ar fi util un subsol cu \u200b\u200bcui.
Va exista sprijin?
Comportamentul site-ului în ultimul an arată că dezvoltatorii (și, prin urmare, conducerea) au început să implementeze caracteristici care existau anterior doar în scripturile și stilurile de utilizator. De exemplu, la începutul anului am scris, unde am adunat multe mici urări. Șase luni mai târziu, m-am întors la el și am observat cu satisfacție (chiar în text; puteți vedea „UPD” și date) că o serie de caracteristici descrise ca dorințe au fost deja implementate pe site.
În continuare, să analizăm „săgețile” în loc de casetele pentru evaluarea comentariilor. Au apărut la utilizatorii almalexa („Prettifier”) în urmă cu aproximativ 3 ani și au fost preluați în ZenComment acum 2 ani. Acum aproximativ 2-3 luni, au apărut pe site. Începe să creadă că după un timp săgețile se vor răspândi oarecare distanță, așa cum se face în ZenComment (o săgeată la stânga numărului, a doua la dreapta), pentru a pierde mai puțin.
Prin urmare, poate, „subsolul cuie” de pe Habré nu este o fantezie pe cât ar putea părea acum aproximativ 3 ani.
Au fost introduse și alte caracteristici din scriptul HabrAjaxpentru ultimele 3 luni (poate fi dezactivat în setări):
* Autorii câmpurilor de intrare (în Opera pot încetini textele mari);
* zile ale săptămânii pentru alte date decât „azi” și „ieri”;
* evenimente în flux, pliabil la 1 linie și 2 caractere;
* reducerea cuvintelor „habr *” la „χ ·” și „χα”;
* indicii de date în funcție de numerele articolelor - se raportează în ce lună și an a fost articolul înainte de a fi încărcat, după numărul din adresa URL;
* a restrâns „Postări corelate” la 2 cuvinte. Captură de ecran a ferestrei pop-up „postări similare” (afișând 12 linkuri, nu 4).
HTML5 introduce mai multe etichete noi pentru structura codului:
- Anti-Malware: Scanner antivirus fulgerător Descărcați versiunea demo a antivirusului malware
- OoVoo descărcare gratuită versiunea rusă
- Ce este kitul de distribuție a sistemului de operare bazat pe Linux pentru a descărca și instala Ce este sistemul de operare Linux
- Cum să dezarhivați un fișier în moduri simple
Ajutor computer Olympus