[HTML / CSS] Layout

[demos88]

Sto sviluppando il layout di un sito e mi sono trovato subito un problema non troppo semplice... premetto che sto cercando di usare i div e non le table.

In pratica io devo dividere la pagina in 4 aree:
-Un banner in testa centrato
-3 colonne di larghezza fissa. Le colonne devono essere una di fianco all'altra e centrate, quindi allineate con il banner il quale avrà ovviamente una larghezza pari alla somma delle larghezze delle colonne. Le colonne devono occupare tutta l'altezza della pagina a prescindere dal contenuto.

il primo problema che mi si è posto era la centratura, sistemata con un div contenitore per le colonne con margin:0 auto.
Per affiancare le colonne sono passato a questo stratagemma (notare i valori in percentuale):

<div id="frame" style=" margin:0 auto; width:100%; height:100%;">

	<div id="mn" style="background-color:green; width:860px; height:120px; margin:0 auto;">Menu Flash</div> 

	<div id="corpo" style="width:100%; height:100%; width:860px; margin:0 auto;">
		<div id="sx" style="background-color:blue; width:160px; height:100%; margin:0;">sx</div> 
		<div id="cn" style="background-color:red; width:640px; height:100%; margin:0; position:relative; left:160px; top:-100%;">cn</div>
		<div id="dx" style="background-color:orange; width:60px; height:100%; margin:0; position:relative; left:800px; top:-200%;">dx</div>
	</div>
</div>

ok tutto sembra funzionare perfettamente... con firefox... il problema è che con IE7 non funziona una mazza...
ecco la pagina di prova che vi uppo per comodità: apritela con firefox 3 (se ce l'avete) e vedrete che funziona, provate con IE7 (presumo anche il 6 dia lo stesso problema...) e guardate che casino...
http://www.demosx.altervista.org

Avete qualche soluzione, qualche codice, che sia compatibile con entrambi i browser?

[xciaoatuttix]

 <table>
    
    <th scope="col"><div id="mn" style="background-color:green; width:1000px; height:120px;  auto;">Menu Flash</div> </th>
 
 </table>

    <table>
      <tr>
        <th scope="col"><div id="mn2" style="background-color:red; width:60px; height:320px;  auto;">sx</div></th>
        <th scope="col"> <div id="mn2" style="background-color:blue; width:872px; height:320px; auto;">cn</div></th>
        <th scope="col"> <div id="mn2" style="background-color:yellow; width:60px; height:320px;  auto;">sx</div></th>
      </tr>

    </table>

[ech0s]

http://www.blueprintcss.org/

E' una libreria di css che ti permette di usare i div al posto di table per i layout, molto intuitiva.

Esempio:

<div id="header" class="column span-24"></div>
<div id="content" class="column span-24">
	<div id="sidebar1" class="column span-6">  	 	
	</div>
	<div id="contenuto" class="column span-12" >		 	
	</div>
	<div id="sidebar2" class="column span-6 last >	
	</div>	
</div>
<div id="footer" class="column span-24"></div>

Il column span indica la grandezza di ogni colonna, con last indichi l'ultima colonna e dichiari una nuova riga.

[sebaldar]

prova a fare flottare a sinistra la colonna sx e quella centrale e a destra la colonna dx, tutto lo racchiudi in un div container con margin auto.
L'header lo fai con un div flottato a sinistra seguito da un div con float:clear.
Queste le tre colonne

#sx {
	width: 220px;
	margin: 0 0 0 -220px;
	padding-top: 5px;
	padding-bottom: 5px;
	overflow: hidden;
	float: left;
	position: relative;
}

#dx {
	float: right;
	width: 180px;
	margin: 0 -180px 0 0;
	padding-top: 5px;
	padding-bottom: 5px;
	overflow: visible;
	position: relative;
}

#cn {
	width: 100%;
	height:auto;
	overflow: visible;
	position: relative;
	float: left;
	padding-bottom: 5px;
}

ciao
sergio

[demos88]

grazie per le risposte.
x la prima soluzione proposta: vorrei usare i div e non i table...
x la 2°: c'ho provato ma non è possibile fare senza installare librerie esterne?
x la 3°: non mi funziona

sto seriamente pensando di negare l'accesso agli utenti IE

[ech0s]

Originariamente inviato da demos88

grazie per le risposte.
x la prima soluzione proposta: vorrei usare i div e non i table...
x la 2°: c'ho provato ma non è possibile fare senza installare librerie esterne?
x la 3°: non mi funziona

sto seriamente pensando di negare l'accesso agli utenti IE

La soluzione migliore sarebbe quella di diffondere un worm che disinstalli explorer da tutti i pc del mondo e metta firefox...

Cmq siccome siamo programmatori web questo è al di fuori della nostra portata, e dobbiamo cercare di standardizzare il tutto da soli.

La soluzione da me proposta richiede l'inclusione di solo tre file css, peseranno si e no 15Kb insieme, e per mè è ottima poichè è compatibile con explorer e firefox oltre che intuitiva.
Se proprio non ti va, la 3^ soluzione è quella che fa al caso tuo, creare delle classi apposite per ogni elemento di layout in modo da dividere la pagina in tanti box...
Ricordati però che firefox ed explorer renderizzano diversamente i css, e ti dovresti fare una miriade di classi in più.
A questo punto preferisco implementare una libreria senza perdere troppo tempo e bon.

[sebaldar]

Originariamente inviato da demos88

grazie per le risposte.
x la 3°: non mi funziona

sto seriamente pensando di negare l'accesso agli utenti IE

perchè non ti funziona?

<html>
<head>

<style media="screen" type="text/css">
		
#sx {
	width: 220px;
	margin: 0 0 0 -220px;
	padding-top: 5px;
	padding-bottom: 5px;
	overflow: hidden;
	float: left;
	position: relative;
	background-color:blue
}

#dx {
	float: right;
	width: 180px;
	margin: 0 -180px 0 0;
	padding-top: 5px;
	padding-bottom: 5px;
	overflow: visible;
	position: relative;
	background-color:red
}

#cn {
	width: 100%;
	height:auto;
	overflow: visible;
	position: relative;
	float: left;
	padding-bottom: 5px;
	background-color:orange
}

#mn {
	height:auto;
	overflow: visible;
	position: relative;
	padding-bottom: 5px;
	background-color:green
}

#corpo {
	border-style: solid;
	border-width: 0 180px 0 220px;
	border-left-color: #f0f0f0;
	border-right-color: #f0f0f0;
}
</style>
</head>

<body>


	<div id="mn">Menu Flash</div> 

	<div id="corpo">
		<div id="sx">xxxxxxxxxxxxxxghfghsx</div> 
		<div id="cn">cn</div>
		<div id="dx">dx</div>
	</div>

</body>

</html>

fai un copia incolla e provalo
ciao
sergio

[demos88]

Originariamente inviato da sebaldar

perchè non ti funziona?
fai un copia incolla e provalo
ciao
sergio

beh ho provato con firefox 3, e si le colonne ci sono, però occupano il 100% della larghezza della pagina, quando vorrei che fossero di larghezza fissa (intorno agli 800-900px). Con Internet explorer 7 le colonne non sono affiancate.
In entrambi i casi la colonna e' di altezza dimensionata al contenuto, mentre io le voglio impostate a una percentuale dell'altezza della pagina.

Sto provando la soluzione con la libreria, è un pò macchinoso però mi pare venga giusto ed il risultato è uguale per entrambi i browser.

p.s: non posso rispondere velocemente perchè sto anche preparando un paio di esami per la prossima settimana

grazie delle risposte