Hola sn.
On 1/23/07, sn <[EMAIL PROTECTED]> wrote:
>
> ...
> bien, pues ahora el tema es que no me basta con que se haga el rollover de
> las imagenes cada vez que pasamos por un elemento de la lista sino que
> además cada uno de los enlaces tiene que hacer un efecto popup con una
> imagen sobre otra parte de la página.
> el html utilizado sería algo así como lo que sigue:
> "
> <li><a class="a" href="#">Inicio<div class="jarl"><img
> src="menu_r2_c2_f2.gif" title="demos" alt="demos"></div></a></li>"
Bueno, lo primero es lo primero. El elemento <A> únicamente puede albergar
conteniedo <inline> [1], esto es, nada de <DIV> en su interior. Si necesitas
definir un contenedor no estructural deberás usar <SPAN>.
y el css:
> "
> a .jarl{
> display:none;
> }
> a:hover .jarl{
> display:block;
> position:relative;
> left:150px;
> top:-20px;
> width:40px;
> height:18px;
> border:0px;
> }
> "
> de manera ke hacer rollover, se hace visible la imagen dentro de "jarl".
> el problema es que al estar el enlace como elemento dentro de la
> lista(entre li y /li), no consigo el efekto, mientras ke si lo saco y lo
> dejo como enlace simple, lo hace perfectamente.
> he aquí mi dilema. cualquier sugerencia será agradecida.
No entiendo, he probado el código original que apuntas y funciona en FF, no
así en IE6. De igual manera, extraigo el enlace afuera de las etiquetas de
lista como comentas y sigo obteniendo los mismos resultados. :?
De todas formas, creo que el problema radica en que IE6 no redibuja al hacer
el :hover, con lo cual no aparece nada en pantalla. Una solución para
obligar a IE6 a hacer un redibujado pasa por aprovechar precisamente un
fallo en su motor de render [2], aplicando un color de fondo al enlace, en
el momento del :hover.
El código xHTL final quedaría así:
<li><a class="a" href="#">Inicio<span><img src="menu_r2_c2_f2.gif"
title="demos" alt="demos"></span></a></li>
y los estilos así:
a span {
display:none;
}
a:hover {
background-color: #fff; /* O el color de fondo que más convenga
*/
}
a:hover span {
display:block;
position:relative;
left:150px;
top:-20px;
width:40px;
height:18px;
border:0px;
}
Con esto se te tiene que solucionar tu "problema" ;)
[1] http://www.w3.org/TR/html401/struct/links.html#edef-A
[2] http://www.positioniseverything.net/explorer/percentages.html
un saludo.
Un saludo a ti también,
David Merino Ogando
_______________________________________________
> 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
