De cand au aparut <div>-urile, lumea s-a schimbat! E un fel de “Marea Schisma”. Iubitorii <table>-urilor au incercat sa se tina tare pe pozitie si sa nu isi tradeze credinta, pe cand ceilalti s-au dat de partea <div>-urilor cu incredere.
Mie mi-a fost tare greu sa trec de la <table> la <div>. Ambele sunt containere, poti pune in ele diverse elemente. Ca si avantaje:
Table – avantaje
- elementele din el se pot organiza mai bine
- nu prea apar probleme de compatibilitate intre browsere
- altele – astept pareri in comentarii
Div – avantaje
- e mai elegant
- se pot suprapune mai bine elementele
- suporta si layouturi nestandardizate
- e… web2.0 (echivalentul modei bio-eco de acum)
- alte avantaje, tot la comentarii, va rog, si am sa le adaug aici
Acum, partea concreta! Sa zicem ca avem un site care arata asa:
Ca sa il facem cu tabele, trebuie sa folosim urmatorul cod:
<table>
<tr>
<td colspan="2"> <!-- grupam 2 coloane -->
Header
</td>
</tr>
<tr>
<td>
Meniu
</td>
<td>
Continut
</td>
</tr>
<tr>
<td colspan="2">
Footer
</td>
</tr>
</table>
Si cu divuri:
<div id="container">
<div id="header">
Header
</div>
<div id="middle">
<div id="meniu">
Meniu
</div>
<div id="continut">
Continut
</div>
</div>
<div id="footer">
Footer
</div>
</div>
Iar CSS-ul:
#container{
position:absolute;
width:500px;
left:50%;
margin-left:-250px;
}
#header{
width:100%;
float:left;
}
#middle{
width:100%;
float:left;
}
#meniu{
float:left;
width:150px;
}
#continut{
float:right;
width:350px;
}
#footer{
width:100%;
float:left;
}
In principiu, sunt mai multe moduri de a face treaba asta cu div-uri. Din ce am observat eu, cu metoda asta merge pe browsere fara probleme, dar astept si alte metode.
Dupa cum se vede in CSS, am centrat div-ul cu id-ul “container”. Asta e o metoda “desteapta”, care merge in majoritatea cazurilor. Sa vedem inca o data codul:
position:absolute;
width:500px;
left:50%;
margin-left:-250px;
Intai, il punem in pozitie absoluta pe pagina. Daca ar fi relativa, ar tine cont de celelalte elemente. Pasul 2 e sa punem o latime fixa, in cazul nostru, 500px.
Cand facem left:50%, punem marginea din stanga a div-ului la mijlocul ecranului:
Cu negru e pagina web, iar cu verde este divul nostru.
Cu margin-left:-250px, tragem div-ul 250 px la stanga, astfel incat mijlocul lui sa se suprapuna pe mijlocul paginii web, astfel:
Tema
Sa se faca cu div-uri si cu tabele, folosind si css si imagini, urmatoarele layouturi: