Rollover en un menú

jabi · #1 (**permalink**) 03/01/2007, 18:18

Buenas!!

He intentado utilizar la FAQ 43 de KnowDemon (gracias

) sobre hacer un rollover mediante CSS, y la verdad es que he conseguido hacer que funcione, pero únicamente en FF, en IE aparece una especie de reflejo rarísimo, y la verdad es que no encuentro por ningún lado a que puede deberse...

Así es como debería verse (imagen de como lo muestra FireFox):

...y así es como lo muestra IE:

Sin embargo si os fijáis he utilizado una imagen para la lista de elementos del menú (el panteón rojo de la izquierda), y en Firefox aparece varios mm desplazado hacia arriba con respecto al <LI> en cuestión, ¿cómo podría también arreglar ésto?

Aquí dejo el código CSS de un elemento del menú y de la lista desordenada de elementos:

Código:

#hresaltado, #hsinresaltar,{
height: 15px;
width: 80px;
margin-bottom: 5px;
}

#hresaltado{
background: url(imagenes/sec/historia2.png);
}
#hsinresaltar{
display: block;
background: url(imagenes/sec/historia1.png);
}
#hsinresaltar:hover{
background: transparent;
}

UL {
list-style-image: url(imagenes/panteonrojo.gif);
}

Y aquí el HTML de ese mismo elemento:

Código:

<UL type="image">
	<LI><div id="hresaltado"><a id="hsinresaltar" href="historia.html" 
target="cuerpo-inicio"></a></div>
...
...
</UL>

A ver si me podéis echar un cable con este dilema gente

Un saludo y gracias!!

Mikmoro · #2 (**permalink**) 04/01/2007, 13:21

Hola, Jabi.
Creo que te sobra una coma en tu primer selector
#hresaltado, #hsinresaltar,{
height: 15px;
width: 80px;
margin-bottom: 5px;
}

No estoy seguro, pero creo que IE te va a interpretar el height: 15px; y el margin-bottom: 5px; y FF no, porque al agrupar los selectores, me parece que le pones ese alto y ese margen tanto al div como al enlace (a), de manera que se suman, por lo que en IE crece más de la cuenta. Separa los selectores y a ver qué pasa.

Mikel.

jabi · #3 (**permalink**) 04/01/2007, 15:48

Buenas Mikmoro, muchas gracias por tu respuesta!

La forma de hacerlo realmente la copié de la FAQ comentada, pero entiendo que es así, que tanto el div como el enlace debe tener esa misma altura y ese mismo ancho. He probado a separarlos, aunque no sé si es a lo que te referías:

Código:

#hresaltado{
height: 15px;
width: 80px;
margin-bottom: 5px;
}

#hsinresaltar{
height: 15px;
width: 80px;
margin-bottom: 5px;
}

