La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML
(Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Comment garder le focus sur pseudo classe a:active ?
« Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: Comment garder le focus sur pseudo classe a:active ?  (Lu 2515 fois)
Comment garder le focus sur pseudo classe a:active ?
« sur: le 19-02-2008 a 12:09:38 »
kaly.joly
Membre récent
*

Hors-Ligne

Messages: 2



Je suis un lama!

Voir le Profil
Répondre avec citation

Bonjour,

Je cherche désespérement à créer un menu à onglet en CSS.
J'utilise pour l'instant les pseudo classes a:link, a:visited, a:hover et a:active.
l'ensemble fonctionne, à l'exception du fait que je souhaite que mon onglet (donc mon lien), une fois cliqué, reste sur l'apparence que je lui ai attribué avec a:active, et ce jusqu'à ce que je clique sur un autre onglet (qui devrait se comporter de la même manière).
Malheureusement, a:active correspondant au click de la souris, mais perd le focus dès que le click ets relaché. C'est alors a:visited qui prends le relai...

J'ai essayé avec un script Javascrit que j'ai glanné sur le web, qui garde bien l'aspect de mon onglet actif, mais qui rend le href son effet (plus aucun lien actif en terme de destination ! le comble pour un menu...)

Ce problème est réellement bloquant pour moi, je ne sais plus quoi faire... bawling
S'il vous plait ! 

Rapporter au modérateur  

Re:Comment garder le focus sur pseudo classe a:active ?
« Répondre #1 sur: le 20-02-2008 a 09:40:11 »
Shain
Administrateur
*****

Hors-Ligne

Sexe: Male
Messages: 3168



Grand méchant Admin !

Voir le Profil    WWW
Répondre avec citation

Hello, en fait quand tu as cliqué sur ton lien tu changes de page, c'est bien ca ?

Si oui tu n'as pas d'autres moyen (à ma connaissance) de gérer ta solution de menu en PHP. Il te suffit alors de faire un test pour savoir sur quelle page tu te trouves et d'afficher un class="menuActif" sur l'élément de ton menu.

Est-ce que je réponds à ta question ?

Rapporter au modérateur  

Shain - Co-Admin Forum Webmaster
e-commerce strasbourg
Outil gestion de contenu CMS
Tutoriaux Flex & AIR
Re:Comment garder le focus sur pseudo classe a:active ?
« Répondre #2 sur: le 20-02-2008 a 10:05:31 »
kaly.joly
Membre récent
*

Hors-Ligne

Messages: 2



Je suis un lama!

Voir le Profil
Répondre avec citation

Bonjour,
merci de me répondre.

en fait, j'utilise déjà Php.

tu peux trouver les sources  :

http://www.montaudran.org/__v2/accueil.php
http://www.montaudran.org/__v2/css/styles_2.css
http://www.montaudran.org/__v2/js/active.js

comment je procède :
la page d'acceuil est faite de div, celui qui me préoccupe est le deuxième, qui contient le menu à onglet.

- Chaque onglet comporte un lien qui envoi une nouvelle page dans le troisième div de la page d'accueil.

- Les onglets à l'état normal sont issu d'une seule image en background appelé par le CSS.
- Les roll-overs de ces onglets correspondent à une liste, le CSS appelle une image en background avec la pseudo classe a:hover.
- Les onglets à l'état actif sont supportés par la même liste, une autre image en background et la pseudo classe a:active.

- Le script js doit permettre de changer la classe du lien actif dans la liste par le biais de son id, et ce faisant, de changer l'image en background.

J'espère que j'ai pu être assez claire, je débute...
Merci !

« Dernière Édition: le 20-02-2008 a 10:08:20 par kaly.joly » Rapporter au modérateur  
Re:Comment garder le focus sur pseudo classe a:active ?
« Répondre #3 sur: le 20-02-2008 a 13:58:48 »
hztm
Membre récent
*

Hors-Ligne

Sexe: Male
Messages: 32



Fredo l'costaud

Voir le Profil
Répondre avec citation

Salut,

Quand on clique sur le premier lien, on a "page=histoire" dans la barre d'adresse.
Donc, quand tu affiches tes onglets, tu dois faire un test sur chacun selon la variable page.

Code:

<? if ($_GET['page']=="histoire") {
La tu affiches le bouton comme quand la souris est dessus
}
else {
Là le bouton normal.
}
?>


Bien sur c'est à faire pour chaque bouton.

PS : Tu as un petit décalage vers la droite sur les deux onglets de droite quand on passe la souris dessus.

« Dernière Édition: le 20-02-2008 a 13:59:51 par hztm » Rapporter au modérateur  
Re:Comment garder le focus sur pseudo classe a:active ?
« Répondre #4 sur: le 20-02-2008 a 14:11:53 »
Shain
Administrateur
*****

Hors-Ligne

Sexe: Male
Messages: 3168



Grand méchant Admin !

Voir le Profil    WWW
Répondre avec citation

Hello, tu peux faire très simple :

<a href="accueil.php?page=histoire" id="histoire" class="lien" onclick="this.className='clike';"></a>

Rapporter au modérateur  

Shain - Co-Admin Forum Webmaster
e-commerce strasbourg
Outil gestion de contenu CMS
Tutoriaux Flex & AIR
Re:Comment garder le focus sur pseudo classe a:active ?
« Répondre #5 sur: le 20-02-2008 a 14:31:29 »
hztm
Membre récent
*

Hors-Ligne

Sexe: Male
Messages: 32



Fredo l'costaud

Voir le Profil
Répondre avec citation

Oui mais sur la page d'après, l'onglet ne va pas rester "sorti"

« Dernière Édition: le 20-02-2008 a 14:31:50 par hztm » Rapporter au modérateur  
Re:Comment garder le focus sur pseudo classe a:active ?
« Répondre #6 sur: le 20-02-2008 a 14:34:44 »
Shain
Administrateur
*****

Hors-Ligne

Sexe: Male
Messages: 3168



Grand méchant Admin !

Voir le Profil    WWW
Répondre avec citation

avec la technique de hztm c'est bon normalement.

Rapporter au modérateur  

Shain - Co-Admin Forum Webmaster
e-commerce strasbourg
Outil gestion de contenu CMS
Tutoriaux Flex & AIR
Re:Comment garder le focus sur pseudo classe a:active ?
« Répondre #7 sur: le 20-02-2008 a 19:41:34 »
hztm
Membre récent
*

Hors-Ligne

Sexe: Male
Messages: 32



Fredo l'costaud

Voir le Profil
Répondre avec citation

Bah ouais j'ai toujours raison 

Rapporter au modérateur  
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg