menu (<ul>) inline centrato

[Whitecrowsrain]

Salve a tutti
come avrete notato dal titolo vorrei realizzare un menu orizzontale dentro ad un div che abbia il testo centrato.

in pratica :

div#menu_alto
{
  min-height:2.5em;
  background:#269CA6 url(/img/grad.gif) repeat-x bottom left;
  border-bottom:2px solid #269CA6;
  text-align:center;

}
div#menu_alto ul
{
  margin: 0;
  padding:0;
  list-style-type: none;
}
div#menu_alto li
{
  float:left;
  margin: 0;
  padding:0;
}

div#menu_alto a
{
  display:block;
  color:#FFFFFF;
  font: normal bold 1.2em/2em Verdana;
  text-decoration: none;
  padding:0 1em 0 1em;
  margin:0;
  border-right:1px solid #d60;
  border-left:1px solid #fb6;
}

ma il problema è che il testo o meglio la lista in orizzontale(<ul>) non è centrata ma risulta sempre con l'align a sinistra...perchè?
come posso ovviare a questo problema?

[Mich_]

Ho l'impressione che i default degli <ul> oppure dei[*] siano a testo allineato a sinistra.
Prova a forzare il text-align:center dentro il blocco <a>.

E/O
Forse devi anche definire width:100% in <a> e in qualche blocco che lo contiene (altrimenti ciascun blocco rimane con il default "il piu` piccolo possibile", vanificando il text-align).

[Whitecrowsrain]

niente da fare...non funziona!

[Mich_]

div#menu_alto
{
  min-height:2.5em;
  background:#269CA6 url(/img/grad.gif) repeat-x bottom left;
  border-bottom:2px solid #269CA6;
  text-align:center;
  width: 300px;    /* e` necessario definire una larghezza */
}
div#menu_alto ul
{
  margin: 0;
  padding:0;
  list-style-type: none;
  width:100%;
}
div#menu_alto li
{
  float:left;
  margin: 0;
  padding:0;
  width:100%;
}

div#menu_alto a
{
  display:block;
  color:#FFFFFF;
  font: normal bold 1.2em/2em Verdana;
  text-decoration: none;
  padding:0 1em 0 1em;
  margin:0;
  border-right:1px solid #d60;
  border-left:1px solid #fb6;
  width:100%;
  text-align: center;
}

[Whitecrowsrain]

se metto width:100% a li mi va a capo!

[Whitecrowsrain]

per farti capire meglio ti posto un esempio del menu che volevo fare: menu

solo che ho dovuto far un po' di modifiche perchè firefox non lo gradisce molto così come è fatto in questo sito(strano che in Css play si facciano questi errori!)

[Mich_]

Mi era sfuggito che era un menu orizzontale (l'avevi scritto nel primo post, ma non l'avevo notato).
Allora dovrebbe bastare settare width:100% e text-align: center; nel <a>.

Pero` la larghezza del[*] deve essere definita in qualche modo, altrimenti il width:100% non ha significato.

Ma hai settato dei bordi al[*]? dovresti provarci (anche solo per le prove), perche` magari il problema e` un altro: la disposizione dei vari[*] uno rispetto all'altro.

[Whitecrowsrain]

una domanda..

io mi sto scervellando per risolvere questo problema quando la soluzione potrebbe essere di usare un elemnto più appropriato tipo quello per il bold([b]) al posto della lista..

se facessi così penso che otterei il risultato grafico sperato, giusto? o perderei qualcosa ?

[Whitecrowsrain]

come non detto...viene uno schifo..possibile non si possa fare?

[robjrobj]

Originariamente inviato da Whitecrowsrain
come non detto...viene uno schifo..possibile non si possa fare?

prova così:

----------- HTML ---------------------

<div id="mastro">
  <div id="contenitore">
    <div id="box">
      <ul class="testo">[*]link1[*]link2[*]link3[*]link4[*]link5[*]link6 [/list]
    </div>
  </div>
</div>

------------------ CSS ---------------------------

#mastro {
	font-family: Arial, Helvetica, sans-serif;
}
#contenitore {
	font-size: .9em;
	margin: 0 0 6px 0;
}
#box {
	background-color: #FFFFFF;
	border: solid 1px #333;
}

#contenitore ul {
	text-align: center;
	margin: 0;
	padding: 5px 0 5px 0;
}
#contenitore li {
	list-style-type: none;
	display: inline;
}
#contenitore li a {
	border-right: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
}
#contenitore .testo li a {
	padding: 5px 10px 5px 10px;
	color: #333333;
	text-decoration: none;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}

#contenitore .testo li a:focus, 
#contenitore .testo li a:active {
	color: #333333;
	background-color: #00CCFF;
	border-color: #333333;
}