|
|||||||
|
|
|
 |
|
|
Strumenti |
02-07-2008, 20:06
|
#1 |
|
Member
Iscritto dal: Nov 2005
Città: Mantova
Messaggi: 115
|
[html/css] Problema con float
Ciao a tutti, io sto facendo questo sito internet:
 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: Codice:
<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>
Codice:
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);
}
Grazie mille |
|
|
|
02-07-2008, 22:25
|
#2 |
|
Senior Member
Iscritto dal: Nov 2003
Messaggi: 980
|
per sfruttare i float devi mettere float:left anche a #content
|
|
|
|
|
02-07-2008, 22:50
|
#3 |
|
Member
Iscritto dal: Nov 2005
Città: Mantova
Messaggi: 115
|
Grazie mille!
Però adesso è rimasro il problema del menù:  infatti come puoi vedere il testo fuoriesce e "ingombra" il div a lato (una serie di puntini, non va a capo) Eppure ho specificato la proprietà width, perchè? |
|
|
|
|
02-07-2008, 22:56
|
#4 |
|
Member
Iscritto dal: Nov 2005
Città: Mantova
Messaggi: 115
|
Ok risolto...
Non avendo messo degli spazi il testo non poteva andare a capo 
|
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 15:25.
