Tema: Se me cierran los menúes sin razón aparente.
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/05/2014, 12:50
neoanderson
 
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