aspect div

aspect DIV - Cum se stoarce subsol (subsol, subsol), în partea de jos a ecranului în aspectul site-ului nostru

Ce probleme au apărut cu aspectul site-ului nostru

În acest caz, se poate întâmpla ca subsolul nu va fi apăsat pe partea de jos a ecranului, și va fi amplasat aproape în mijlocul înălțimii sale, care, în cele mai multe cazuri va arăta urât și nu estetic plăcut.

Cu toate acestea, în opinia mea, pentru a stoarce subsol la capătul de jos a aspectului site-ului este necesar, iar acest lucru este valabil mai ales în cazul în care înălțimea paginii va primi mai mică decât înălțimea ecranului utilizatorului. Schematic poate fi reprezentat după cum urmează:

Ie subsol un comportament corect în cazul unei mici cantități de informații pe pagină și un ecran mare utilizator va fi după cum urmează:

Pentru a-l pune în aplicare, trebuie să pună în aplicare o serie de manipulări de structura codului nostru. În plus, schimbările pe care le va face nu numai un fișier CSS de design stylesheet style.css, dar, de asemenea, în index.html, care conține cod HTML și care formează blocuri Div. Dar, mai întâi lucrurile primele.

De exemplu, vom folosi un aspect creat anterior cu trei coloane a site-ului. În acest Index.html va arata astfel:

Și următoarele proprietăți CSS au fost înregistrate în fișierul style.css:

Ei bine, aspectul în sine arată astfel:

După cum puteți vedea, subsol nu este apăsat în jos și, prin urmare, nu îndeplinește cerințele noastre (este întotdeauna sub cea mai mică coloană), deci va trebui să facă ajustări la codul. Tot același lucru se poate face pentru două coloane, și un aspect de cauciuc prea. o metodă universală.

Cum de a stoarce subsol la partea de jos a aspectul site-ului

Deci, avem nevoie pentru a schimba containerul subsol Div la partea de jos a ecranului. Pentru aceasta trebuie mai întâi să se stabilească înălțimea întregii pagini, egală cu o sută la sută (acesta va ocupa întregul ecran). Acest lucru va trebui să se schimbe, atunci dimensiunea unității principale cu același aspect și 100%.

Toate conținutul paginilor site-ului dvs. este plasat în deschiderea și închiderea tag-ul corpului și deci trebuie să termine în style.css de corp tag-ul este o altă proprietate CSS care specifică înălțimea până la 100%:

La aspectul acesta încă nu afectează, dar acum blog-ul principal poate fi întins pe întreaga înălțime a ecranului. Ie a fost un fel de etapă pregătitoare.

Proprietățile de bază ale CSS, dacă doriți, puteți vedea în lecții CSS. Acum cere containerul Div în care este închis întreaga noastră aspect, înălțimea minimă de 100%:

frontieră Proprietate: solid 3px negru permite setarea continuă grosimea cadrului containerului (solid) de 3 pixel negru. Acest lucru se va vedea în mod clar că containerul cu layout-ul se întinde pe întreaga înălțime a ecranului chiar și atunci când o cantitate mică de informații de pe pagina:

Acum, avem nevoie pentru a face un subsol de bloc dintr-un recipient comun și puneți-l mai jos, imediat după general. Ce va da? Și, în cele din urmă binevoiește să coboare în jos subsol în aspectul, și nu este la fel ca înainte de a se agăța de cea mai lungă din coloana lui. În acest caz, Index.html ia forma:

Notă un bloc de subsol nu este acum localizat într-un container comun (maket), și proprietățile CSS, prin urmare, latimea acum nu este reglementat stabilit pentru fișierul cu style.css maket stil. Subsol va întinde lățimea întregului ecran, dar el va fi amplasat în partea de jos a ecranului, chiar sub unitatea principală:

Dar, din nou, există o problemă, pentru că, în scopul de a vedea la subsol, acum am pentru a defila pe ecran în browser (a se vedea în bara de defilare a imaginii).

