Stăpânirea pagina css layout-

* Mutați cursorul mouse-ului pentru a întrerupe derularea.

CSS Stăpânirea: aspectul paginii

Un avantaj major al CSS - capacitatea de a controla aspectul paginii fără a utiliza tag-uri HTML de design. Cu toate acestea, crearea CSS-template-uri a câștigat o reputație nemeritat pentru ceva sofisticat, mai ales printre acei dezvoltatori care sunt doar mastering tehnologia. Acest lucru se datorează faptului că nu toate browserele interpreteaza acelasi CSS, dar chiar și mai mult - cu faptul că acum există doar un număr foarte mare de tehnici diferite pentru a crea machete înseamnă foi de stil.

Se pare ca fiecare dezvoltator web are propriile metode și tehnici, șabloanele de aspect CSS, și webmasteri novice folosesc adesea unele tehnici fără a înțelege cum funcționează. Această abordare în conformitate cu „cutia neagră“ la utilizarea CSS ajută, desigur, obține rezultate rapide, dar în cele din urmă previne creșterea de înțelegere a limbii de dezvoltator.

Cu toate acestea, toate aceste tehnici diferite se bazează pe trei concepte de bază: de poziționare, înfășurare și manipularea indentare externe. Diferite tehnici se dovedesc a nu fi destul de așa, și diferite, și dacă înveți termenii și conceptele de bază, veți fi relativ ușor de a crea propriul șablon CSS-pagini.

Paginile de conținut sunt centrarea acum pe scară largă, astfel încât a învăța cum să creeze un design centrat cu CSS - de unul dintre primele lucruri pe care doriți să stăpânească dezvoltatorii web novice. Există două modalități principale de centrare de design: într-un singur caz, folosind umplutură externă automată, celălalt - poziționarea și marjele negative.

Centrarea folosind indentare externă automată

Să presupunem că se confruntă cu o problemă tipică în centrul orizontală div container cu id-înveliș ( „wrap“).

Pentru a realiza acest lucru, în practică, trebuie doar să setați lățimea div înveliș și setați padding externă pe orizontală în auto.

În acest exemplu, lățimea este setată în pixeli. Dar, desigur, cu același organism de succes vă puteți specifica procentajul din lățimea corpului documentului, sau de a utiliza dimensiunea „em“ pe dimensiunea textului.

Această metodă funcționează în toate browserele moderne, dar nu și în IE 6. Din fericire, IE interpretează incorect proprietatea text-align: centru. alinierea centrului de tot, nu doar textul. Puteți folosi acest avantaj lor prin centrarea tot ceea ce este în corpul etichetei. inclusiv înveliș div. reassigning apoi lăsat pentru alinierea la blocul de înfășurare conținut.

Utilizarea proprietății de aliniere text în acest mod este, în esență un hack, dar este absolut inofensiv și nu are impact negativ asupra codului. Acum, blocul nostru înveliș centrat în IE 6, la fel ca și în alte browsere, care sunt prieteni mai bune cu caietul de sarcini.

Centering proiectare folosind poziționare și margini negative,

Metoda folosind automate padding externă - cea mai populară abordare, dar atunci când utilizați este necesar să se recurgă la hack. De asemenea, este nevoie de două elemente de stil în loc de una. Din acest motiv, mulți preferă să utilizeze marjele de poziționare și negative.

Începem, la fel ca în exemplul anterior - la lățimea de instalare înveliș. Apoi setați proprietatea poziția a învelișului și valoarea relativă în proprietatea lăsată la 50%. Acest lucru ne permite să plaseze marginea din stânga a blocului înveliș în centrul paginii.

Cu toate acestea, avem nevoie de un pic mai mult - vrem să vedem în centrul centrului paginii unității de înveliș. Acest lucru se poate realiza prin aplicarea unei adâncitură negativ pe partea stângă a învelișului blocului egală cu jumătate din lățimea blocului. Acest lucru se va muta bloc jumătate înveliș lățime spre stânga, deplasându-l în centrul ecranului:

Alegerea metodei depinde de gustul centrarea dumneavoastră. Cu toate acestea, este întotdeauna util să știi câteva metode și tehnici, deoarece este imposibil să ghicească ce s-ar putea găsi utile.

Template-uri bazate pe flux

Există mai multe moduri de a crea cu template-uri CSS, inclusiv de poziționare absolută și marje negative. Cred că metoda mai ușor de utilizat, pe baza fluxului unor alte elemente. După cum sugerează și numele, în acest tip de șablon pe care tocmai setați lățimea de elemente poziționate, și apoi să le cereți să-și încheie la stânga sau la dreapta.

