Foros del Web » Creando para Internet » CSS »

Menu Horizontal Centrado

Estas en el tema de Menu Horizontal Centrado en el foro de CSS en Foros del Web. 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= ...
  #1 (permalink)  
Antiguo 20/07/2008, 19:51
 
Fecha de Ingreso: octubre-2005
Mensajes: 407
Antigüedad: 12 años, 2 meses
Puntos: 2
Menu Horizontal Centrado

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> 
__________________
DJJJ
  #2 (permalink)  
Antiguo 21/07/2008, 03:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu Horizontal Centrado

Prueba con esto:

Cita:
#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.
  #3 (permalink)  
Antiguo 21/07/2008, 13:33
Avatar de prava  
Fecha de Ingreso: julio-2008
Ubicación: Montevideo, Uruguay
Mensajes: 42
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Menu Horizontal Centrado

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:

Cita:
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.
  #4 (permalink)  
Antiguo 21/07/2008, 16:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu Horizontal Centrado

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.
  #5 (permalink)  
Antiguo 21/07/2008, 22:14
 
Fecha de Ingreso: octubre-2005
Mensajes: 407
Antigüedad: 12 años, 2 meses
Puntos: 2
Respuesta: Menu Horizontal Centrado

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

muchas gracias.
__________________
DJJJ
  #6 (permalink)  
Antiguo 22/07/2008, 08:28
Avatar de prava  
Fecha de Ingreso: julio-2008
Ubicación: Montevideo, Uruguay
Mensajes: 42
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Menu Horizontal Centrado

Cita:
Iniciado por Mikmoro Ver Mensaje
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:10.