Problema Concettuale Box Model

[autumn]

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:

1) ho creato un div contenitore
2) ho inserito un'immagine che faccia da testata
3) ho creato un div, per il contenuto, con un'immagine di sfondo che si ripete nell'asse y
3) ho chiuso il div del contenuto
4) ho inserito l'immagine di chiusura pagina
5) 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?

grazie a tutti.

autumn

[Myaku]

Originariamente inviato da autumn
Concettualmente ho sbagliato qualche passaggio?
C'è un modo meno intrecciato per crearlo?

è un po' fatica risponderti senza vedere il layout della pagina

Per quanto riguarda l'accessibilità c'è un modo migliore?

è un po' fatica risponderti senza vedere il codice

[autumn]

Questo è il codice di una finestra tipo.

<div class="colonna centrodestra">
	[img]immagini_struttura/phi_foglioCentroDestraTesta.png[/img]
	<div class="testo cen_des">
<p class="attenzione"><span class="data">06-10-2007</span> - &Eacute; on line la nuova versione grafica del sito PHI. &Eacute; 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> - &Eacute; terminata la realizzazione del logo per i Microbi. 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> - &Eacute; pronto il nuovo catalogo della cooperativa Excelsior. 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]immagini_struttura/phi_foglioCentroDestraPiede.png[/img]
  </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.

[autumn]

Qualcuno riesce a rispondere al mio quesito? ho postato il codice come suggeritomi.

Grazie mille.

[Myaku]

Originariamente inviato da autumn
Qualcuno riesce a rispondere al mio quesito? ho postato il codice come suggeritomi.

Grazie mille.

hai uno spazio bianco, dici. Quale dtd hai in uso? A quale browser fai riferimento? Hai azzerato margini/padding?
Hai usato dei float. Il clear l'hai messo?
(ti faccio tutte queste domande perchè il codice non è completo)

colonna{
}

non mi risulta esista un elemento denominato colonna.
Se puoi, evita anche gli spazi tra i nomi delle id e delle classi

[autumn]

Grazie mille dei suggerimenti. Ad occhio ho fatto quanto mi hai suggerito: clear, padding, margin...etc (e lo avevo già fatto prima di postare per evitare di rompere per una sciocchezza) ma il risultato non cambia. Ora sono in fase di riscrittura completa del codice... ti farò sapere presto.
Colgo l'occasione per chiederti una cosa. Seguendo il manuale "CSS - guida completa" ho visto che si possono assegnare ad un solo elemento più classi. E' per questo che nel codice trovi degli spazi bianchi tra i nomi della classe. E' un errore?

autumn

[Myaku]

Originariamente inviato da autumn
Colgo l'occasione per chiederti una cosa. Seguendo il manuale "CSS - guida completa" ho visto che si possono assegnare ad un solo elemento più classi. E' per questo che nel codice trovi degli spazi bianchi tra i nomi della classe. E' un errore?

no. mi pare di aver letto che si possa fare. Non avevo capito che intendevi utilizzare proprio più classi, pensavo fosse una unica. Ho interpretato male io, scusami.

[autumn]

Sono riuscito a mettermi sul codice e forse ho risolto il problema della linea bianca che si creava. Infatti prima utilizzando il modello che avevo riportato sopra, tra l'immagine e il testo si creava uno spazio. Forse ho risolto usando il posizionamento relativo e assoluto.

Sembra funzionare.... per ora. Infatti adesso ho solo costruito un box per fare una prova, ora devo costruire una pagina e sperare che non saltino fuori imprevisti..... cosa praticamente diventata ormai una certezza. PURTROPPO!!!!

comunque questo è il nuovo codice

CSS

body {
margin:0;
padding:0;
border:0;
background:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#00669a;
background:#b2d6e8 url(immagini_struttura/nuovosfondo.png) top left no-repeat;
}

#centrato {
background-color: #fff;
margin:20px 0 0 100px;
padding:0px 5px 0px 5px;
border:0;
width:710px;
}

#pagina {
background-color:#fff;
width:690px;
margin:5px;
padding:5px;
border:0;
}

#contenuto{
background:#fff url(immagini_struttura/sfondosemplice_corpo.png) top left repeat-y;
height:100%;
margin:0;
padding:0;
border:0;
}
.decor{
position:absolute;
top:-5px;
right:0;
margin:0;
padding:0;
}
.decor2{
position:absolute;
bottom:-5px;
right:0;
margin:0;
padding:0;
}

#sinistra{
float:left;
width:180px;
border:0;
padding:0;
margin:0;
}

.sin {
position:relative;
background:url(immagini_struttura/phi_foglioSinistroSfondo.png) top left repeat-y;
padding:0;
margin:0;
}

.testo {
text-align:left;
padding:20px 10px 20px 10px;}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<link rel="stylesheet" href="PHI_CSS2.css" type="text/css"/>
<!--[if IE]>
<link rel="stylesheet" href="PHI_CSS2_IE.css" type="text/css"/>
<![endif]-->
</head>
<body>
<div id="centrato">
	<div id="pagina">
		<div id="contenuto">
		[img]immagini_struttura/sfondosemplice_testa.png[/img]
		<div id="sinistra">
			<div class="sin">
				<div class="decor">
                     [img]immagini_struttura/phi_foglioNewsTesta.png[/img]</div>
				<div class="testo">
					

Questa è una prova che serve per capire perché non mi funziona il box model</p>
					

speriamo propri che funziona perché non me ne và de rimettermi a fare questa cosa ancora una volta</p>
					

ci ho perso già abbastanza tempo</p>
				</div>
				<div class="decor2">
					[img]immagini_struttura/phi_foglioSinistroPiede.png[/img]
				</div>
			</div>
		</div>
		[img]immagini_struttura/sfondosemplice_piede.png[/img]
	</div>
	<p class="clear">
		Designed by autumn - powered by arub - &copy; all right reserved by PHI
	</p>
</div>
</div>
</body>
</html>

Grazie ancora a chi risponderà!

autumn