Buenas tardes: Estoy intentando hacer un menú desplegable exclusivamente con CSS, y me gustaría probar esta técnica, ¿hay alguna forma de que funcione en IE6 sin usar JS?
2010/4/15 Jairo Ochoa <[email protected]> > La estructura actual de la pagina es algo así: > > <h1>Titulo de página</h1> > > <h2>Primer elemento</h2> > <img> > breve descripción > > <h2>Segundo elemento</h2> > <img> > breve descripción > > <h2>Tercer elemento</h2> > <img> > breve descripción > > > el <h2> a su vez contiene el enlace > > > Me gusta esa solución que das, con 2 <span>, y me parece perfecta mientras > visualmente haga lo mismo y creo que sí > > Tú juegas con los z-index, ¿sería lo mismo hacerlo con display block/none? > > > > Saludos, > > -- > > Jairo Ochoa > > > El 15 de abril de 2010 17:06, Ramón Corominas > <[email protected]>escribió: > > > Sí, la validación fallaría porque igualmente el <div> es elemento de > > bloque. De todos modos, sigo sin entender por qué usas <h2>, porque > > aparentemente no estás encabezando contenidos de ningún tipo (el <h2> > > debería encabezar contenidos en el documento donde lo pones, no en el > > siguiente). Otra cosa es que puedes poner dos <span> con clases > > distintas con display: block; y solaparlos para hacer ese efecto de > > ocultamiento/desocultamiento. Más o menos la idea básica sería algo así: > > > > <div class="roll"> > > <a> > > <span class="img1"></span><!-- imagen visible por defecto --> > > <span class="img2"></span><!-- imagen oculta que se quiere mostrar en el > > rollover --> > > </a> > > </div> > > > > .img1, .img2 { width: 100%; height: 100%; display: block; position: > > absolute; top: 0; left: 0; } > > .roll a .img1 { z-index: 0; } > > .roll a .img2 { z-index: 1; } > > .roll a:hover .img1, .roll a:focus .img1 { z-index: 1; } > > .roll a:hover .img2, .roll a:focus .img2 { z-index: 0; } > > > > De esa manera además cubres el acceso con teclado, que de otro modo no > > se activaría si el usuario navega con el tabulador. > > > > Saludín, > > Ramón. > > > > Jairo Ochoa escribió: > > > Aunque la imagen no puede ir dentro del H2 ya que está presente > > > antes de que se muestre el H2 y queda debajo, tapada por el > > > background/mascara del H2 > > > > > > > _______________________________________________ > > Lista de distribución Ovillo > > Para escribir a la lista, envia un correo a [email protected] > > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > > http://lists.ovillo.org/mailman/listinfo/ovillo > > > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a [email protected] > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a [email protected] Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
