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

  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

  7. #7
    Rédacteur

    Homme Profil pro
    Responsable de projet
    Inscrit en
    Mai 2009
    Messages
    634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de projet
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2009
    Messages : 634
    Par défaut
    ce serait pas mal d'avoir un lien vers une démo.

    De plus cela peut provenir de ton javascript, ce n'est parce que tu utilises jQuery qu'il ne peut pas y avoir d'erreur

  8. #8
    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
    Ca se présente sous cette forme la

    HTML :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div id="accordion">
     
    	<h2 class="current">First pane</h2>
    	<div class="pane" style="display:block">... pane content ...</div>
     
    	<h2>Second pane</h2>
    	<div class="pane">... pane content ...</div>
     
    	<h2>Third pane</h2>
    	<div class="pane">... pane content ...</div>
     
    </div>
    Javascript :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
    CSS :
    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-image: url(../images/offres/Puce2_2.png);
    }
     
    /* 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);
    }
    Dans le #accordion h2.current un background-color fonctionne alors qu'un background simlpe avec une url ne fonctionne pas

+ 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