...y el resultado es el mismo :(

De todas formas ésto sería para un único botón, tengo puestos 9 en total en el menú, con lo que si tuviera que separarlos quedaría un tanto...largo, de ahí que los agrupara (por cierto gracias por lo de la coma

)

He subido el html a un sitio web, por si te sirve de más ayuda, a ver si hay suerte:

http://atenas.awardspace.com/menulateral.html

Un saludo!!

Mikmoro · #4 (**permalink**) 04/01/2007, 16:15

Vaya, no me explicado bien. Te decía antes que se repetían los parámetros por estar agrupados los selectores, es decir, que por esa razón se aplicaba a ambos y por tanto dos veces, por lo que al decirte que los separaras, quería decir que al separarlos no repitieras el tamaño y margen, porque si no estamos en las mismas. Le echo un vistazo al enlace y te digo si veo algo que pudiera sugerirte. Siento no haber sido más claro a la primera.

Mikel.

jabi · #5 (**permalink**) 04/01/2007, 16:51

No hay problema, debía haber intuído yo que no te referías a éso

De todas formas no veo cómo lo puedo hacer, si logras sacar algo en claro con el enlace me comentas, y sino pues me tendré que conformar con otro menú sin rollover, qué se le va a hacer.

Un saludo y gracias de nuevo!

Mikmoro · #6 (**permalink**) 04/01/2007, 17:44

Hola otra vez.
En realidad, mi opinión es que tienes mucho más código de que necesitas. Prueba esto y me comentas:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Indice lateral izquierdo</title>
  <style type="text/css">
body{
font-family: "Curlz MT", "Kabel Bk BT";
margin: 10px 0px 0px;
}
ul {
list-style-image: url(imagenes/panteonrojo.gif);
}
li {
margin-bottom: 5px!important;
margin-bottom: -4px;
}
li a {
width: 80px;
height: 15px;
display: block;
text-decoration: none;
}
a#iii{
background: url(imagenes/sec/inicio1.png) no-repeat;
}
a:hover#iii{
background: url(imagenes/sec/inicio2.png) no-repeat;
}
a#hhh{
background: url(imagenes/sec/historia1.png) no-repeat;
}
a:hover#hhh{
background: url(imagenes/sec/historia2.png) no-repeat;
}
a#ppp{
background: url(imagenes/sec/personajes1.png) no-repeat;
}
a:hover#ppp{
background: url(imagenes/sec/personajes2.png) no-repeat;
}
a#ggg{
background: url(imagenes/sec/geografia1.png) no-repeat;
}
a:hover#ggg{
background: url(imagenes/sec/geografia2.png) no-repeat;
}
a#ttt{
background: url(imagenes/sec/turismo1.png) no-repeat;
}
a:hover#ttt{
background: url(imagenes/sec/turismo2.png) no-repeat;
}
a#ccc{
background: url(imagenes/sec/cultura1.png) no-repeat;
}
a:hover#ccc{
background: url(imagenes/sec/cultura2.png) no-repeat;
}
a#mmm{
background: url(imagenes/sec/masdatos1.png) no-repeat;
}
a:hover#mmm{
background: url(imagenes/sec/masdatos2.png) no-repeat;
}
a#bbb{
background: url(imagenes/sec/bibliografia1.png) no-repeat;
}
a:hover#bbb{
background: url(imagenes/sec/bibliografia2.png) no-repeat;
}
a#coco{
background: url(imagenes/sec/contactar1.png) no-repeat;
}
a:hover#coco{
background: url(imagenes/sec/contactar2.png) no-repeat;
}
  </style>
</head>
<body>
<img src="imagenes/logo.jpg" alt="Atenas"
 title="Atenas"
 style="margin-left: 24px; width: 85px; height: auto;"><br>
<ul type="image">
  <li> <a id="iii" href="historia.html"
 target="cuerpo-inicio">&nbsp;</a> </li>
  <li> <a id="hhh" href="historia.html"
 target="cuerpo-inicio">&nbsp;</a> </li>
  <li> <a id="ppp" href="personajes.html"
 target="cuerpo-inicio">&nbsp;</a> </li>
  <li> <a id="ggg" href="geografia.html"
 target="cuerpo-inicio">&nbsp;</a> </li>
  <li> <a id="ttt" href="lugares.html"
 target="cuerpo-inicio">&nbsp;</a> </li>
  <li> <a id="ccc" href="cultura.html"
 target="cuerpo-inicio">&nbsp;</a> </li>
  <li> <a id="mmm" href="datos.html"
 target="cuerpo-inicio">&nbsp;</a> </li>
  <li> <a id="bbb" href="biblio.html"
 target="cuerpo-inicio">&nbsp;</a> </li>
  <li> <a id="coco" href="formulario.html"
 target="cuerpo-inicio">&nbsp;</a> </li>
</ul>
<!--Script para mostrar el contador de visitas:-->
<p style="margin-top: 30px; margin-left: 30px;"><a
 href="http://www.ademails.com/estadisticas1059923110.htm"
 target="_blank">
