Impaginazione sito con CSS

[nicyork]

Ciao.
Devo realizzare un nuovo sito e pensavo di farlo interamente con i CSS, definendone il layout.
Il sito penso che, una volta fatto, non subirà grandi variazioni nel tempo, però visto che con le tabelle ci lavoro da una vita, vorrei vedere di realizzare questo sito con un sistema nuovo, cioè appunto i CSS.

La pagina dovrebbe essere così divisa:

- die aree rettangolari abbastanza sottili, una in cima e una in fondo, che conterranno la data e un menù rapido
- il corpo della pagina sarà diviso in due righe e 3 colonne
- la prima riga sarà più bassa della seconda
- nella seconda ci andrà, nella colonna di sinistra il menù, in quella centrale una immagine, in quella di destra il testo.

Dall'immagine allegata spero si capisca meglio!

Ora, qualcosa sono riuscito a realizzare, ma ho trovato subito due problemi:
1. il rettangolo di chiusura non coincide con la line estarna in basso
2. appena messo il testo, ho subito notato che il rettangolo di destra si allunga, uscendo dall'area, mentre gli altri no

La struttura della pagina è così fatta:

 

<div id="corpo">
	
	<div id="testa">
		
	</div>
	
	<hr />
	<div id="corpo-colonna1">
		[MEN&Ugrave; DI NAVIGAZIONE]
		</div>
	<hr />
	<div id="corpo-colonna2">
		[AREA CENTRALE CON IMMAGINE]
	</div>
	<hr />
	<div id="corpo-colonna3">
		[AREA CONTENENTE IL TESTO DEL SITO]
	</div>
	
	<div id="piedipagina"></div>
	
</div>

<hr />

Avete un css magari già pronto che funzioni bene e che non dia problemi con questo tipo di impaginazione?
Quello che ho io, da i problemi che ho detto sopra... c'è anche da dire che ho iniziato a lavorarci da poco quindi può anche darsi che ne dia pure altri!! Speriamo di no!

Grazie.

[nicyork]

Si vede male dall'immagine che ho dovuto rimpicciolire, comunque la prima area, sopra i 3 rettangolo, ha tutta un bordino bianco (dall'immagine sembra che solo sopra al primo quadrato ci sia una riga rossa)...
Così come la riga di chiusura... e tutto intorno c'è un bordo sempre bianco!

Mentre tra i rettangolo interni nessun bordo.

[salasir]

Sarebbe necessario vedere il CSS, ma potrebbe essere solo un problema di azzeramento di alcuni margini.

Maurizio

[nicyork]

Eccotelo...

body 
{ 
	margin:0; 
	padding:0;
	text-align:center;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 10;
	color: #000;
	background-color: #e2a50c;
        text-decoration: none;
}
hr { display:none }
#banda-estremi	/* banda parte alta e bassa del sito */
{
	border: #fff 1px solid;
	background-color: #9f1008;
	padding:1px;
	min-height: 10px;
	height: auto !important;
	height: 10px;
}
#divisione-due	/*divisione dell'area a metà*/
{
	width: 50%; text-align: center;
}
/* definizione quadrati area TESTATA */
#corpo-quadrato1 
{
	position:absolute;
	top:16px;
	left:0;
	width:190px;
	padding:1em 0;
	background-color: #9f1008;
	min-height: 100px;
	height: auto !important;
	height: 100px; 
}
#corpo-quadrato2 
{
	position:absolute;
	top:16;
	right:320;
	left:190;
	width:250px;
	padding:1em 0;
	min-height: 100px;
	height: auto !important;
	height: 100px; 
}
#corpo-quadrato3 
{
	position:absolute;
	top:16;
	right:0;
	width:320px;
	padding:1em 0 0 1em;
	background-color: #9f1008;
	min-height: 100px;
	height: auto !important;
	height: 100px; 
}
#corpo 
{
	position:relative;
	width:760px;
	margin:0em auto;
	text-align:justify;
	background:#e2a50c;
	border: #9f1008 1px solid;
	min-height: 5005px;
	height: auto !important;
	height: 505px; 
}
#testa 
{
	position:absolute;
	top:0; left:0;
	width:758px;
	margin:0em auto;
	text-align:left;
}
#corpo-colonna1 
{
	position:absolute;
	top:116px;
	left:0;
	width:190px;
	padding:1em 0;
	min-height: 348px;
	height: auto !important;
	height: 348px; 
}
#corpo-colonna2 
{
	position:absolute;
	top:116;
	right:320;
	left:190;
	width:250px;
	background-color: #9f1008;
	padding:1em 0;
	min-height: 348px;
	height: auto !important; 
	height: 348px; 
}
#corpo-colonna3 
{
	position:absolute;
	top:116;
	right:0;
	width:320px;
	padding:1em 0 0 1em;
	background-color: #fff;
	min-height: 348px;
	height: auto !important;
	height: 348px;
}
#piedipagina
{
	position:absolute;
	bottom:0; left:0;
	width:758px;
	margin:0em auto;
	text-align:center;
}

