[RESOLU]Backgound-image d'un ul

Bonjour, bonjour (je suis un petit nouveau),

si je me suis inscrit ici c'est que j'ai un soucis évidemment (j'essaierai tout même d'apporter mon aide au forum).
Bref, j'ai un soucis : j'ai un menu que j'ai mis en ligne et je souhaiterai mettre derrière une image de fond (oui c'est le bon répertoire, oui c'est le bon nom de l'image).
voici mon xhtml

<ul class="menu">
   <li><a href title="home" src="http://www.google.fr">Home</a></li>
   <li><a href title="infoproduit" src="http://www.google.fr">Informations Produit</a></li>
.......... blablabla
   </ul>

et voici mon css

#menu{
display:block;
}
.menu ul{
background-image:url(../img/menu__solution.png);
background-repeat:no-repeat;
}

merci
Modifié par Wamdeus (13 Nov 2009 - 14:16)

Bonjour,

pourquoi mettre un dièse (#) devant "menu" alors qu'il s'agit d'une classe ?

fais plutôt :

ul.menu {…}

et

ul.menu li {…}

Bonjour,

Comme signalé par JoeBlow, # est l'indicateur d'un ID alors que . est l'indicateur d'une CLASS.

Pour ce qui est de ton problème, il vient du fait que tu as du te mélanger les pinceaux dans la cascade CSS.

En effet : .menu ul désigne tous les éléments <ul> présent dant un parent ayant la class "menu" associée.

Pour désigner l'élément <ul> ayant la class "menu" associée, il faut utiliser ul.menu.

Hein hein, bon ca marche pas non plus ^^
mais ce qui curieux c'est que mon li est comme ca et qu'il marche bien

.menu li{
margin-right:25px;
width:110px;
height:20px;
list-style-type:none;
list-style-image:url("../img/puce.jpg");
float:left;
font-size:12px;
}

il m'affiche bien ma petite puce bleue
Est ce que IE7 ne permet pas d'afficher mon image ?? normalement non

Wamdeus a écrit :
Est ce que IE7 ne permet pas d'afficher mon image ?? normalement non

Je ne pense pas que le navigateur soit à blâmer ici. Serait-il possible d'avoir uen page en ligne pour constater le problème ?

Malheureusement non je fais ca en interne, je vous envoie tout d'un bloc (juste le début avec l'affichage de mon entête ca devrai suffir
voila le xhtml simple

<div id="menu">
<ul class="menu">
   <li><a href title="home" src="http://www.google.fr">Home</a></li>
   <li><a href title="infoproduit" src="http://www.google.fr">Informations Produit</a></li>
   <li><a href title="solution" src="http://www.google.fr">Solution</a></li>
</ul>
</div>

et le css

#menu{
display:block;
}

.menu ul{
background-image:url(../img/menu_solution.png);
background-repeat:no-repeat;
}

.menu li{
margin-right:25px;
width:110px;
height:20px;
list-style-type:none;
list-style-image:url("../img/puce.jpg");
float:left;
font-size:12px;
}

.menu a:hover{
text-decoration:none;
color:#019fc6;
}

.menu a{
text-decoration:none;
color:black;
}

j'espère que cela suffira pour vous faire une idée merci !

#menu{ display:block; }
#menu ul.menu{
  background-image:url(../img/menu_solution.png);
  background-repeat:no-repeat;
}  
#menu ul.menu li{ 
  margin-right:25px; 
  width:110px; 
  height:20px; 
  list-style-type:none; 
  list-style-image:url("../img/puce.jpg"); 
  float:left; font-size:12px; 
}
#menu ul.menu li a:hover{ 
  text-decoration:none; 
  color:#019fc6; 
}  
#menu ul.menu li a{ 
  text-decoration:none; 
  color:black; 
} 

La cascade c'est important. Si tu ne la comprend pas bien, il faudrait revoir les bases.

