Exemple html si css - coloane de aceeași înălțime
Coloanele de aceeași înălțime, prin poziționare
Acest exemplu este construit pe principiul psevdokolonok suplimentare și de poziționare absolută. Pentru a face acest lucru, de a crea o pereche de blocuri (numărul de coloane), care sunt întinse lungimea completă a paginii, și puneți-le sub prezenta coloana. Pentru a afișa efectul coloanelor de aceeași înălțime, ea psevdokolonkam seta culoarea de fundal dorită.
Descriere exemplu
- Toate blocurile de aspect au fost plasate într-un bloc de înfășurare id = „înveliș“ suplimentar. care a fost setat la înălțimea minimă (CSS min-înălțime) de 100%, astfel încât a întins toată înălțimea ferestrei browser-ului, dar dacă este necesar, ar putea trage mai departe. Dar, din moment ce înălțimea interesului este considerată relativ strămoș, apoi a trebuit să se precizeze și tag-uri și . Este pe această unitate, vom încheia poziția psevdokolonki, așa că s-a adăugat în poziția de proprietate CSS: relativă.
- În partea de jos a layout-ul au fost create de ei înșiși psevdokolonki cu id-ul egal cu „menu_back“. "Sidebar_back" și "content_back". la care a fost aplicat poziționarea absolută. În plus, la psevdokolonok laterală a fost specificată (lățimea CSS) și coordonatele offset, iar în centrul (CSS dreapta sus și la stânga.) - numai coordonatele offset, astfel încât ei au luat aceeași poziție ca și cea a prezentei vorbitorului. Ei bine, pentru a psevdokolonki întins la înălțimea completă a învelișului blocului, au cerut proprietatea de înălțime CSS: 100%.
- Ca urmare, al doilea paragraf al acțiunilor noastre coloana imaginară, deși întinsă, așa cum ar trebui să fie și a luat poziția corectă, dar poziționat deasupra blocurilor aspectul de bază. Și toate pentru că poziționarea absolută a fost aplicat, care trage elementele fluxul principal. Pentru a remedia acest lucru, ei s-au dat o valoare CSS indicelui z este negativ. care este „marcată“ de aspectul lor. Totul este pregătit.
- În principiu, psevdokolonki centrală poate fi distribuită prin simpla setare culoarea dorită pentru întreaga pagină.
Deoarece Internet Explorer 6 probleme cu acest mod de a crea o coloană de aceeași înălțime, mai multe hacks au fost utilizate pentru ea:
- IE6 nu înțelege min-înălțime. dar funcționează cu înălțime, ca și în cazul în care acest lucru este înălțimea minimă. De asemenea, în anumite situații browser-ul ignoră regula! Important. Aceste două caracteristici au fost folosite pentru a, pe de o parte, set bloc-wrap înălțimea minimă, iar pe de altă parte - nu interferează cu alte browsere.
- În acest exemplu, IE6 psevdokolonki se întinde doar la înălțimea „primul ecran“, dar el înțelege expresia (document.body.offsetHeight), care se calculează în mod dinamic înălțimea . Deci, ea a folosit pentru a expune în mod constant valoarea dorită în proprietate.
- Cu toate acestea, IE6 nu trage „content_back“. deoarece lățimea ei nu este dat în mod explicit. Apoi, desigur, puteți specifica o lățime de 100% pentru ea și „pus“, chiar omologii partea inferioară, cerându-i să se separe indexului z: -2, dar este în valoare de ea?
Coloanele de înălțime egală, folosind o imagine de fundal
Acest exemplu este foarte simplu de implementat și este ceea ce creează o imagine mică „orizontală“, constând din mai multe culori (număr de coloane), care este apoi „multiplicat“ vertical, imitând coloana. Din păcate, metoda este potrivit doar pentru machete fixe, de asemenea, nu uitați că într-un browser, fara nici o poza de coloane nu vor.
Imaginea de fundal, care a fost utilizat în exemplu poate fi văzut aici. Este prin el a creat apariția coloanelor de aceeași înălțime.
Descriere exemplu
- Avem un înveliș flux aspect fix, care este, de fapt, face un aspect fix. Asta e, și setați imaginea de fundal (background CSS), care se propagă pe verticală.
Coloanele de aceeași înălțime cu ajutorul câmpurilor și indentare
Acest exemplu folosește o tehnică destul de neobișnuită. În primul rând, toate coloanele sunt stabilite marje foarte mari de jos, din cauza la care sunt crăpate, și apoi aceeași dimensiune, dar negativă pentru valoarea inferioară a câmpului. La sfârșitul a tot ceea ce este „de prisos“ - se tunde.
Descriere exemplu
- Pentru a crește căptușeala interioară inferioară este aplicată tuturor coloanelor de proprietate-padding jos este o valoare foarte mare.
- Coloane, specificați o margine inferioară negativă (CSS margin-bottom) egal cu indentare specificat. Cu toate acestea, în acest caz particular, dimensiunea acestui câmp pe 100px mai puțin. Și toate pentru că metoda care a fost utilizată în acest exemplu pentru presarea subsol, necesită o înălțime mai mică indentare egală cu dimensiunea de subsol. Total se obține: 30000px-29900px = 100px.
- Rezultatul celui de al doilea paragraf a fost de a reduce înălțimea de înfășurare (id = „înveliș“), într-o asemenea măsură, ca și în cazul în care nici o creștere nu a fost vorbitorul. Aceasta este pentru el să devină egală cu înălțimea pe baza conținutului lor (în acest caz, se adaugă chiar și cei foarte 100px), deși vizual au rămas în 30000px de mare. Cu alte cuvinte, ei pur și simplu merg departe în jos în străinătate înveliș.
- Pentru unitatea de ambalaj CSS folosit proprietatea overflow: ascuns, să taie tot ceea ce merge dincolo de ea. Ca rezultat, avem o coloană frumoasă de aceeași înălțime.
Această metodă este cross-browser și se înțelege de toate, inclusiv Internet Explorer 6. Dar împreună cu modul în subsol presat, el refuză să funcționeze corect. Nu am venit cu următorul „cârje“ pentru acest om vechi, ci mai degrabă a eliminat o serie de proprietăți pentru a ajuta-l stoarce de subsol. Prin urmare, atunci când se adaugă la conținutul coloanei - toate în IE6 funcționează așa cum trebuie.
- Cum sa faci un site web
Însuși liber - Tutorial HTML
pentru începători - CSS Tutorial
pentru începători - Referințe
HTML si CSS - exemple
HTML si CSS - referințe
site-uri utile pentru webmasteri - unelte
Software pentru crearea de site-uri web