Aide à la programmation, réponses aux questions / Html / CSS Problème d'indication de barre de navigation - html, css

Problème d'indication de barre de navigation CSS - html, css

PS: Si vous regardez attentivement la barre lorsque vous survolez un lien, quelques pixels à l'extrême droite restent noirs. Pourquoi est-ce et comment puis-je résoudre ce problème?

Le code de la barre de navigation actuelle est le suivant:

HTML:

<body>
<div class="navbar">
<a href="home.html" id="current">-home</a>
<a href="about.html">about</a>
<a href="store.html">store</a>
<a href="contact.html">contact</a>
</div>
</body>

CSS:

.navbar{
width: 75%;
background-color: black;
margin-left: auto;
margin-right: auto;
margin-top: 15px;}
.navbar a:link, a:visited{
background-color: black;
color: white;
text-decoration: none;
text-transform: uppercase;
border-right: 2px solid white;
font-weight: bold;
font-family: verdana;
font-size: 37px;
text-align: center;
padding-left: 5px;
padding-right: 5px;}
.navbar a:hover, a:active, a:focus{
background-color: #4A4A4A;
text-decoration: underline;}
#current a:link, a:visited{
background-color: red;}

Comme vous pouvez le constater par le code, j’essaie de définir la couleur du lien de rattachement sur le rouge. Mais cela n’a évidemment pas fonctionné. Comment dois-je m'y prendre?

Réponses:

0 pour la réponse № 1

current est l'id de l'élément link, donc #current {background-color:red;} devrait faire.

Vous essayez maintenant de définir la couleur de l’élément link à l’intérieur de l’élément avec id current.

0 pour la réponse № 2

Changez votre règle CSS de:

#current a:link, a:visited{
background-color: red;}

#current {
background-color: red;}

exemple jsFiddle

Votre règle spécifie l'élément avec un ID de #current, puis ses liens enfants quand #current suffit.

0 pour la réponse № 3

Vous avez oublié une virgule après #current dans votre CSS. Vous n’avez pas besoin de reste de la ligne. Vous pouvez aussi écrire #current seulement ou a#current.

0 pour la réponse № 4

Votre CSS est incorrect.

#current a:link

c'est dire style un lien dans un élément avec un Id #current

Cependant, votre lien est l'élément avec l'identifiant, essayez ceci:

a#current { color: red; }

Mieux vaut utiliser une classe:

a.red { color: red; }

et alors:

<a class="red">bla</a>

0 pour la réponse № 5

Le problème principal, comme tout le monde l’a indiqué, est queL'élément que vous essayez de modifier #current est également la balise d'ancrage. Vous devez donc définir un lien # current: link ou #current au lieu de #current a: link car la balise d'ancrage n'est pas un enfant de la balise #current.

Ici "s mon jsfiddle, si vous êtes intéressé.