5542 sujets

Sémantique web et HTML

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.
Modérateur
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 ??!! Smiley eek ) : https://blog.organicweb.fr/comprendre-le-poids-des-regles-css/

@Jean-Pierre-Bruneau attention :active != .active Smiley cligne
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