Servicii de cărți poștale gata făcute. Coloane de aceeași înălțime
Această pagină descrie exemple care vă permit să faceți coloane de aceeași înălțimeîn machete cu aspect bloc. Pentru mulți designeri de layout începători, aceasta este o problemă clară, deoarece dacă înălțimea coloanelor de layout nu este specificată în mod explicit, atunci acestea se întind suficient pentru a se adapta conținutului lor. În consecință, se dovedește că, în loc de aceeași înălțime, fiecare coloană din aspect are propriul ei, care nu arată foarte frumos.
Pentru o mai mare claritate, toate exemplele folosesc layout-uri cu subsol apăsat. Prin urmare, vă atrag atenția asupra faptului că unele blocuri sau proprietăți CSS care sunt implicate în crearea coloanelor de aceeași înălțime sunt deja prezente în machete inițial. Adică, în cele din urmă, îndeplinesc funcții duble - apasă subsolul în jos și trag coloanele. Cu toate acestea, pentru o mai mare comoditate, vor fi furnizate numai acele proprietăți care desenează coloane Comentarii CSSși nu contează dacă sunt folosite sau nu în alt scop.
Coloane de aceeași înălțime folosind poziționare
Acest exemplu se bazează pe principiul pseudo-coloanelor suplimentare și al poziționării absolute. Pentru a face acest lucru, sunt create mai multe blocuri (în funcție de numărul de coloane), care sunt întinse pe toată înălțimea paginii și plasate sub coloanele reale. Pentru a crea efectul coloanelor de aceeași înălțime, acestor pseudo-coloane li se acordă culoarea de fundal necesară.
Descrierea exemplului
- Toate blocurile de aspect au fost împachetate într-un bloc de înveliș suplimentar id="wrapper" căruia i s-a dat o înălțime minimă (CSS) de 100%, astfel încât să se întindă la înălțimea completă a ferestrei browserului, dar să se întindă mai mult dacă este necesar. Dar, deoarece înălțimea procentuală este calculată în raport cu strămoșul, a trebuit să-l specificăm atât pentru etichete, cât și pentru . În raport cu acest bloc de wrapper ne vom poziționa pseudo-coloanele, motiv pentru care i-a fost adăugată proprietatea CSS :relative.
- În partea de jos a aspectului, pseudo-coloanele în sine au fost create cu id-ul egal cu „menu_back”, „sidebar_back” și „content_back”, cărora li sa aplicat poziționarea absolută. În plus, pseudo-coloanelor laterale au primit lățimea (CSS) și coordonatele offset (CSS, și), în timp ce celei centrale au primit doar coordonate offset, astfel încât să ocupe aceeași poziție ca și coloanele reale. Ei bine, pentru ca pseudo-coloanele să se întindă la înălțimea completă a blocului de înveliș, li s-a dat proprietatea CSS :100%.
- Ca urmare a acțiunilor celui de-al doilea punct, deși coloanele noastre imaginare s-au întins așa cum era de așteptat și au luat poziția dorită, acestea au fost amplasate deasupra blocurilor principale de aspect. Și totul pentru că a fost folosită poziționarea absolută, care scoate elemente din fluxul principal. Pentru a remedia acest lucru, li s-a dat o valoare CSS negativă, care le „pune” sub aspect. Totul este gata.
- În principiu, puteți abandona pseudo-coloana centrală prin simpla setare a culorii dorite pentru întreaga pagină a site-ului.
Deoarece Internet Explorer 6 are probleme cu această metodă de a crea coloane de aceeași înălțime, au fost folosite mai multe metode pentru această metodă. hack-uri:
- IE6 nu îl înțelege, dar funcționează cu el de parcă ar fi înălțimea minimă. De asemenea, într-o anumită situație, acest browser ignoră regula. Aceste două caracteristici au fost folosite, pe de o parte, pentru a seta înălțimea minimă a blocului de înveliș și, pe de altă parte, pentru a nu interfera cu alte browsere.
- În acest exemplu, IE6 întinde pseudo-coloanele doar la înălțimea „primului ecran”, dar înțelege expresia (document.body.offsetHeight), care calculează dinamic înălțimea. Deci a fost folosit pentru a înlocui constant valoarea dorită în proprietate.
- Și totuși, IE6 nu funcționează cu „content_back”, deoarece lățimea sa nu este setată în mod explicit. Aici, desigur, îi puteți seta lățimea la 100% și „o puneți” chiar mai jos decât frații săi laterali, oferindu-i un :-2 separat, dar merită?
Coloane de înălțime egală folosind o imagine de fundal
Acest exemplu este cel mai simplu de implementat și constă în faptul că se creează o imagine mică „orizontală”, formată din mai multe culori (în funcție de numărul de coloane), care este apoi „înmulțită” vertical, simulând coloane. Din păcate, această metodă este potrivită doar pentru layout-uri fixe și nu uitați că într-un browser cu imaginile dezactivate nu vor exista coloane.
Imaginea de fundal care a fost folosită în exemplu poate fi văzută. Cu ajutorul lui a fost creat aspectul coloanelor de aceeași înălțime.
Descrierea exemplului
- Un aspect fix are un bloc de înveliș care de fapt face aspectul fix. Deci el setează o imagine de fundal (CSS), care este înmulțită vertical.
Coloane de înălțime egală folosind margini și umplutură
Acest exemplu folosește o tehnică destul de neobișnuită. În primul rând, tuturor coloanelor li se oferă marje inferioare foarte mari, datorită cărora sunt întinse, iar apoi margini inferioare de aceeași dimensiune, dar cu valoare negativă. La sfârșit, tot ce este „în plus” este pur și simplu tăiat.
Descrierea exemplului
- Pentru a crește umplutura inferioară, tuturor coloanelor se aplică o proprietate cu o valoare foarte mare.
- Coloanelor li se oferă o marjă negativă de subsol (CSS) egală cu umplutura specificată. Cu toate acestea, în acest caz particular, dimensiunea acestui câmp este cu 100 px mai mică. Acest lucru se datorează faptului că metoda folosită în acest exemplu pentru a apăsa subsolul necesită o marjă de jos egală ca dimensiune cu înălțimea subsolului. Total obținem: 30000px-29900px=100px.
- Rezultatul celui de-al doilea punct a fost o reducere a înălțimii învelișului (id = „înveliș”) la o astfel de dimensiune ca și când nu ar fi existat o creștere a coloanelor. Adică pentru el au devenit egale ca înălțime în funcție de conținutul lor (în cazul nostru, el adaugă aceleași 100px), deși vizual au rămas 30000px în înălțime. Cu alte cuvinte, pur și simplu se extind mult în jos dincolo de marginea învelișului.
- Proprietatea CSS :hidden este aplicată blocului wrapper pentru a tăia orice în afara limitelor sale. Drept urmare, avem difuzoare frumoase de aceeași înălțime.
Această metodă este cross-browser și toată lumea o înțelege, inclusiv Internet Explorer 6. Dar împreună cu modul în care a fost apăsat subsolul, refuză să funcționeze corect. Nu am venit cu noi „cârje” pentru acest bătrân, ci, dimpotrivă, am eliminat câteva proprietăți care îl ajută să apese subsolul. Prin urmare, atunci când adăugați conținut la coloane, în IE6 totul decurge așa cum era de așteptat.
Vlad Merjevici
O grilă modulară cu două coloane este folosită destul de des pe site-uri web și, de regulă, o coloană conține materialul principal (textul unui articol, de exemplu), iar a doua conține link-uri către secțiuni ale site-ului și alte informații. Pentru a crea un astfel de aspect, tabelele sunt destul de convenabile - fiecare celulă acționează ca o coloană separată, ceea ce face ușoară ajustarea diferiților parametri de afișare a documentului.
Lățimea coloanei
În primul rând, să luăm în considerare cea mai simplă opțiune, când lățimea coloanei din stânga este codificată în pixeli, iar lățimea coloanei din dreapta variază în funcție de dimensiunea ferestrei browserului. Pentru a face acest lucru, trebuie să setați lățimea totală a întregului tabel ca procent prin atributul lățime al etichetei
| (exemplul 1).
Exemplul 1: lățimea coloanei în pixeli
În acest exemplu, chenarul tabelului nu este afișat, iar alinierea verticală a conținutului celulei de-a lungul marginii superioare este determinată de atributul valign cu valoarea top . Acest lucru este necesar, astfel încât, atunci când conținutul celulelor diferă ca volum, acestea să nu se miște unul față de celălalt, ci să înceapă în același mod de la marginea de sus. Atributele width și valign pot fi înlocuite cu proprietățile de stil width și vertical-align cu aceleași valori. Atunci acest cod va arăta astfel (exemplul 2). Exemplul 2: Utilizarea stilurilor
Margini în interiorul coloanelorDistanța dintre coloane este controlată de atributul cellpadding al etichetei
În acest exemplu, valorile atributelor cellspacing și cellpadding sunt zero, iar distanța dintre conținutul coloanei este determinată de proprietatea padding-right, care este adăugată în celula din stânga printr-un identificator numit leftcol . În mod similar, indentările pot fi ajustate nu numai în dreapta, ci și în alte părți ale fiecărei celule. Exemplul 4 arată cum să setați marginile pentru toate celulele folosind stiluri. Exemplul 4. Margini în celule
Culoarea fundalului coloaneiPentru a separa vizual o coloană de alta, se folosesc diverse tehnici, dintre care cea mai comună este probabil utilizarea unei culori de fundal. Este mai bine să specificați culoarea prin stiluri; acest lucru vă permite să puneți designul paginii într-un fișier separat. Pentru a face acest lucru, creați o nouă clasă de stil, setați proprietatea de fundal pentru aceasta și aplicați-o în celula necesară (exemplul 5). Exemplul 5: Culoare de fundal
În acest exemplu, sunt adăugate diferite culori de fundal pentru coloanele din dreapta și din stânga (Fig. 1). Orez. 1. Coloane de diferite culori Separator de coloaneUtilizarea marginilor nu este întotdeauna potrivită pentru setarea distanței necesare între coloane. De exemplu, în cazul în care câmpurile din jurul textului nu pot fi incluse din diverse motive. Apoi adăugarea unei alte celule va ajuta, care acționează ca un separator între coloane (exemplul 6). Exemplul 6: Utilizarea a trei celule
Acest exemplu introduce o altă coloană cu distanțierul identificatorului de stil, ceea ce face ușoară schimbarea lățimii dintre coloane. Nu trebuie să puneți nimic în această celulă; browserele funcționează destul de corect cu astfel de celule. În fig. Figura 2 prezintă rezultatul exemplului. Pentru claritate și frumusețe, a fost adăugată o chenar în jurul coloanelor. Linie între coloanePuteți separa coloanele nu numai folosind culoarea de fundal și spațiul alb, ci și adăugând o linie între coloane. Din nou, stilurile sunt utile aici, deoarece fac crearea liniilor mult mai ușoară. Trebuie doar să setați proprietatea border-left pentru coloana din dreapta sau border-right pentru cea din stânga (exemplul 7). Exemplul 7: Adăugarea unei linii
Rezultatul acestui exemplu este prezentat mai jos. rezumatCrearea coloanelor folosind tabele este un proces destul de simplu și rapid; trebuie doar să adăugați un tabel cu două celule și să definiți atributele vizuale ale acestuia. În plus, majoritatea parametrilor care determină tipul de tabel pot fi puși în stiluri și astfel se accelerează procesul de adăugare a tabelelor de același tip și a documentelor pe baza acestora. Cu un aspect cu două coloane, sunt utilizate diferite mijloace pentru a proiecta coloanele. De exemplu, puteți utiliza o umplere de fundal, puteți adăuga un chenar în jurul coloanelor, puteți modifica distanța dintre ele sau puteți seta o linie de despărțire verticală. Toate aceste lucruri sunt controlate folosind stiluri, ceea ce duce la reducerea codului, extinde opțiunile de modificare a tabelelor și ușurința dezvoltării site-ului. În continuarea subiectului meu, vă ofer o traducere a unui articol cu o scufundare mai profundă în proprietatea cu mai multe coloane cu exemple simple și clare. Ziarele și revistele au demonstrat și în practică că textul împărțit în mai multe coloane este mult mai ușor de perceput. Pe paginile web, până nu demult, afișarea conținutului în acest fel era o problemă, până la punctul în care designerul de layout a împărțit textul în mai multe div.Dar totul poate deveni mult mai simplu cu Modulul Multi Coloane CSS3. Crearea de conținut pe mai multe coloaneFolosind eticheta HTML5 articol: Împărțim textul în două coloane:
Articolul ( -webkit-column-count:2; -moz-column-count:2; column-count:2; ) Folosind proprietatea lățimea coloanei Puteți seta coloanele la lățimea necesară:
Articolul ( -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px; ) Spațierea coloanelorIntervalul este specificat de proprietate coloană-decalajîn px sau em și nu poate fi negativ:
Articolul ( -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; ) Separator de coloaneProprietate coloană-regulă vă permite să adăugați un separator între coloane, principiul de funcționare este similar cu frontieră.
Articolul ( -moz-column-rule: 1px punctat #ccc; -webkit-column-rule: 1px dotted #ccc; column-rule: 1px punctat #ccc; ) Îmbinarea coloanelorProprietate coloană-span funcționează în mod similar cu colspan V masa, combinând coloanele necesare.
Articolul h1 ( -webkit-column-span: all; column-span:all; ) ConcluzieDatorită Modulului Multi Coloane CSS3, puteți împărți rapid și ușor textul în coloane care pot fi citite. Lista browserelor acceptate este deja suficientă pentru a încerca funcționalitatea cu mai multe coloane pe proiecte de lucru. Pentru browserele învechite, puteți folosi un specialCum se fac difuzoareMai întâi, să ne uităm la câteva moduri în care puteți crea coloane, apoi vom analiza câteva exemple. Folosind blocuri plutitoare. Astăzi, acesta este cel mai popular mod de a face difuzoare, deși Flexbox începe încet să-l înlocuiască. În mod implicit, două blocuri dintr-un flux normal nu pot fi pe aceeași linie, dar acest comportament poate fi ușor modificat prin atribuirea proprietății float ambelor: left | dreapta. Ei vor începe să apese pe marginea stângă sau dreaptă. Pentru ca blocul care le urmărește să accepte blocurile plutitoare și să fie plasat corect, trebuie setat să fie șters: ambele. Folosind flotoare, cel mai adesea se fac 2 sau 3 coloane. Dispunerea unui site cu blocuri plutitoare nu este foarte complicată; trebuie doar să cunoașteți câteva dintre nuanțele comportamentului lor. De exemplu, dacă trebuie să creați o zonă pentru afișarea articolelor, iar în dreapta - o coloană laterală cu un meniu, blocurile plutitoare pot implementa foarte ușor un astfel de aranjament. Folosind tabele. Tabelele au fost în general create pentru a afișa un număr mare de celule și coloane, așa că adăugarea coloanelor la ele este la fel de ușoară ca o plăcintă. Un tabel poate avea cel puțin 20 de coloane. Întreaga sa structură este specificată în cod html, așa că codul se dovedește a fi destul de greoi. Deoarece celulele dintr-un tabel pot fi setate la orice dimensiune, anterior aproape toate site-urile web au fost proiectate folosindu-le. De exemplu, pentru a implementa cel mai simplu aspect (header, content, sidebar, footer), au fost realizate trei rânduri în tabel (rândul tabelului este format din eticheta tr). Fiecare rând conține două celule, deoarece conținutul și bara laterală trebuie poziționate separat unul de celălalt. Și în antet și subsol, aceste celule au fost pur și simplu conectate folosind atributul colspan de pe eticheta td, dacă este necesar. Puteți elimina cu ușurință cadrul din celule, ceea ce a permis dezvoltatorilor web să dispună destul de ușor șabloane complexe. Folosind Flexbox. Aceasta este o tehnologie modernă care a început să se răspândească în 2014, deși a existat înainte. Esența sa este următoarea: este creat un bloc container comun, în care sunt plasate alte blocuri, care vor trebui realizate sub formă de coloane, apoi acestui container trebuie să i se atribuie afișaj: flex. În continuare, este de obicei setată proprietatea flex-direction, care determină direcția axei principale de-a lungul căreia vor fi amplasate blocurile. Valorile pot fi setate la: rând și coloană. Prima valoare va direcționa blocurile orizontal de la dreapta la stânga, a doua - în jos. De asemenea, puteți seta invers: flex-direction: row-reverse. Blocurile vor fi amplasate de la dreapta la stânga. Există, de asemenea, un set de proprietăți separate pentru blocurile copil ale unui container flexibil. Practic, aceste proprietăți vă permit să setați dimensiunea blocului și comportamentul acestuia în raport cu alte elemente. Avantajul flexbox este că este un element mult mai flexibil. Dacă, cu aspectul bloc, dezvoltatorii web trebuiau adesea să calculeze totul pixel cu pixel, setând indentările corecte, adăugând diverse trucuri la cod, astfel încât totul să nu se destrame, atunci elementele flexibile pot fi aranjate cu ușurință într-o coloană, pe rând și în general necesită mult mai puține calcule matematice din partea dezvoltatorului. Împărțirea textului în coloaneTotuși, încă nu am atins cel mai important subiect. CSS oferă astăzi capacitatea de a diviza text într-un bloc de corp fără ajutorul floaturilor, tabelelor sau casetelor flexibile. Adică, în html rămâne un bloc obișnuit, iar textul este împărțit în coloane numai datorită css. Deci, următoarele proprietăți se aplică unui bloc în care textul trebuie împărțit în mai multe coloane. Număr de coloane – proprietatea specifică numărul de coloane în care trebuie împărțit textul. Este recomandat să setați valoarea de la 2 la 4, în funcție de ceea ce vă place cel mai mult. Lățimea coloanei – setează numărul de caractere de text dintr-o coloană. Subliniez că lățimea coloanei în acest caz este determinată nu de pixeli, ci de numărul de caractere. Optimal: 30-50 de caractere într-o coloană. De asemenea, această proprietate nu poate fi numită deloc cross-browser, deoarece setați doar numărul dorit de caractere, dar rămâne de văzut dacă browserul va acționa în conformitate cu dorințele dumneavoastră. Column-gap – definește spațiul dintre coloane. Poate fi specificat în pixeli. Regulă-coloană – desenează o linie care separă coloanele. Sintaxa proprietății este exact aceeași cu proprietatea border. În primul rând, se înregistrează grosimea liniei, apoi tipul acesteia și apoi culoarea acesteia. De asemenea, aș dori să menționez că toate aceste proprietăți css sunt relativ noi. De exemplu, Internet Explorer le acceptă doar din versiunea zece. Acestea sunt proprietăți din standardul CSS3, așa că dacă urmează să le folosiți pe site-ul dvs., trebuie să aveți grijă de compatibilitatea între browsere, altfel nu vor exista coloane în versiunile mai vechi de Opera și IE. ExempleBlocuri plutitoare. Dispunerea unui site în două coloane se face cel mai adesea foarte simplu folosind blocuri plutitoare. În css, acest lucru este implementat cam așa: Float-block1( float: left ) .float-block2( float: left ) blocul care ar trebui să fie sub floats( clear: left | both ) Adică, blocul de jos trebuie să specifice această proprietate pentru ca aceasta să fie plasată corect. Astfel, blocurile plutitoare vor deveni o singură linie dacă au suficientă lățime în elementul părinte. Desigur, trebuie să specificați și lățimea, înălțimea și cadrul blocurilor, astfel încât să arate ca această captură de ecran:
Acum hai să facem partea distractivă. Să adăugăm mult text aleatoriu în blocul principal și să încercăm să-l afișam acolo în trei coloane, ca într-un ziar sau o revistă. Pentru a face acest lucru, trebuie să adăugați următoarele reguli la codul acestui bloc. În acest tutorial vom vorbi despre utilizarea proprietăților CSS3 pentru a construi un șablon cu mai multe coloane. Deoarece acesta este CSS3, utilizarea proprietăților sale necesită testare atentă în prealabil.
Folosind mai multe coloanePentru a crea mai multe coloane puteți folosi proprietățile:
Prima setează numărul exact de coloane care urmează să fie scoase, iar ultima setează lățimea fiecărei coloane. Toți ceilalți parametri ai coloanei vor fi determinați de lățimea disponibilă. Folosim marcaj HTML:
Codul CSS va fi astfel: Div (număr de coloane: 3) sau cam asa: Div (lățimea coloanei: 15em) /* Puteți utiliza și px */ Este disponibilă și o scurtă înregistrare: Div (coloane: 3 20em) Într-o scurtă intrare, puteți seta atât numărul de coloane, cât și lățimea acestora. Cu toate acestea, în practică, de regulă, este necesar un singur lucru. Definirea coloanelor folosind proprietatea de numărare a coloanelor este mai potrivită pentru șabloanele fluide, deoarece lățimea coloanelor se va adapta pe măsură ce lățimea ecranului browserului se va modifica.
Containere cu coloaneFolosind proprietățile column-count sau column-width creează un nou container între elementul exterior și conținut. Se numește container de coloană, deși nu îi puteți modifica proprietățile. Coloanele sunt aliniate într-un rând. Toate containerele de coloană dintr-un rând vor avea aceeași înălțime, deși conținutul lor poate diferi semnificativ. Dacă faceți un element să plutească într-un container de coloană, acesta va fi limitat la containerul de coloană și nu la containerul exterior. Setarea lățimii elementului coloanei în % va funcționa și ea - lățimea va fi calculată din lățimea containerului coloanei, nu a containerului exterior.
Spațiere și separatoare de coloaneExistă puțin control asupra difuzoarelor. Putem seta distanța dintre coloane folosind proprietatea column-gap. În mod implicit, proprietatea column-gap este setată la 1em. Div (decalaj coloane: 2em) De asemenea, puteți seta separatorul vertical folosind proprietatea coloană-regulă: Div (regula-coloană: solid subțire #ccc) O scurtă înregistrare poate fi reprezentată de 3 proprietăți care acționează la fel ca la definirea cadrelor elementelor:
Distanța este egală ca înălțime cu containerul coloanei, iar separatorul este plasat în centrul distanței. Distanțarea și separatorul au aceeași înălțime. Dacă o coloană nu are conținut, separatorul dintre ea și coloanele adiacente nu va fi afișat.
Captuseala coloanei si spanProbabil că nu veți folosi proprietatea column-fill foarte des pentru a specifica modul în care ar trebui să fie completate coloanele. Aceasta este o modalitate de a spune browserelor cât conținut să plaseze în fiecare coloană. Puteți utiliza automat (implicit) sau echilibru, ceea ce va forța browserul să încerce să umple coloanele uniform. În practică, nu există o mare diferență între rezultatele utilizării acestor valori. Intervalul, setat folosind proprietatea column-span, este o setare mult mai utilă. Permite unui element HTML să se întinde pe mai multe coloane. În imaginea de mai sus, antetul folosește exact această proprietate. H2 (column-span: toate) Există doar două valori posibile - toate (toate) sau niciuna (nimic). Nu veți putea folosi 2 din cele 3 coloane.
Întreruperea difuzoruluiExistă trei proprietăți similare care pot fi utilizate pentru a întrerupe conținutul dintr-o coloană în jurul unui element.
Definiții ale valorilor utilizate:
Scopul tuturor acestor proprietăți și valori este de a se asigura că un anumit conținut începe într-o coloană nouă.
Dacă o imagine sau un cuvânt continuu depășește lățimea coloanei, acesta va fi tăiat în mijlocul spațiului în care este plasat separatorul. Este posibil să se limiteze coloanele astfel încât elementul să aibă mai multe coloane decât există spațiu pentru ieșire:
ConcluzieProprietățile CSS3 pentru crearea unui șablon cu mai multe coloane pot fi un instrument excelent. Dar utilizarea lor necesită o verificare atentă a suportului în diferite browsere. Cu ajutorul lor, puteți schimba aspectul unui proiect existent fără modificări majore ale structurii. Ultimele note
|
