Deux mini questions

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Deux mini questions

Message par Missindo Jeu 12 Avr 2012 - 17:51

Ami du jour bonjour, ou ami du soir bonsoir, tout dépend de l'heure ou l'on lira mon message. J'ai découvert sur le site en fouinant un peux partout, le tuto du tableau en accordéon et j'aimerais beaucoup savoir si l'on peu retirer les chiffres que j'ai mis dans le cadre rouge suivant ça et aussi si à la place de la couleur grise déprimante comment mettre tout en blanc, mais en gardant les cadres comme il sont et la couleur de texte en noir ?!

Merci d'avance pour toute vos réponse


Dernière édition par Missindo le Dim 15 Avr 2012 - 17:08, édité 1 fois
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Matriochka Jeu 12 Avr 2012 - 18:03

Bonsoir,

Serait-il possible d'avoir les codes que vous avez inséré pour obtenir cet accordéon ? HTML / CSS Smile
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Missindo Jeu 12 Avr 2012 - 18:16

Bien sur que oui ^^

Html :

Code:
  <div id="accordeon-pa" class="accordion">
            <ol>
                <li>
                    <h2><span>♥ Contexte ♥</span></h2>
                    <div>
                      <figure>
                        En cours
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>♦ Liens utiles ♦</span></h2>
                    <div>
                      <figure>
                        A Venir
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>♣ Staff ♣</span></h2>
                    <div>
                      <figure>
                        ....
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>☼ Crédit ☼</span></h2>
                    <div>
                      <figure>
                        /*-/*-/*-
                      </figure>
                    </div>
                </li>
                <li>
                    <h2><span>♫ Nos Amis ♫</span></h2>
                    <div>
                      <figure>
                        .................
                      </figure>
                    </div>
                </li>
            </ol>
        </div>

CCS :

Code:
  @charset 'utf-8';
        /*************************************************!
        *
        *  project:    liteAccordion - a horizontal accordion plugin for jQuery
        *  author:    Nicola Hibbert
        *  url:        http://nicolahibbert.com/liteaccordion-v2/
        *  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
        *
        *  Version:    2.0.2
        *  Copyright:  (c) 2010-2011 Nicola Hibbert
        *  Licence:    MIT
        *
        **************************************************/
        /****************************************** Core */
        .accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
        .accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
        .accordion .slide > h2 {
          color: black;
            font-size: 16px;
          font-weight: normal;
          margin: 0;
          z-index: 100;
          position: absolute;
          top: 0;
          left: 0;
          -webkit-transform: translateX(-100%) rotate(-90deg);
          -webkit-transform-origin: right top;
          -moz-transform: translateX(-100%) rotate(-90deg);
          -moz-transform-origin: right top;
          -o-transform: translateX(-100%) rotate(-90deg);
          -o-transform-origin: right top;
          transform: translateX(-100%) rotate(-90deg);
          transform-origin: right top;
          -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }
        .accordion .slide > h2 span {
            display: block;
            padding-right: 8%;
            text-align: right;
            height: 90%;
            margin-top: 5px;
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }
        .accordion .slide > h2 b {
            display: inline-block;
            position: absolute;
            top: 13%;
            left: 10%;
            text-align: center;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
          -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        }
        .accordion .slide > h2:hover { cursor: pointer }
        .accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
        .accordion noscript p { padding: 10px; margin: 0; background: white }
       
        /***************************************** Light */
        .accordion {
            border: 9px solid white;
            border-bottom-width: 8px;
            padding: 5px 5px 6px 0;
            background: #a0a0a0;
            -webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
            -ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
            -o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
          box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
        }
        .accordion .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% }
        .accordion .slide > h2 span {
            background: #fcfcfc;
            background: -moz-linear-gradient(left,  #fcfcfc 0%, #ededed 100%);
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));
            background: -webkit-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
            background: -o-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
            background: -ms-linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
            background: linear-gradient(left,  #fcfcfc 0%,#ededed 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
            -webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
            -moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
            -o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
          box-shadow: -1px -1px 0 #FFFFFF inset, 1px 1px 0 #FFFFFF inset;
            color: #000000;
        }
        .accordion .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white }
        .accordion .slide > h2.selected span, .accordion .slide h2.selected span:hover, .accordion .slide > h2.selected b { background: #ffffff }
        .accordion .slide > div { background: #a0a0a0; margin-left: 5px }
       
        /*************************************** Rounded */
        .rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
        .rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }
       
        /******************************************** IE */
        .ie .slide > h2 b { top: 42%; left: 5% }
        .ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
        .ie.accordion .slide > h2 b { top: 44% }
        .accordion .slide > h2 span { filter: none }
       
        /******************************************** FA */
        .accordion figure .full { width: 100%; height: 100%; }
        .accordion h2 { border: none; }
       
        /* centrer l'accordéon */
        .accordion { margin: auto; }

Et voilà!!
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Matriochka Jeu 12 Avr 2012 - 18:23

Merci Smile

Alors, concernant les chiffres en bas, ils proviennent du code jQuery, mais je ne vais pas être en mesure de vous aider davantage… Ce langage et moi ne sommes pas encore complètement amis… Il va falloir attendre la réponse d'une personne plus compétente.

En revanche, pour ce qui est de la personnalisation, il va falloir modifier ça dans les CSS. Et pour ce faire sans se prendre la tête, ça va être très simple, il vous suffit de recherchez à chaque fois cette couleur : #A0A0A0, qui correspond au gris clair, pour la modifier par celle de votre choix Wink Modifiez-la sur chacun des éléments que vous désirez colorer.
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Missindo Jeu 12 Avr 2012 - 18:31

Merci beaucoup pour ce petit début d'aide ^^ j'adore ton vava

Edit: En fait si je change juste ça, ben ça deviens tout moche
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Missindo Ven 13 Avr 2012 - 9:40

désolé du double poste

Couleur c'est bon j'ai ce que je voulais, mais pour retirer les chiffres ont fait comment ?
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Matriochka Ven 13 Avr 2012 - 13:31

Merci pour l’avatar Smile

Par contre, pour les chiffres, comme je l’ai précisé plus haut, je n’ai pas les compétences requises pour vous aider. Je vais donc signaler votre message à des personnes plus qualifiées afin qu’elles puisse vous venir en aide.
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Missindo Ven 13 Avr 2012 - 13:33

Merci beaucoup c'est très gentil de ta part ^_^
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Manumanu Ven 13 Avr 2012 - 16:06

Bonjour,

Attention, les balises <figure> n'existent qu'en HTML5, et ton forum est en xhtml.

Ensuite, sans aller jusqu'à modifier le jQuery, tu peux simplement masquer le chiffre en CSS :
Code:
.accordion .slide h2 > b { visibility: hidden }

Sinon, les options du Slider prévoient le fait que tu ne veuilles pas de ces nombres, il suffit de le préciser lors de l'appel de la fonction. Il y a en effet un endroit dans ton forum (poste un lien, je serais en mesure de voir où) où tu dois avoir quelque chose du style :

Code:
<script>
   $('#yourdiv').liteAccordion();
</script>

Qu'il te suffit de modifier comme suit :
Code:
<script>
$('#yourdiv').liteAccordion({
   enumerateSlides : false
});
</script>

Ce, en gardant bien sûr d'éventuelles modifications déjà effectuées.

À noter qu'il faudrait au passage rendre les balises script valide xhtml en précisant le type, donc :
Code:
<script type="text/javascript">
$('#yourdiv').liteAccordion({
   enumerateSlides : false
});
</script>
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Missindo Ven 13 Avr 2012 - 18:13

euh... franchement? je patauge à fond xd Deux  mini questions 34946810 je suis une boulette Deux  mini questions Boulet10


Dernière édition par Missindo le Ven 13 Avr 2012 - 18:17, édité 1 fois
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Manumanu Ven 13 Avr 2012 - 18:15

Dis-nous si tu y arrives. Wink
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Missindo Ven 13 Avr 2012 - 18:18

Je me rend, je ferais mieux de faire ça à tête reposé
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Missindo Dim 15 Avr 2012 - 11:27

j'abandonne j'arrive à rien du tout, je laisse tel que c'est
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Manumanu Dim 15 Avr 2012 - 15:58

Pourquoi tu n'ajoutes pas simplement ça dans ton css ?
Code:
.accordion .slide h2 > b { visibility: hidden }
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Missindo Dim 15 Avr 2012 - 16:03

euh pas bête xd
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Manumanu Dim 15 Avr 2012 - 16:17

Alors ?
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Missindo Dim 15 Avr 2012 - 16:50

juste comme ça ou à la place d'autre chose?

edit: rahh je laisse tomber, j'ai tout foiré


Dernière édition par Missindo le Dim 15 Avr 2012 - 16:53, édité 1 fois
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Manumanu Dim 15 Avr 2012 - 16:51

Juste comme ça oui
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Missindo Dim 15 Avr 2012 - 17:04

ouiiiiiiiiiiiiiiiiiii merci du fond du coeur
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Manumanu Dim 15 Avr 2012 - 17:08

Je t'en prie. Pense à mettre le sujet en résolu. Wink
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Deux mini questions

Message par Missindo Dim 15 Avr 2012 - 17:08

c'est fait
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum