Plutirea este unul dintre conceptele CSS esențiale. Fără înțelegerea acestui principiu, site-urile web nu pot fi create pe baza CSS-ului. Plutirea poate fi tradusă aici frumos prin flotare, ceea ce clarifică situația. În final, plutirea nu înseamnă altceva decât că un element se aliniază la stânga sau la dreapta altui element. (În mod normal, elementul ar fi sub un alt element).
Un prim exemplu ar trebui să clarifice acest aspect.
<p><img src="bild.jpg" /> În acest set se găsesc 12 forme proprii, pe care le puteți utiliza în flyerele voastre, fundaluri etc. Formele sunt împărțite în 18, 21 și 24 de dungi, precum și diferite lățimi de raze. Aceste presetări sunt un fundament bun pentru efecte frumoase în layout-urile și imaginile voastre.</p>
A fost definit un paragraf aici. În interiorul acestui paragraf se află o imagine și text normal.
Privelnița asupra rezultatului arată că imaginea se află în fluxul textului.
Acum intervine proprietatea float.
img { float: left;}
Aici, din nou, priviți rezultatul.
În acest caz, imaginea a fost flotată. Astfel, textul curge în jurul imaginii.
Valorile left și right pot fi asignate proprietății float pentru a lăsa elementul să "plutească" la stânga (float: left) sau la dreapta (float: right).
Puteți aplica și imediat float: right pe imaginea dată.
În acest caz, se întâmplă trei lucruri:
• Grafica este scoasă din fluxul normal.
• Se deplasează în elementul p complet în partea de sus.
• Este afișată cât mai la dreapta posibil.
Privind rezultatele actuale, este evident că nu arată încă foarte frumos. De fapt, lipsesc distanțele dintre imagine și textul care o înconjoară. Ajustați sintaxa astfel:
img {
float: left;
margin-right: 20px;
}
Imaginei i s-a asignat un margin drept de 20 de pixeli. Acesta oferă următoarea priveliște:
Experimentați aici cu puțin margini.
Oprirea flotării
Să ne întoarcem la exemplul cu imaginea. Extind sintaxa pentru a include un paragraf suplimentar.
<p><img src="bild.jpg" />În acest set se găsesc 12 forme proprii, pe care le puteți utiliza în flyerele voastre, fundaluri etc. Formele sunt împărțite în 18, 21 și 24 de dungi, precum și diferite lățimi de raze. Aceste presetări sunt un fundament bun pentru efecte frumoase în layout-urile și imaginile voastre.</p> <p>În acest set se găsesc 12 forme proprii, pe care le puteți utiliza în flyerele voastre, fundaluri etc. Formele sunt împărțite în 18, 21 și 24 de dungi, precum și diferențe de raze. Aceste presetări sunt o bază bună pentru efecte frumoase în layout-urile și imaginile voastre.</p>
Rezultatul arată astfel:
De fapt, nu doar primul paragraf înconjoară graficul. Același lucru se aplică și pentru al doilea paragraf de text. Acest lucru se datorează pur și simplu faptului că graficul depășește în jos primul paragraf. Pentru o mai bună înțelegere, voi atribui pur și simplu o culoare de fundal paragraful în care se află graficul.
Atunci când analizați rezultatul, devine evident că grafica depășește de fapt în jos paragraful. Acest lucru nu este întotdeauna dorit în această formă. La acest punct, proprietatea clear devine interesantă. Deoarece prin aceasta se poate opri flotarea. clear forțează un element următor să înceapă efectiv sub un element plutitor și nu lângă acesta. Proprietatea clear are următoarele valori:
• left – oprește float: left
• right – oprește float: right
• both – oprește atât float: right cât și float: left
În exemplul următor, voi atribui celui de-al doilea paragraf valoarea clear: left pentru a opri plutirea.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="bild.jpg" />În acest set se găsesc 12 forme proprii, pe care le puteți utiliza în flyerele voastre, fundaluri etc. Formele sunt împărțite în 18, 21 și 24 de dungi, precum și diferite lățimi de raze. Aceste presetări sunt un fundament bun pentru efecte frumoase în layout-urile și imaginile voastre.</p>
<p style="clear:left;">În acest set se găsesc 12 forme proprii, pe care le puteți utiliza în flyerele voastre, fundaluri etc. Formele sunt împărțite în 18, 21 și 24 de dungi, precum și diferențe de raze. Aceste presetări sunt o bază bună pentru efecte frumoase în layout-urile și imaginile voastre.</p>
</body>
</html>
Prin sintaxa prezentată, al doilea paragraf este afișat efectiv sub imagine.
De obicei, în loc de clear: left sau clear: right puteți folosi clear: both. Prin urmare, este recomandabil să creați pur și simplu o clasă corespunzătoare în foaia de stiluri, pe care o puteți apela la nevoie.
.clearing {
clear: both;
}
Această clasă poate fi utilizată întotdeauna atunci când dorim să oprim float-ul unui element.
<p class="clearing">Conținut ...</p>
La ce folosește float-ul
Bineînțeles, float-ul nu este necesar doar pentru fluxul textului în contextul imaginilor. De fapt, constituie conceptul de bază al paginilor web bazate pe CSS. Datorită float-ului, de exemplu, se pot realiza cu ușurință aspecte cu mai multe coloane. Uitați-vă la următorul exemplu:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Pagina de start</li>
<li>Contact</li>
<li>Imprint</li>
</ul>
</div>
<div id="inhalt">
Aici este conținutul paginii web.
</div>
</body>
</html>Aici se construiește un aspect cu două coloane. Particularitatea constă în faptul că coloanele stau una lângă alta.
Și tocmai această așezare lângă altul este realizată folosind conceptul de floating. Informații detaliate despre construirea paginilor web pe baza float-urilor vor fi prezentate în continuarea acestei serii.
