Ciao a tutti!
Ho iniziato a studiare il css da poco e chiedo a voi per capirne di piu' (non che non ci siano informazioni in internet, ma forse dal mio punto di vista ce ne sono troppe e troppo confuse).

Parto da questo assunto: voglio realizzare un box di larghezza fissa ed altezza variabile con i bordi arrotondati dati dalle immagini.

Questo il codice che ho scritto in prima istanza.

Foglio di stile:


td.boxul { /* Upper left */
background-image: url(http://www.gisport.org/images/box/boxul.png);
width: 12px;
height: 24px;
background-position: top left;
background-repeat: no-repeat;
}
td.boxuc { /* Upper center */
background-image: url(http://www.gisport.org/images/box/boxuc.png);
width: auto;
height: 24px;
background-position: top;
background-repeat: repeat-x;
}
td.boxur { /* Upper right */
background-image: url(http://www.gisport.org/images/box/boxur.png);
width: 12px;
height: 24px;
background-position: top right;
background-repeat: no-repeat;
}
td.boxml { /* Middle left */
background-image: url(http://www.gisport.org/images/box/boxml.png);
width: 12px;
height: auto;
background-position: left;
background-repeat: repeat-y;
}
td.boxmc { /* Middle Center */
background-image: url(http://www.gisport.org/images/box/boxmc.png);
width: auto;
height: auto;
background-position: center;
background-repeat: repeat;
}
td.boxmr { /* Middle right */
background-image: url(http://www.gisport.org/images/box/boxmr.png);
width: 12px;
height: auto;
background-position: right;
background-repeat: repeat-y;
}
td.boxll { /* Lower left */
background-image: url(http://www.gisport.org/images/box/boxll.png);
width: 12px;
height: 23px;
background-position: bottom left;
background-repeat: no-repeat;
}
td.boxlc { /* Lower center */
background-image: url(http://www.gisport.org/images/box/boxlc.png);
width: auto;
height: 23px;
background-position: bottom;
background-repeat: repeat-x;
}
td.boxlr { /* Lower right */
background-image: url(http://www.gisport.org/images/box/boxlr.png);
width: 12px;
height: 23px;
background-position: bottom right;
background-repeat: no-repeat;
}

E questo l'html con i TAG <TABLE> & Co.


<table border="0" cellpadding="0" cellspacing="0" style="width: 500px">
<tr>
<td class='boxul'></td>
<td class='boxuc'></td>
<td class='boxur'></td>
</tr>
<tr>
<td class='boxml'></td>
<td class='boxmc'>Testo di prova testo di prova
La chiamavano Bocca di Rosa</td>
<td class='boxmr'></td>
</tr>
<tr>
<td class='boxll'></td>
<td class='boxlc'></td>
<td class='boxlr'></td>
</tr>
</table>


Ora, stavo valutando la possibilita' di tradurre il tutto utilizzando almeno 8 o 9 DIV annidiati solo per provare a capirne di piu' ma non sono venuto a capo di niente.

Qualche domanda, per iniziare:
- Perche' (ma soprattutto e' vero che...) e' bene preferire i tag DIV annidiati piuttosto che la tabella (considerando che la tabella funziona perfettamente sulla maggior parte dei browser che ho testato)?
- Come posso tradurre il tutto nella maniera piu' elegante che conoscete considerando che la stessa tabella (nella struttura ma non nei contenuti) potra' essere riportata in piu' punti della pagina e/o in piu' pagine con contenuti differenti?

Per favore non rimandatemi a visitare le pagine
http://css.html.it/articoli/leggi/28...ati-con-i-css/
piuttosto che i dettaglio sui nifty corners

So perfettamente (ho visto!) che questo argomento e' stato trattato migliaia di volte, ma sono di coccio, cosa vi posso dire!

Anticipatamente buona giornata,
Stefa