problemino con layout!

[torrone]

allora ho un piccolo problemino con un layout.. è composto così.. header, corpo, footer.

header è dove verrà inserito il logo, il footer dove ci sarà la firma mentre il corpo è suddiviso in tre colonne: menu sinistro, contenuto e menu destro. Fin qui va tutto bene apperte il fatto che quando il contenuto si allunga, si allunga tutta la pagina, mentre quando si allungano i due menu non si allunga la pagian ma anzi il testo va a finire sopra il layout. io vorrei ceh quando si allungano i menu si allungasse anche la struttura del layout, qualcuno sa come posso fare? o dove sto sbagliando?

ecco la pagina e lo stile css

pagina html

<div id="body">

<div id="header"></div>


<div id="corpo">

<div id="menusx">
<div class="menu">
<div class="titolo_menu">MENU SX</div>



Prova 1

Prova 2

Prova 3

aaaaaa












</p>
</div>
</div>

<div id="contenuto">
<div class="pagina">
<div class="titolo_pag">Titolo pagina</div>


Contenuto pagina</p>
</div>
</div>

<div id="menudx">
<div class="menu">
<div class="titolo_menu">MENU DX</div>



Prova 1

Prova 2

Prova 3

aaaaaa
</p>
</div>
</div>

</div>

<div id="footer">FOOTER</div>

</div>

stile css

body { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	margin:0; 
	padding:0
}

a {
	color: #F88017;
	font-weight: bold;
	text-decoration : none;
}

a:hover {
	color: #FF0000;
	font-weight: bold;
	text-decoration : none;
}

#body { 
	text-align: center; 
	width: 800px;
    margin-top: 15px;
	margin-left: auto;
	margin-right: auto;  
}  
#header { 
	margin: 0px; 
	text-align:left;
	height: 150px;
}
#corpo { 
	margin: 0px; 
	text-align:left;
}
#footer { 
	margin: 0px; 
	padding: 5px;
	text-align: center;
}

#header { 
	border-top:1px solid #CCCCCC; 
	border-left:1px solid #CCCCCC; 
	border-right:1px solid #CCCCCC; 
	padding:1em 0; 
}

#corpo { 
	position:relative; 
	border:1px solid #CCCCCC; 
}
#menusx { 
	position:absolute; 
	top:0; 
	left:0; 
	width:180px; 
	padding: 5px; 
}
#contenuto { 
	margin:0 185px 0 185px; 
	border-left:1px solid #CCCCCC; 
	border-right:1px dotted #CCCCCC; 
	padding: 5px; 
}
#menudx { 
	position:absolute; 
	top:0; 
	right:0; 
	width:180px; 
	padding: 5px; 
}

#footer { 
	border-bottom:1px solid #CCCCCC; 
	border-left:1px solid #CCCCCC; 
	border-right:1px solid #CCCCCC; 
}

.menu {
	padding: 5px;
}

.titolo_menu {
	padding: 5px;
	text-align: center;
	font-weight: bold;
	border: 1px solid #add8e6;
	text-decoration: none; 
}

.pagina {
	padding: 5px;
	background-color: #EFEFEF;
	}
	
.titolo_pag {
	font-size: 15px;
	font-weight: bold;
	text-decoration: none; 
	padding-right: 10px;
}

[StefanoC]

il file css è un casotto !!

voci quali #header, #corpo, #footer non vanno: sono in doppio e contengono istruzioni contrastanti.

il #corpo dovrebbe essere includere float: left

prova e facci sapere.

ciao,stefano

[gabip87]

secondo me sarebbe meglio riscrivere anche l'HTML . Imposta il menù come lista, leva i
, diminuisci il numero di <div>, non fare dei div per i titoli ma usa <h2>, <h3>, ecc. Questo ti semplificherà molto la vita.

[torrone]

Originariamente inviato da StefanoC
il file css è un casotto !!

voci quali #header, #corpo, #footer non vanno: sono in doppio e contengono istruzioni contrastanti.

il #corpo dovrebbe essere includere float: left

prova e facci sapere.

ciao,stefano

cose che va in contrasto??

riassumendo cosa dovrei fare?

[torrone]

Originariamente inviato da gabip87
secondo me sarebbe meglio riscrivere anche l'HTML . Imposta il menù come lista, leva i
, diminuisci il numero di <div>, non fare dei div per i titoli ma usa <h2>, <h3>, ecc. Questo ti semplificherà molto la vita.

si si ci avevo già pensato ma quello che mi interessava ora è il layout non quello all'interno

[StefanoC]

Originariamente inviato da torrone
cose che va in contrasto??
riassumendo cosa dovrei fare?

se nel file css compare una classe chiamata pippo:

.pippo {
font grande nero
solo bordo destro}

e dopo ne dichiari una nuova sempre chiamata pippo

.pippo {
font piccolo rosso
solo bordo superiore}

non ti viene il sospetto che il browser vada in confusione...?
riassumendo riscrivi il file css e rileggi il post di gabip87. il file html può essere mooolto + asciutto.

ciao,
stefano

[torrone]

Ho unito alcune parti del css e fatto quel ceh dovevo fare, ma quali sono le parti contrastanti ora nel css?

body { 
	font-family: Geneva, Arial, Helvetica, sans-serif; 
	font-size: 11px;
}

a {
	color: #F88017;
	font-weight: bold;
	text-decoration : none;
}

a:hover {
	color: #FF0000;
	font-weight: bold;
	text-decoration : none;
}

#body { 
	text-align: center; 
	width: 800px;
    margin-top: 15px;
	margin-left: auto;
	margin-right: auto;  
}  
#header { 
	margin: 0px; 
	padding: 5px; 
	text-align: left;
	height: 150px;
	border-top: 1px solid #CCCCCC; 
	border-left: 1px solid #CCCCCC; 
	border-right: 1px solid #CCCCCC; 
}
#corpo { 
	margin: 0px; 
	text-align:left;
	position:relative; 
	border:1px solid #CCCCCC; 
}
#footer { 
	margin: 0px; 
	padding: 5px;
	text-align: center;
	border-bottom:1px solid #CCCCCC; 
	border-left:1px solid #CCCCCC; 
	border-right:1px solid #CCCCCC; 
}

#menusx { 
	position:absolute; 
	top:0; 
	left:0; 
	width:180px; 
	padding: 5px; 
}
#contenuto { 
	margin:0 185px 0 185px; 
	border-left:1px solid #CCCCCC; 
	border-right:1px dotted #CCCCCC; 
	padding: 5px; 
}

#menudx { 
	position:absolute; 
	top:0; 
	right:0; 
	width:180px; 
	padding: 5px; 
}

.menu {
	padding: 5px;
}

.menu h1 {
	padding: 5px;
	text-align: center;
	font-weight: bold;
	font-size: 12px;
	border: 1px solid #add8e6;
	text-decoration: none; 
}
.menu a {
	display: block;
}

.pagina {
	padding: 5px;
	background-color: #EFEFEF;
	}
	
.pagina h1 {
	font-size: 15px;
	font-weight: bold;
	text-decoration: none; 
	padding-right: 10px;
}

pagina html nuova

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prova</title>
<link rel="stylesheet" href="stile2.css">
</head>
<body>

<div id="body">

<div id="header"></div>


<div id="corpo">

<div id="menusx">
<div class="menu">
<h1>MENU SX</h1>

Prova 1
Prova 2
Prova 3


aaaaaa











</p>
</div>
</div>

<div id="contenuto">
<div class="pagina">
<h1>Titolo pagina</h1>


Contenuto pagina</p>
</div>
</div>

<div id="menudx">
<div class="menu">
<h1>MENU DX</h1>
Prova 1
Prova 2
Prova 3


aaaaaa</p>
</div>
</div>

</div>

<div id="footer">FOOTER</div>

</div>

</body>
</html>