Posez votre question Signaler

Couleur d'onglet différente page active css

So Crate - Dernière réponse le 14 août 2010 à 11:24
Bonjour,
Je suis en train de créer mon site et j'aurai une petite question.
J'ai créé un menu à l'aide de liste et j'aimerais que l'onglet de la page active soit d'une couleur différente.
Quel code puis-je rajouter dans mon css pour obtenir ce résultat?
Merci par avance pour votre aide.
Lire la suite 

Couleur d'onglet différente page active css »

6 réponses
Réponse
+1
moins plus
Salut
Je ne pense aps que ce soit possible en xHTML et CSS: je pense qu'il va falloir t'orient vers javascript ou PHP, pour connaitre la page active.

Ou alors, tu mets un ID spécialpour la page active:

Ton menu xhtml:
<a href="page1.html" class="onglet_menu">page1</a>
<a href="page2.html" class="onglet_menu">page2</a>
<a href="page3.html" class="onglet_menu">page3</a>
<a href="page4.html" class="onglet_menu">page4</a>
<a href="page5.html" class="onglet_menu" id="active">page5</a>


Ton css:
.onglet_menu{
color: blue;
}
#active{
color: red;
}


Voilà!
Ajouter un commentaire
Réponse
+1
moins plus
Moi, j'avais compris... :p
Regardes dans mon message:
Je ne sais aps comment est fait ton site?
Utilises-tu PHP? Si Oui, te sers-tu des includes?

Si non, rien de plus simple:
Le code de ton menu doit déférer à chaque page. Voilà un exemple.
Le code de ton menu doit être un truc du genre comme ca:
<a href="surprise.html" class="onglet_menu">???</a>
<a href="accueil.html" class="onglet_menu">Accueil</a>
<a href="contact.html" class="onglet_menu">contact</a>
<a href="informations.html" class="onglet_menu">Informations</a>
<a href="commande.html" class="onglet_menu">Commandes</a>


Le code ci-dessus, ca doit être en gros le code que tu as actuellement sur toutes tes pages, le code du menu.
Maintenant, tu vas modifier ce code un tout petit peu sur chaque page:
Sur la page accueil.html, tu vas mettre ceci:
<a href="surprise.html" class="onglet_menu">???</a>
<a href="accueil.html" class="onglet_menu" id="active">Accueil</a>
<a href="contact.html" class="onglet_menu">contact</a>
<a href="informations.html" class="onglet_menu">Informations</a>
<a href="commande.html" class="onglet_menu">Commandes</a>


Sur la page commande, ce sera:
<a href="surprise.html" class="onglet_menu">???</a>
<a href="accueil.html" class="onglet_menu">Accueil</a>
<a href="contact.html" class="onglet_menu">contact</a>
<a href="informations.html" class="onglet_menu">Informations</a>
<a href="commande.html" class="onglet_menu" id="active">Commandes</a>



Bref, à chaque fois, la page sur laquelle on est aura comme ID "active".

Et ton css sera comme ca:
.onglet_menu{
color: blue; /* couleur par défaut du menu */
}
#active{
color: red; /* couleur de la page active */
}


Voilà!

Si tu utilises des includes, 2 solutions se proposent à toi:
-->une variable $active qui contiendra un nom de page avant l'include sur chaque page. Avec une condition, on mettra on non le id="active".
-->Ou bien il doit être possible de récupérer la page actuelle, avec une super globale, tu peux faire une recherche google. ;)
Ajouter un commentaire
Réponse
+0
moins plus
Bonjour,

Pour en savoir encore plus sur la propriété CSS #active regarde ceci:
http://apprendre-creer-sites.com/propriete-css/pseudo-class-active.php

il vous sera utile!
Ajouter un commentaire
Réponse
+0
moins plus
Salut
Elle fait référence au lien qui est celui de l'url actuellement visié.
Elle ne parles pas d'un lien surlequel on passe sa souris, surlquel on clique, ou qu'on a déjà visité.
Je ne connaissais pas :active mais j'ai l'impression que c'est juste le moment ou l'on clique qui importe, et aps l'url actuelle. ;)
Ajouter un commentaire
Réponse
+0
moins plus
Merci pour vos réponses.

Je vais essayer de mieux expliquer ma question.

Imaginons différents liens : Accueil, photos, contacts, informations, etc...
J'aimerais que lorsque je suis sur la page photos par exemple, que cet onglet soit d'une autre couleur (donc pas lorsque l'on passe la souris dessus).

Si jamais je ne suis pas assez claire, je peux vous faire une capture d'écran pour expliquer vraiment le problème (qui n'est pas vraiment un problème mais plus une question).

Merci à vous.
Ajouter un commentaire
Réponse
-2
moins plus
au contraire !
il suffit de faire qq recherche sur la CSS avec on mouse over, active, etc ...
et ça passe sur tous les navigateurs !!!
http://www.google.com/...
Ajouter un commentaire
Ce document intitulé « Couleur d'onglet différente page active css » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?