Mettre image devant lien
Résolu
Flothebobcat
Messages postés
1427
Statut
Membre
-
Flothebobcat Messages postés 1427 Statut Membre -
Flothebobcat Messages postés 1427 Statut Membre -
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
--
Cordialement
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
--
Cordialement
14 réponses
Résumé de la discussion
Insertion d'une image devant chaque lien d'un menu via CSS et l'alignement problématique de l'icône qui apparaît sous le texte, faute de place ou de positionnement correct, sur des structures HTML simples. Plusieurs réponses suggèrent d'utiliser une structure HTML adaptée et d'ajuster padding et margins pour aligner l'icône, tandis que la solution retenue propose d'appliquer background-image sur les liens et de clarifier le HTML. Certaines réponses invitent à partager la structure HTML et le CSS pour diagnostiquer les décalages, puis à tester des variantes ou des ressources externes telles que des articles sur les puces images. Par ailleurs, un exemple concret montre l’emploi du CSS #menu et #menu a avec background-image et le HTML correspondant pour structurer correctement le menu.
-
-
-
Salut, utilise tu la liste à puce ?
-
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
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 ?
-
-
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
-
-
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+
