Comunidad de diseño web y desarrollo en internet online

Menu Desplegable Horizontal Con Sub Menu

Citar            
MensajeEscrito el 29 Ene 2010 06:42 am
Soy nuevo en el area del css y estoy realiazando esta pagina web y el menu desplegable con lista me esta comiendo no logro que se vea bien como debe ser. ejemplo en servicios tiene un submenu y no sale y fijense como se ve menu cuando pasas el mouse por encima se mueve contodo el menu y/o despliega hacia abajo el contenido de abajo.

el otro problema pero este es sencillo es que la pagina se centraliza bien en opera y chlome pero en IE no se centraliza com resuelvo estos dos problemas, seria de mi mayor agradecimiento que me digan como resolver esos dos problemas se los voy a agradecer en el alma.

Pueden agregarme al msn y podemos compartir ideas tambien.

Por miguel.rg

2 de clabLevel



 

msie8
Citar            
MensajeEscrito el 29 Ene 2010 07:02 am
Miguel, es difícil hacerse una idea concreta de tu problema sin un link al sitio o al menos una imagen y/o algo del CSS que usas para veer de qué se trata

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

chrome
Citar            
MensajeEscrito el 30 Ene 2010 02:09 am
el link es el siguiente :

www.losclavelines.com/prueba/default.css - la hoja de estilo
www.losclavelines.com/prueba/index.htm - pagina principal oh sea el problema
www.losclavelines.com/prueba/menuuss_files/style_menu.css y la el scripts menuuss_files/menu.js

en caso de no poder ver me dejan saber que pongo los codigos sin problema, los copio

ah y gracias de antemano.

Por miguel.rg

2 de clabLevel



 

msie7
Citar            
MensajeEscrito el 31 Ene 2010 07:53 pm
Creo haber visto que tienes unos despistes en el cierre de las etiquetas de ese menú.
Los únicos hijos de un lista (ul) sólo pueden ser li, y dentro de éstos ya colocas lo que necesitas. Y el etiquetado correcto sería (como ejemplo):

Código HTML :

<UL>
      <DIV id=container><!-- no puede estar como hijo de ul -->
            <LI class=first><A href="index.html">Inicio</A></LI>
            <LI><A href="servicios.htm">Servicios</A></LI><!-- 1º: este cierre está mal colocado -->
                    <UL> <!-- sin el li anterior, ya queda esta lista de 2º nivel dentro del li anterior -->
                          <LI><A href="transporte">Transporte</A></li><--! debes cerrar cada li de 2º nivel -->
                          <LI><A href="billingue">Bilingue</A></li>
                          <LI><A href="cafeteria">Cafeteria</A></li>
                          <LI><A href="fisicayrecreacion">Educ. Fisica y Recreacion</A></li>
                          <LI><A href="tecnicoprofesional">Educ. Tecnico Profesional</A></li>
                          <LI><A href="cienciaytecnologia">Ciencia y Tecnologia</A></li>
                          <LI><A href="libreria">Libreria</A></li>
                    </UL> <!-- el cierre de la lista de 2º nivel -->
            </li> <!-- este es el cierre del li marcado como 1º -->
            <LI><A href="inscripciones.htm">Inscripciones</A></LI>
            ...
</ul>

Así mismo, fíjate que el destino de los enlaces de 2º nivel no los tienes bien definidos. O bien te falta la extensión de destino (html si es otra página o la extensión si es un archivo: .pdf) o si el destino está en el mismo documento debería estar precedido por su id correspondiente (#transporte).

Para el segundo problema, comienza por corregir los errores que marca el validador. Lo primero es que utilices un doctype correcto. Y después ya comentas.

Saludos

Por DvillB

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 31 Ene 2010 08:53 pm
Por cierto, Miguel, creo que para un menú de ese estilo no necesitas un js, tranquilamente lo puedes lograr sólo con css.
Mira estos ejemplos, creo que tu ejemplo sería el ejemplo 1.

Por DvillB

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 01 Feb 2010 11:13 pm
Hola, DvillB

Utilice el ejemplo del menu que me diste y da la casualidad que el menu cuando grabo la pagina para copiar el codigo y ponerlo a mi formato sucede que no hace el efecto del mouse hover que cuando pongas el mouse encima de un enlace del menu que contega sub menu no aparece nada no se por que ahora., realmente necesito resolver esa situacion del menu por que es solo por eso que esa pagina no esta terminada o por lo cual no la he subido.

recuerden que soy nuevo en esto del CSS solo se bien HTML, de casualidad habria que guardar el index como .xtml
o no importa si esta guardado como .htm

Por miguel.rg

2 de clabLevel



 

msie7
Citar            
MensajeEscrito el 02 Feb 2010 03:28 pm
Eso debe ser porque no copias todo lo necesario, tanto el css que está aquí como la estructura del html, sin olvidarte de las tablas falsas incluidas en su comentario condicional correspondiente (necesarias para que funcione en ie6)
De tal manera que tu html debe quedar como el que muestra el autor de los menús:

Código HTML :

<ul>
  <li class="nivel1"><a href="#" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
   <ul>
      <li><a href="#">Opción 1.1</a></li>
      <li><a href="#">Opción 1.2</a></li>
   </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>

miguel.rg escribió:

recuerden que soy nuevo en esto del CSS solo se bien HTML...

Siendo así, un par de apuntes para que no sea tanta tu dependencia de las respuestas que puedas recibir en un foro:
.- Un buen manual de inicio a CSS, por ejemplo el que encuentras en librosweb
.- Si vas a adaptar el menú del ejemplo a tus necesidades, te conviene realizar los cambios uno cada vez y verificar que todo sigue funcionando. Que sí, adelante con el siguiente cambio; que no, pues deshacer (undo) e intentarlo de nuevo.

Suerte

Por DvillB

118 de clabLevel



 

firefox
Citar            
MensajeEscrito el 03 Feb 2010 06:35 am
Hola,

Realmente la ayuda que me proporcionaste fue exelente ahora solo tengo un ultimo problemita que resolver con el menu y es que fijate cuando entres a la pagina www.losclavelines.com/prueba/index.htm Fijate en el codigo fuente.

el menu se desliza hacia abajo con todo y los sub menu, como resuelvo eso. Solo me falta eso para que se vea bien, sera por que no se como usar dos hojas de estilo en la misma pagina fijate en eso.

Por miguel.rg

2 de clabLevel



 

msie8
Citar            
MensajeEscrito el 03 Feb 2010 01:43 pm
¿No viste que la hoja de estilos del menú no la carga? Tienes un problema de ruta a ella.
Y hay estilos en la hoja "default.css" que afectan al menú.

En serio, ahorrarás tiempo y energías si antes de seguir paras un momento a adquirir una base mínima. Una ayuda, entre tantas es el manual que te referenciaba de librosweb.
Y otra ayuda (indispensable para mi) es firebug + firefox.

Saludos.

Por DvillB

118 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.