Problemi con i div

[roberto.b]

Buona sera,
scrivo questo post perché è 3 ore che sto imprecando con dei div e una lista <ul> per fare un menù.
Mi spiego, dovrei avere un div contenitore bordato sopra e sotto con dei pallini bianchi (risolto) e al suo interno un'altro div che ha come sfondo una striscia azzurra di 80px (fatto) distante sia sopra che sotto dai pallini bianchi 20px (fatto) e al centro di questa striscia azzurra dovrebbe esserci il menù cliccabile fatto con la lista ul affiancati uno all'altro (float:left).
Il mio problema è che non riesco a centrare questo ul si posiziona in alto attaccato all'inizio della striscia azzurra e se gli metto un text-align:center, non si sposta; se gli metto un margin si sposta anche il div azzurro....per non parlare che non riesco neanche a centrarlo orizzontalmente....

Vi posto il codice:

<div id='menù'> 
<div style="height:20px"></div> 
<div class='menù_dentro' > 
<div style=""> 
<ul >[*]CHI SIAMO [*]EVENTI[*]MOSTRE[*]COLLEZIONE[*]PHOTO GALLERY[/list]
</div> 
</div> 
<div style="height:20px"></div>
</div>

ed ecco il css:

#menù{
 height: 120px; 
border-bottom: thin dotted;
 border-top: thin dotted;
 border-bottom-color:white;
 border-top-color:white; }
.menù_dentro{ 
padding:0px;
 margin-top:0px;
 background-image: url(../images/sfondo_menu.png);
 height:80px; }
#menù ul {
 height:24px;
 margin-top:0px;
 } 
#menù li {
 float:left;
 margin-right:18px;
 list-style-type: none; } 
#menù a{ 
 color:white;
 text-decoration: none;
 font-family: Helvetica;
 font-size:20px; }

Non so dove sbaglio, ci sono un pò di cose sporche.
PS: so che se utilizzassi le tabelle avrei la vita semplice...ma il profe non le vuole...mannaggia a lui!

Grazie mille in anticipo

[Prill]

Se vuoi centrare orizzontalmente il menu, dovrai calcolare la larghezza dell'ul e assegnargli un margin:0 auto.
Oppure affiancare le liste con un display:inline. Inutili quei due div vuoti alti 20px, puoi impostare un padding-top e bottom sul div contenitore. Nel nome dei selettori sono da evitare caratteri speciali (come quelli accentati). Un esempio semplificato potrebbe essere:

css:

#menu{
 padding:20px 0;
 border-top: thin dotted #fff;
 border-bottom: thin dotted #fff; }

#menu ul {
 height:80px;
 line-height:80px;
 background-image: url(../images/sfondo_menu.png);
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 } 
#menu li {
 display:inline;
 margin-right:18px;
 } 

html:

<div id="menu"> 
	<ul >
		[*]CHI SIAMO 
		[*]EVENTI
		[*]MOSTRE
		[*]COLLEZIONE
		[*]PHOTO GALLERY
	[/list]
</div>

se sei tenuto però a usare un div interno e i float:

#menu{
 height:80px; /* l'altezza è data dal valore di height + il padding, 80 + 20 +20 =120, 20 pixel di spazio sono lasciati in alto e 20 in basso */
 padding-top:20px;
 padding-bottom:20px;
 border-top: thin dotted #ffffff;
 border-bottom: thin dotted #ffffff;
 }
#menu_dentro{
 padding-top:28px; /* dato che l'ul è alto 24px, e dobbiamo portarlo al centro del div, e (80-24)/2 = 28, calcoliamo che 28 è lo spazio che deve essere lasciato al di sopra e al di sotto dell'ul */
 padding-bottom:28px;  
 background-image: url(../images/sfondo_menu.png);
}
#menu ul {
 height:24px;
 overflow:hidden; /* ci serve per interrompere il float */
 margin:0;
 padding:0;
 list-style-type:none;
 } 
#menu li {
 display:block;
 float:left;
 height:24px;
 line-height:24px; /* impostiamo l'altezza della riga, pari all'altezza della voce elenco così che il testo appaia centrato verticalmente */
 margin-right:18px;
 } 
...
<div id="menu">
	<div id="menu_dentro">
	<ul >
		[*]CHI SIAMO 
		[*]EVENTI
		[*]MOSTRE
		[*]COLLEZIONE
		[*]PHOTO GALLERY
	[/list]
	</div>
</div>

se giochi con gli esempi potrai vedere che per centrare verticalmente sono stati usati i padding o il line height.
Nell'ultimo esempio ho lasciato il tuo float ma non ho calcolato le dimensioni dell'elenco, risultando il menu allineato a sinistra.

[roberto.b]

Grazie mille sono riuscito a sistemare tutto anche grazie ai tuoi suggerimenti... diciamo che le troppe ore davanti al pc ed il sonno arretrato hanno contribuito a scrivere cavolate...
Chiedo venia!
Grazie ancora