Dar, în scopul de a stabili o liniuță negativă din partea de sus, trebuie să știți această înălțime subsol foarte, iar noi nu este încă știu.

Deci, solicitați mai întâi containerul care conține înălțimea subsol, prescrie proprietatea corespunzătoare în style.css:

Și apoi setați o marjă negativă de sus la o înălțime egală cu înălțimea sa pentru el:

Acest lucru va permite subsol pentru a merge în sus plat pe propria înălțime și astfel se potrivesc ecranul browser-ului (puteți elimina acum frontiera de proprietate CSS: reguli solide negru din 3PX pentru maket, în domeniul de aplicare al grosimii nu interferează cu întreaga noastră aspect cu potrivire subsol în ecranul de reglare) :

După cum puteți vedea, acum bara de defilare nu apare în browser-ul, și toate aspectul nostru trei coloane a site-ului pe baza aspectului de bloc este plasat într-un singur ecran (în cazul unei mici cantități de informații de pe pagina) și subsolul este situat în partea de jos. Ceea ce, de fapt, este necesar să facă.

Vom introduce un distanțier și se luptă cu Internet Explorer

Dar există o problemă. care se va manifesta numai atunci când informațiile cu privire la aspectul paginii va fi mai mult și poate obține această situație:

Se pare că o situație poate apărea atunci când informațiile într-o singură coloană aspect naedet în subsol, care nu va arata destul. Acest lucru se întâmplă din cauza marjelor negative, notorii, am cerut-o, și care a ajutat ridica subsolul nostru cu coliziuni pe aspectul principal al rezervorului.

Ie Se obține că în partea de jos a ecranului sunt două blocuri suprapuse în subsol.

Soluția la această problemă este de a adăuga un nou Div container gol (asa-numitele distanțiere) în recipientul principal aspectul nostru (maket), în locul în care anterior localizat cu bloc de subsol.