Okay j'ai compris mon erreur, sur la cascade mais ça m'affiche pas la photo ...
en fait j'ai réussi a l'afficher en faisant ca :

#menu li.menu {
margin-right:25px;
width:110px;
height:20px;
list-style-type:none;
list-style-image:url("../img/puce.jpg");
float:left;
font-size:12px;
}

mais ca ne respecte pas la cascade et ca m'enlève la mise en page (c'est à dire une mise en page en ligne)

or si j'utilise ton code la photo ne s'affiche pas ...

Bonjour,

Sans rebondir sur le problème, voici ce que je constate en regardant les différents exemples de code :
- <div id="menu"> est inutile puisqu'il contient uniquement l'élément <ul>.
- appliquer un display: block; à un <div> ou à un <ul> est inutile puisqu'il s'agit du rendu par défaut.
- #menu li.menu ne risque pas de faire quoique ce soit car sauf erreur de ma part, ta liste ne contient élément li dont la class est menu.

Il me semble assez impératif que les bases de la cascade soient revues.
Je conseille la lecture de l'article indiqué par Laurie-Anne.

Bon courage

Okay je crois que j'ai compris mais toujours pas d'image ^^
code CSS

.menu ul{
background-image:url("../img/menu_solution.png");
background-repeat:no-repeat;
}
.menu li{ 
margin-right:25px;
width:110px;
height:20px;
list-style-type:none;
list-style-image:url("../img/puce.jpg");
float:left;
font-size:12px;
}

j'ai vitré mon id du menu, c'est mieux là ??

ul.menu pas pareil que .menu ul

Tant que tu n'auras pas compris, tu n'arrivera à rien.

J'ai déjà expliqué la différence plus haut, merci de relire, avec application.

C'est bon mon image s'affiche à cause du ".menu ul "
Alors en fait ce que je pige pas c'est ca :
"pourquoi quand j'affecte ma classe à chaque <li> mon code se met comme je veux et quand j'utilise l'exemple 1 de l'explication c'est à dire :
/////
Exemple 1 :

.menu li {
 propriétés 
}<li> 

sera enfant de la classe ".menu". Cela va affecter tous les éléments <li> contenus dans la classe ".menu" et uniquement ceux-là.

Cela évite d'écrire <li class="menu"> pour chaque élément de la liste
/////

il faut que je mette tout dans un div ??

Sincèrement, j'ai l'impression de parler dans le vide...

J'abandonne.

bon bah je vais ça comme avec l'autre mettre des <li class="menu"> puisqu'apparement y'a que ça qui marche
merci quand même

bon j'ai une solution alternative :
j'ai mis mon image en image de fond sur le site, le texte je l'ai mis dans un div avec un ID et j'ai déplacé le div.
solution très moche mais qui marche
a bientôt pour de nouvelle prise de tête

A y est j'ai trouvé !!!
après avoir lu et relu le tutoriel sur les Cascades, j'ai compris ce que Laurie-anne me disait !
alors pour ceux qui veulent une réponse correcte voici la procédure :

nous n'avons pas besoin de div et de tout ça, en fait y'a une astuce voici le code html et css simplifié
tout d'abord création de la liste

..
<ul id="menu">
   <li><a href="http://www.google.fr" title="home" >Home</a></li>
<li>blabla</li>
<li>blabla</li>
</ul>

ensuite le css

ul#menu {
background:url(../image/menu_home.jpg) no-repeat;
height:250px;
}
ul#menu li{
margin-left:25px;
list-style-image:url("../image/puce.jpg");
float:left;
font-size:11px;
}

en fait fallait pas mettre background-image, mais background tout court ...
il est impératif de mettre une hauteur à l'ul sinon l'image s'arrête juste en dessous de la liste
le float left permet de créer un liste en ligne, il est conseiller de mettre un margin-left afin d'éviter le chevauchement.
voilà bon courage
Modifié par Wamdeus (12 Nov 2009 - 16:22)