Couleur d'onglet différente page active css
So Crate
-
pols12 Messages postés 1143 Date d'inscription Statut Membre Dernière intervention -
pols12 Messages postés 1143 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Menu onglet html css
- Supprimer page word - Guide
- Imprimer tableau excel sur une page - Guide
- Page d'accueil - Guide
- Page privée - Guide
- Page accueil iphone - Guide
6 réponses
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:
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:
Sur la page commande, ce sera:
Bref, à chaque fois, la page sur laquelle on est aura comme ID "active".
Et ton css sera comme ca:
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. ;)
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. ;)
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:
Ton css:
Voilà!
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à!
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!
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!
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. ;)
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. ;)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
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.
au contraire !
il suffit de faire qq recherche sur la CSS avec on mouse over, active, etc ...
et ça passe sur tous les navigateurs !!!
https://www.google.com/webhp?hl=fr&ie=UTF-8&oe=UTF-8&gws_rd=ssl#hl=fr&source=hp&q=codes+CSS+pour+les+onglets&aq=f&aqi=&aql=&oq=&gs_rfai=&fp=7241d7819cf7eea3
il suffit de faire qq recherche sur la CSS avec on mouse over, active, etc ...
et ça passe sur tous les navigateurs !!!
https://www.google.com/webhp?hl=fr&ie=UTF-8&oe=UTF-8&gws_rd=ssl#hl=fr&source=hp&q=codes+CSS+pour+les+onglets&aq=f&aqi=&aql=&oq=&gs_rfai=&fp=7241d7819cf7eea3