Menu, css, liste à puce
mike
-
mike -
mike -
Bonjour,
Je suis entrain de modifier un menu existant qui a pour forme :
<ul id="nav_bar">
<li><a href="index.php">Accueil</a></li>
<li><a href="index.php?a=1">Vente</a></li>
<li><a href="index.php?a=19">Recherche</a></li>
<li><a href="index.php?a=28&b=135">Fonctionnalités</a></li>
<li><a href="index.php?a=28&b=143">Tarifs</a></li>
<li><a href="index.php?a=28&b=141">Aide</a></li>
</ul>
et a comme 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;
}
Sur ce menu, j'aimerais que chaque lien ai un style différent car je veux en faire un menu avec des images en fond de chaque boutons.Un fond sensitif au passage de la souris..
J'ai donc pensé que je devais ajouter un "id" à chaque liens comme ceci
<div id="nav">
<ul id="nav_bar">
<li><a href="index.php" id="homelink">Accueil</a></li>
<li><a href="index.php?a=1" id="selllink">Vente</a></li>
<li><a href="index.php?a=19" id="searchlink">Recherche</a></li>
<li><a href="index.php?a=28&b=135" id="featureslink">Fonctionnalités</a></li>
<li><a href="index.php?a=28&b=143" id="pricelink">Tarifs</a></li>
<li><a href="index.php?a=28&b=141" id="helplink">Aide</a></li>
</ul>
Mais j'ai beau déclarer dans mon stylesheet..
#homelink {
background: #000000;
}
mais aucune différence..
Qui pourrait me donner la voie à suivre ?
merci de votre aide :)
Je suis entrain de modifier un menu existant qui a pour forme :
<ul id="nav_bar">
<li><a href="index.php">Accueil</a></li>
<li><a href="index.php?a=1">Vente</a></li>
<li><a href="index.php?a=19">Recherche</a></li>
<li><a href="index.php?a=28&b=135">Fonctionnalités</a></li>
<li><a href="index.php?a=28&b=143">Tarifs</a></li>
<li><a href="index.php?a=28&b=141">Aide</a></li>
</ul>
et a comme 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;
}
Sur ce menu, j'aimerais que chaque lien ai un style différent car je veux en faire un menu avec des images en fond de chaque boutons.Un fond sensitif au passage de la souris..
J'ai donc pensé que je devais ajouter un "id" à chaque liens comme ceci
<div id="nav">
<ul id="nav_bar">
<li><a href="index.php" id="homelink">Accueil</a></li>
<li><a href="index.php?a=1" id="selllink">Vente</a></li>
<li><a href="index.php?a=19" id="searchlink">Recherche</a></li>
<li><a href="index.php?a=28&b=135" id="featureslink">Fonctionnalités</a></li>
<li><a href="index.php?a=28&b=143" id="pricelink">Tarifs</a></li>
<li><a href="index.php?a=28&b=141" id="helplink">Aide</a></li>
</ul>
Mais j'ai beau déclarer dans mon stylesheet..
#homelink {
background: #000000;
}
mais aucune différence..
Qui pourrait me donner la voie à suivre ?
merci de votre aide :)
A voir également:
- Menu, css, liste à puce
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Liste code ascii - Guide
- Site dangereux liste - Guide
- Canon quick menu - Télécharger - Utilitaires
3 réponses
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.