Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Se me cierran los menúes sin razón aparente.

 Estas en el tema de Se me cierran los menúes sin razón aparente. en el foro de CSS en Foros del Web. Hola a todos. Gracias por tomarse un rato y leer mi pedido de ayuda. Les comento que estoy haciendo una página web con menúes hechos ...
  #1 (permalink)  
Antiguo 06/05/2014, 12:50
 
Fecha de Ingreso: febrero-2014
Ubicación: Rosario
Mensajes: 59
Antigüedad: 10 años, 2 meses
Puntos: 2
Se me cierran los menúes sin razón aparente.
Hola a todos.
Gracias por tomarse un rato y leer mi pedido de ayuda.
Les comento que estoy haciendo una página web con menúes hechos con css en un archivo html y poco javascript.
Ya probé las páginas en ie7 ,8 ,Firefox 28,Chrome,Netscape,Opera,Safari,y en todos estos navegadores la página se ve perfecta.
Pero en ie6 cuando bajo por los menúes en algún punto se me cierran.
El menú "Capilares" se me cierra cuando posiciono el puntero en el espacio entre el rectángulo del menú y el enlace pero cuando estoy encima del primer título de la página,que está contenido dentro de un div.
El menú "Cuidado facial" ,puedo desplazarme tranquilamente hasta que paso el mismo título (digo título pero no es un título h1... h6 ,es un párrafo p con el tamaño aproximado de un título.
El menú "Cuidado corporal" se me cierra cuando el puntero atraviesa la zona de las imágenes y el espacio entre el cuadro de menú (todos color verde) y el texto del enlace.
Les paso el código html,la hoja de estilos css y el código javascript para que me puedan señalar el error.
Les comento también que ya he googleado posibles soluciones ,y encontré páginas que ofrecen descargar archivos js o cht para solucionar esto con esos scripts.
Mi idea no es usar scripts hechos por otros sino solucionarlo por mí mismo siempre y cuando no requiera de un nivel avanzado de ingeniería,álgebra o alguna materia avanzada de la facultad.En ese caso optaré por scripts de terceros,siempre revisados por mí para ver si hacen lo que dicen.
Les agradezco toda la ayuda que me puedan ofrecer.
También quisiera sugerencias sobre cómo reemplazar con css las funciones javascript que empleé ,de ser posible.

Pd:Esta página la estoy haciendo con la esperanza de mostrar entendimiento en css,html y javascript para poder presentarme ante empresas de diseño web que pidan muestras de trabajos realizados.
O sea que si esto me sale bién,me mando a laburar de esto.

Adjunto acá el código html:

Código HTML: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html name = "inicio" >
  3.     <head>
  4.         <title>Ventas Reino.</title>
  5.         <script type="text/javascript" id="codigo" src="funciones_web_chrome.js" >
  6.         </script>
  7.     </head>
  8.     <body onload="navegador();" >
  9.         <br>
  10.         <div id="pagina">
  11.             <div id="cabecera" >
  12.                 <ul id="menu" >
  13.                     <li onmouseover="desplegar('menu_capilares');" onmouseout="enrollar('menu_capilares');"><a href="">Capilares</a></li>
  14.                     <li onmouseover="desplegar('cuidado_facial');" onmouseout="enrollar('cuidado_facial');"><a href="">Cuidado facial</a></li>
  15.                     <li onmouseover="desplegar('cuidado_corporal');" onmouseout="enrollar('cuidado_corporal');"><a href="">Cuidado corporal</a></li>
  16.                     <li><a href="" >Chicos</a></li>
  17.                     <li onmouseover="desplegar('Belleza_interior');" onmouseout="enrollar('Belleza_interior');" ><a href="">Belleza interior</a></li>
  18.                     <li onmouseover="desplegar('fragancias');" onmouseout="enrollar('fragancias');" ><a href="">Fragancias</a></li>
  19.                     <li><a href="" >Aromas</a></li>
  20.                     <li onmouseover="desplegar('reino_beauty');" onmouseout="enrollar('reino_beauty');" ><a href="">Reino beauty</a></li>
  21.                 </ul>
  22.              
  23.                 <ul id="menu_capilares" onmouseover="desplegar('menu_capilares');" onmouseout="enrollar('menu_capilares');">
  24.                     <li><a href="Capilares/Almendras/bano_de_crema_con_jojoba_y_almendras_DA101.html" > L&iacute;nea almendras</a></li>
  25.                     <li><a href="Capilares/Bamboo/shampoo_bamboo_ultrahidratante_CI102.html" > L&iacute;nea bamboo</a></li>
  26.                     <li><a href="Capilares/Hair_solutions/shampoo_de_aminoacidos_HS103.html" > L&iacute;nea hair solutions</a></li>
  27.                     <li><a href="Capilares/Henna/shampoo_henna_OC106.html" > L&iacute;nea henna</a></li>
  28.                     <li><a href="Capilares/Lino/shampoo_con_extracto_de_semillas_de_lino_LN100.html" > L&iacute;nea lino</a></li>
  29.                     <li><a href="Capilares/Ortiga/locion_tonica_anticaida_del_cabello_OC102.html" > L&iacute;nea ortiga</a></li>
  30.                 </ul>
  31.                 <ul id="cuidado_facial" onmouseover="desplegar('cuidado_facial')" onmouseout="enrollar('cuidado_facial');">
  32.                     <li><a href="Lifting_hidratante.html" >Lifting hidratante</a></li>
  33.                     <li><a href="Antioxidante.html" >Antioxidante</a></li>
  34.                     <li><a href="Phytoactiva.html" >Phytoactiva</a></li>
  35.                     <li><a href="Rejuvalene.html" >Rejuvalene</a></li>
  36.                     <li><a href="Nectar.html" >Nectar</a></li>
  37.                     <li><a href="Collagenesse.html" >Collagenesse</a></li>
  38.                     <li><a href="Tratamiento.html" >Tratamiento</a></li>
  39.                     <li><a href="Dyamante_cell.html" >Dyamante cell</a></li>
  40.                     <li><a href="Abyssine.html" >Abyssine</a></li>
  41.                     <li><a href="Hidracalme.html" >Hidracalme</a></li>
  42.                     <li><a href="Time_release.html" >Time release</a></li>
  43.                     <li><a href="H20_termal.html" >H20 termal</a></li>
  44.                     <li><a href="Acai.html" >Açai</a></li>
  45.                     <li><a href="Spa.html" >Spa</a></li>
  46.                 </ul>
  47.                 <ul id="cuidado_corporal" onmouseover="desplegar('cuidado_corporal');" onmouseout="enrollar('cuidado_corporal');" >
  48.                     <li><a href="Citrus.html" >Citrus</a></li>
  49.                     <li><a href="Golden_sun.html" >Golden sun</a></li>
  50.                     <li><a href="Mantecas_corporales.html" >Mantecas corporales</a></li>
  51.                     <li><a href="Seda.html" >Seda</a></li>
  52.                     <li><a href="Top_modeling.html" >Top modeling</a></li>
  53.                     <li><a href="Triple_accion.html" >Triple acci&oacute;n</a></li>
  54.                     <li><a href="Camila.html" >Camila</a></li>
  55.                     <li><a href="Propoleos_b.html" >Prop&oacute;leos b</a></li>
  56.                     <li><a href="Blueberry.html" >Blueberry</a></li>
  57.                     <li><a href="Eucalyptus.html" >Eucalyptus</a></li>
  58.                     <li><a href="Beauty_feet.html" >Beauty feet</a></li>
  59.                 </ul>
  60.                 <ul id="reino_beauty" onmouseover="desplegar('reino_beauty');" onmouseout="enrollar('reino_beauty');">
  61.                     <li><a href="Ojos.html" >Ojos</a></li>
  62.                     <li><a href="Labios.html" >Labios</a></li>
  63.                     <li><a href="Rostro.html" >Rostro</a></li>
  64.                     <li><a href="Manos.html" >Manos</a></li>
  65.                 </ul>
  66.                 <ul id="fragancias" onmouseover="desplegar('fragancias');" onmouseout="enrollar('fragancias');">
  67.                     <li><a href="Femeninas.html" >Femeninas</a></li>
  68.                     <li><a href="Masculinas.html" >Masculinas</a></li>
  69.                 </ul>
  70.                 <ul id="Belleza_interior" onmouseover="desplegar('Belleza_interior');" onmouseout="enrollar('Belleza_interior');" >
  71.                     <li><a href="Eco_reino.html" >Eco reino</a></li>
  72.                     <li><a href="Infusiones.html" >Infusiones</a></li>
  73.                     <li><a href="Propoleos_plus.html" >Prop&oacute;leos plus</a></li>
  74.                     <li><a href="Suplementos.html" >Suplementos</a></li>
  75.                 </ul>
  76.             </div>
  77.             <div id="productos" >
  78.                 <div id="imagenes" >
  79.                     <a href="http://www.forosdelweb.com/index.html" ><img src="Capilares/Almendras/da101.jpg" alt="Ba&nacute;o de crema con jojoba y almendras."></a>
  80.                     <a href="Capilares/Almendras/acondicionador_de_almendras_DA103.html" ><img src="Capilares/Almendras/da103.jpg" alt="Acondicionador de almendras."></a>
  81.                 </div>
  82.                 <div id="contenido" >
  83.                     <p>Capilares > ALMENDRAS</p>
  84.                     <p>BA&Ntilde;O DE CREMA CON JOJOBA Y ALMENDRAS</p>
  85.                     <p>Su f&oacute;rmula enriquecida con aceite de almendras dulces y aceite de jojoba penetra en la fibra capilar, humect&aacute;ndola. As&iacute;, nutre, repara e hidrata profundamente el cabello, especialmente en las zonas castigadas. Devuelve el nivel de hidrataci&oacute;n ideal, dejando el cabello suave, brillante y protegido. Apto para todo tipo de cabellos da&ntilde;ados por agresiones ambientales o qu&iacute;micas.</p>
  86.                     <p>COD: DA101 | 200g</p>
  87.                     <p>$ 69.9</p>
  88.                     <a href="" id="comprar" onclick="cargar_chango('Ba&ntilde;o de crema con jojoba y almendras.');" >Comprar</a>
  89.                 </div>
  90.             </div>
  91.         </div>
  92.     </body>
  93. </html>

Adjunto acá el código css:

Código CSS: 
Ver original
  1. /* Cabecera */
  2.  
  3. #pagina {
  4.     position:relative;
  5.     left:10%;
  6.     width:960px;
  7. }
  8.  
  9. #cabecera {
  10.     position:absolute;
  11.     padding:6px 0px;
  12.     width:910px;
  13.     z-index:3;
  14.     left:-2%;
  15. }
  16.  
  17. #menu {
  18.     position:relative;
  19.     width:940px;
  20. }
  21.  
  22. ul li {
  23.     list-style:none;
  24.     background-color:lime;  
  25.     font-size:1.28em;
  26.     padding:7px 9px;
  27. }
  28.  
  29. ul li a {
  30.     text-decoration:none;
  31. }
  32.  
  33. ul#menu li {
  34.     float:left;
  35. }
  36.  
  37. ul li a:hover {
  38.     background-color:yellow;
  39. }
  40.  
  41. #menu_capilares,#cuidado_facial,#cuidado_corporal,#reino_beauty,#fragancias,#Belleza_interior {
  42.     position:absolute;
  43.     display:none;
  44.     top:42px;
  45. }
  46.  
  47. #cuidado_facial {
  48.     left:10%;
  49. }
  50.  
  51. #cuidado_corporal {
  52.     left:23.5%;
  53. }
  54.  
  55. #Belleza_interior {
  56.     width:141px;
  57.     left:47%;
  58. }
  59.  
  60. #fragancias {
  61.     width:108px;
  62.     left:61.5%;
  63. }
  64.  
  65. #reino_beauty {
  66.     width:120px;
  67.     left:80.5%;
  68. }
  69.                                                             /* Productos */
  70. #productos {
  71.         margin:0 auto;
  72.         position:relative;
  73.         width:900px;
  74.         top:6.25em;
  75.         z-index:2;
  76. }
  77.  
  78. #imagenes {
  79.         margin-left:35%;
  80.         border:none; /*ie 8*/
  81. }
  82.  
  83. img {
  84.     border:none; /* Para ie 8 */
  85. }
  86.  
  87. a:visited {
  88.     color:blue;
  89. }
  90.  
  91. #contenido {
  92.     width:900px;
  93.     font-size:1.28em;
  94.     padding:0px 15px;
  95. }