code 
{
	font:80% verdana,helvetica,sans-serif;
	display:block;
	margin:0 1em .5em 1em;
}
h1
{
	padding:0.5 0 0.5 0em; letter-spacing: 3px; text-align:left; font-weight: bold; font-size: 12px; color: #e2a50c;
}

Spero ti sia d'aiuto... o meglio mi sia d'aiuto!

Grazie.

[salasir]

Per prima cosa metti px a fianco di tutte le posizioni "top", "left" dove manca.
Poi bisogna ridurre la larghezza di una o più colonne perchè 190 + 250 + 320 fanno già 760 a cui devi sottrarre il padding 1em che hai definito.

Dai un'occhiata qui

Maurizio

[nicyork]

Vado a leggere al link che mi hai dato e provvedo ad inserire il "px".

Ma per le dimensioni perchè scusa il padding da fastidio?? non definisce solo che il testo, in quel blocco deve avere uno spassio di 1 dal bordo? :master:

[salasir]

certo, ma per IE per esempio la dimensione della colonna si somma al bordo, al margin, al padding, ... Leggi il box model che ti spiega tutto.

Maurizio

[nicyork]

Hai ragione... ho letto ed effettivamente quello che credevo io era sbagliato!

Ma tu mi scrivi "ma per IE"... ma non è così anche per altri browser?

Comunque... alla luce di questo, mi devo rifare tutti i calcoli della mia impaginazione, e poi forse riesco a risolvere il problema... anche se quello dell'allungamento della sola colonna 3 non penso si risolva così...

Tu pensi che mettendo le misure giuste tutti i miei problemi si risolvano?

Grazie.

[salasir]

Gli altri browser interpretano margin, padding, ecc.. all'interno della dimensione indicata (width:xxx) mentre IE li somma.

Puoi provare a visualizzare la tua pagina con FF e vedi come va.
Se qualcosa o tutto si sistema devi ricorrere a trucchetti tipo hack (in verità un po' pericolosi a mio parere xchè non si sa mai coma possano essere interpretati in futuro) per sistemare le cose su IE che puoi trovare qui , oppure strutturare diversamente l'impaginazione (layout fluido, float, ...) secondo una delle tracce di html.it

altri link:
http://pro.html.it/articoli/id_518/i...pag_1/pag.html
http://pro.html.it/articoli/id_522/i...pag_1/pag.html
http://pro.html.it/articoli/id_525/idcat_8/pro.html

Maurizio

[nicyork]

Questa cosa che mi dici però mi fa pensare... io i problemi li visualizzo con IE 6, e se IE non somma i margini e il resto allora vuol dire che la soluzione non sta nel ricalcolare le dimensioni!

Comunque una prova la posso sempre fare....