Sujet Précédent Sujet Suivant

Mettre image devant lien

Résolu/Fermé
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 - 9 août 2011 à 17:13
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 - 11 août 2011 à 22:54
Salut les webmasters ,
Bon je vous explique j'aimerais pouvoir inserer une image devant chaque lien de mon menu sur mon site j'ai essayé en faisant : #menu a
{
color: white;
text-decoration: none;
margin-right: 10px;
margin-left:30px;
background-image:url(paw.png);
background-repeat:no-repeat;
}
Dans mon fichier CSS ca marche mais le problème c'est qu'au lieu que l'icone soit a gauche du lien (juste a coté) elle est en dessous ><
Si vous auriez la solution a mon probleme je vous en serait reconnaissant :)
Merci d'avance



14 réponses

Réponse 1 / 14
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 55
9 août 2011 à 17:34
:(
0
Réponse 2 / 14
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 55
9 août 2011 à 18:26
Personne ?
0
Réponse 3 / 14
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
9 août 2011 à 18:32
Salut, utilise tu la liste à puce ?
0
Réponse 4 / 14
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 55
9 août 2011 à 18:34
Non
Merci pour ta reponse
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 14
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 55
9 août 2011 à 18:35
Merci tu ma donné une idée https://openweb.eu.org/articles/puces_images je test et tiens au courant :)
0
Réponse 6 / 14
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
9 août 2011 à 18:36
Peut tu nous monter la structure de ton menu html et css ?
0
Réponse 7 / 14
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 55
9 août 2011 à 18:36
Oui bien sur
0
Réponse 8 / 14
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 55
9 août 2011 à 18:37
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>
0
Réponse 9 / 14
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 55
9 août 2011 à 18:39
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
0
Réponse 10 / 14
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
9 août 2011 à 18:41
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
0
Réponse 11 / 14
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 55
9 août 2011 à 18:42
Lis plus haut :P
0
Réponse 12 / 14
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 55
9 août 2011 à 18:45
Je dois aussi preciser qu'il s'agit d'un menu a l'horizontal
0
Réponse 13 / 14
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
9 août 2011 à 18:55
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;
}
0
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 55
9 août 2011 à 19:04
Sa donne nimp :/ comme le site n'est pas publier tu pourrais m'envoyer un mp contenant ton mail si eventuellement tu es dispo pour teamviewer?
0
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
9 août 2011 à 19:27
La dans l'immédiat pas trop disponible mais le code que je t'ai fourni fonctionne très bien, si ça ne donne rien c'est que tu as une erreur dans ta structure html si tu te sens pour la poster ici pourquoi pas !!
0
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 55
9 août 2011 à 19:43
C'est bon ton code marche a merveille :) merci encore
0
Flothebobcat Messages postés 1241 Date d'inscription mardi 19 août 2008 Statut Membre Dernière intervention 26 juillet 2014 55
9 août 2011 à 19:45
Enfaite tout marche bien mais la puce est trop loin du texte (trop decalé vers la gauche) tu peux m'eclairé ? :)
0
Stéphane18 Messages postés 372 Date d'inscription jeudi 3 mars 2011 Statut Membre Dernière intervention 20 février 2019 132
9 août 2011 à 19:58
As tu ajouté par hasard un text-align: center dans le bloc #menu si oui enlève le sinon regarde avec les valeurs de margin et padding !
0
Réponse 14 / 14
mpmp93 Messages postés 6648 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 1 339
10 août 2011 à 10:38
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+
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
"Aucune application permettant d'ouvrir cette URL"
sidojaice -
JIP -

24 réponses
lien copié
alaurore -
LEFEUVRE -

7 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses
Comment retrouver des lien copier sur sont téléphone
SAMA -
Lylou -

2 réponses