BOX fatto con tabella HTML da trasformare in XHTML

[Valeria75]

Ho un Box creato in HTML

<table cellspacing="0" cellpadding="0" width="200" bgcolor="#ffffff" border="0">
<tbody>
<tr>
<td colspan="3"><img src="Include/SxBar/Sx_Top.jpg" width="200" border="0" /></td>
</tr>
<tr>
<td width="5" rowspan="2" valign="top"><img height="192" src="Include/SxBar/Sx_VerticalSxBar.jpg" width="5" border="0" /></td>
<td width="190"><img height="30" src="Include/SxBar/Sx_TopBar.jpg" border="0" /></td>
<td width="5" rowspan="2" valign="top"><img height="192" src="Include/SxBar/Sx_VerticalDxBar.jpg" width="5" border="0" /></td>
</tr>
<tr>
<td valign="top" align="middle" height="162">
</td>
</tr>
<tr>
<td colspan="3"><img
src="Include/SxBar/Sx_Down.jpg" width="200" border="0" /></td>
</tr>
</tbody>
</table>

A questo punto (ottenuto il risultato che volevo usando una tabella) vorrei passare all'utilizzo dei fogli di stile e XHTML, in pratica dovrei gestire i differenti pezzi i immagini: 2 bordi laterali, uno superiore, uno inferiore, ed il titolo del box... ed avere un'area centrale nella quale inserirò i miei contenuti (immagini, testo...), quest'area usando le tabelle si dimendionava automaticamente, ma con i CSS??

quindi ho queste immagini da gestire:

Bordo superiore
<td colspan="3">
<img src="Include/SxBar/Sx_Top.jpg" width="200" border="0" />
</td>

Bordo laterale
<td width="5" rowspan="2" valign="top">
<img height="192" src="Include/SxBar/Sx_VerticalSxBar.jpg" width="5" border="0" />
</td>

Titolo box
<td width="190">
<img height="30" src="Include/SxBar/Sx_TopBar.jpg" border="0" />
</td>

Bordo laterale
<td width="5" rowspan="2" valign="top"><img height="192" src="Include/SxBar/Sx_VerticalDxBar.jpg" width="5" border="0" />
</td>

Bordo inferiore
<td colspan="3"><img
src="Include/SxBar/Sx_Down.jpg" width="200" border="0" />
</td>

Io ci ho provato:



<div id="APPBox">
<div class="BoxTop"></div>
<div class="BoxSX"></div>
<div class="BoxTitle"></div>
<div class="BoxDX"></div>
<div class="BoxDown"></div>
</div>




#APPBox {
width: 190px;
height: 200px;
}

#APPBox .BoxTop {
background: url(Include/SxBar/Sx_Top.jpg);
height:3px;
line-height:2px;
padding: 0px;
overflow: hidden;
vertical-align: top;
}

#APPBox .BoxDown {
background: url(Include/SxBar/Sx_Down.jpg);
height:6px;
line-height:2px;
padding: 0px;
overflow: hidden;
}

#APPBox .BoxSX {
background: url(Include/SxBar/Sx_VerticalSxBar.jpg) left;
height:150px;
width: 6px;
line-height:50px;
overflow: hidden;
}

#APPBox .BoxDX {
background: url(Include/SxBar/Sx_VerticalDxBar.jpg) right;
height:150px;
width: 8px;
line-height:50px;
overflow: hidden;
}

#APPBox .BoxTitle {
background: url(Include/SxBar/Sx_TopBar_Stats.jpg);
width: 200px;
height:30px;
top: 0;
margin-top: 0;
margin-left: 5px;
}

#APPBox .contenuto {
float:left;
height:28px;
line-height:28px;
/* background:#266390 url(sfumfoot.jpg) top left repeat-y; */
background-image: url(Images/BKGMenu.gif);
background-repeat: repeat-x;
color:#164563;
border-bottom:50px #FFF;
}


ma non riesco a posizionare gli elementi

il titolo (BoxTitle) dovrebbe stare in alto, immediatamente sotto .BoxTop ... invece non si posiziona correttamente (in quanto prima viene posizionato BoxSX poi .BoxTop e successivamente BoxDX ... ma in successione uno dopo l'altro)


Grazie per l'aiuto

 

[dead]

Scusa ma a leggere tutto quel codice mi viene mal di testa
Posta il link alla pagina dove c'è la tabella che ci diamo un occhiata.

Tieni comunque presente che secondo me stai sbagliando approccio: in generale con xHTML + CSS si da la priorità alla struttura (che sia stabile a tutte le risoluzioni, leggera, accessibile, ecc.) e poi si applica la grafica e lo stile.
Problemi tipo "come faccio a mettere quell'immagine esattamente in quell'angolino?" sono concettualmente scorretti.

 

[Valeria75]

Grazie per la risposta

io vorrei ottenere questo risultato in XHTML

http://www.siparonline.com/tmp/tabella.html

Non ho dubbi sul fatto che sto sbagliando approccio... dato che non ne vengo piu fuori!

Potresti darmi una mano

 

[Valeria75]

Nessun aiutino??? :crying:

 

[dead]

Nessun aiutino??? :crying:

Guarda, secondo me basta questo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

<head>
<style type="text/css"><!--
div#contenitore {width:300px; float:left; background-colorink;}
div#alto {width:100%; height:10px; background-color:blue;}
div#centro {width:100%; height:300px; background-color:red;}
div#basso {width:100%; height:10px;background-color:black;}
div#testi { position:absolute;top:35px;}
--></style>
</head>

<body>
<div id="contenitore">
<div id="testi">qui metti i tuoi contenuti</div>
<div id="alto"></div>
<div id="centro"></div>
<div id="basso"></div>
</div>
</body>
</html>

solo che invece di tagliare l'immagine in 5 pezzi la tagli solo in 3 fette orizzontali e le metti come background.

A seconda di quello che vuoi fare, il div testi potrebbe anche non servirti e scrivere direttamente nel div centro.

Questa comunque è solo una delle soluzioni possibili. Poi dipende dal resto del contesto, da quello che vuoi metterci dentro, ecc ecc, potrebbero esserci soluzioni anche migliori.

 

[Valeria75]

Grazie infinite per l'aiuto!!

 

[sbobby]

Bravo dead...Sempre meglio usare dei <div> per la struttura dei propri siti web piuttosto che delle tabelle, che magari sono anche più facili e comode da usare, ma di certo non sono appropriate e accessibili al massimo!!