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:

1.

2.