Menu Horizontal Centrado

[DJJJ]

Hola a todos no puedo centrar el este menu que quede centrado al tamano del explorarador

alguien puede ayudarme ??

saludos.

Código HTML:

<style type="text/css">

	Menu Horizontal
*/


#body {
	font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
}


#menuh {
	font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin:0 auto 0 auto; }

#menuh ul, li {
	list-style-type: none;
}

#menuh ul {
	margin: 0;
	padding: 0;
}

#menuh li {
	float: left;
}

#menuh a {
font-weight:bold;
	text-decoration: none;
	color: #3366CC;
	background: #F0F7FC;
	display: block;
	padding: 3px 10px;
	text-align: center;
	border: 1px solid #ACCFE8;
	border-width: 1px 1px 1px 0;
}

#menuh a#primero {
	border-left: 1px solid #ACCFE8;
}

#menuh a:hover {
font-weight:bold;	
background: #DBEBF6;
}

 </style>


</head>

<center>
	<div id="menuh">
		<ul>
			<li><a href="#menuh" id="primero">Pagina de Inicio</a></li>
			<li><a href="#menuh">menu1</a></li>
			<li><a href="#menuh">Novedades</a></li>
			<li><a href="#menuh">menu2</a></li>
			<li><a href="#menuh">menu3</a></li>
			<li><a href="menus.css">menu4</a></li>
		</ul>
	</div>
</center> 

[Mikmoro]

Prueba con esto:

#menuh {
font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
margin:0 auto 0 auto;text-align: center;
}
#menuh ul {
list-style-type: none;
}
#menuh ul {
margin: 0 auto;
padding: 0;
width: 390px;
}

Mikel.

[prava]

Hola DJJJ. Yo creo que la opción de Mikel es efectiva siempre y cuando no se cambie ningun texto en el menú. En dicho caso si superas el ancho 390px se te va a caer el último ítem a la siguiente linea y en caso de ser mas corto se va a ir descentrando.

Yo propondría quitar la flotación izquierda de tus <li> y en su lugar utilizar display: inline; y en vez de centrar con margin: 0 auto el menú #menuh yo el pondría alineación centro. De esta manera todo lo que esté dentro del id "menuh" va a centrarse siempre y cuando no esté flotado o con posición absoluta.

Limpiando un poco el código quedaría:

body {
font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#menuh {
text-align: center;
}

#menuh li {
display: inline;
margin: 0 -2px;
}

#menuh a {
font-weight: bold;
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
padding: 3px 10px;
border: 1px solid #ACCFE8;
}

#menuh a#primero {
border-left: 1px solid #ACCFE8;
}

#menuh a:hover {
background: #DBEBF6;
}

Pruébalo y me cuentas.

Saludos,
Pablo.

[Mikmoro]

Tienes razón, pero el problema en ese caso es que el menú ocupa todo el ancho de la página, y con el tamaño del suyo (bastante pequeño), es previsible que otras cosas vayan a su misma altura, lo que se convertiría en un problema futuro.

También la altura que ocupa es bastante considerable, lo que también es previsible que produzca problemas futuros (poniéndole un borde se puede ver).

Como siempre, la mejor solución estará en función de lo que venga después y de los contenidos concretos.



Mikel.

[DJJJ]

hola muchas gracias, probe el codigo de Mikmoro y el de prava, los dos funcionan correctamente.

muchas gracias.

[prava]

Iniciado por Mikmoro

Tienes razón, pero el problema en ese caso es que el menú ocupa todo el ancho de la página, y con el tamaño del suyo (bastante pequeño), es previsible que otras cosas vayan a su misma altura, lo que se convertiría en un problema futuro.

También la altura que ocupa es bastante considerable, lo que también es previsible que produzca problemas futuros (poniéndole un borde se puede ver).

Como siempre, la mejor solución estará en función de lo que venga después y de los contenidos concretos.



Mikel.

Hola Mikel, yo segun lo que entendí es que el menú iba centrado, por lo que supuse que nada iba a situarse a los lados. Si se situara algun objeto a alguno de los lados del menú estando centrado este perdería la calidad de tal por lo que no se cumplirían los objetivos que eran que el menú fuera centrado. Yo recomendaría que si se quisiese ubicar otras divs a los lados del menú lo hicieran dentro de un contenedor común que puede ser #header o algo parecido con posición relativa. De esta manera tendríamos el #header con el menú dentro y las otras estructuras a su lado. Estas dos estructuras adicionales irían con posición absoluta. La de la izquierda con posicion left: 0 y la de la derecha con posición right: 0;

Así nos quedaría el código CSS:

Código:

body {
	font: 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#header {
	position: relative;
}

#bl_left, #bl_right {
	position: absolute;
	top: 0;
}
#bl_left {
	left: 0;
}

#bl_right {
	right: 0;
}

#menuh {
	text-align: center;
}

#menuh li {
	display: inline;
	margin: 0 -2px;
}

#menuh a {
	font-weight: bold;
	text-decoration: none;
	color: #3366CC;
	background: #F0F7FC;
	padding: 3px 10px;
	border: 1px solid #ACCFE8;
}

#menuh a#primero {
	border-left: 1px solid #ACCFE8;
}

#menuh a:hover {
	background: #DBEBF6;
}

Y el código HTML sería:

Código HTML:

<div id="header">
	<div id="bl_left">Info Izquierda</div>
	<ul id="menuh">
		<li><a href="#menuh" id="primero">Pagina de Inicio</a></li>
		<li><a href="#menuh">menu1</a></li>
		<li><a href="#menuh">Novedades</a></li>
		<li><a href="#menuh">menu2</a></li>
		<li><a href="#menuh">menu3</a></li>
		<li><a href="menus.css">menu4</a></li>
	</ul>
	<div id="bl_right">Info Derecha</div>	
</div> 

Un saludo y estamos a las órdenes.

Pablo