Foros del Web » Diseño web » CSS »

Centrar Menu Desplegable CSS

Estas en el tema de Centrar Menu Desplegable CSS en el foro de CSS en Foros del Web. Hola a tod@s! Tengo un problema y es que he he hecho un menú desplegable en css pero no consigo centrarlo en la página. No ...
  #1 (permalink)  
Antiguo 20/11/2006, 05:00
Avatar de cHiMeNo  
Fecha de Ingreso: diciembre-2003
Mensajes: 7
Antigüedad: 10 años, 9 meses
Puntos: 0
Pregunta Centrar Menu Desplegable CSS

Hola a tod@s!
Tengo un problema y es que he he hecho un menú desplegable en css pero no consigo centrarlo en la página. No sé que atributo poner ni a que contenedor ponerselo. Espero puedan ayudarme. No me deja poner urls por no haber escrito todavía 30 mensajes así que pegaré aquí el código..

CÓDIGO LISTA DESPLEGABLE
----------------------------
<div id="menu"> <!-- Lo coge todo -->



<ul id="nav"> <!--ul principal -->


<li id="cv" class="off"><a href="#">CV</a>
<ul >
<li><a href="cv_spanish.html">ESPAÑOL</a></li>
<li><a href="cv_english.html">ENGLISH</a></li>
</ul></li>


<li id="investigacion" class="off"><a href="#">INVESTIGACIÓN</a>
<ul>
<li><a href="#">TESINA</a></li>
<li><a href="#">DEA</a></li>
<li><a href="#">MENSAJE ESPECIALIZADO</a></li>
</ul></li>


<li id="porfolio" class="on"><a href="#">PORFOLIO</a></li>


<li id="prensa" class="off"><a href="#">PRENSA</a>
<ul>
<li><a href="#">FOTOGRAFÍA</a></li>
<li><a href="#">REDACCIÓN</a></li>
<li><a href="#">BUSCAR PDF</a></li>
</ul></li>


<li id="enlaces" class="off"><a href="#">ENLACES</a>
<ul>
<li><a href="#">OTROS MEDIOS</a></li>
<li><a href="#">ORGANISMOS</a></li>
<li><a href="#">BLOGS</a></li>

</ul></li>


<li id="contacto" class="off"><a href="#">Contacto</a></li>
</ul>
</div>



CÓDIGO CSS
--------------
* {
margin: auto;

border: thin none Black;
padding: 0;

}

/* Donde está el bannaer */
#cabecera{


}

/* TODO */
#menu {

}

/* Todo el ul */
#nav {
background-color: transparent;
text-align: center;
float: left;
}


#cv{
margin: auto;
background-color: #231f20;
font: smaller serif;
text-decoration: none;
vertical-align: middle;
}
#investigacion{
background-color: #231f20;
font: smaller serif;
text-decoration: none;
vertical-align: middle;
width: 160px;
text-align: center;
}
#porfolio{
background-color: #231f20;
font: smaller serif;
text-decoration: none;
vertical-align: middle;
}
#prensa{
background-color: #231f20;
font: smaller serif;
text-decoration: none;
vertical-align: middle;
}
#enlaces{
background-color: #231f20;
font: smaller serif;
text-decoration: none;
vertical-align: middle;
}
#contacto{
background-color: #231f20;
font: smaller serif;
text-decoration: none;
vertical-align: middle;
}

ul {
padding: 0;
margin: 0;
list-style: none;
}


li {
float: left;
position: relative;
width: 9em;
}


li ul {
display: none;
position: center;
top: 1em;
left: 0;
}


li > ul {
top: auto;
left: auto;
}


li:hover ul, li.over ul{ display: block; }


A:link {
text-decoration: none;
color: White;
}
A:visited {
text-decoration: none;
color: White;
}
A:active {
text-decoration: none;
color: White;
}
A:hover {
text-decoration: none;
color: White;
}
  #2 (permalink)  
Antiguo 20/11/2006, 06:01
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.853
Antigüedad: 13 años, 2 meses
Puntos: 367
Qué tal cHiMeNo,

has probado a aplicarle a #menu márgenes derecho e izquierdo con valor de auto?

#menu{
margin-left: auto;
margin-right: auto;
}


un saludo y bienvenido a los foros
  #3 (permalink)  
Antiguo 20/11/2006, 06:09
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.853
Antigüedad: 13 años, 2 meses
Puntos: 367
...estaba remirándome el asunto y veo que no hay asignado un width ni al elemento #menu ni al ul del menú. Ambos son elementos de bloque, por lo tanto abarcan todo el ancho que pueden ergo visualmente no pueden centrarse. Asígnale una anchura a uno de los dos elementos y le aplicas los márgenes derecho e izquierdo con los valores que te comentaba en mi mensaje anterior
  #4 (permalink)  
Antiguo 20/11/2006, 06:12
Avatar de cHiMeNo  
Fecha de Ingreso: diciembre-2003
Mensajes: 7
Antigüedad: 10 años, 9 meses
Puntos: 0
Sí, he probado eso y tampoco funciona..También he probado a hacer en el div de menu un align center de la forma <div id="menu" align="center">...</div> Pero tampoco funciona, es cómo si el div 'menu' no me englobara toda la lista...No lo entiendo la verdad.

Espero poder postear mucho por estos foros ;)
  #5 (permalink)  
Antiguo 20/11/2006, 06:36
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.853
Antigüedad: 13 años, 2 meses
Puntos: 367
Agrégale una anchura a #menu

#menu{
margin-left: auto;
margin-right: auto;
width: 760px;
}

  #6 (permalink)  
Antiguo 20/11/2006, 06:55
Avatar de cHiMeNo  
Fecha de Ingreso: diciembre-2003
Mensajes: 7
Antigüedad: 10 años, 9 meses
Puntos: 0
Gracias!

Cuando escribí el mensaje anterior no había visto tú último mensaje. Ya está hecho y funciona. Muchas gracias! Espero servirte de ayuda en algún caso ;)
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 10:45.
SEO by vBSEO 3.3.2