Gino+89+
02-07-2008, 20:06
Ciao a tutti, io sto facendo questo sito internet:
http://img369.imageshack.us/img369/300/layoutyn4.png
Come potete vedere il problema è che il contenuto del div "content" mi va ad occupare la zona dove ci dovrebbe essere la navigazione (il menù, div "navigation"). Infatti il div del menù non si "espande" verso il basso come dovrebbe fare, in modo da non fare uscire i contenuti del div a lato.
Poi se scrivo nel menù (il div "navigation") senza andare a capo mi fa la stessa cosa andando ad accupare il div alla sua destra.
Il codice html è il seguente:
<html>
<head>
<title>Cappelli Gino Home Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="content_color">
<div id="navigation">
MENU...
</div>
<div id="content">
Il layout a due colonne con i float presenta un indubbio vantaggio rispetto ad un layout a due colonne con
posizionamenti assoluti: non impone vincoli sulla lunghezza relativa delle colonne. D' altra parte obbliga, nella
maggiorparte dei casi, ad avere la navigazione <em>prima</em> dei contenuti, cosa che può avere influenze negative
su tematiche quali l' accessibilità e il posizionamento sui motori di ricerca.
Il layout a due colonne si compone di quattro sezioni fondamentali: header, navigazione, contenuti e footer.
</div>
<div id="footer">
COPYRIGHT E INFO DI CHIUSURA PAGINA...
</div>
</div>
</div>
</body>
</html>
Questo è il codice del css:
html,body{
margin: 0;
padding: 0;
}
body{
font-family: arial, sans-serif;
font-size: 76%;
text-align: center;
background-color: #3675ff;
}
div#container{
margin: 0 auto;
text-align: left;
width: 1024px;
}
div#content_color{
background-image: url(../img/contentBackground.jpg);
width: 904px;
margin: 0px 55px 0px 61px;
}
div#header{
height: 170px;
background-image: url(../img/headerBackground.jpeg);
width: 1024px;
}
div#navigation{
float: left;
width: 180px;
}
div#content{
width: 724px;
}
div#footer{
clear: both;
width: 904px;
height: 110px;
text-align:center;
background-image: url(../img/footerBackground.jpg);
}
Dove sbaglio?
Grazie mille
http://img369.imageshack.us/img369/300/layoutyn4.png
Come potete vedere il problema è che il contenuto del div "content" mi va ad occupare la zona dove ci dovrebbe essere la navigazione (il menù, div "navigation"). Infatti il div del menù non si "espande" verso il basso come dovrebbe fare, in modo da non fare uscire i contenuti del div a lato.
Poi se scrivo nel menù (il div "navigation") senza andare a capo mi fa la stessa cosa andando ad accupare il div alla sua destra.
Il codice html è il seguente:
<html>
<head>
<title>Cappelli Gino Home Page</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="content_color">
<div id="navigation">
MENU...
</div>
<div id="content">
Il layout a due colonne con i float presenta un indubbio vantaggio rispetto ad un layout a due colonne con
posizionamenti assoluti: non impone vincoli sulla lunghezza relativa delle colonne. D' altra parte obbliga, nella
maggiorparte dei casi, ad avere la navigazione <em>prima</em> dei contenuti, cosa che può avere influenze negative
su tematiche quali l' accessibilità e il posizionamento sui motori di ricerca.
Il layout a due colonne si compone di quattro sezioni fondamentali: header, navigazione, contenuti e footer.
</div>
<div id="footer">
COPYRIGHT E INFO DI CHIUSURA PAGINA...
</div>
</div>
</div>
</body>
</html>
Questo è il codice del css:
html,body{
margin: 0;
padding: 0;
}
body{
font-family: arial, sans-serif;
font-size: 76%;
text-align: center;
background-color: #3675ff;
}
div#container{
margin: 0 auto;
text-align: left;
width: 1024px;
}
div#content_color{
background-image: url(../img/contentBackground.jpg);
width: 904px;
margin: 0px 55px 0px 61px;
}
div#header{
height: 170px;
background-image: url(../img/headerBackground.jpeg);
width: 1024px;
}
div#navigation{
float: left;
width: 180px;
}
div#content{
width: 724px;
}
div#footer{
clear: both;
width: 904px;
height: 110px;
text-align:center;
background-image: url(../img/footerBackground.jpg);
}
Dove sbaglio?
Grazie mille