Adjunto acá el código javascript:

Código Javascript: 
Ver original
  1. function desplegar(seccion) {
  2.     document.getElementById(seccion).style.display="block" ;
  3. }
  4.  
  5. function enrollar(seccion) {
  6.     document.getElementById(seccion).style.display="none";
  7. }
  8. function navegador() {
  9.                 if ( navigator.appName == "Netscape" ) 
  10.                     document.getElementById("codigo").setAttribute("src","funciones_web_chrome.js");
  11. }
  12.  
  13. function navegador() {
  14.     if(navigator.userAgent.indexOf("MSIE 6.0") > 0)
  15.         crearlink("estilos_web_ie.css");
  16.     else if(navigator.userAgent.indexOf("MSIE 7.0") > 0)
  17.         crearlink("estilos_web_ie7.css");
  18.     else if(navigator.userAgent.indexOf("MSIE 8.0") > 0 )
  19.         crearlink("estilos_web_ie8.css");
  20.     else
  21.         crearlink("estilos_web_chrome.css");
  22. }
  23.  
  24. function crearlink(hojadeestilo) {
  25.     var link = document.createElement("link");
  26.     link.setAttribute("href",hojadeestilo);
  27.     link.setAttribute("rel","stylesheet");
  28.     link.setAttribute("type","text/css");
  29.     document.getElementsByTagName("head")[0].appendChild(link);
  30.     document.close();
  31. }
