Eccomi alle prese con un piccolo sito che fa i capriccetti.

Il concept del layout è semplice (ma fino ad ora arduo da affrontare).

Essendo il teatro il centro di interesse del progetto il sito si deve presentare come un palcoscenico:

- due tente rosse ai lati
- un parquet per terra
- al centro del palco i contenuti

vi posto il link delle prove che sto effettuando se no non si capisce nulla (del resto temo che non si capisca nulla lo stesso visto come ho scritto ma un'immagine vale più di cento parole)

Sito di Prova

Il mio codice xHtml

codice:
<body>
<div id="left">
	<div id="right">
		<div id="header">
			[...]
		</div>
		<div id="center">
			[...]
		</div>
		<div id="footer">
			<div id="footer-inside">
				[...]
			</div>
		</div>
	</div>
</div>
</body>
Il mio codice css

codice:
* {
     margin:0;
     padding:0;
}
html, body {
     background: #000000 url(img/bg.jpg);

}
/* Display Style */
#left {
     background: url(img/tenda-left.jpg) no-repeat left;
}
#right {
     background: url(img/tenda-right.jpg) no-repeat right;
}
     
#header {
     margin: auto;
     width: 786px;
     height: 88px;
     text-align: left;
     background: url(img/quintessenzaHeader.jpg) no-repeat left;
}

/* Body Layout */
#center {
     text-align: left;
     margin: auto;
     width: 736px;
     height: 420px;
     background: url(img/centerBg.jpg) repeat-x;
     border-bottom: #e7c885 solid 1px;
}

#footer {
     height: 100%;
     background: transparent url(img/parquet.jpg) no-repeat top center;
}
#footer-inside {
     text-align: left;
     margin: auto;
     width: 736px;
     padding-left: 50px;
     padding-top: 25px;
     color: #e7c885;
     font-size: 12px;
}
credo ci sia tutto l'essenziale, cmq nel link trovate tutti i file se volete guardarci meglio.

il centro (i contenuti) è ottimizzato per i vecchi monitor 800x600 (anche per una scelta di comodo in quanto essendo i contenuti molto brevi si sarebbero dispersi in uno spazio più ampio).

Ma veniamo ai problemi:

innanzi tutto le tende.
come metterle ai lati senza creare accavallamenti quando si ridimensiona il sito?

Mi spiego: ad una risoluzione di 1024x768, le tende fuggono ai lati del monitor e danno respiro alla parte centrale. Se si allarga ulteriormente, le tende corrono sempre di più lasciando più spazio per il centro.
Ma se si riduce la larghezza della pagina, il centro si accavalla alle tende e il risultato è un gran pasticcio!!!

La soluzione a tre colonne quindi è da scartare. Ma quale alternativa?
Potrei usare un Bg unico per il sito (essendo mio interesse fissarne anche l'altezza ma questo lo vediamo dopo).
In questo modo le tende scomparirebbero al di sotto degli 800px.

Ma ci sono due problemi:

- Pesantezza: attualmente ogni tenda mi costa la bellezza di 40kb!!! e il parquet sono altri 40! dovrei ottimizzare e non appesantire ulteriormente (per questo problemino stavo anche pensando di fare due versioni una light ed un per banda larga).

- Risoluzione: e se uno va al di la dei 1024px? per il footer averi voluto fare un'immagine più grande (leggi più alta), in modo che chi visualizzasse più altezza vedrebbe anche le sponde del palco. Ma per le tende? Insomma potrei pure farlo, ma devo mettere su una jpg di 1200x800? Non è proprio cosa!!!

L'ideale sarebbe appunto fare in modo che le tende si attaccassero ai lati della pagina ma che sotto i 1024px di larghezza, invece che finire sotto il centro del sito, se ne andassero silenziosamente a fan c...
Ma como realizar esto artifizio? Mai vista una cosa simile (tranne che in flash!).

Mi sa che chiedo troppo... bo

altro problemuzzo è il parquet.

Così come è combinato ora il sito, il parquet si trova sopra le tende!!! Dovrei usare i posizionamenti assoluti e impostare uno z-index differente, ma non credo sia cmq facile.

Ma non credo che sia questa la strada giusta.
L'ideale sarebbe usare il parquet come bg dell'intera pagina in modo che allo scrollare giu della stessa si possa vedere ciò che sta sotto, in questo modo starebbe sotto le tende ma si vedrebbe cmq il resto...

Anche qui però ci sono i soliti problemuzzi:

non posso usare le PNG perchè non sono supportate da IE, quindi niente trasparenze, quindi le tende mi si accavalleranno lo stesso sul parquet.

E poi in definitiva: come impostare l'altezza?

di solito lavoravo sui 400/450 px di altezza totale per assicurarmi una minima compatibilità con monitor piccini quando realizzo siti fissi in altezza e larghezza... ma in questo caso 450px sono un pò pochini... me ne servirebbero almeno 600!!!

Forse la soluzione migliore sarebbe passare a Flash... ma mica è una bella cosa questa!!!