Structura div-uri pe 3 coloane

postat acum 4 ani de Stefanescu Mihai in categorie iNoob

Unul dintre cele mai comune aspecte de care te vei lovi este structura. Azi am sa va prezint structura aranjata pe 3 coloane realizata cu div-uri.

Cei ce nu vor sa vada explicatiile pot sa se duca direct la codul sursa si sa-l foloseasca cum sonsidera ca este mai bine!

HTML

Precum si in cazul aranjamentelor pe 2 coloane, aranjamentul pe 3 coloane este usor de realizat.

[cc name=”divstrht”]

In loc de denumirea de sidebar 1 si sidebar 2 am sa ma refer la ele ca fiind meniu 1 si meniu 2. Voi le puteti numi cum doriti.

Ce trebuie scos in evidenta legat de acest HTML, este ordinea div-urilor. O sa mutam div-urile in partea in care vrem sa apar schimband directia float-urilor.

Am sa detaliez totul imediat, dar ce vreau sa va mai spun este ca atunci cand avem 3 coloane avem posibilitatea sa le aranjam in 6 moduri. Putem avea 4 aranjamente doar cu schimbarea directiei de float, iar pentru celelalte 2 vom folosi pozitiile absolute si relative.

CSS

Inca o data va spun ca totul este foarte simplu si ar trebuii sa intelegeti ce am facut daca aveti notiuni generale de CSS.

[cc name=”divstrcss”]

Dupa cum observati am folosit div-ul container pentru a centra restul elementelor din pagina si am asezat coloanele la stanga cu float.

Rearanjarea coloanelor

Primul mod de rearanjare al coloanelor este rearanjarea lor in structura html. Cand scrieti pentru prima data structura unui site ve-ti aranja html-ul dupa cum vei dori sa fie afisata.

Vei dori sa muti coloanele dintr-o parte in alta dupa ce site-ul este online sau pe anumite pagini vei dori sa fie aranjate in alt mod fara sa fii nevoit sa schimbi html-ul.

Cand folosim div-uri asta este un mare avantaj, putem rearanja o structura doar din css.
Am mentionat de cele 6 moduri de aranjare ale unei asemenea structuri:

  • Meniu1, Continut, Meniu2
  • Meniu2, Continut, Meniu1
  • Continut, Meniu2, Meniu1
  • Meniu1, Meniu2, Continut
  • Meniu2, Meniu1, Continut
  • Continut, Meniu1, Meniu2

Nu este ce-a mai logica metoda de a le lista, dar exista si o gandire dupa care le-am aranjat in acest mod.
Primul mod de aranjare (Meniu1, Continut, Meniu2) deja il avem mai sus. Urmatoarele 3 le putem obtine schimband directia float-urilor. Pentru ultimele 2 vom folosi si atributul position.

Meniu2, Continut, Meniu1
Cand afisam 3 coloane in aceasi directie acestea vor fi afisate in acelasi mod in care sunt scrise in html. Daca setam atributul float cu optiunea right vom obtine vrdinea inversa din scrierea html.
Ce-a mai usoara metoda de a le afisa in ordinea dorita este sa le punem la toate 3 float intr-o directie (left sau right).

Meniu1, Meniu2, Continut
Pentru a obtine urmatoarele structuri va trebuii sa schimbam directia unui singur float sa fie in directia opusa celorlalte doua.
Cand avem float intr-o directie pentru 2 din cele 3 div-uri, cel cu float opus celorlalte va fi primul asezat in partea in care i-ati setat float-ul.
Daca dorim sa mutam div-ul de continut in partea dreapta ii dam float: right div-ului de continut si div-urilor pentru meniuri le dam float: left.
Dupa cum deja va si asteptati meniurile afisate in stanga continutului apar si in html. in cazul nostru Meniul1 va fi afisata in extremitatea din stanga, iar Meniul2 va fi afisata in dreapta acesteia.

Continut, Meniu2, Meniu1
Intr-un mod similar cu cel de mai sus putem afisa Meniul1 in dreapta, apoi Meniul2 mai in stanga si in partea din staga Continutul.

Meniu 2, Meniu 1, Continut
Din pacate avem nevoie de mai mult, nu doar de float, pentru a le aranja in acest mod.
Hai sa ne optim putin cum putem ajunge la acest aranjament. Din moment ce vrem ca div-ul pentru continut sa fie afisat in partea dreapta, hai sa ii dam float: right.
Una din cele 3 coloane este acum asezata unde dorim, Acum trebuie sa schimbam ordinea primei si celei de-a doua coloana.
Primul instinct pe care il ai este sa pui float:right Meniului1, dar asta il va afisa in dreapta continutului. Ce trebuie sa facem? Adaugam atributul position.
Nu voi reusi sa ofer explicatii complete despre modul de functionare al atributului position in acest articol, dar va voi arata cum sa faceti pentru a obtine rezultatul dorit.
In primul rand trebuie sa ii adaugam pozitia relativa div-ului container.

[cc name=”contcs”]

Acest cod nu va afecta div-ul #container deloc, dar ne va permite sa pozitionam celelalte div-uri. Daca nu facem acest lucru celelalte div-uri vor fi pozitionate relativ fata de corpul html (body).
Apoi vom sterge float-ul Meniului1 si il vom pozitiona in urmatorul mod:

[cc name=”primcs”]

Daca ne oprim aici se va intampla ceva ciudat, Meniul1 nu se va misca, dar Meniul2 nu va mai fi afisat.
Standard, Meniul1 va avea valoarea 0 la proprietatea left, ce il va tine exact unde exte. Totusi, schimband de la float la position, Meniul1 nu va mai tine Meniul2 langa el.
Al doilea meniu este acum ascuns dupa prima coloana.
Trebuie sa mutam Meniul1  spre dreapta, pentru a ne permite afisarea meniului2. Facem asta prin cresterea valorii proprietatii left:
[cc name=”primlcs”]

Iar acum toate coloanele sunt afisate in modul dorit.

Continut, Meniu1, Meniu2

Pentru a obtine aceasta ultima structura trebuie sa inversam ordinea setata mai sus.

Acum vrem continutul in stanga iar meniurile in dreapta, deci vom fi nevoiti sa schimbam directia float-urilor.

Pana acum ne-am descurcat de minune. De fapt singura problema este ca div-ul Meniului1 nu este destul mult impins spre dreapta. Nu trebuie decat sa modificam atributul left astfel incat valoarea se va potrivi cu latimea coloanei.

[cc name=”pl48″]

si am terminat.
Am folosit acelasi concept in ambele moduri de asezare de mai sus. Coloanele au fost impinse spre stanga mai mult sau mai putin, iar pentru coloana din mijlocm am folosit position:absolute.

Concluzia?

Setarea unei structuri pe 3 coloane din css nu este deloc grea. Folosim decat float si position…
Daca ati inteles cum functioneaza aceste atribute veti reusi fara probleme sa creeati o structura pe 4 sau 5 coloane.
Rearanjarea coloanelor este putin mai inselatoare. Am schimbat directia de float a coloanelor si am ajuns sa putem folosi 6 structuri diferitre.

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!