Stimate cititor, te simti confortabil si te prezint principiile layout-ului de cauciuc al site-ului.
Anterior, modelul fixat considerat de noi este transformat într-un cauciuc de toate-pe-toate prin înlocuirea lățimea de pixeli a blocului
Fără anumite stiluri de aliniere a blocurilor, site-ul va fi plasat în partea stângă a ferestrei. Și asta, după părerea mea, este urât. Vreau să aliniez site-ul în mijloc. Aceasta este întrebarea: "Cum se poate face acest lucru?". Iată răspunsul.
Alinierea blocurilor în mijloc în cazul aspectului de cauciuc pe div-ah
Primul lucru care vine în minte este de a specifica text-align: proprietatea centrală a elementului corpului. Se pare că totul, inclusiv textul din pagină, ar trebui aliniat în centru. Apoi, pentru elementul de înfășurare, schimbați alinierea la alinierea din stânga (text-aliniere: stânga). Dar aceasta este abordarea greșită (deși totul va funcționa în IE). În browserele normale, proprietatea text-align stabilește alinierea numai pentru textul din blocul în care se aplică această proprietate.
Este corect să specificați liniuțele exterioare stânga și dreapta pentru element
Instrucțiunea CSS pentru blocul de împachetare va arăta astfel:
Sau în formă abreviată:
Acest principiu ar trebui să fie ghidat, dacă este necesar, pentru a alinia unitatea în centrul părintelui.
Pentru amanta notei: blocul format de etichetă
Desigur, nu veți obține nici o aliniere, deoarece limitele blocului central s-au bazat pe limitele părintelui. Lățimea containerului
În cazul directivelor float: left (sau float: dreapta), din nou, nici o aliniere folosind metoda descrisă mai sus, nu va atinge. Un bloc cu această directivă, scinda marginea sa din stânga (sau dreapta) la mamă, în timp ce toate celelalte blocuri sunt flux normal să curgă în jurul acestuia din dreapta (sau stânga).
Prin urmare, limitați lățimea blocului la proprietatea lățimii (fie lățimea fixă în pixeli, fie procentele) și, pentru a înțelege ce se întâmplă pe pagină, cerc blocul de frontieră de frontieră. De exemplu, astfel:
În acest caz, veți vedea clar limitele unității verificate. Dar, amintiți-vă că, în browsere normale la dimensiunea blocului va fi adăugat dimensiunea de frontieră-o (anormal este browser-ul IE, în care de frontieră și dimensiunea nu afectează lățimea blocului). Acest lucru poate duce la săritura blocului închis din locul pe care îl va ocupa fără accident vascular cerebral.
Dacă doriți să exersați, puteți descărca sursa de aspect cu Fișiere de depozit (* .zip-archive 3,5 KByte).
Mulțumesc, toate lucrările.
La mine, un pic de altă întrebare ... În general, a decis să scrie un cauciuc cu trei coloane (pentru coloana centrală) un șablon. Ele sunt situate corect pe orizontală, dar. Meniul vertical începe de unde se termină blocul de conținut.
html, înălțimea corpului: 100%;
marja: 0;
umplutura: 0;
frontieră: solid 1px;
>
#menu_left lățime: 150px;
float: stânga;
fundal: # FFC597;
margin-left: 0px;
poziție: relativă;
text-align: centru;
înălțime: 100%;
>
#menu_right float: dreapta;
fundal: # FFC597;
margin-right: 0px;
poziție: relativă;
lățime: 150px;
text-align: centru;
>
#container background-color: # 0ff;
lățime: 100%;
înălțime: 100%;
padding: 0px;
float: stânga;
overflow: ascuns;
afișare: inline;
>
margin-stânga: 150px;
margin-dreapta: 150px;
frontieră: solid 1px;
>
Te rog, spune-mi ce este greșeala ... vreau să înțeleg, dar să nu scrii prostii pe cea finită.
Toate lecțiile nu s-au uitat încă (site-ul tău minunat găsit chiar ieri), întrebări atât de specifice vor fi probabil mai târziu.
Încep să fac primul meu șablon pentru joomla 1.5 (deși, în general, care este diferența). Ei bine, în general, aceasta este prima mea experiență.
Designul este după cum urmează:
Trei coloane, "cauciuc" numai datorită coloanei mijlocii, lățimea minimă și maximă a celei mai exterioare div este limitată. Ei bine, plus heder și subsol. Ceva de genul asta :).
Sau chiar fixat de a face ... Eu doar nu pot decide, să fiu cinstit. Acum, lățimea este fixă și să nu spunem că este într-un fel destul de incomod ...
Site-ul unui oraș mic, funcționează deja pentru câteva luni, dar a decis să schimbe designul, să-l facă mai convenabil și mai vizibil.
Vă mulțumim pentru lecțiile 🙂
Dacă un site pe o lățime fixă este convenabil, atunci nu sunt necesare anvelope.
Am vrut să întreb: Când faceți un aspect ca în exemplu, toate coloanele sunt de mijloc, adică coloanele de conținut și meniul în înălțime sunt aliniate la înălțimea conținutului lor. E așa de conceput?
Au încercat să se asigure că au ocupat tot spațiul liber între cap și subsol - ca rezultat - o lipsă totală de rezultate. Efectul se obține numai atunci când se elimină înălțimea: auto! Important; apoi blocurile de mijloc "crawlează" prin subsol
Și eu sunt interesat de această problemă.
Confruntat cu problema că este necesar să se întindă bara laterală între heder și subsol.
Super site. Foarte informativ și tema este foarte bună. Vă mulțumesc foarte mult!
Și spune-mi, te rog.
Locul elastic ar trebui să fie vizualizat în mod egal pe monitoare cu extensia de 1024x768 și 1280x1024.
O întrebare: cum să faci figurativ vorbind că indivizii plutesc, тобиш costul imaginii de la marginea din stânga-stânga: 115px; cu extinderea de 1280x1024, și la 1024x768 ar trebui să devină 25 px cum se obține acest rezultat?
Pentru că mai devreme sunt recunoscător pentru răspuns.
Setați procentajul de indentare.
Ideea este că indentarea nu poate fi stabilită în unități fixe (în pixeli), dar în procente. Ca urmare, indentarea va varia în funcție de lățimea elementului părinte.
Îmi pare rău în întrebarea ta. Monitorul vizitatorului poate avea orice permisiune, începând cu 1024 * 768, sunteți limitat la doar două. Ce se întâmplă dacă vizitatorul folosește un laptop cu ecran lat?
Vreau să spun că valoarea procentuală a indentării ar trebui selectată astfel încât site-ul să arate bine la toate rezoluțiile populare, începând de la 1024 * 768.
Nu este nimic concret pe care nu pot să-l sfătuiesc. Trebuie să cunoașteți cerințele clientului, binecunoscutul designer și browserul încrucișat (ori de câte ori este posibil de către devas) să compuneți în conformitate cu cerințele și planurile folosind un minim de etichete imbricate unul în celălalt.
Dintre cele două imagini văd că aspectul (la fel ca) o lățime fixă cu bara laterală stângă.
Două aspecte pentru ceea ce puteți vedea cum ar trebui afișat site-ul cu extensiile de mai sus.
Cerința clientului nu este specială, principalul lucru care ar fi afișat la fel pentru aceste extensii și desigur pentru divas.
Cum se face umplerea conținutului, astfel încât umplutura să nu depășească limitele vizibile ale blocului? Ato a inundat conținutul, iar el și întregul container au luat-o și s-au inundat sub coloanele din dreapta și din stânga, ceea ce este inacceptabil.
Schema de gabarit cu antet, subsol și două coloane generate de csstamplater
Umplerea blocului nu se poate răspândi dincolo de limitele sale.
Posmatrel videoclipurile este un lucru bun ... Dar vseravno octaotsya vaprosik pentru „impunerea de cauciuc pe div-ah“, așa cum a crea un drept și fixitatea blocul din stânga și centrul de cauciuc ... Cum de a stabili blocuri o mulțime de moduri, iar UPL nu este o problema ... problema OMC, care se deplasează de la o pagină la alta ( exemplu Acasă dapustim voi repara, iar celălalt în etomzhe bloc de la mijlocul dimensiunea ar trebui să pomenyatsya la lățime: 100%, la stânga și la dreapta doar propodaet, acestea nu sunt necesare), dar am fixat ... (zamette nu are nevoie zhimatsya și se depărtează în șablon) bine! faceți centrul de cauciuc! atunci lucrul corect al stânga care se încadrează în coloana 1, sau trece sub centrul ECLI lățime set: 100%; Dar a doua pagină este perfect ... Nu sunt puternic CSS stau aici toată noaptea am alege nimic absenteismului ... (în lucrarea de masă ca un ceas în divah bine, pur și simplu nu vrea să) Vreau să solicite dadumayu mine ... Cred că nu sunt singur cu această problemă staknulsya.
Ura! Am rezolvat această problemă.
În stil_ie.css în loc de 1000px indicat 100%, și în stil.css pentru IE7 prescris:
*: primul copil + html #wrapper min-width: 990px;
>
*: primul copil + html #footer min-width: 990px;
>
și totul este bine. În toate browserele, totul este așa cum ar trebui să fie: IE5.5, IE6, IE7, IE8, Opera, FF.
Spune-mi ce e uscat sau codul vylenaya
Formatul valid este un aspect realizat în conformitate cu standardele și aprobat de programul de verificare automată a conformității cu standardele (validator).
Vă mulțumesc foarte mult ca site-ul dvs. ... a aflat pentru tine câteva lucruri utile.
Am o problemă, și cum să se asigure că textul ar fi, de asemenea, a fost cauciucul, adică pe marele ecran litere ridicat pixel, cum ar fi 12px pe ecranul 1920x1080 px și 12 de pe ecran ecrane mici. Nu pot ...
Vă mulțumim pentru lecție! Vreau să mă ocup de div.
Vă mulțumesc foarte mult pentru lecție .... Dar aș vrea să știu cum să fac un titlu dacă am 3 poze (adică 2 colțuri și o tăiere din centru)
Bună, Andrew. Vă rugăm să ajutați cu subsolul. V-am scris deja pe post. Nu sunt sigur ce sa întâmplat.
Și există studii, care este situația actuală în runet - care este ponderea site-urilor cu impunerea de cauciuc?
Andrew, a fost o întrebare
"Am vrut să întreb: Cu aspect ca în exemplu, toate coloanele sunt de mijloc, adică
Coloanele de conținut și meniul în înălțime sunt aliniate la înălțimea lor
conținut. E așa de conceput?
Am încercat să le fac
a ocupat tot spațiul liber dintre cap și subsol - ca rezultat
- absența completă a rezultatelor. Efectul se obține numai la ștergere
înălțime: auto! important; și apoi blocurile de mijloc "crawl" prin
footer. "
Deci nu ma îndrăznit. Există un antet. Sub ea, să zicem, există un div de mijloc. În partea de jos este un subsol. Deci, dacă am foarte puțin text în mijloc, atunci există un spațiu între subsol și mediană. Și mi-ar plăcea ca restul piciorului să ajungă automat în subsol și să nu se termine cu textul. Ie Înălțimea la mine sub textul div nu se încadrează automat în fața subsolului. Cum să îl implementați. Vă mulțumim anticipat.
Respectați-vă SEKOVKOVN!
Sunt un maestru web și un profesor. Sunt interesat de partea tehnică a afacerii pe internet.
Îmi place să studiez diverse aspecte tehnice, să înțeleg cum este aranjat și să-i spui altora.
Locuiesc în Moscova, Rusia.
Locuiesc în Mariupol, Ucraina.
Locuiesc în Lviv, Ucraina.