centrare un ul

[Giaco1993]

Buon girono a tutti.

ho un dilemma da un bel po' di tempo e alla fine ho ceduto e chiedo a voi esperti maghi dei css.
Il mio problema è anche banalissimo perchè consiste nel centrare un <ul> modificato un po' per farlo apparire come un menu orizzontale. vi posto il codice. (l'html è creato tramite uno script php ma vi mostro subito il codice html - css)

HTML:

<div id="header_centrale_search">
	
	<form style="border:0px; width:100%;" id="form_search" name="form_ricerca" method="get" action="search.php" onsubmit="javascript:if(document.getElementById('text_search').value == 'Ricerca...') return false;">
		<div id='menu'>
<ul>
<li id='livello_1_campo_1' title='Home'>Home

<li id='livello_1_campo_2' title='Chi Siamo'>Chi Siamo

<li id='livello_1_campo_3' title='Contatti'>Contatti

			<li id='id_ricerca_menu'>
				<div class='classe_ricerca'>
					<input type="text" id="text_search" name="nome" title="Ricerca nel nostro listino dei vini!" tabindex="" value='Ricerca...' size='10' onclick='javascript:if(this.value =="Ricerca...") this.value= "";' onBlur ='javascript:if(this.value =="") this.value="Ricerca..."'/>
					<input type="submit" style='cursor:pointer;' id="submit_search" value="Vai" name='Ricerca' title="Effettua la tua ricerca!" tabindex=""/>
				</div>
			
			<li id='id_ricerca_avanzata' style=''>
				Ricerca Avanzata
			
		[/list]
		</div>
		</form>
</div>

CSS

#menu {
	padding:0;
	background:transparent;
	width:100%;
	height:37px;
}
#menu ul {
	padding:0px;
	margin:0px auto;
	background:transparent;
	height:37px;
	width:100%;
	text-align:center;
}
 
#menu li {
	position: relative;
	float: left;
	list-style: none;
	margin:0px auto;
	padding:0;
} 
 
#menu li a {
	height: 35px;
	display: block;
	padding: 0 3px;
	text-decoration:none;
	text-align: center;
	line-height: 39px;
	color: white;
	border-right:2px solid black;
	border-bottom:3px solid black;
	border-radius:10px;
	background-color:#993C77;
} 
#menu li:hover {
background-color:#FF7DCC;
border-radius:10px;
}
#menu li a:hover {
	background-color:#FF7DCC;
	text-decoration:underline;
}
 
#menu ul ul {
	position: absolute;
	top: 35px; 
	z-index: 1000;
	display:none;
} 
 
#menu ul ul li a {
	width:200px;
	height: 35px;
	display: block;
	text-decoration:none;
	text-align: center;
	line-height: 39px;
	background-color: #660066;
	color: #fff;
	border:1px dotted red;
} 
 
#menu ul ul li a:hover {	
	background-color:#FF7DCC;
}
#menu ul li:hover ul {
	display:block;
}
.classe_ricerca {
	height: 35px;
	display: block;
	text-align: center;
	line-height: 39px;
	color: white;
	position: relative;
	list-style: none;
	margin:0;
	border-right:2px solid black;
	border-bottom:3px solid black;
	padding:0 1px;
        border-radius:10px;
	background-color:#993C77;
}
.classe_ricerca:hover {
        border-right:2px solid black;
	border-bottom:3px solid black;
	border-radius:10px;
	background-color:#FF7DCC;
}

nel css non sono una cima e lo avevo creato per avere almeno due livelli... però poi non c'è stato bisogno ma l'ho lasciato...

l'unica cosa che vorrei è che questo menu venga centrato... ne ho provate molte ma non ho ottenuto quello che volevo =( chiedo a voi ora =)

Grazie per l'aiuto!

[ldetomi]

Posta un link con una versione il più possibile semplificata del tuo codice, togli tutte le regole che si riferiscono al secondo livello che non usi e semplifica al massimo!!! In quel modo potremo centrare direttamente il problema, provarlo in tempo reale e non doverci destreggiare in mezzo a 200 righe di codice come sarebbe adesso.....

[Giaco1993]

se ho capito quello che hai chiesto questo è il link giusto:
http://drinkfromitaly.zxq.net/prova/
lo style lo trovate guardando il codice e caricando il foglio di style...
se non è quello che stavi cercando temo di non aver capito =)