Última edición por pzin; 06/05/2014 a las 13:21 Razón: formato código
  #2 (permalink)  
Antiguo 06/05/2014, 13:12
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: Se me cierran los menúes sin razón aparente.
Te das cuenta de que estás queriendo que la web funcione en un navegador para el que microsoft dejó de dar soporte hace unos 9 años!!!!?¿?

¿Y que es una versión 5 veces anterior a la actual...?

¿Y que en el mundo solo lo usan un 4% de los usuarios (el 3% de ese 4% es de la India)?...
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #3 (permalink)  
Antiguo 06/05/2014, 17:13
 
Fecha de Ingreso: febrero-2014
Ubicación: Rosario
Mensajes: 59
Antigüedad: 10 años, 2 meses
Puntos: 2
Respuesta: Se me cierran los menúes sin razón aparente.
Ante todo gracias por haberme respondido.
Sé que seguramente lo usan muy pocos.
Lo que pasa es que en todos los trabajos freelance por los que me estoy interesando dicen que el maquetador web haga crossbrowsing y no espere a que lo haga el visitante.
Sí,yo sé que seguramente casi nadie lo usa.
Yo tengo windows xp y por defecto viene internet explorer 7.
Pero creí necesario que la página funcione en esta versión de internet explorer.
Aclaro que yo no uso el ie.Uso firefox desde hace años.El ie es sólo por este motivo que te contaba del crossbrowsing que tanto piden.
Por la forma de responder tus primeras líneas,creo que te hice reir mucho al pretender esto.
Lo entiendo ,y doy por entendido que ,como vos me dijiste ,el 4% lo sigue usando.
Te agradezco y doy por solucionado el tema.
  #4 (permalink)  
