Problēma ar "div" tagiem...

veiki! Man ir maza problēma ar "div" tagiem... Ar "table" tagiem to effektu es māku izveidot, bet tas ir dizaina element, un "w3" organizācija neiesaka izmantot "table" tagus dizainam... Ar "table" tas izskatītos šādi...

[xHTML]

<table class="footer" cellpadding="0" cellspacing="0">
<tr>
<td class="footer_-_left_side">
</td>
<td class="footer_-_center">
</td>
<td class="footer_-_right_side">
</td>
</tr>
</table>

[CSS]

table.footer {
width: 1000px;
height: 132px;
background-repeat: repeat-x;
}

td.footer_-_left_side {
width: 32px;
height: 132px;
background-image: url('./images/footer_-_left_side.png');
background-repeat: no-repeat;
}

td.footer_-_right_side {
width: 32px;
height: 132px;
background-image: url('./images/footer_-_right_side.png');
background-repeat: no-repeat;
}

td.footer_-_center {
width: 100%;
height: 132px;
background-image: url('./images/footer_-_center.png');
background-repeat: repeat-x;
}

..., bet man vajadzīgs šis pats effekts, bet ar "div" tagiem... Izpalīdzat... :)

Es darīju šadi, bet man nesanāca tā kā vajag... (http://www.bildites.lv/images/y9n1ed8z9oi1jnpaea2e.png)

[CSS]

div#footer {
width: 1000px;
height: 132px;
background-repeat: repeat-x;
}

div#footer_-_left_side {
width: 32px;
height: 132px;
background-image: url('./images/footer_-_left_side.png');
background-repeat: no-repeat;
float: left;
}

div#footer_-_right_side {
width: 32px;
height: 132px;
background-image: url('./images/footer_-_right_side.png');
background-repeat: no-repeat;
float: left;
padding-left: 100%;
}

div#footer_-_center {
width: 100%;
height: 132px;
background-image: url('./images/footer_-_center.png');
background-repeat: repeat-x;
float: left;
padding-left: 32px;
}

[xHTML]

<div id="footer">
<div id="footer_-_left_side">
&nbsp;
</div>
&lt;div id="footer_-_center">
&nbsp;
</div>
<div id="footer_-_right_side">
&nbsp;
</div>
&lt;/div>

Komentāri:

#1 Mad182 @ 2008.08.20 15:30

100% ir 100%. Tur nevar pielikt galos vēl kaut ko. Tu vari paņemt vienu divu, kuram fonā būtu vidējais attēls, un iekš tā katrā galā nofloatot pa vienam divam ar sānu attēliem. Ja pareizi sapratu domu.

#2 mefisto @ 2008.08.20 16:03

Pamēģini kaut kā šitā : http://innonesen.se/example/css/basic-layout/
Un jā , ja tu esi sācis mācīties lapas veidot ar tabulām, tad esi pamatīgi sapisis savu uztveri.
Google : semantic web

Isumā to ko tu gribi realizē tā. Vispirms uztaisa divus blokus, vienu priekš labās puses , otru priekš kreisās. Vienam uzliek float:left , otram float:right, tad liek kāt centrālo bloku, kam ir noradīts tikai margin.

#3 ZeRo392 @ 2008.08.22 12:33

Varbūt vari parādīt piemēru...

N'e, vairs nevajaf, man pieleca... ;)