Și style.css prescrie în acest scop (ID Înălțimea proprietate specifică înălțimea containerului-circumferință egală cu înălțimea de subsol .:

Ca rezultat, în partea de jos va fi presat de subsol nu este conținută în recipientul principal (de exemplu, textul din cea mai înaltă coloană), iar la subsol la înălțime egală cu containerul regiune distanțier care nu conține nici o informație.

Astfel, vom evita raiduri și distorsiuni în aspectul nostru trei coloane. Totul va fi clar și frumos (și grandios noblețe):

Așa cum am menționat mai sus, lățimea subsol acum ar trebui să fie pus deoparte, ca containerul nu este acum parte a miezului. Pentru a face acest lucru, trebuie să adăugați în fișierul CSS proprietăți suplimentare pentru subsol, care să permită să se stabilească lățimea și aliniați-l în mijlocul ecranului orizontal.

Este logic să se stabilească lățimea egală cu lățimea întregului aspect folosind proprietățile lățime, și alinierea orizontală poate fi realizată în același fel cum am făcut pentru întregul aspect pe aspectul blocului.

Astfel, vom avea nevoie pentru a adăuga proprietăți suplimentare ID de subsol:

Cu lățimea de proprietate: 800px lățime dată este egală cu 800 de pixeli, și cu cele două proprietăți margin-left: auto si marja de-dreapta: indentare auto setarea din stânga și dreapta subsol în mod automat, prin care aceste marje sunt egale și eroul nostru este egalată de mijloc:

Ei bine, nu mai ca nu este nimic pentru a îmbunătăți, dar nu a fost. Ca întotdeauna browser-ul nostru favorit Internet Explorer 6, dar nimic nu a înțeles de proprietățile CSS pe care le folosim. În acest browser (și, probabil, într-un alt prea vechi), în ciuda tuturor eforturilor noastre de subsol nu va fi apăsat în jos și va adera în continuare la cel mai înalt aspect coloana a site-ului.

Toate acestea se datorează faptului că (browser-ul Internet Explorer 6 nu intelege min-height proprietate este de 100%, pe care am folosit pentru a seta înălțimea minimă a unității principale, egală cu înălțimea ecranului.

Prin urmare, pentru a rezolva această problemă, trebuie să se aplice așa-numita hack care vă permite să explice (pe degete) pentru browsere mai vechi, trebuie să faci. Înainte de lista de proprietăți CSS pentru maket va trebui să introduceți următoarea combinație:

Această regulă se va aplica numai pentru browser-ul Internet Explorer 6, restul nu vor fi luate în considerare și aplicarea acesteia.

Deci, cu forma finală a style.css presat în partea de jos a subsolul ecranului va fi după cum urmează:

Ei bine, forma finală a index.html a fost prezentat chiar de mai sus. Totul pe această serie de articole dedicate aspectul blocului 2 și 3 coloane fixe din cauciuc și site-ul machete pot fi considerate finalizate.

Mult noroc! Ne vedem în curând pe paginile de blog KtoNaNovenkogo.ru

Dar există un singur punct. În cazul în care blocurile sunt inserate în locul unei imagini de text, toți pleacă într-un mod imprevizibil. Am imaginile sunt introduse în partea stângă și blocurile de mijloc, și a adăugat încă un bloc, situat sub media. Ca urmare, blocul de unitate medie întinsă înălțimea imaginii blocului stânga și imaginea devine înălțime după imaginea din stânga. Ridica-l este obținut prin aplicarea de poziționare numai absolută, dar apoi unitatea, aflată în mijloc, se ridică la partea de sus și se ascunde sub imaginea.

Da, sunt aici acum pentru toate lecțiile făcute, totul este frumos și clar, mulțumesc foarte mult! Și vreau să încerc să umple un bloc de tip text al conținutului și imaginilor, astfel încât există o preocupare ca nu este deformat. Tu ar continua o serie de articole pe acest exemplu pentru a descrie modul în care procesul de umplere a site-ului și ceea ce se întâmplă la aspectul blocului pe layout în timp ce 🙂

Graff spune:

Victor spune:

Întrebare. Cum pot obține „Conținutul paginii“ (ceea ce în mijloc), cu o mică informație în interiorul acestuia, întins oricum întotdeauna la subsol de violet dvs., și nu se uită la diferite pagini de umplere de diferite cioturi?

Eu, de asemenea, este interesat de!

Și am shoveled deja pe Internet podea în căutarea unui răspuns nu este problema!

Daniel spune:

Graff spune:

Victor spune:

Întrebare. Cum pot obține „Conținutul paginii“ (ceea ce în mijloc), cu o mică informație în interiorul acestuia, întins oricum întotdeauna la subsol de violet dvs., și nu se uită la diferite pagini de umplere de diferite cioturi?

Eu, de asemenea, este interesat de!

Și am shoveled deja pe Internet podea în căutarea unui răspuns nu este problema!

Și, de asemenea, am shoveled! Am petrecut toată ziua.

M-am întins în jos pentru un pui de somn oră, și m-am trezit.

Am venit cu o metodă genial, practic revoluționară: de a impune un cadru tabele. Tovarăși, ori de câte ori este cazul să impună tabele, și ei trebuie să impună, mai degrabă decât să o enigmă în impunerea blocului. Și în iad cu toate holivar pe acest subiect.

Vitali: Aici, am trăit și doverstalis. că aspectul tabelar devine inovație și metoda revoluționară. 🙂 Și, în general - este corectă. În cazul în care mai bine să facă foi de calcul - și ei trebuie să facă! Mai ales pentru că au un avantaj clar asupra aspectului blocului.

Nu-mi propun să mă opresc asupra acestui aspect, dar pentru a preda o clasă pentru a crea un site finit bazat pe acel aspect. Alege culori, face un meniu, insera imagini. Apoi, această linie ar fi o concluzie logică.

Am o problemă, cu o scădere a conținutului coloana din mijloc a ecranului pentru a pravuyu.i nalazit nu dimensiunea menyayutsya pravoy.et stânga și, desigur, ar trebui să fie, dar, probabil, pare uzhasno.kak corecta? (Poate am ratat ceva.)