Uso sempre i box tabellari, e ora voglio cambiare "stile" ;)

[cicciox80]

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:

<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?

[TheBestNeo]

Si direi di si. Soprattutto puoi farlo senza tabelle.
Il file di stile solitamente è buona norma farlo separato dall'html, in modo da andare a modificare solo quello in caso di necessità.

Però devi un po' guardarti il css, il lavoro che vuoi fare è sicuramente fattibile.

[cicciox80]

Originariamente inviato da TheBestNeo
Si direi di si. Soprattutto puoi farlo senza tabelle.
Il file di stile solitamente è buona norma farlo separato dall'html, in modo da andare a modificare solo quello in caso di necessità.

Però devi un po' guardarti il css, il lavoro che vuoi fare è sicuramente fattibile.

Qualche aiutino?

Io so come impostare un div con determinate dimensioni, con un certo sfondo e con una spaziatura interna tale da avere il testo all'interno del box, ma in questo modo il box è a dimensione fissa.... non ho proprio idea di come implementare la cosa con i css

[miki003]

Originariamente inviato da cicciox80
Qualche aiutino?

Io so come impostare un div con determinate dimensioni, con un certo sfondo e con una spaziatura interna tale da avere il testo all'interno del box, ma in questo modo il box è a dimensione fissa.... non ho proprio idea di come implementare la cosa con i css

Io credo che sia un po complicato darti un aiutino per una domanda così complessa, in quanto che un layout fluido o elastico, richiede una buonissima conoscenza di programmazione e controllo tramite css, le variabili dei contenuti hanno un peso notevole, non è come per le tabelle che si adattano automaticamente.

Se chiedi il codice di un layout fisso e dai le misure forse questo ti puo essere concesso, ma un layot elastico o liquido, per me è un argomento impossibile da svolgere in un thread

[cicciox80]

Originariamente inviato da miki003
Io credo che sia un po complicato darti un aiutino per una domanda così complessa, in quanto che un layout fluido o elastico, richiede una buonissima conoscenza di programmazione e controllo tramite css, le variabili dei contenuti hanno un peso notevole, non è come per le tabelle che si adattano automaticamente.

Se chiedi il codice di un layout fisso e dai le misure forse questo ti puo essere concesso, ma un layot elastico o liquido, per me è un argomento impossibile da svolgere in un thread

Elastico e liquido sono 2 termini nuovi x me

Elastico credo che sia analogo al mio caso, cioè un item che allargandolo si adatta, estendendo lo sfondo, giusto?

Ma liquido? :master:

[miki003]

http://www.web-link.it/xhtml/13layout.html

http://css.html.it/articoli/leggi/46...nne-con-i-css/

Qui con tabelle oppure CSS

http://www.gdesign.it/pages/howto/ar...lay/liqlay.php

[cicciox80]

Originariamente inviato da miki003
http://www.web-link.it/xhtml/13layout.html

http://css.html.it/articoli/leggi/46...nne-con-i-css/

Qui con tabelle oppure CSS

http://www.gdesign.it/pages/howto/ar...lay/liqlay.php

Grazie mille! Da domani studio un po' i css e vi farò sapere!