Foros del Web » Creando para Internet » CSS »

Menu centrado verticalmente

Estas en el tema de Menu centrado verticalmente en el foro de CSS en Foros del Web. Buenas tardes, saludos a todos. Me gustaria que me ayuden un poco ya que he intentado de varias formas pero no consigo centrar verticalmente un ...
  #1 (permalink)  
Antiguo 05/08/2009, 15:49
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 5 meses
Puntos: 5
Pregunta Menu centrado verticalmente

Buenas tardes, saludos a todos.

Me gustaria que me ayuden un poco ya que he intentado de varias formas pero no consigo centrar verticalmente un elemento con respecto a otro.

A lo que me refiero es algo como en la imagen:



Estoy trabajando con listas, algo como esto:

Código HTML:
<ul>
<li>link 1<ul>
<li>opcion 1</li>
<li>opcion 2</li>
<li>opcion 3</li>
<li>opcion 4</li>
</ul></li>
<li>link 2<ul>
<li>opcion 1</li>
<li>opcion 2</li>
<li>opcion 3</li>
<li>opcion 4</li>
</ul></li>
<li>link 3<ul>
 <li>opcion 1</li>
 <li>opcion 2</li>
 <li>opcion 3</li>
 <li>opcion 4</li>
 </ul></li>
<li>link 4<ul>
 <li>opcion 1</li>
 <li>opcion 2</li>
 <li>opcion 3</li>
 <li>opcion 4</li>
 </ul></li>
</ul> 
He probado con margin, left, padding, position, etc.. y no lo he logrado. Se me ha nublado la mente; si alguien tiene una idea que me pueda ayudar por favor sabre agradecer.

Saludos a todos!!
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
  #2 (permalink)  
Antiguo 05/08/2009, 15:55
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Menu centrado verticalmente

mira esto de nuestro amigo Mik menu desplegable 100% CSS
  #3 (permalink)  
Antiguo 05/08/2009, 16:30
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Menu centrado verticalmente

Hola:

Sin poner el código css, es díficil saber porqué no te funciona y... ¡el adivino está de vacaciones!

Saludos.

  #4 (permalink)  
Antiguo 05/08/2009, 17:00
 
Fecha de Ingreso: septiembre-2008
Ubicación: España
Mensajes: 13
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Menu centrado verticalmente

Lo mismo digo hasta que no pongas el css no se sabe que proble ma tienes
  #5 (permalink)  
Antiguo 06/08/2009, 14:28
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 5 meses
Puntos: 5
Respuesta: Menu centrado verticalmente

Lo que tengo al momento es algo como esto:

Código HTML:
<style type="text/css">
#divx {
    width:80%;
    height:50px;
    position:absolute;
    top:100px;
    right:0;
    background:#EFEFEF;
    display:block;
    padding:10px;
    }

#divx ul {
    margin:0; padding:0;
    }

#divx ul li {
    float:left;
    display:block;
    margin-right:20px;
    position:relative;
    width:110px;
    font-weight:bold;
    border-top:4px solid #666666;
    border-bottom:4px solid #666666;
    }
#divx    ul li a{display:block; clear:both; padding:4px; font-weight:normal;}

#divx ul li ul {
    margin:auto 0;
    display:block;
    position:absolute;
    border:1px solid #666666;
    }

#divx ul li ul li {
    clear:both;
    margin:0;
    border:none;
    }

#divx ul li ul li a{
    display:block;
    }
</style>
<div id="divx">
<ul>
 <li><a href="#">link 1</a><ul>
 <li><a href="#">opcion 1</a></li>
 <li><a href="#">opcion 2</a></li>
 <li><a href="#">opcion 3</a></li>
 <li><a href="#">opcion 4</a></li>
</ul></li>
<li><a href="#">link 2</a><ul>
 <li><a href="#">opcion 1</a></li>
 <li><a href="#">opcion 2</a></li>
 <li><a href="#">opcion 3</a></li>
 <li><a href="#">opcion 4</a></li>
</ul></li>
<li><a href="#">link 3</a><ul>
 <li><a href="#">opcion 1</a></li>
 <li><a href="#">opcion 2</a></li>
 <li><a href="#">opcion 3</a></li>
 <li><a href="#">opcion 4</a></li>
 </ul></li>
<li><a href="#">link 4</a><ul>
 <li><a href="#">opcion 1</a></li>
 <li><a href="#">opcion 2</a></li>
 <li><a href="#">opcion 3</a></li>
 <li><a href="#">opcion 4</a></li>
 </ul></li>
</ul>
</div> 
he probado varias opciones pero no consigo que me quede como en la imagen, centrados los sub-menues verticalmente respecto del link correspondiente..

ver la imagen

Saludos!
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
  #6 (permalink)  
Antiguo 06/08/2009, 14:39
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu centrado verticalmente

Hola Messer.
Revisa el enlace de la imagen.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 06/08/2009, 14:42
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 5 meses
Puntos: 5
Respuesta: Menu centrado verticalmente

Funciona! al principio no se por que no se veia, pero lo veo..

de todos modos aqui lo dejo para que copien y peguen:
http://www26.brinkster.com/zachel/images/ejemplo.jpg
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
  #8 (permalink)  
Antiguo 06/08/2009, 14:59
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu centrado verticalmente

Bueno Messer, tu código ni "patrás"
Pásate por www.araudi.net sección menús, el nº 1 posíblemente se ajuste a tus necesidades.

Sólo tendrías que añadir en el selector "#menu ul li a:hover ul, #menu ul li:hover ul" la propiedad 'bottom:X%;'. Y calcular el valor de X según el nº de opciones y la altura de cada una.
Si siempre serán las mismas el valor será único para todos, si van a variar, necesitarás asignar un identificador único (#, id) a cada opción para darle un valor a cada "ul li ul"

Quizás he sido muy genérico, pero hasta no ver si lo utilizas o ves factible...

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 06/08/2009, 16:07
Avatar de messer  
Fecha de Ingreso: julio-2004
Mensajes: 467
Antigüedad: 13 años, 5 meses
Puntos: 5
Respuesta: Menu centrado verticalmente

Muy bien gracias por el link, dejame revisar con calma y organizar mi codigo..

Saludos!
__________________
<script type="text/messerScript"><!--
window.onload=function(){ loadMesserRules(this.href) }
--></script>
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 16:10.