Salve a tutti, premetto che so poco di css, o meglio in teoria so come si impostano gli stili, so che possono essere sia interni che esterni che come parametro style, ma so molto poco delle effettive potenzialità dei css.

Allora, parto dalla pratica.
Ho fatto questo semplice box con photoshop:



Quello che mi serve è utilizzare nel modo migliore il codice per avere dei box personalizzabili in termini di larghezza, altezza e contenuto.

Mostro prima il metodo che ho sempre usato (che molti chiamano "tabellare")

- Col photoshop mi divido l'immagine in 9 sezioni:



- Esporto in html la pagina, photoshop mi crea una pagina con una tabella di 9 celle, in ciascuna delle quali c'è la parte dell'immagine relativa (immagini gif create automaticamente)

- Con un editor html elimino l'immagine centrale dalla pagina;

- Modifico le immagini 2, 4, 6, 8, quelle orizzontali le riduco ad un solo (o pochi) pixel di larghezza, quelle verticali le riduco a 1 pixel in altezza;

- Elimino quindi le 4 immagini dalla pagina e imposto lo sfondo delle rispettive celle con le rispettive immagini (in questo modo se si allarga la cella lo sfondo si adatta)

- Aggiusto i parametri di larghezza e lunghezza delle altre celle, in modo da ottenere una tabella che si adatta al contenitore (larghezza e altezza al 100%)

Ottengo questo codice:

codice:
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td width="40" height="40">[img]immagini/Senza-titolo-1_01.gif[/img]</td>
		<td background="immagini/prova_02.gif"></td>
		<td width="40" height="40">[img]immagini/Senza-titolo-1_03.gif[/img]</td>
	</tr>
	<tr>
		<td background="immagini/prova_04.gif"></td>
		<td valign="top">
			testo testo testo testo testo testo testo testo 
			testo testo testo testo testo testo testo testo 
			testo testo testo testo testo testo testo testo 
			testo testo testo testo testo testo testo testo 
			testo testo testo testo testo testo testo testo 
			testo testo testo testo testo testo testo testo 
			testo testo testo testo testo testo testo testo 
			testo testo testo testo testo testo testo testo 
			testo testo testo testo testo testo testo testo 
			testo testo testo testo testo testo 
		</td>
		<td background="immagini/prova_06.gif"></td>
	</tr>
	<tr>
		<td width="40" height="40">[img]immagini/Senza-titolo-1_05.gif[/img]</td>
		<td background="immagini/prova_08.gif"></td>
		<td width="40" height="40">[img]immagini/Senza-titolo-1_07.gif[/img]</td>
	</tr>
</table>
Se metto questo codice all'interno di una tabella con una larghezza e altezza definita, il box si adatterà.

In questa pagina ci sono 2 esempi:
http://www.viplandia.com/forumhtml/prova/prova.html


Detto ciò adesso mi chiedo: è possibile implementare tutto ciò in maniera più semplice ed elegante utilizzando i css?