Alinierea elementelor flotante
Când lucrăm cu elemente flotante și cu proprietatea float, adesea ne putem confrunta cu problema că elementele flotante "cad" din pagina web. Există diverse aspecte și soluții ale acestei probleme.
De exemplu, să presupunem că avem următorul bloc:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stilizare bloc în HTML5</title>
<style>
#sidebar{
float: left;
width: 25%;
padding: 10px;
}
#main{
border-left: 1px solid #ccc;
width: 75%;
padding: 15px;
margin-left: 25%;
}
</style>
</head>
<body>
<div id="sidebar">
<h2>The standard Lorem Ipsum passage</h2>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p>
</div>
<div id="main">
<h2>What is Lorem Ipsum?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text..</p>
</div>
</body>
</html>În sidebar avem destul de mult text care, teoretic, ar trebui să se încadreze eficient în limitele blocului flotant. Însă, în realitate, putem întâmpina o problemă:
Cum se observă în captura de ecran, literele ies din blocul flotant peste graniță, chiar dacă, teoretic, în blocul flotant ar trebui să fie un spațiu interior de 10 pixeli pe partea dreaptă.
De ce se întâmplă asta? Adesea, browserele interpretează dimensiunile elementului într-un mod particular. În mod implicit, pentru proprietatea box-sizing se folosește valoarea content-box, ceea ce înseamnă că atunci când se calculează lățimea și înălțimea unui element, browserul adaugă la valoarea proprietăților width și height și spațiile interioare padding și lățimea graniței.
Asta poate duce la ieșirea elementelor flotante din blocurile destinate lor. Prin urmare, este adesea recomandat să setăm pentru toate elementele valoarea box-sizing la border-box, astfel încât toate elementele să fie măsurate uniform, iar lățimea lor să reprezinte doar valoarea proprietății width. Adesea, în stiluri se adaugă următorul stil:
* {
box-sizing: border-box;
}Aceasta înseamnă că valoarea box-sizing: border-box; este setată pentru toate elementele, și toate sunt interpretate de browser în mod uniform. De exemplu, adăugăm acest stil la pagina definită mai sus și vom obține un rezultat ușor diferit:
Să examinăm o altă problemă legată de poziționarea elementelor flotante în container:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stilizare bloc în HTML5</title>
<style
>
*{
box-sizing: border-box;
}
#header{
background-color: #eee;
}
#nav{
background-color: #f4f4f4;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav ul{
margin-left: 0px;
padding-left: 0px;
list-style: none;
}
#nav li {
float: left;
}
#nav ul a {
display: block;
width: 7em;
padding: 10px;
border-left: 1px solid #ccc;
text-decoration: none;
color: #333;
text-align: center;
}
#nav ul li:last-child a {
border-right: 1px solid #ccc;
}
#nav ul a:hover{
background-color: #aaa;
color: #f4f4f4;
}
</style>
</head>
<body>
<div id="header">
<h1>Bine ați venit pe site</h1>
<div id="nav">
<ul>
<li><a href="#">Acasă</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Despre site</a></li>
</ul>
</div>
</div>
<div id="content"><p>hello world</p></div>
</body>
</html>
Chiar dacă bara de navigație este definită în blocul cu id header, vizual nu se află în elementul header. De asemenea, se pot observa unele spații inexplicabile, iar blocul următor după header intră peste meniu.
Problema spațiilor se datorează faptului că browserul setează implicit stiluri încorporate pentru diferite elemente. Deci, poate fi puțin confuz unde sunt definite aceste stiluri și de ce sunt aplicate. Adesea, pentru a rezolva această problemă, dezvoltatorii resetează unele dintre cele mai semnificative stiluri pentru majoritatea elementelor:
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd,
ol, ul, li, form, table, caption, tr, th, td, article, aside, footer, header{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}O altă problemă - suprapunerea elementului div cu conținutul principal peste blocul flotant al barei de navigație se rezolvă destul de simplu - setând pentru acest element divul urmtorului stil:
clear: both;O problemă mai complexă este cea a elementelor de meniu care cad din granițele blocului container. Aici există două posibile soluții. Prima soluție constă în adăugarea următorului stil la elementul care reprezintă bara de navigație:
ul:after {
content: " ";
display: table;
clear: both;
}A doua soluție este să facem blocul barii de navigație să fie flotant:
#nav{
background-color: #f4f4f4;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
float:left;
width: 100%;
clear: both;
}Deci, având în vedere cele de mai sus, să modificăm stilurile pentru pagina web (codul HTML rămâne neschimbat):
*{
box-sizing: border-box;
}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd,
ol, ul, li, form, table, caption, tr, th, td, article, aside, footer, header{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
#header{
background-color: #eee;
}
#header h1{
font-size: 1.3em;
padding: 15px;
}
#nav{
background-color: #f4f4f4;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav ul{
margin-left: 0px;
padding-left: 0px;
list-style: none;
}
#nav li {
float: left;
}
#nav ul a {
display: block;
width: 7em;
padding: 10px;
border-left: 1px solid #ccc;
text-decoration: none;
color: #333;
text-align: center;
}
#nav ul li:last-child a {
border-right: 1px solid #ccc;
}
#nav ul a:hover{
background-color: #aaa;
color: #f4f4f4;
}
#nav ul:after {
content: " ";
display: table;
clear: both;
}
#content{
clear: both;
}Și acum pagina web va arăta diferit, adică așa cum ar trebui să arate.
