Probleme d'icones dans le menu [résolu]

Salutation,

Mon menu est simple, un menu vertical à qui j'ai mis des puces differentes pour chaque thematique.

Le probleme c'est que mes icones ne sont pas totatlement visible???

Code menu

ul#menu 
{			   
  margin    :   0;              
  padding   :   1px 1px 0;      
  width     :   145px;          
  font-size :   12px;          
  border    :   1px solid #EBEBEB; 
  border-left-width :   0px;  
}



ul#menu li a
{
  width             :   auto !important;   /* tous navigateurs excepté IE6 */						
  width             : 	100%;              /* IE6 et inférieur */
  padding           :   4px;               
  text-decoration   :   none;              
  color             :   #050B74;              
  display           :   block;             /* Définition sous forme de block */
  background-color  :   #FBFBFB;            
  border            :   1px solid #EBEBEB; 
  border-left-width :   0px;               
  border-top-width :   0px;  
}		

ul#menu li a:hover
{
  width             :   auto !important; 				
  width             : 	100%;              
  padding           :   4px;                
  text-decoration   :   underline;              
  color             :   #D90000;              
  display           :   block;             
  background-color  :   #FBFBFB;           
  border            :   1px solid #EBEBEB;
  border-left-width :   0px;               
  border-top-width :   0px;  
}		

Pour les puces:

li.albs1 {list-style-image: url("albs1.gif");}
li.albs2 {list-style-image: url("albs2.gif");}
li.albs3 {list-style-image: url("albs3.gif");}
li.albs4 {list-style-image: url("albs4.gif");}
li.albs5 {list-style-image: url("albs5.gif");}
li.albs6 {list-style-image: url("albs6.gif");}
li.albs7 {list-style-image: url("albs7.gif");}
li.albs8 {list-style-image: url("albs8.gif");}
li.albs9 {list-style-image: url("albs9.gif");}
li.albs10 {list-style-image: url("albs10.gif");}
li.albs11 {list-style-image: url("albs11.gif");}
li.albs12 {list-style-image: url("albs12.gif");}
li.albs13 {list-style-image: url("albs13.gif");}
li.albs14 {list-style-image: url("albs14.gif");}
li.albs15 {list-style-image: url("albs15.gif");}
li.albs16 {list-style-image: url("albs16.gif");}
li.albs17 {list-style-image: url("albs17.gif");}
li.albs18 {list-style-image: url("albs18.gif");}
li.albs19 {list-style-image: url("albs19.gif");}
li.albs20 {list-style-image: url("albs20.gif");}
li.albs21 {list-style-image: url("albs21.gif");}
li.albs22 {list-style-image: url("albs22.gif");}
li.albs23 {list-style-image: url("albs23.gif");}
li.albs24 {list-style-image: url("albs24.gif");}
li.albs25 {list-style-image: url("albs25.gif");}
li.albs26 {list-style-image: url("albs26.gif");}
li.albs27 {list-style-image: url("albs27.gif");}
li.albs28 {list-style-image: url("albs28.gif");}
li.albs29 {list-style-image: url("albs29.gif");}
li.albs30 {list-style-image: url("albs30.gif");}

Voila le resultat: Cliquez ici pour visiter

Merci pour votre aide.
Voila le code des liens :

<ul id="menu">
<li class="albs1"><a href="/actualite">Communauté</a></li>
</ul> 

Modifié par Nemrod (02 Jun 2009 - 23:21)

Salut,

à priori toutes tes images ne sont pas sur le serveur.

Par exemple :

* albs1.gif (en ligne)

* albs2.gif (pas en ligne)


A+

nonn! elles sont toutes sur mon serveur, on peut meme les voir. Le probleme c'est qu'elles ne sont pas totalement affichées, On dirait que c'est juste la partie droite de l'image qui est affichée.

Je plussoie Heoyan, le fichier albs2.gif pese 0ko.
Reuploade les pour t'en assurer.

Vrai y a des icones qui n'existent pas, mais mon probleme n'est pas la

Bonjour,

Sans m'être penchée sur le problème, sache que tu peux largement condenser ta feuille de style :