<script type="text/javascript" language="JavaScript">
<!--
document.write("<img src=\"http://www.ademails.com/cgi-bin/contador.cgi?ID=1059923110");
document.write("&referer=");
document.write(escape(document.referrer));
document.write("\" border=0 alt=\"Estadisticas\" title=\"Nº de visitas\">");
// -->
</script>
<noscript><img
src=http://www.ademails.com/cgi-bin/contador.cgi?ID=1059923110 border=0
alt="Nº de visitas" title="Nº de visitas"></noscript>
</a></p>
</body>
</html>

jabi · #7 (**permalink**) 05/01/2007, 05:56

Mikmoro con ésto funciona perfectamente en ambos navegadores, muchísimas gracias por encontrar la solución

De todas formas me gustaría entender el significado de ciertas cosas, ya que como ya sabrás soy aún novato en ésto, y aunque tengo bastantes manuales éstas dudas no creo haberlas visto por ningún lado, te agradecería muchísimo si tienes un poquito de tiempo contestarme brevemente estas dudas:

Referente a los estilos:
margin-bottom: 5px!important;
margin-bottom: -4px;
¿Por qué 2 margin-bottom distintos? Lo de !important lo he visto por ahí pero ahora mismo desconozco su significado

li a { Esta forma de aplicar estilos, ¿quiere decir que se aplica para ambos, li y a? ¿aunque no vayan separadas por comas? ¿o se refiere a los enlaces que pueda haber dentro de un <li>?

Referente al HTML:
Colocas siempre en el texto de cada elemento de la lista un  , ¿para qué se necesita en este caso?
Y por último, ¿los <li> conviene cerrarlos siempre (</li>)?

Repito, si tienes tiempo Mikmoro y no es un inconveniente, ya que el problema realmente está solucionado, muchas gracias de nuevo!

Mikmoro · #8 (**permalink**) 05/01/2007, 06:30

Con mucho gusto.

Cita:

Referente a los estilos:
margin-bottom: 5px!important;
margin-bottom: -4px;
¿Por qué 2 margin-bottom distintos? Lo de !important lo he visto por ahí pero ahora mismo desconozco su significado

! important se usa para que esa propiedad tome privilegio sobre cualquier otra igual que ella. De esta manera, si no pusiera important, cualquier navegador interpretaría la última propiedad que encuentre del mismo tipo, pero para los navegadores inteligentes, important quiere decir important, es decir, más importante que otra del mismo tipo. Como IE no la entiende, interpreta la segunda, y por eso tienen medidas distintas, una para IE (la segunda) y la otra para el resto.

Cita:

li a { Esta forma de aplicar estilos, ¿quiere decir que se aplica para ambos, li y a? ¿aunque no vayan separadas por comas? ¿o se refiere a los enlaces que pueda haber dentro de un <li>?

Quiere decir que lo aplique a todos los "a" que haya dentro del los "li". Eso sí está en los manuales, pero no te habrás fijado.

Cita:

Referente al HTML:
Colocas siempre en el texto de cada elemento de la lista un  , ¿para qué se necesita en este caso?

Esto es para que el enlace que no tiene texto tome el tamaño de letra que hayas establecido. No siempre es necesario, pero me pareció que en tu caso concreto sí.

Cita:

Y por último, ¿los <li> conviene cerrarlos siempre (</li>)?

Sí. Todas las etiquetas deberían ser cerradas siempre. Aunque la mayoría de los navegadores lo entenderán aunque no las cierres, es conveniente que cierres todas siempre, entre otras cosas para ajustarse al standard xhtml. Y también es conveniente que uses siempre tus etiquetas en minúsculas.

Espero haber resuelto tus dudas.

Mikel.

jabi · #9 (**permalink**) 05/01/2007, 06:41

Todo entendido a la perfección, muchas gracias de nuevo por las molestias

Un saludo