Mettre image devant lien
Résolu
Flothebobcat
Messages postés
1241
Date d'inscription
Statut
Membre
Dernière intervention
-
Flothebobcat Messages postés 1241 Date d'inscription Statut Membre Dernière intervention -
Flothebobcat Messages postés 1241 Date d'inscription Statut Membre Dernière intervention -
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
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
A voir également:
- Mettre image devant lien
- Lien url - Guide
- Créer un lien pour partager des photos - Guide
- Verificateur de lien - Guide
- Image iso - Guide
- Mettre 0 devant chiffre excel - Guide
14 réponses
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 :)
Le css
Et le html
#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
Et si tu enlève les padding et margin ça donne quoi ?
Sinon essai celui-la :
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:
et naturellement dans votre page web, on supposera que les liens impactés soient dans cette hiérarchie HTML:
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+
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+
