P.A. en accordéon, à l'aide !

2 participants

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

Résolu P.A. en accordéon, à l'aide !

Message par Melow Lun 8 Avr 2013 - 19:56

Bonjour, bonsoir à tous.

Je viens vous demander de l'aide pour un petit détail de ma page d'accueil. En effet, j'ai utilisé les codes pour faire une page en accordéon puis j'ai décidé de le personnaliser et de faire quelque chose de plus personnel (normal quoi Very Happy). Seulement... j'me casse la tête depuis deux jours sur un ridicule détail qui me gêne énormément. Je suis légèrement perfectionniste x).

Je m'explique. J'ai voulu mettre des images sur les onglets du "slide". Le problème est qu'elles débordent D:. Et c'est d'un moche !! Je vous screen mon souci.

Spoiler:

Encadré en rouge, vous pouvez constater que les images débordent. Au début, j'ai cru que je n'avais juste pas mis les bonnes mesures. Alors j'ai recommencé... mais au final, si vous voyez bien, il est distinct que l'image se dédouble. Cela ne vient donc pas des mesures de l'image mais bien d'un souci qui fait qu'elle dépasse du petit onglet.

Ensuite, une autre petite question, comment changer la couleur de l'intitulé "Slide #" ?

Je vous mets mon CSS !

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: 'Palatino Lynotype', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 { background-image:url("http://i69.servimg.com/u/f69/16/05/16/08/bisbar13.png");
  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 #2e5929;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #98c991;
    -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 { font: 'Palatino Lynotype' black ; 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 #909090 inset, 1px 1px 0 #909090 inset;
    color: #909090;
}
.accordion .slide > h2 b { background:#98c991; 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:#98c991 }
.accordion .slide > div { background:#98c991; 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; }

Je n'aime pas trop demander de l'aide et je le fais rarement car je cherche toujours dans les archives de ce forum... mais là, je n'ai pas le choix... Alors s'il vous plait, aidez-moi ! C'est assez urgent é.è...

Merci d'avance !


Dernière édition par Melow le Mar 9 Avr 2013 - 16:41, édité 1 fois
Melow

Melow
**

Féminin
Messages : 62
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: P.A. en accordéon, à l'aide !

Message par Scipion Mar 9 Avr 2013 - 13:33

Bonjour

Je vous suggère, à titre de test, d'utiliser le code CSS du thème de base, c'est à dire le premier code CSS du tutoriel.

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: P.A. en accordéon, à l'aide !

Message par Melow Mar 9 Avr 2013 - 16:08

Haw mais c'est ce que j'ai fait x). Je n'ai changé que les couleurs et la taille. Mais j'aimerais bien le personnaliser quand même... 'fin c'est aussi à ça que servent les codes de base, je pense >< et d'habitude je me débrouille pas trop mal mais là, ce détail me gêne vraiment ><.

[OMAGAD, Russell Crowe qui me répond *o*]
Melow

Melow
**

Féminin
Messages : 62
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: P.A. en accordéon, à l'aide !

Message par Scipion Mar 9 Avr 2013 - 16:28

Je pense que vous avez plutôt choisi le thème foncé, mais peu importe. Faites un test avec ce code CSS (thème de base) :

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 { background-image:url("http://i69.servimg.com/u/f69/16/05/16/08/bisbar13.png");
  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 }
 
/****************************************** Basic */
.accordion .slide > h2 { background: #333; color: white; line-height: 225% }
 
/*************************************** 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 }
 
/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }
 
/* centrer l'accordéon */
.accordion { margin: auto; }
Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: P.A. en accordéon, à l'aide !

Message par Melow Mar 9 Avr 2013 - 16:30

Ohhh >< oui pardon, je n'avais pas compris votre question désolée =S En effet, j'ai pris le thème tout blanc ^^. Je vais faire un essai et je vous tiens au courant ^^.

Merci Very Happy
Melow

Melow
**

Féminin
Messages : 62
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: P.A. en accordéon, à l'aide !

Message par Scipion Mar 9 Avr 2013 - 16:34

D'accord, j'attends le retour d'information.

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: P.A. en accordéon, à l'aide !

Message par Melow Mar 9 Avr 2013 - 16:40

Super ! Je n'ai plus qu'à adapter mon image Very Happy Merci beaucoup ! Bonne journée à vous ô Russell Crowe *o* !
Melow

Melow
**

Féminin
Messages : 62
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow 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