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
Rispondi quotando