EDIT:
per evitare qualsiasi tipo di fraintendimento... l'obiettivo finale è che tutto il menu sia spostato al centro del riquadro rosso =)

Grazie!

[ldetomi]

Perfetto, hai capito perfettamente cosa ti si chiedeva! tienilo a mente per il futuro, è tutto più facile con un link del genere!

Allora, il problema è semplice: hai impostato il tuo UL con una larghezza del 100% ovvero come tutto il suo contenitore, che a sua volta è al 100% ovvero come tutta la larghezza dello schermo.
Allora se l'oggetto contenuto è largo come l'oggetto che lo contiene, ovviamente non può stare al centro... Forza la width di UL a un valore preciso (io uso sempre i px), per esempio 500px e vedrai che andrà al centro!!!
(ovviamente questo va bene se i link sono in numero fisso e sai quanto occupa la somma delle loro larghezze; consiglio: abilita temporaneamente un bordo per UL così vedi quanto puoi "stringere" la width fino a contenere cmq i pulsanti...)

[Giaco1993]

ok ho provato quello che hai detto te sul mio vero sito...ora apparentemente funziona ma il sito in questione deve essere portabile per tutte le risoluzioni =( togliendo la grandezza fissa il tutto torna... ma aggiungendola la cosa non funziona =( altre metodi?

EDIT: magari non centrando la div ma centrando il suo contenuto?

[ldetomi]

Se hai ogni oggetto con dimensioni espresse in px, il cambio di zoom o di risoluzione non influenza i posizionamenti o gli allineamenti, tutto si adatta di conseguenza!
Se per esempio hai 5 pulsanti che forzi ad avere una width di 100px, avrai un UL di 500px. Questo sarà sempre centrato, anche se cambi zoom, in un DIV che ha una larghezza superiore (ovviamente mantenendo il margin:0 auto; che hai già inserito)

[Giaco1993]

sisi esatto... ma il problema secondo me è che il sito è visitato da più utenti e magari questi utenti hanno schermi con risoluzioni diversi... =(

ADD: diciamo che il sito deve essere "perfetto" sia per chi ha un monitor 1024*768 e per quelli che magari hanno 19XX * XXX

[ldetomi]

Il cambio di zoom.... è esattamente come simulare schermi con risoluzioni diverse...
immagina di avere uno schermo con una risoluzione orizzontale di 1024px... se qualcuno visualizza il sito con uno schermo FULL HD ha una larghezza di 1920px, significa che rispetto a te vedrà un sacco di spazio vuoto ai 2 lati (ovviamente se hai impostato tutto in px come ti ho detto prima, non in %).
Se tu riduci del 50% lo zoom del tuo browser, vedi il sito praticamente come lo vedrebbe uno che ha uno schermo che è quasi il doppio del tuo come risoluzione (leggibilità a parte) capito cosa intendo???

Questo stesso forum ne è la prova... è a larghezza fissa, ed è sempre uguale su tutti gli schermi

[Giaco1993]

sisi ma un particolare... le dimensioni del mio sito sono espresse in px... però si adattano allo schermo che sta richiedendo il sito... un esempio
se tu hai una risoluzione di 1024*XXX allora il mio sito avrà 1024px come larghezza.
se invece hai una risoluzione 1920 * XXXX allora il mio sito avrà 1920 come larghezza in modo tale che si veda grande sempre abbastanza... spero di essermi chiarito... insomma il mio spazio a disposizione è variabile.

[ldetomi]

Allora significa che il sito non è limitato in larghezza, per lo meno non in px.
Questo non cambia la storia dell'allinamento centrale dell'UL a patto che cmq ne forzi la la larghezza in modo che sia inferiore a quella dell'oggetto che la contiene!!! In pratica se vuoi che un oggetto stia al centro, devi dargli lo spazio per essere al centro...

Detto questo, un consiglio... l'idea di fare siti larghi a piacere non è sempre la scelta migliore... prova a leggere un testo largo 2000px come su uno schermo FullHD, quando vai a capo con gli occhi... facilmente perdi il filo, perdi la riga successiva... l'occhio preferisce righe corte (è il motivo per cui i quotidiani sono a colonne non sono testi larghi come tutta la pagina.... )