A voir également:
- Menu, css, liste à puce
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Windows 11 menu démarrer classique - Guide
- Gertrude a préparé la liste des affaires à prendre pour l'excursion. juliette a modifié cette liste en utilisant le mode suivi des modifications proposé par le traitement de texte. - Guide
- Canon quick menu - Télécharger - Utilitaires
3 réponses
Wolfinger
Messages postés
13
Date d'inscription
mercredi 21 juillet 2010
Statut
Membre
Dernière intervention
15 août 2011
4 mars 2011 à 08:10
4 mars 2011 à 08:10
Peut-être qu'il serait plus simple pour toi de crée une class pour chaque lien ?
C'est peut-etre pas une bonne méthode, mais peut-etre quel marchera ;)
tu garde ton css "nav_bar", tu lui mets les propriétés qui seront commune a tous les liens !
ensuite, tu crée une nouvelle class pour chaqun des liens, juste pour le survol par exemple, ce qui donnerais quelques chose comme ça :
<ul id="nav_bar">
<li><a class="lien1" href="index.php">Accueil</a></li>
<li><a class="lien2" href="index.php?a=1">Vente</a></li>
<li><a class="lien3" href="index.php?a=19">Recherche</a></li>
<li><a class="lien4" href="index.php?a=28&b=135">Fonctionnalités</a></li>
<li><a class="lien5" href="index.php?a=28&b=143">Tarifs</a></li>
<li><a class="lien6" href="index.php?a=28&b=141">Aide</a></li>
</ul>
CSS _______ :
#nav_bar li a:link,
#nav_bar li a:visited {
background: #eaeaea;
border-top: 1px solid #d4d4d4;
border-left: 1px solid #d4d4d4;
border-right: 1px solid #d4d4d4;
border-bottom: none;
padding: 8px 15px;
color: #818181;
text-decoration: none;
display: block;
float: left;
position: relative;
top: 0px;
margin: 0px 1px;
}
.lien1 a:hover {
background-image: url(LIEN DE L'IMAGE);
}
.lien2 a:hover {
background-image: url(LIEN DE L'IMAGE);
}
.lien3 a:hover {
background-image: url(LIEN DE L'IMAGE);
}
.lien4 a:hover {
background-image: url(LIEN DE L'IMAGE);
}
.lien5 a:hover {
background-image: url(LIEN DE L'IMAGE);
}
.lien6 a:hover {
background-image: url(LIEN DE L'IMAGE);
}
Voila ^^'
Peut-etre qu'il y as plus simple, et plus "correct" en terme de codage, mais bon tant que ça marche ;)
Essaye tu n'a rien a perdre :)
Amicalement.
C'est peut-etre pas une bonne méthode, mais peut-etre quel marchera ;)
tu garde ton css "nav_bar", tu lui mets les propriétés qui seront commune a tous les liens !
ensuite, tu crée une nouvelle class pour chaqun des liens, juste pour le survol par exemple, ce qui donnerais quelques chose comme ça :
<ul id="nav_bar">
<li><a class="lien1" href="index.php">Accueil</a></li>
<li><a class="lien2" href="index.php?a=1">Vente</a></li>
<li><a class="lien3" href="index.php?a=19">Recherche</a></li>
<li><a class="lien4" href="index.php?a=28&b=135">Fonctionnalités</a></li>
<li><a class="lien5" href="index.php?a=28&b=143">Tarifs</a></li>
<li><a class="lien6" href="index.php?a=28&b=141">Aide</a></li>
</ul>
CSS _______ :
#nav_bar li a:link,
#nav_bar li a:visited {
background: #eaeaea;
border-top: 1px solid #d4d4d4;
border-left: 1px solid #d4d4d4;
border-right: 1px solid #d4d4d4;
border-bottom: none;
padding: 8px 15px;
color: #818181;
text-decoration: none;
display: block;
float: left;
position: relative;
top: 0px;
margin: 0px 1px;
}
.lien1 a:hover {
background-image: url(LIEN DE L'IMAGE);
}
.lien2 a:hover {
background-image: url(LIEN DE L'IMAGE);
}
.lien3 a:hover {
background-image: url(LIEN DE L'IMAGE);
}
.lien4 a:hover {
background-image: url(LIEN DE L'IMAGE);
}
.lien5 a:hover {
background-image: url(LIEN DE L'IMAGE);
}
.lien6 a:hover {
background-image: url(LIEN DE L'IMAGE);
}
Voila ^^'
Peut-etre qu'il y as plus simple, et plus "correct" en terme de codage, mais bon tant que ça marche ;)
Essaye tu n'a rien a perdre :)
Amicalement.