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

seoista · #1 (**permalink**) 27/11/2005, 06:57

¿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.

pzin · #2 (**permalink**) 27/11/2005, 07:03

No sé mucho de CSS, pero creo, no hay estilo definido para id="menu" (la capa), ¿no?

seoista · #3 (**permalink**) 28/11/2005, 00:20

Gracias por responder BoNeZ.

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

.

Muchas gracias.

RoQ · #4 (**permalink**) 28/11/2005, 08:22

al ul dale el mismo ancho que el cuerpo (600px creo) y de ahi le das un margin:0 auto;

seoista · #5 (**permalink**) 29/11/2005, 04:01

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

.

RoQ · #6 (**permalink**) 29/11/2005, 07:42

depende de ti, si quieres dejalo, si no no, es deacuerdo a tu diseño

inigomena · #7 (**permalink**) 29/11/2005, 11:37

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?

kazafun · #8 (**permalink**) 29/11/2005, 12:28

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.

inigomena · #9 (**permalink**) 29/11/2005, 12:49

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...

kazafun · #10 (**permalink**) 29/11/2005, 13: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;
}

inigomena · #11 (**permalink**) 29/11/2005, 13:53

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

kemie · #12 (**permalink**) 29/11/2005, 16:17

hoy me tope con esta solucion:
http://www.cssplay.co.uk/menus/centered.html

seoista · #13 (**permalink**) 29/11/2005, 23:51

Cita:

Iniciado por RoQ

depende de ti, si quieres dejalo, si no no, es deacuerdo a tu diseño

Muchas gracias RoQ