ul#menu li a {
  display           :   block;             /* Définition sous forme de block */
  width             :   auto !important;						
  width             : 	100%;
  padding           :   4px;               
  text-decoration   :   none;              
  color             :   #050B74;              
  background-color  :   #FBFBFB;            
  border-right            :   1px solid #EBEBEB; 
  border-bottom            :   1px solid #EBEBEB; 
}		

ul#menu li a:hover {
  text-decoration   :   underline;              
  color             :   #D90000;              
}

Cela sera plus lisible et beaucoup moins lourd...
Modifié par Cygnus (02 Oct 2008 - 10:52)

Essaie de modifier la valeur du list-style-position: (inside/outside) de ta liste pour voir.

Merci Cygnus pour le code.

Tymlis, Je ne peux pas travailler avec le list-style-position vu que je manipule des images.

Mon probleme c'est que mes puces mesurent 24px*20px. J'ai trouvé une ecriture qui me semble bizarre list-style-image-size mais elle aussi ne marche pas: li.albs1 {list-style-image: url("albs1.gif")(24px 20px);}

Merci pour votre patience.
Modifié par Nemrod (03 Oct 2008 - 01:11)

Ouffffffffff j'ai resolu le probleme, j'ai mis les puces en arriere plan.

li.albs1 {background-image: url('albs1.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs2 {background-image: url('albs2.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs3 {background-image: url('albs3.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs4 {background-image: url('albs4.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs5 {background-image: url('albs5.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs6 {background-image: url('albs6.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs7 {background-image: url('albs7.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs8 {background-image: url('albs8.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs9 {background-image: url('albs9.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs10 {background-image: url('albs10.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs11 {background-image: url('albs11.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs12 {background-image: url('albs12.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs13 {background-image: url('albs13.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs14 {background-image: url('albs14.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs15 {background-image: url('albs15.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs16 {background-image: url('albs16.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs17 {background-image: url('albs17.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs18 {background-image: url('albs18.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs19 {background-image: url('albs19.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs20 {background-image: url('albs20.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs21 {background-image: url('albs21.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs22 {background-image: url('albs22.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs23 {background-image: url('albs23.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs24 {background-image: url('albs24.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs25 {background-image: url('albs25.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs26 {background-image: url('albs26.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs27 {background-image: url('albs27.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs28 {background-image: url('albs28.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs29 {background-image: url('albs29.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
li.albs30 {background-image: url('albs30.gif'); background-repeat: no-repeat; background-position: 0 50%; padding: 1px 0 1px 25px; margin: 0 0;}
 

Une autre question ... ... Est ce qu'il y a un moyen pour condenser ce code?

Tu peux passer toutes tes propriétés communes à chaque li (padding et margin) sur une définition des li elle même (ul#menu li)
Et tu peux condenser l'écriture du background comme suit :

background:url('albs1.gif') no-repeat 0 50%;

Tu peux même utiliser la technique des sprites CSS pour avoir une seule image (et donc un seul hit sur le serveur):
http://www.pompage.net/pompe/sprites/

Dans ce cas, tu auras sans doute un code qui ressemble à ça:

#menu a {
	display: block;
	padding: 4px 0 4px 40px;               
	text-decoration: none;              
	background: #FBFBFB url(menu-sprites.png) no-repeat;            
}
...
#menu .albs1 a {background-position: 0 0;}
#menu .albs2 a {background-position: 200px 0;}
#menu .albs3 a {background-position: 400px 0;}
#menu .albs4 a {background-position: 0 50px;}
#menu .albs5 a {background-position: 200px 50px;}
...

(à ne pas réutiliser tel quel, bien sûr)

Rien à voir, mais cette animation fait 208 ko:
http://www.algerlablanche.com/pub/rencontre.gif
(ce qui représente presque les deux tiers du poids de la page)

En Flash (avec texte vectoriel et images correctement encodées en JPEG), elle ferait peut-être 20, 30, ou 40 Ko maximum.

Florent V. a écrit :
Tu peux même utiliser la technique des sprites CSS

ouiiiiiiiiiiiiiii merci beaucoup Florent V. c'est vraiment pratique cette methode.

Merci les gars