- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Problema Concettuale Box Model
-
Problema Concettuale Box Model
Ciao a tutti.
Ho un dubbio concettuale per quanto riguarda il box model.
Non ridete per la semplicità del quesito.
Per costruire una finestra che che non sia semplicemente bordo e sfondo ho usato questo metodo:- ho creato un div contenitore
- ho inserito un'immagine che faccia da testata
- ho creato un div, per il contenuto, con un'immagine di sfondo che si ripete nell'asse y
- ho chiuso il div del contenuto
- ho inserito l'immagine di chiusura pagina
- ho chiuso il div contenitore
Concettualmente ho sbagliato qualche passaggio?
C'è un modo meno intrecciato per crearlo?
Per quanto riguarda l'accessibilità c'è un modo migliore?Questo è il codice di una finestra tipo.
<div class="colonna centrodestra"> <img src="immagini_struttura/phi_foglioCentroDestraTesta.png"> <div class="testo cen_des"> <p class="attenzione"><span class="data">06-10-2007</span> - É on line la nuova versione grafica del <a href="PHI_sitoPhi.htm">sito PHI</a>. É stato effettuato un restyling del sito mantenendo la colorazione azzurra e seguendo uno stile "blog" così da lasciare una struttura ben organizzata e pulita.</p> <p class="news"><span class="data">29-09-2007</span> - É terminata la realizzazione del <a href="PHI_logomicro.htm">logo per i Microbi</a>. Lo stile segue una linea semplice e colorata con semplicità e una grafica che richiama i destinatari del servizio che sono i bambini.</p> <p class="news"><span class="data">27-09-2007</span> - É pronto il nuovo <a href="PHI_catalogoExcelsior.htm">catalogo della cooperativa Excelsior</a>. All'interno potete trovare un design accattivante e una cura nelle informazioni. All'inizio del catalogo è prevista una sezione che spiega come utilizzare il catalogo che si basa su di un sistema cromatico personalizzato.</p> </div> <img class="decor" src="immagini_struttura/phi_foglioCentroDestraPiede.png"> </div>
Questo è il codice CSS
.colonna{ text-align:center; color:#00669a; margin:0; padding:0; border:0; float:left; } .centrodestra{ float:left; width:500px; margin:0px 0px 0px 10px; } .testo { border:0; margin:0; text-align:center; padding:0 10px; } .cen_des { background:url(immagini_struttura/phi_foglioCentroDestraSfon.png) top left repeat-y; margin:-8px 0 0 0; }
Il problema è che così facendo tra l'immagine e il testo mi compare una riga vuota. Quindi ho pensato che concettualmente ho sbagliato qualcosa e che ci fosse un modo più diretto e che non riscontri questo problema.
GRAZIE MILLE A CHIUNQUE RISPONDERA'
autumn