IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Modification background sur H2 (JQuery)


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2011
    Messages
    68
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 68
    Par défaut Modification background sur H2 (JQuery)
    Bonjour à tous, je réalise en ce moment un "menu déroulant" avec ceci :http://flowplayer.org/tools/demos/tabs/accordion.html

    Je l'ai quelque peu modifier, surtout le css que voici :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    /* root element for accordion. decorated with rounded borders and gradient background image */
    #accordion {
    	margin-bottom: 30px;
    }
     
    /* accordion header */
    #accordion h2 {
    	padding: 4px 0 0 20px;
    	height: 16px;
    	background: url(../images/offres/Puce1_2.png) no-repeat;
    	font-size: 12px;
    	font-weight: normal;
    	cursor: pointer;
    	color: #047;
    }
     
    #accordion h2:hover {
    	text-decoration: underline;
    }
     
    /* currently active header */
    #accordion h2.current {
    	cursor: default;
    	background: url(../images/offres/Puce2_2.png) no-repeat;
    }
     
    /* accordion pane */
    #accordion .pane {
    	display: none;
    	padding: 5px 0 5px 15px;
    	font-size: 12px;
    }
     
    #accordion .pane li {
    	list-style-image: url(../images/offres/puce3.png);
    }
    Comme vous pouvez le voir lorsque je clique sur un titre je veux changer ma puce, cette transformation fonctionne parfaitement sous Firefox et sous Chrome, le seul hic est IE

    Est ce que quelq'un pourrait m'aider à trouver une petite solution merci beaucoup et bonne fin de journée

  2. #2
    Membre Expert
    Avatar de Nesmontou
    Homme Profil pro
    Architecte logiciel
    Inscrit en
    Septembre 2004
    Messages
    1 612
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Architecte logiciel
    Secteur : Finance

    Informations forums :
    Inscription : Septembre 2004
    Messages : 1 612
    Par défaut
    Bonjour,

    Il nous faudrait un peu plus de détails pour pouvoir t'aider :
    • Quelle est la version de IE ?
    • Quel est le résultat sur ce navigateur ?
    • ...

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2011
    Messages
    68
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 68
    Par défaut
    Alors oui désolé, il s'agit de IE 7, le problème est le suivant. Je possède 2 puces, lorsque mon menu n'est pas déroulé la flèche est vert la droite et lorsqu'il est déroulé la flèche est vers le bas.

    Sous FF et Chrome la flèche change bien d'apparence en fonction de la class que lui attribue le jQuery.

    En revanche sous IE la flèche reste vers la droite. J'ai remarqué quelque chose, pour tester j'ai caché la première puce et lorsque je clique sur mon menu, la puce (vers le bas) apparaît bien. Il semblerais que la première puce ne veuille pas "s'effacer".

    Nom : bug.png
Affichages : 55
Taille : 17,4 Ko

    Voilà, merci et bonne journée

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2011
    Messages
    68
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 68
    Par défaut
    Il s'avère qu'avec les différents menu accordéons que je test lorsque le menu est déroulé et donc actif, le css n'est pas pris en compte pour le changement !

  5. #5
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Y a pas de raison .. A mon avis c'est un problème Javascript et non CSS.

    Peux-tu nous montrer la partie de ton code Javascript qui ajoute la classe en question ?

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2011
    Messages
    68
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2011
    Messages : 68
    Par défaut
    J'utilise JQuery donc je ne pense pas que ça provienne du code. Car en plus de ça j'ai beau utiliser différents accordéons j'ai toujours le même soucis

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Background sur Jquery mobile
    Par ib.sissoko dans le forum Android
    Réponses: 0
    Dernier message: 21/10/2011, 10h48
  2. modification fichier sur ftp
    Par K4trix dans le forum Réseau
    Réponses: 4
    Dernier message: 26/07/2006, 12h52
  3. Réponses: 2
    Dernier message: 11/07/2006, 13h01
  4. Modif html sur mon prog
    Par vins25 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 08/02/2006, 06h15
  5. Réponses: 10
    Dernier message: 21/11/2005, 23h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo