-
Aiuto layout con div
Salve utenti di AV.
Ho appena finito di fare il mio primo layout per provare ad utilizare i div:
ho realizato un layout composto da un header, una navigate, un menu, i contenuti e il footer, quanto sono andado a visualizare la pagina ho notato che quanto i contenuti inseriti superano la lungezza del menu posto alla sinistra il rimane più piccolo della context anche mettento l'height al 100%.
come potrei fare a far si che l'altezza del context il menu aumenti in altezza fino ad ragiungere la stessa altezza che ha raggiunto il contenuto?
ah, queste e il foglio di stile che ho usato:
Codice:
body {
font-family:Arial, Helvetica, sans-serif;
font-size:76%;
}
h1, h2 {
margin:0;
padding:0;
}
#container {
margin:0px 10% 0px 10%
}
#header {
height:100px;
background-color:#000000
}
#navigate {
background-color:#ACACAC;
margin:0px auto 0px;
}
#menu {
background-color:#FFE6E6;
float:right;
width:15em;
height:auto;
}
#context {
background-color:#FFFFE6;
margin:0px 15em 0px 0px;
}
#footer {
background-color:#EEEEEE;
clear:both
}
#post {
margin:0px 0px 0px 10px;
}
e questo è la pagina principale:
Codice HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Prova layout con css</title>
</head>
<body>
<div id="container">
<div id="header">/ header /</div>
<div id="navigate">/ navigate /</div>
<div id="menu">
Main menù<br />
Chi sono<br />
Dove mi trovo<br />
</div>
<div id="context">
<h2>Titolo</h2>
<div id="post">
<br /><br /><br /><br /><br /><br /><br />
</div>
</div>
<div id="footer">/ footer /</div>
</div>
</body>
</html>
Aspetto vostre risposte.
-
Non so se ho capito bene il tuo problema, ma credo che dovresti fare due cose:
- impostare una larghezza alla sezione principale della pagina (nel tuo caso dovrebbe essere "context"). Ti dovrebbe bastare scrivere width:auto; per fare in modo che questa parte prenda tutta la larghezza disponibile in cima, e che resti costante per tutta la pagina
- il fatto che il menu sembri più corto lo risolvi con un semplice trucco: non assegnare il colore di sfondo al menu, ma assegnalo al "container". In questo modo avrai in realtà un menu trasparente, "appoggiato" su uno sfondo colorato, sullo stesso sfondo però si appoggia anche la parte principale della pagina... quindi al tuo visitatore sembrerà che menu e contenuti siano sullo stesso livello. Attenzione, però: questa soluzione presenta il problema contrario a quello che ti ritrovi, quindi accertati che i contenuti della pagina siano sufficientemente lunghi...
Stammi bene...