Deoarece astfel de „raționalizate“ elementele nu mai ocupă spațiu în fluxul de documente, acestea nu au nici o influență asupra elementelor bloc din jur. Pentru a rezolva acest comportament, va trebui să anuleze învelitoarea pe diferitele puncte de referință ale șablonului. În loc să aplice în mod consecvent și înveliți abolirea ei, este mai convenabil de a folosi o abordare ușor diferită: Aplicați folia de aproape orice și apoi anula o dată sau de două ori în punctele „strategice“ ale documentului, cum ar fi subsol.

șablon cu două coloane cu flux

Pentru a crea un simplu două coloane folosind un model de curgere, pornind de la structura de bază (X) HTML. În exemplul nostru (X) HTML-cadru este format din zone: branding, conținut, zone pentru navigație și subsol. Toate această structură este închisă într-un „înveliș“ - înveliș. care este aliniat orizontal cu una dintre metodele descrise mai sus.

De obicei, atunci când oamenii creați șabloane și utilizarea fluxului, ele dau flotorul de proprietate la stânga pentru ambele coloane, apoi a crea un „câmp“ între coloanele folosind marja sau padding. Folosind această abordare, coloana de bine le presat într-un spațiu accesibil -, astfel încât „nu respira.“ De obicei, acest lucru nu cauzează probleme, dar unele browsere distrug un astfel de design „strâns“, difuzoarele sunt aranjate într-o coloană - unul sub altul.

Acest lucru poate apărea în IE, pentru că în IE baza unei „dimensiunea“ a conținutului și nu conține conținutul elementului. În browsere care respectă standardele, în cazul în care conținutul nu se încadrează în cutie, doar merge dincolo de ea. În IE, cu toate acestea, în cazul în care conținutul nu este plasat în elementul care conține, acesta „se întinde“, elementul în creșterea dimensiunii sale. În cazul în care un astfel de lucru se produce în elemente de design dens, fiind mărginit, atunci nu mai există loc pentru a sta aproape unul de altul, iar unul dintre ei, așa cum au fost, „cade“, celălalt este mai jos.

Pentru a evita astfel de evoluții, aveți grijă să nu supraîncărcați unitatea care conține fluxul de proiectare. puteți crea un „câmp virtual“ da un float bloc în loc de a folosi padding orizontale exterioare și interioare, (marja, padding): la stânga. iar celălalt - float: right.

Acum, în cazul în care unul dintre elementele ușor (în câteva pixeli) va crește în dimensiune, în loc să distrugă întregul design, deplasând unul dintre blocurile de mai jos cealaltă, nu va fi „naplyvanie“ unitate în câmpul „virtuală“.

cod CSS pentru a atinge acest obiectiv este de la sine înțeles. Tocmai am stabilit lățimea dorită pentru fiecare coloană, și apoi specificați float de navigare: stânga. și pentru conținut - float: right.

Apoi, pentru a poziționa corect subsol pentru navigare și conținut, este necesar să se anuleze învelitorii pentru el.

Baza Case gata. Adăugați un cuplu de accidente vasculare cerebrale. Padding sus și de jos pentru întregul bloc de navigație și padding pe stânga și pe dreapta lista de elemente din meniul de navigare.

Pune în jos ca adâncitura de pe dreapta în zona de conținut:

Asta e, acum am pregătit un aspect simplu două coloane pe CSS.

model pe trei coloane folosind un flux

HTML-cadru pentru un șablon cu trei coloane este foarte similar cu cel pe care am folosit cu două coloane, cu singura diferență fiind că în ea există două blocuri div suplimentare: unul pentru conținutul principal, și un altul - pentru suplimentare.

Folosind aceleași reguli de CSS, la fel ca în cazul șablonului două coloane, putem da unitatea flotorului conținutul principal: stânga. și o unitate suplimentară - float: dreapta. Toate acestea vor avea loc în poziția corectă deja conținutul principal corpului. Astfel, vom împărți doilea conținut în două coloane pentru a obține aspect trei coloane.

Ca și înainte, CSS-cod este foarte simplu. Trebuie doar să specificați lățimea dorită pentru fiecare dintre blocuri și să dea fiecare ambalaj.

Puteți curăța un pic de un model prin eliminarea padding internă a blocului de conținut. se aplică în mod direct la blocul de conținut secondaryContent.

Astfel, vom ajunge aici este un aspect dragut trei coloane.

Andy Budd, Cameron Moll și Simon Collison: "CSS: Mastery avansate standarde Web Solutions"
webreference.com
Traducerea - Dmitry Naumenko