Foros del Web » Creando para Internet » CSS »

Poner imagenes como viñetas al menu

Estas en el tema de Poner imagenes como viñetas al menu en el foro de CSS en Foros del Web. Bueno puse imagenes como viñetas para un menu con css pero demora un poco en cargar y cuando el texto es muy largo se descuadra ...
  #1 (permalink)  
Antiguo 19/06/2008, 13:48
 
Fecha de Ingreso: febrero-2008
Mensajes: 303
Antigüedad: 9 años, 9 meses
Puntos: 2
Poner imagenes como viñetas al menu

Bueno puse imagenes como viñetas para un menu con css pero demora un poco en cargar y cuando el texto es muy largo se descuadra el menu.
Mi pregunta en concreto es, como pongo viñetas fraficas a mi menu correctamente para que cargue al instante sin problemas, el menu que hice esta así, como veran a parte de cargar lento se descuadra la linea "camaras de video y otros"

El menu esta hecho con estas etiquetas
<ul>
<li><a href="#">hardware</a></li>
<li><a href="#">software</a></li>
<li><a href="#">celulares</a></li>
<li><a href="#">reproductores de audio</a></li>
<li><a href="#">camaras de video y otros</a></li>
</ul>

Es correcto crear el menu con estas etiquetas o utilizar div's, en todo caso espero me ayuden con el codigo css correcto para que no demore en cargar los graficos de las viñetas
  #2 (permalink)  
Antiguo 19/06/2008, 14:00
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Poner imagenes como viñetas al menu

La forma en que lo haces está muy bien, y la verdad no entiendo tu problema con que "se descuadra", si eso que hace es normal. ¿Qué quisieras que hiciera en tal caso?

Tambien convendría que nos pusieras tu CSS para ver si podemos optimizarle... O incluso mejor el link de donde los usas para analizar mejor el problema.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 19/06/2008, 14:59
 
Fecha de Ingreso: febrero-2008
Mensajes: 303
Antigüedad: 9 años, 9 meses
Puntos: 2
Respuesta: Poner imagenes como viñetas al menu

Dejo el codigo completo aunque le he quitado el codigo php ya que recoge los datos de una BD.
Otra duda es, de que tamaño debe ser la imagen de la viñeta?

Código HTML:
<head>
<style>
#ico{ list-style-image:url(ico.png); list-style:none; font-family:Verdana, Arial, Helvetica, sans-serif; color:#004477; font-size:11px; text-decoration:none }
#ico:hover{text-decoration:underline; color:#CC0000}
</style>
</head>

<body>

<ul>
<li><a href="#" id="ico">hardware</a></li>
<li><a href="#" id="ico">software</a></li>
<li><a href="#" id="ico">celulares</a></li>
<li><a href="#" id="ico">reproductores de audio</a></li>
<li><a href="#" id="ico">camaras de video y otros</a></li>
</ul>

</body> 
  #4 (permalink)  
Antiguo 19/06/2008, 16:48
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Poner imagenes como viñetas al menu

¡Dios Santo! ¡Si este CSS tiene más errores de los que uno puede contar!

Prueba haciendolo así, a ver si funciona:

Código HTML:
<head>
<style type="text/css">
#ico{ list-style-image:url(ico.png);}
#ico a{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; text-decoration:none; color:#047;}
#ico a:hover{text-decoration:underline; color:#C00;}
</style>
</head>

<body>

<ul id="ico">
<li><a href="#">hardware</a></li>
<li><a href="#">software</a></li>
<li><a href="#">celulares</a></li>
<li><a href="#">reproductores de audio</a></li>
<li><a href="#">camaras de video y otros</a></li>
</ul>

</body> 
Te digo los errores principales para que no te vuelvan a pasar:
-El atributo 'id' solo debes usarlo una vez. Si quieres usarlo más de una, tienes que hacerlo con una 'class'.
-'list-style' es una propiedad de las listas, no de los links, por eso es posible que te diera muchos errores.

Por cierto, no se por qué has usado 'list-style:none', que yo supiera, esto debería eliminar las imagenes... Aun así no me lo hizo =P

Pruebalo ahora a ver si te funciona, si aun tienes problemas me avisas. A tu pregunta, por lógica la imagen no debe ser muy grande, pero no creo que haya mucho problema con esto. ¡Suerte!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 19/06/2008, 18:54
 
Fecha de Ingreso: febrero-2008
Mensajes: 303
Antigüedad: 9 años, 9 meses
Puntos: 2
Respuesta: Poner imagenes como viñetas al menu

Los problemas siguen en tiempo de diseño todo bien pero al ejecutar se descuadra la imagen chekalo, ademas como le quito el espacio izquierdo que sobra, intente aplicando a la etiqueta body un leftmargin="0" y nada.
Te dejo el codigo
Código HTML:
<html>
<head>
<style type="text/css">
.ico{ list-style-image:url(1.gif);}
.ico a{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; text-decoration:none; color:#047;}
.ico a:hover{text-decoration:underline; color:#C00;}
</style>
</head>
<body leftmargin="0">
<ul class="ico">
<li><a href="#">hardware</a></li>
<li><a href="#">software</a></li>
<li><a href="#">celulares</a></li>
<li><a href="#">reproductores de audio</a></li>
<li><a href="#">camaras de video y otros</a></li>
</ul>
</body>
</html> 
  #6 (permalink)  
Antiguo 19/06/2008, 19:07
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: Poner imagenes como viñetas al menu

leftmargin="0" no, margin-left="0"

Y supongo que el problema está en tu imagen ico.png. ¿Puedes subirla a algún sitio para cogerla?

Mikel.
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 17:19.