Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] >> ¿ Cómo CENTRAR este menú en CSS ? <<

Estas en el tema de >> ¿ Cómo CENTRAR este menú en CSS ? << en el foro de CSS en Foros del Web. ¿Cómo puedo CENTRAR en la página, este menú, señalado con la flecha roja ? Por más combinaciones que hago, ... ¡no lo logro! . Este ...
  #1 (permalink)  
Antiguo 27/11/2005, 06:57
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Pregunta >> ¿ Cómo CENTRAR este menú en CSS ? <<

¿Cómo puedo CENTRAR en la página, este menú, señalado con la flecha roja?


Por más combinaciones que hago, ... ¡no lo logro!.

Este es el código que tengo:
Código:
<html>
<head>

<title> </title>

<style type="text/css">

body,html
	{margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;}
body
	{background-color: #eeeeee;}
#contenido
	{clear: both;}
#menu ul
	{list-style-type: none;
	margin: 0;
	padding: 0;}
#menu ul li
	{display: block;
	float: left;
	text-align: center;}
#menu ul li a
	{display: block;
	width: 145px;
	height: 25px;
	background-color: #ddd;
	margin: 2px;
	border :1px solid #000080;
	text-decoration: none;}
#menu a.active
	{background-color: #0000ff;
	color: #ffffff;
	font-weight: normal;}
#pad1, #pad2, #pad3
	{width: 600px;
	height: 200px;
	border: 2px solid #000080;
	background-color: #ffffff;
	display: none;
	font: 10px verdana, arial, helvetica, sans-serif;}

</style>

</head>

<body>

<div id="menu">
<ul>
<li><a href="#primera" id="menu1" onclick="activaDesactiva('1'); return false;">Tenerife</a></li>
<li><a href="#segunda" id="menu2" onclick="activaDesactiva('2'); return false;">Almería</a></li>
<li><a href="#tercera" id="menu3" onclick="activaDesactiva('3'); return false;">Mallorca</a></li>
</ul>
</div>

</body>
</html>
Muchas gracias.
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·

Última edición por seoista; 28/11/2005 a las 00:15
  #2 (permalink)  
Antiguo 27/11/2005, 07:03
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2099
No sé mucho de CSS, pero creo, no hay estilo definido para id="menu" (la capa), ¿no?
__________________
Twitter: @zinhard

Tengo una web donde hago lo que quiero.
  #3 (permalink)  
Antiguo 28/11/2005, 00:20
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Gracias por responder BoNeZ.

Si es verdad, pero ¿cómo pondrias eso en el CSS?, ya que no tengo ni idea .

Muchas gracias.
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·
  #4 (permalink)  
Antiguo 28/11/2005, 08:22
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
al ul dale el mismo ancho que el cuerpo (600px creo) y de ahi le das un margin:0 auto;
  #5 (permalink)  
Antiguo 29/11/2005, 04:01
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Muchisimas gracias RoQ .

¡Ha funcionado!. Lo he dejado así:
Código:
	#menu ul
		{list-style-type: none;
		 margin: 0 auto;
		 width: 600px;}
y lo ha centrado.

Quitándole: list-style-type: none;, funciona también bien. ¿O debo dejárselo?. ¿Qué me aconsejas?.

Gracias .
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·
  #6 (permalink)  
Antiguo 29/11/2005, 07:42
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
depende de ti, si quieres dejalo, si no no, es deacuerdo a tu diseño
  #7 (permalink)  
Antiguo 29/11/2005, 11:37
 
Fecha de Ingreso: noviembre-2005
Mensajes: 16
Antigüedad: 12 años
Puntos: 0
yo tengo uno parecido (a ver si lo explico bien): un div que contiene varios divs (opciones de menú) alineados horizontalmente (con float:left). el div que los contiene está a su vez contenido por el div principal.
el principal tiene "text-align:center", y el div que contiene los pequeños tiene "margin-left:auto;margin-right:auto".
bueno, pues el div que los contiene se expande hasta ocupar todo el div principal, y los pequeños quedan a la izquierda. en cambio si les quito el float a los pequeños, sí adopta el ancho necesario y queda centrado (pero entonces mi menú no queda horizontal sino vertical, claro).
¿cómo puedo hacer que el div intermedio adopte el ancho necesario para contener a los pequeños y quede centrado en el grande?
  #8 (permalink)  
Antiguo 29/11/2005, 12:28
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Cita:
Iniciado por inigomena
bueno, pues el div que los contiene se expande hasta ocupar todo el div principal
Prueba a darle un "width" a ese div en concreto.
  #9 (permalink)  
Antiguo 29/11/2005, 12:49
 
Fecha de Ingreso: noviembre-2005
Mensajes: 16
Antigüedad: 12 años
Puntos: 0
Cita:
Iniciado por kazafun
Prueba a darle un "width" a ese div en concreto.
bien, pero entonces necesito saber exactamente el ancho de los pequeños (que pueden ser variables), porque si no el div queda centrado pero los pequeños dentro de él quedan a la izquierda...

en realidad lo mejor sería que el div ocupase tanto como su contenedor, y que los divs pequeños se quedasen todos juntos alineados en el centro (como si fuesen texto o imágenes), con un margen entre ellos y el margen que haga falta a izquierda y derecha...
  #10 (permalink)  
Antiguo 29/11/2005, 13:13
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Cita:
Iniciado por inigomena
bien, pero entonces necesito saber exactamente el ancho de los pequeños (que pueden ser variables), porque si no el div queda centrado pero los pequeños dentro de él quedan a la izquierda...

en realidad lo mejor sería que el div ocupase tanto como su contenedor, y que los divs pequeños se quedasen todos juntos alineados en el centro (como si fuesen texto o imágenes), con un margen entre ellos y el margen que haga falta a izquierda y derecha...

Entonces dices que los divs que hay dentro ¿Tambien pueden ser de tamaño variable...? ¿No dices que es un menu...?


Vale, mira, al div que contiene a los otros div, no le des ningun width, y como dices que pueden ser variables los div que tiene dentro no les des la propiedad Float:left, sino display:inline

Este codigo quiza te sirva:

#div_que_tiene_otros_div
{
margin: auto;
text-align: center;
}

#cada_uno_de_los_otros_div
{
display: inline;
}

Última edición por kazafun; 29/11/2005 a las 13:33
  #11 (permalink)  
Antiguo 29/11/2005, 13:53
 
Fecha de Ingreso: noviembre-2005
Mensajes: 16
Antigüedad: 12 años
Puntos: 0
Cita:
Iniciado por kazafun
los div que tiene dentro no les des la propiedad Float:left, sino display:inline
bien, ésa no la conocía... el único problema es que no me hace mucho caso a los márgenes superiores e inferiores, en realidad los marcos se salen por arriba y por abajo del div que los contiene... pero bueno, poniéndole padding a ese div se apaña la cosa...
gracias :D
  #12 (permalink)  
Antiguo 29/11/2005, 16:17
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
hoy me tope con esta solucion:
http://www.cssplay.co.uk/menus/centered.html
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #13 (permalink)  
Antiguo 29/11/2005, 23:51
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Cita:
Iniciado por RoQ
depende de ti, si quieres dejalo, si no no, es deacuerdo a tu diseño
Muchas gracias RoQ
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·
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 09:21.