Mă bazez pe o schemă tradițională de coloane pentru proiectul nostru practic. Înainte de a prezenta acest proiect live și colorat, vreau să vă arăt în mod concret cum puteți implementa singuri scheme de coloane. Aici vom discuta în special despre schemele cu două și trei coloane, care rămân fundamentul majorității site-urilor web.
Clasicul design web este fără îndoială cel cu două coloane. În partea stângă a ferestrei este afișată de obicei navigarea, în timp ce în coloana dreaptă este vizibil conținutul real. În legătură cu blogurile, acest comportament a suferit de altfel o mică schimbare. De fapt, în multe bloguri se afișează în dreapta navigarea sau publicitatea, în timp ce în stânga este prezentat conținutul real.
Astfel de aplicații pot fi implementate relativ ușor în CSS. De fapt, cele cu două coloane sunt cele mai simple forme de layout.
Voi arăta în exemplul următor un design cu două coloane care se bazează pe valori procentuale absolute.
Iată exemplul complet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Layout cu poziționare absolută</div>
<div id="nav">Navigare</div>
<div id="main">Acesta este zona de conținut</div>
<div id="footer">Aici sunt afișate informațiile despre drepturi de autor.</div>
</body>
</html>Și așa arată totul în browser:
De fapt, puteți muta ușor coloana din stânga spre dreapta. Pentru asta ajustați următoarele instrucțiuni:
• În cadrul #nav schimbați valoarea de la left: 0 la right: 0.
• În cadrul #main schimbați pur și simplu margin-left în margin-right.
După ce modificările au fost salvate, veți vedea rezultatul dorit.
O problemă pe care o are layout-ul prezentat bazat pe poziționare absolută este că atunci când conținutul coloanei din stânga devine mai extins, se suprapune peste zona de subsol.
Acest lucru se datorează faptului simplu că, pentru elementele poziționate absolut, nu se "rezervă" spațiu. Pentru a evita această problemă, puteți adăuga în zona principală conținut corespunzător, care să fie mai lung decât cel din coloana din stânga.
Deci, ar trebui să utilizați această formă de layout doar dacă sunteți siguri că zona principală este într-adevăr mai înaltă decât coloana din stânga (sau din dreapta).
Un design de două coloane cu float
Problema întâlnită în exemplul anterior cu suprapunerea zonei de subsol poate fi rezolvată prin utilizarea proprietății float. Sintaxa modificată arată astfel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Layout cu poziționare absolută</div>
<div id="nav">Zona pentru Navigare</div>
<div id="main">Acesta este zona de conținut</div>
<div id="footer">Aici sunt afișate informațiile despre drepturi de autor.</div>
</body>
</html>Aceste două coloane sunt echipate acum cu proprietatea float, astfel încât coloanele sunt aranjate pe lângă altele.
Coloanei din stânga i se atribuie o lățime de 20 la sută. Aveți grijă să specificați mereu o lățime pentru un element poziționat prin float.
Zona reală de conținut primește o lățime de 80 la sută. Acest domeniu este poziționat și el cu float: left, astfel că este afișat alături de coloana din stânga.
Pentru ca zona de subsol să fie întotdeauna vizibilă în partea de jos a ferestrei - adică sub coloane - se folosește următoarea sintaxă:
#footer {
clear: both;
}
Am menționat anterior posibilitatea de a defini o clasă proprie pentru această variantă.
Un design de trei coloane cu float
Și designul cu trei coloane este o variantă des folosită în web design. O împărțire tipică ar fi următoarea:
• Coloana din stânga conține navigarea.
• Cea din mijloc conține conținutul real.
• În dreapta sunt afișate informații suplimentare sau publicitate.
Mai jos aveți un exemplu în care este creat un design flexibil de trei coloane. Sintaxa - după cum veți constata imediat - seamănă destul de mult cu cea a designului de două coloane prezentat anterior. Cu toate acestea, acum există un element div suplimentar, cu right, care va reprezenta în final coloana din dreapta a ferestrei.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Layout cu poziționare absolută</div>
<div id="nav">Aici este zona pentru navigare</div>
<div id="main">Aceasta este zona de conținut</div>
<div id="right">Aceasta este coloana din dreapta</div>
<div id="footer">Aici se află informațiile despre drepturile de autor</div>
</body>
</html>
Noului bloc i s-a atribuit o lățime de 20 la sută. Împărțirea arată astfel:
• Coloanele stângă și dreaptă ocupă fiecare 20 la sută din zona de afișare disponibilă.
• Coloana din mijloc are o lățime de 60 la sută.
Prin sintaxa afișată, blocul right este de fapt afișat în partea dreaptă.
Sintaxa este flexibilă în acest sens. Puteți ajusta blocul main astfel:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
În această versiune, float a fost setat pe right. Astfel, blocul right se mută în partea dreaptă.
În acest tutorial, ați văzut cât de ușor se pot defini structurile de bază folosind float. Aceste cunoștințe formează acum baza pentru construirea unui site web. În tutorialele următoare, un site va fi dezvoltat pas cu pas, începând cu scheletul de bază.
