Mettre image devant lien

:(

Personne ?

Salut, utilise tu la liste à puce ?

Non
Merci pour ta reponse

Merci tu ma donné une idée https://openweb.eu.org/articles/puces_images je test et tiens au courant :)

Peut tu nous monter la structure de ton menu html et css ?

Oui bien sur

Le css

#menu
{
   background-image: url("../images/menu.jpg");
   width: 954px;
   height: 54px;
   text-align: center;
   font-size: 16px;
   padding-top: 20px;
}

#menu a
{
   color: white;
   text-decoration: none;
   margin-right: 10px;
   margin-left:30px;
   background-repeat:no-repeat;

}

#menu a:hover
{
   text-decoration: underline;
}

Et le html

 <div id="menu">
             <a href='index.html' >Accueil</a><a href='index.html'>News</a> <a href='index.html'>Guestbook</a>
          </div>

j'ai essayer de mettre ca dans mon css https://openweb.eu.org/articles/puces_images j et de rajouter <li> devant mes liens , les image apparaissent bien mais de cal complètement mon texte

Tu l'a compris le plus simple c'est d'utiliser la liste à puce cela évite les soucis d'affichage, suit le tuto que tu as trouvé et revient si tu as des problèmes

Lis plus haut :P

Je dois aussi preciser qu'il s'agit d'un menu a l'horizontal

Et si tu enlève les padding et margin ça donne quoi ?
Sinon essai celui-la :

<!-- menu principal -->     
<div id="menu">

<ul>                         
    <li><a href="#">AAAAAA</a></li>
    <li><a href="#">BBBBBB</a></li>
    <li><a href="#">CCCCCC</a></li>
</ul>

</div>
<!-- fin du menu principal -->

#menu{ 
    display: block; 
    width: 954px;  
    height: 54px; 
    margin: 0; 
    padding: 0; 
}
#menu ul {
    margin: 0; 
    padding:0; 
    list-style-image: url('puce.png'); (l'image)
    width: 954px;
}
#menu li  {
    float:left; 
    margin:0 1px 0 0; 
    padding: 0;
}
#menu a {
    display: block;  
    height: 54px; 
    width: 150px; (à vérifier)
    margin: 0; 
    padding: 0; 
    text-decoration: none; 
    color:#000000;
}

Bonjour,

C'est l'élément a qu'il faut directement modifier comme ceci:

body header nav a {
 display: inline-block;
color: white;
text-decoration: none;
margin-right: 10px;
margin-left:30px;
background-image:url(paw.png);
background-repeat: no-repeat; } 

et naturellement dans votre page web, on supposera que les liens impactés soient dans cette hiérarchie HTML:

<body>
  <header>
    <h1>Titre de ma page</h1>
    <nav>
      <a href='galerie.php'>galerie</a>
      <a href='contact.php'>contact</a>
    </nav>
  </header>
  <article>...suite de la page ...</article>
</body>

Commentaire:
- les liens a sont inscrits à la suite sans li.../li. C'est l'indication display: inline-block; qui contraint la balise a à devenir un bloc en ligne, donc à prendre en compte les spécifications de marge. Sans cette ligne (en gras), margin-left et margin-right ne fonctionnent pas...
- si on veut que les liens a fonctionnent comme encadrés par li.../li, il suffit de réécrie cette ligne:

display: inline-block;

en

display: block;

Pour exemple, allez voir mes pages d'exemple ici:
http://exemple.camping-car.org/

Vous avez un menu à l'horizontale. En haut et à droite de la page, changez simplement le style et sélectionnez le style ciel bleu, le même menu devient vertical.

Le code HTML de ce site d'exemple ne change pas d'une virgule entre chaque style de présentation. Tout est maitrisé par le css. Les menus ne font pas appel à li.../li...

A+