techIT.ro Do we have a problem? Let's tech it!    












Daca ai impresia ca educatia e scumpa,
atunci încearca sa vezi cum e ignoranta.
Andy McIntyre









Home  |  Dictionar IT  |  Download  |  Forum  |  Despre noi  |  Contact

Alinierea textului si imaginilor cu CSS (Cascading Style Sheets)

Alinierea textului sau imaginilor în paginile HTML se poate face într-un mod foarte riguros, dar mai pu?in recomandabil, cu tabele. Modul recomandabil de lucru este utilizarea CSS, a propriet??ilor de mai jos.




1. Cu proprietatea text-align

Prima variantă posibilă este utilizarea proprietăţii text-align. Cu aceast? proprietate se decide alinierea textului în interiorul unei alte entit??i.
Valorile posibile sunt: left, right, center, justify.

De exemplu, următorul cod:

<div style="border: gray solid 1px; text-align: right;">

produce următorul efect:

aaa


2. Cu proprietatea padding

În traducere liberă, padding inseamnă "umplutură". Cu asta se şi ocupă proprietatea padding: încarcă spaţiul indicat cu "umplutură".

De exemplu,
<div style="padding-left: 50px">aaa</div>

creează următorul efect (mută textul "aaa" cu 50 de pixeli la dreapta. Clar?):
aaa


Pentru a fi şi mai clar, iată un exemplu cu un tabel:

<table border="1">
  <tr>
    <td style="padding-right: 50px">
      aaa
    </td>
  </tr>
</table>


Rezultatul este că un spaţiu de 50 de pixeli, în dreapta, este plin cu "umplutură":

aaa


Pot fi specificate următoarele "umpluturi":
- padding-top
- padding-right
- padding-bottom
- padding-left,
folosind o lungime (în pixeli, în centimetri) sau un procent.



3. Cu proprietatea margin

Ca şi la padding se pot specifica următoarele margini:
- margin-top
- margin-right
- margin-bottom
- margin-left. În exemplul următor vom avea un paragraf cu margine şi unul fără margine:

<p>fara margine</p><br>
<p style="margin-left: 3cm">cu margine</p>


Rezultatul este următorul:

fara margine

cu margine





4. Cu proprietatea float

În CSS, imaginile sau blocurile de text care apar în interiorul altor elemente se numesc elemente "floating".

Proprietatea float specific? în ce parte va fi afi?at un element în interiorul altui element.
În următorul exemplu vom alinia un bloc format din 9 litere "a" în dreapta unui text lung. În acelaşi mod pot fi aliniate şi imaginile.

<p>
<div style="float:right">aaa<br>aaa<br>aaa<br><br></div>
Acesta este text de umplutura, foarte mult text de umplutura.
Acesta este text de umplutura, foarte mult text de umplutura.
Acesta este text de umplutura, foarte mult text de umplutura.
Acesta este text de umplutura, foarte mult text de umplutura.
</p>

Rezultatul este urm?torul:

aaa
aaa
aaa

Acesta este text de umplutura, foarte mult text de umplutura. Acesta este text de umplutura, foarte mult text de umplutura. Acesta este text de umplutura, foarte mult text de umplutura. Acesta este text de umplutura, foarte mult text de umplutura.





Tot în scopul alinierii sau aşezării textului (sau imaginilor) în diverse poziţii, se mai pot folosi şi alte proprietăţi precum clear, sau position. Pentru mai multe detalii vă recomandăm http://www.w3schools.com/css/default.asp.

techit.ro





Colecţia:  Exemple de cod

Articolul următor:  Utilizarea unui cursor ca output al unei proceduri stocate



  


  Adauga un comentariuSpune-ti parerea despre acest articol!