Menu Horizontal Centrado

[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