Foros del Web » Creando para Internet » CSS »

Menu Horizontal (problema al reducir la ventana)

Estas en el tema de Menu Horizontal (problema al reducir la ventana) en el foro de CSS en Foros del Web. Hola. Soy nuevo dentro del foro y nuevo diseñando webs, aunque algo se del lenguaje. Tengo la siguiente web: http://infectorweb.host56.com/inicio.html y mi problema basicamente, es ...
  #1 (permalink)  
Antiguo 17/12/2012, 11:48
Avatar de matiaslawwliet  
Fecha de Ingreso: diciembre-2012
Ubicación: La Plata, Buenos Aires
Mensajes: 20
Antigüedad: 12 años
Puntos: 0
Pregunta Menu Horizontal (problema al reducir la ventana)

Hola. Soy nuevo dentro del foro y nuevo diseñando webs, aunque algo se del lenguaje. Tengo la siguiente web:

http://infectorweb.host56.com/inicio.html

y mi problema basicamente, es que al reducir la ventana o al cambiar la resolucioon de pantalla a 800x600 mi menu se superpone y no se mantiene fijo.

Mi css para el menu es este:

Código CSS:
Ver original
  1. #cssmenu{ height:37px; display:block; padding:0; margin: 0;  border:1px solid; border-radius:5px;}
  2. #cssmenu > ul {list-style:inside none; padding:0; margin:0;}
  3. #cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
  4. #cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
  5. #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
  6. #cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
  7. #cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
  8. #cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
  9. #cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
  10. #cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
  11. #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
  12. #cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
  13. #cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
  14. #cssmenu ul li > ul{width:200px;}
  15. #cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
  16. #cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
  17.  
  18.  
  19. #cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); }
  20. #cssmenu{border-color:#000;}
  21. #cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;}
  22. #cssmenu > ul > li > a:after{border-color:#444;}
  23. #cssmenu > ul > li > a:hover{background:#111;}

Por favor ayuda... u.u

Y desde ya muchas gracias.
  #2 (permalink)  
Antiguo 17/12/2012, 13:05
lamek
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Menu Horizontal (problema al reducir la ventana)

Has probado a darle un ancho fijo al ul? Por ejemplo 900px...
  #3 (permalink)  
Antiguo 17/12/2012, 13:06
lamek
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Menu Horizontal (problema al reducir la ventana)

Y al div que lo contiene también
  #4 (permalink)  
Antiguo 17/12/2012, 13:13
Avatar de matiaslawwliet  
Fecha de Ingreso: diciembre-2012
Ubicación: La Plata, Buenos Aires
Mensajes: 20
Antigüedad: 12 años
Puntos: 0
Respuesta: Menu Horizontal (problema al reducir la ventana)

Justamente no se como hacer eso. si m pudieras ayudar te lo agradecería.
  #5 (permalink)  
Antiguo 17/12/2012, 13:33
lamek
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Menu Horizontal (problema al reducir la ventana)

En
Código:
#cssmenu{ height:37px; display:block; padding:0; margin: 0;  border:1px solid; border-radius:5px;}
pon esto
Código:
#cssmenu{ width: 900px; height:37px; display:block; padding:0; margin: 0;  border:1px solid; border-radius:5px;}
Con esto deberia funcionar.
  #6 (permalink)  
Antiguo 17/12/2012, 13:41
Avatar de matiaslawwliet  
Fecha de Ingreso: diciembre-2012
Ubicación: La Plata, Buenos Aires
Mensajes: 20
Antigüedad: 12 años
Puntos: 0
Respuesta: Menu Horizontal (problema al reducir la ventana)

Gracias capo sos un groso me salvaste -.o
  #7 (permalink)  
Antiguo 17/12/2012, 15:50
lamek
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Menu Horizontal (problema al reducir la ventana)

De nada buen hombre!

Etiquetas: menu+deplegable, menu-css-horizontal
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 12:45.