Foros del Web » Creando para Internet » CSS »

Ayuda, menú css con imágenes

Estas en el tema de Ayuda, menú css con imágenes en el foro de CSS en Foros del Web. Hola, he desarrolado un menú en css y funciona perfectamente en FF pero no así en IE 6, ni IE 7 alguien puede ayudarme? Código: ...
  #1 (permalink)  
Antiguo 08/01/2009, 19:01
 
Fecha de Ingreso: enero-2009
Mensajes: 3
Antigüedad: 8 años, 11 meses
Puntos: 0
Ayuda, menú css con imágenes

Hola, he desarrolado un menú en css y funciona perfectamente en FF pero no así en IE 6, ni IE 7 alguien puede ayudarme?

Código:


<div id="menu">
<ul>
<li>
<a href="#" id="aceite"></a>
<ul class="aceite">
<li>Aceites de Oliva</li>
<li><a href="#">Virgen Extra</a></li>
<li><a href="#">Virgen Extra Ecológico</a></li>
</ul>
</li>
<li>
<a href="#" id="vinos"></a>
<ul class="vinos">
<li><a href="#">Vinos</a></li>
</ul>
</li>
<li>
<a href="#" id="jamon"></a>
<ul class="jamon">
<li class="hdp">Jamón ibérico</li>
<li><a href="#">Bellota</a></li>
<li><a href="#">Recebo</a></li>
</ul>
</li>
<li>
<a href="#" id="quesos"></a>
<ul class="quesos">
<li>Quesos</li>
<li><a href="#">Manchego D.O.</a></li>
<li><a href="#">Puro de oveja</a></li>
</ul>
</li>
<li>
<a href="#" id="aceitunas"></a>
<ul class="aceitunas">
<li><a href="#">Aceitunas</a></li>
</ul>
</li>
<li>
<a href="#" id="dieta"></a>
<ul class="dieta">
<li><a href="#">Dieta mediterránea</a></li>
</ul>
</li>
</ul>
</div>

Hoja de estilos:

#menu {
width: 825px;
height: 261px;
/*margin: 0 auto auto 5%;*/
background-image: url(menu.jpg);
background-repeat: no-repeat;
position:relative;
/*z-index:100;*/
}

#menu ul li a, #menu ul li a:visited {
display:block;
text-decoration:none;
color:#000;
line-height:20px;
font-size:11px;
overflow:hidden;
font-weight: normal;
}
#menu ul {
padding:0;
margin:0;
list-style: none;

}

#menu > ul > li {
float:left;
position:relative;
}
#menu ul li ul {
display: none;
}

#menu ul li:hover ul {
display:block;
position:absolute;
width: 150px;

}
ul.aceite {
top: -30px;
}

ul.vinos {
top: -30px;
left: 50px;
}

ul.vinos li a{
padding-bottom: 50px;
}

ul.jamon {
top: 50px;
left: 155px;
}

.hdp {
position: relative;
left: 30px;

}

ul.jamon li a{
padding-left: 30px;
}

ul.quesos{
top: 30px;
left: 60px;
}

ul.aceitunas{
top: 100px;
left: 50px;

}

ul.aceitunas li a{
padding-top: 20px;
}

ul.dieta{
top: 80px;
left: 140px;
}

#menu ul li ul.dieta li a:link, #menu ul li ul.dieta li a:visited, #menu ul li ul.vinos li a:link, #menu ul li ul.vinos li a:visited, #menu ul li ul.aceitunas li a:link, #menu ul li ul.aceitunas li a:visited {
color:#C00;
font-size: 11px;
font-weight: bold;
line-height:20px;
}


#menu ul li:hover ul li a {
display:block;
color:#333;
}

#menu ul li:hover ul li a:hover {
color:#999;
}

#menu ul li ul li {
color:#C00;
font-size: 11px;
font-weight: bold;
line-height:20px;
}



#menu a#aceite {
width: 258px;
height: 143px;
float: left;
}

#menu a:hover#aceite {
background-image: url(aceite_ov.jpg);
background-repeat: no-repeat;
background-position: -1px -1px;
}

