nav e div sovrapposti

[diegodavide]

Ciao a tutti , sto realizzando un classico sito con menù di navigazione orizzontale e contenuti su 3 colonne sottostanti. Il problema nella visualizzazione è quello che vedete nella immagine:

foto.jpg

Come vedete, c'è un div che dovrebbe posizionarsi immediatamente sotto il menù di navigazione e invece è sottostante il menù... la soluzione forzata è stata quella di impostare un margine ... ma non mi piace così, anche perchè devo successivamente affiancare altri div e/o sezioni a quella che vedete, stravolgendomi ulteriormente la pagina... ecco il codice CSS:

/*menu di navigazione*/
ul {
list-style-type:none;
margin-top:2px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
padding:0;


li{
width:156px;
height:60px;
background-color:#000;
margin:2px;
text-align:center;
line-height:60px;
padding:0;
float:left;
}
------------------------------
/*div sottostante */
#tour {
width:33%;
background-color:#360;
margin-left:3px;
margin-right:2px;
}
---------------------------------

CODICE HTML
...
<nav>
<ul>
<li><a class="attivo" > Link 1 </a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</nav>
<div class="tour>
TITOLO
</div>
...

Grazie a tutti in anticipo

[m4rko80]

Ciao, il float left non credo sia il massimo per fare quello che vuoi. Se usi un float su di un elemento e sul resto non c'è può causare questo problema.
Puoi provare piuttosto con un display:inline sui LI del tuo UL, dare una lungezza del 100% al menu ( o un clear:both per non mandare tutto a capo dopo di questo).

Prova questo come esempio

<style>
nav {clear:both;}
ul {list-style-type:none; border:1px solid;}
ul li {display:inline; border:1px solid;}
#content {padding:2px; border:1px solid;}


</style>
<nav>
<ul>
	<li>Link 1</li>
	<li>Link 2</li>
	<li>Link 3</li>
</ul>

[diegodavide]

Ciao, grazie mille del suggerimento, mi è stato molto utile il codice con leggere modifiche