Conturarea elementelor
În general, toate blocurile și elementele pe o pagină web în browser apar în ordinea în care sunt definite în codul HTML. Cu toate acestea, CSS oferă o proprietate specială, float, care permite setarea conturării elementelor, permițându-ne să creăm pagini web mai interesante și variate din punct de vedere al designului.
Această proprietate poate lua una dintre următoarele valori:
- left: elementul se mută la stânga, iar tot conținutul care vine după el conturează marginea dreaptă a elementului
- right: elementul se mută la dreapta
- none: anulează conturarea și returnează obiectul la poziția sa obișnuită
Când aplicăm proprietatea float elementelor stilizate, în afara elementului img, se recomandă să setăm proprietatea width.
Să presupunem că trebuie să afișăm o imagine în stânga textului principal pe pagină, la dreapta trebuie să fie o bară laterală, iar restul spațiului să fie ocupat de textul principal al articolului. Definim interfața paginii mai întâi fără proprietatea float:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Conturare în CSS3</title>
<style>
.image {
margin:10px;
margin-top:0px;
}
.sidebar{
border: 2px solid #ccc;
background-color: #eee;
width: 150px;
padding: 10px;
margin-left:10px;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<div class="sidebar">L. Tolstoi. Război și Pace. Volumul al doilea. Partea a treia</div>
<img src="dubi.png" class="image" alt="Război și Pace" />
<p>Stejarul bătrân, complet transformat, întinzându-se ca un cort de frunziș întunecat și dens, se topea, abia clătinându-se în razele soarelui de seară...</p>
<p>"Nu, viața nu se termină la 31 de ani, - a decis brusc și definitiv prințul Andrei...</p>
</div>
</body>
</html>În acest caz, vom obține plasarea consecutivă a elementelor pe pagină:
Acum, pe aceeași pagină, aplicăm proprietatea float, modificând stilurile în modul următor:
.image {
float:left; /* conturare la stânga */
margin:10px;
margin-top:0px;
}
.sidebar{
border: 2px solid #ccc;
background-color: #eee;
width: 150px;
padding: 10px;
margin-left:10px;
font-size: 20px;
float: right; /* conturare la dreapta */
}Ca rezultat, plasarea elementelor pe pagină se va schimba:
Elementele la care se aplică proprietatea float sunt numite și elemente plutitoare.
Interzicerea conturării - Proprietatea clear
Uneori este necesar să interzicem conturarea. Această sarcină poate fi relevantă, de exemplu, dacă un bloc trebuie să se deplaseze în jos pe o nouă linie, și nu să contureze un element plutitor. De obicei, un footer trebuie să fie strict în partea de jos și să se întindă pe întreaga lățime a paginii. Dacă înainte de footer se află un element plutitor, atunci footer-ul poate contura acest element, ceea ce nu este dorit.
Pentru a interzice conturarea elementelor în CSS, se utilizează proprietatea clear, care indică browserului că elementul stilizat nu ar trebui să contureze.
Proprietatea clear poate lua următoarele valori:
- left: elementul stilizat poate contura un element plutitor doar de la dreapta. La stânga, conturarea nu funcționează
- right: elementul stilizat poate contura un element plutitor doar de la stânga. La dreapta, conturarea nu funcționează
- both: elementul stilizat poate contura elemente plutitoare și se deplasează în jos în raport cu acestea
- none: elementul stilizat se comportă în mod standard, adică participă la conturare atât de la dreapta cât și de la stânga
De exemplu, să presupunem că pe o pagină web este definit un footer:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Conturare în CSS3</title>
<style>
.image {
float:left;
margin:10px;
margin-top:0px;
}
.footer{
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<img src="dubi.png" class="image" alt="Stejari" />
<div class="footer">Copyright (c) MyCorp. 2016</div>
</body>
</html>Prezența conturării va crea o afișare incorectă, în care footer-ul este deplasat în sus:
Să modificăm stilul footer-ului:
.footer{
border-top: 1px solid #ccc;
clear: both;
}Acum, footer-ul nu va mai contura imaginea și se va deplasa în jos.