#menu a#vinos {
width: 167px;
height: 143px;
float: left;
}

#menu a:hover#vinos {
background-image: url(vinos_ov.jpg);
background-repeat: no-repeat;
background-position: -1px -1px;
}

#menu a#jamon {
width: 165px;
height: 143px;
float: left;
}

#menu a:hover#jamon {
background-image: url(jamon_ov.jpg);
background-repeat: no-repeat;
background-position: 0px -1px;
}

#menu a#quesos {
width: 425px;
height: 118px;
float: left;
}

#menu a:hover#quesos {
background-image: url(quesos_ov.jpg);
background-repeat: no-repeat;
background-position: 160px -1px;
}

#menu a#aceitunas {
width: 145px;
height: 118px;
float: left;
}

#menu a:hover#aceitunas{
background-image: url(aceitunas_ov.jpg);
background-repeat: no-repeat;

}

#menu a#dieta {
width: 255px;
height: 118px;
float: left;
}

#menu a:hover#dieta{
background-image: url(dieta_ov.jpg);
background-repeat: no-repeat;
background-position: 1px 0px;
}

Muchas gracias!!
  #2 (permalink)  
Antiguo 08/01/2009, 22:30
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Ayuda, menú css con imágenes

Dios mio! Cuando veremos esto... Saludos ddest!!

Mejor entra a http://www.araudi.net/
Cortesia de nuestro amigo Mikmoro! y busca ahi los navegadores que desees... creo que sera mejor! =D

Saludos y Suerte!

PD: para la proxima... especifica mas tu problema si? no sabemos cual es el problema... no podemos ayudarte!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 09/01/2009, 05:52
 
Fecha de Ingreso: enero-2009
Mensajes: 3
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Ayuda, menú css con imágenes

Gracias CALiZzZ! ya he probado con los consejos de Mikmoro y no funcionan en IE 6, ni en IE7.
He generado unos botones con imágenes y al hacer el hover se desplazan para donde quieren, esto ocurre en IE6 y en IE7.
He buscado por todos lados una solución más sencilla pero no la encuentro! Gracias igual!!!
  #4 (permalink)  
Antiguo 09/01/2009, 06:06
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
Respuesta: Ayuda, menú css con imágenes

Cita:
Iniciado por ddest Ver Mensaje
Gracias CALiZzZ! ya he probado con los consejos de Mikmoro y no funcionan en IE 6, ni en IE7.
¿Podrías explicarte mejor? Lo digo para no confundir a la gente, porque excepto que ponga lo contrario, creo que todo lo que hay publicado en mi web referente a menús es compatible con IE6 y 7.

En tu caso, de entrada:

Cita:
#menu > ul > li {
float:left;
position:relative;
}
#menu ul li:hover ul {
display:block;
position:absolute;
width: 150px;
}
En IE6 al menos no puede funcionar, porque no sabe interpretar ni "hijo de" (>) ni el :hover para otro elemento que no se un enlace.

Y como dice Caliz, no sabemos exactamente cuál es el problema, o qué es lo que no funciona.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 09/01/2009, 11:54
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Ayuda, menú css con imágenes

Realmente yo no vi esos errores pues no lei todo el CSS ni el HTML por el mismo problema que decia... Cual es tu problema? Hasta no saber tu problema... no podremos darte la solucion!

Suerte y Saludos!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #6 (permalink)  
Antiguo 09/01/2009, 12:50
 
Fecha de Ingreso: enero-2009
Mensajes: 3
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Ayuda, menú css con imágenes

Mikmoro, disculpa tienes razón, quizás me expresé mal, incorporé a mi desarrollo tus consejos, pero por lo que me marcas en tu mensaje ha sido por eso que no funcionaba.

Me he expresado mal, te pido disculpas tus aportes son muy valiosos! El error es mio.

Gracias igual!
  #7 (permalink)  
Antiguo 09/01/2009, 15:59
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
Respuesta: Ayuda, menú css con imágenes

No, no te preocupes. La cosa era saber si había algo raro por ahí.

Si tienes alguna duda ya consultarás.

Saludos.
__________________
Visita mi nueva web idplus.org
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 01:24.