Antiguo 07/05/2014, 01:56
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 13 años, 8 meses
Puntos: 60
Respuesta: Se me cierran los menúes sin razón aparente.
A ver.

crossbrowsing "significa" conseguir que una web se vea bien en "todos" los navegadores. Esto no significa que tenga que verse bien en todos los navegadores existentes y por haber... significa que tienes que conseguir que la web se vea "igual" en todos los navegadores ACTUALES.... porque entonces que vas a hacer, ¿darle tambien soporte a IE5 y IE4? no.... le darás soporte a navegadores actuales.

Tienes que conseguir que tu web se vea "igual" en los navegadores actuales, no en los de hace 15 años. Preocupate a partir del IE8, y olvidate de versiones antiguas del explorer que ni microsoft da soporte. Si microsoft no les da soporte, ¿porque vas a tener que darselo tú?

IE8 para arriba (yo tampoco le doy soporte al IE8), firefox, chrome, opera... preocupate de estos y olvidate de navegadores que nadie usa, pierdes el tiempo y tu cliente dinero.

Por cierto... ¿usas xp? sabrás que microsoft ya no da soporte a esa versión de windows y que el pozo de seguridad que tienes en tu ordenador por tener esa versión es enorme, ¿verdad?
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.

Etiquetas: background, color, contenido, hover, html, imagenes, página, tamaño
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:36.