Foros del Web » Creando para Internet » CSS »

Rollover en un menú

Estas en el tema de Rollover en un menú en el foro de CSS en Foros del Web. Buenas!! He intentado utilizar la FAQ 43 de KnowDemon (gracias ) sobre hacer un rollover mediante CSS, y la verdad es que he conseguido hacer ...
  #1 (permalink)  
Antiguo 03/01/2007, 18:18
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Rollover en un menú

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!!
__________________
No estoy aquí de vacaciones, creéme.
  #2 (permalink)  
Antiguo 04/01/2007, 13:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Rollover en un menú

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.
  #3 (permalink)  
Antiguo 04/01/2007, 15:48
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Rollover en un menú

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!!
__________________
No estoy aquí de vacaciones, creéme.
  #4 (permalink)  
Antiguo 04/01/2007, 16:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Rollover en un menú

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.
  #5 (permalink)  
Antiguo 04/01/2007, 16:51
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Rollover en un menú

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!
__________________
No estoy aquí de vacaciones, creéme.
  #6 (permalink)  
Antiguo 04/01/2007, 17:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Rollover en un menú

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>
  #7 (permalink)  
Antiguo 05/01/2007, 05:56
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Rollover en un menú

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 &nbsp;, ¿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!
__________________
No estoy aquí de vacaciones, creéme.
  #8 (permalink)  
Antiguo 05/01/2007, 06:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Rollover en un menú

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 &nbsp;, ¿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.
  #9 (permalink)  
Antiguo 05/01/2007, 06:41
Avatar de jabi  
Fecha de Ingreso: noviembre-2006
Mensajes: 120
Antigüedad: 11 años, 1 mes
Puntos: 1
Re: Rollover en un menú

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

Un saludo
__________________
No estoy aquí de vacaciones, creéme.
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




La zona horaria es GMT -6. Ahora son las 00:09.