Poner imagenes como viñetas al menu

KingColt · #1 (**permalink**) 19/06/2008, 12:48

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

daPhyre · #2 (**permalink**) 19/06/2008, 13:00

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.

KingColt · #3 (**permalink**) 19/06/2008, 13:59

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>

daPhyre · #4 (**permalink**) 19/06/2008, 15:48

¡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!

KingColt · #5 (**permalink**) 19/06/2008, 17:54

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>

Mikmoro · #6 (**permalink**) 19/06/2008, 18:07

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.