Navbar active

Bonjour,

je bloque sur ma Navbar je cherchais à mettre une partie en active et changé la couleur mais je bloque. voici mon code html :
<div class="topnav">
<a href="#home">Présentation</a>
<a class="active" href="#news">Notre projet</a>
<a href="#contact">Collaborateur</a>
<a href="#about">Contact</a>
<a href="#about">Nos oeuvres</a>
<a href="#about">English</a>
</div>
voici le CSS :

.topnav {
background-color: #ffffff;
overflow: hidden;
}

.topnav a {
float: none;
color: #1c1c1c;
text-align: center;
padding-left: 3%;
text-decoration: none;
font-size: 17px;
margin-left: auto;
margin-right: 1%;
letter-spacing: 3px;
}

.topnav a:hover {
color: #d6b7a9;
}

.active {
color: #d6b7a9;
}

seulement voila le active ne s'active pas au final et reste de la même couleur.
auriez vous une idée du problèmes SVP.

Salut,

Ouep, c'est un soucis de priorité de sélecteur CSS.

.active

a moins de poids que

.topnav a

Dans ton cas le plus simple est que tu mettes

.topnav a.active

pour le style actif

Tu peux trouver plein d'article qui vont tout t'expliquer (étrange il n'y en a pas un sur Alsa ??!! ) : https://blog.organicweb.fr/comprendre-le-poids-des-regles-css/

@Jean-Pierre-Bruneau attention :active != .active
Modifié par _laurent (28 Jan 2020 - 15:31)

Bonjour,

Oui en effet, je pense que tu a confondu entre :

.active

qui est le nom de ta class dans ta div et le:

:active

qui est la propriété d'un objet en css.

Je pense que ces quelques references sur le css et html seront interessant à lire:
(En français) - https://www.alsacreations.com/livres/lire/1521-pratique-de-css3-et-css2.1.html
(En français) - https://www.alsacreations.com/livres/lire/1480-css3-design-web-moderne.html
(En anglais) - https://webjobs.io/uploads/ebooks/css.pdf