Menu en accordéon à centrer

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

Résolu Menu en accordéon à centrer

Message par Xude le Dim 6 Jan 2013 - 1:14

Bonjour, bonsoir,

Je sais que le sujet a déjà été moult fois posé, mais après avoir passé près d'une heure à parcourir le web je me suis résolu à demander de l'aide.

J'ai installé sur mon forum un message d'accueil en accordéon, en utilisant un autre code que celui du Forum des Forums. Or cet accordéon refuse obstinément de se centrer... Aussi, si une âme charitable voulait bien se pencher sur mon cas, ce serait très gentil à elle ! ^^

Mon forum : http://sanctumspiritum.forums-actifs.com/

Le CSS de l'accordéon :

Spoiler:
/* REGLAGES DE L ACCORDEON */

.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 li > h2 {
color: black;
font-weight: normal;
margin: 0;
z-index: 2;
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;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
}
.accordion li > h2 b {
display: inline-block;
position: absolute;
top: 10%;
top: 42%\9;
left: 10%;
left: 5%\9;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion li > h2:hover {
cursor: pointer;
}
.accordion li > div {
height: 100%;
position: absolute;
top: 0;
z-index: 1;
overflow: hidden;
background: white;
}
.accordion noscript p {
padding: 10px;
margin: 0;
background: white;
}

/* LE STYLE DE L ACCORDEON */
.dark {
border: 9px solid #353535;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #030303;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.dark li > h2 {
background: #030303;
font-family: Arial;
font-size: 16px;
line-height: 2.7em;
text-shadow: 0 -1px 0 #030303;
}
.dark li > h2 span {
background: #353535;
color: white;
}
.dark li > h2 b {
background: #353535\9;
color: #030303;
font-size: 20px;
text-shadow: -1px 1px 0 #5b5b5b;
}
.dark h2.selected span, .dark h2.selected span:hover {
background: #434343;
background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555));
background: -moz-linear-gradient(top left, #353535 0%, #555555 100%);
}
.dark h2.selected b {
background: #434343\9;
}
.dark li > div {
background: #030303;
margin-left: 5px;
}
/* LES ARRONDIS */
.rounded {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.rounded li > h2 span {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

/* LA LEGENDE */
figure {
display: block;
width: 100%;
height: 100%;
margin: 0
}
figcaption {
padding: 0px 0px;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 3;
background: none;
background: none;
}

Je vous remercie d'avance !


Dernière édition par Xude le Sam 12 Jan 2013 - 22:20, édité 1 fois

Xude
Nouveau membre

Messages : 14
Inscrit(e) le : 18/12/2012

http://sanctumspiritum.forums-actifs.com/
Xude a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu en accordéon à centrer

Message par Xude le Mar 8 Jan 2013 - 17:53

Je me permet de remettre ce message d'actualité :3

Xude
Nouveau membre

Messages : 14
Inscrit(e) le : 18/12/2012

http://sanctumspiritum.forums-actifs.com/
Xude a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu en accordéon à centrer

Message par Xude le Ven 11 Jan 2013 - 13:57

Up :3

Xude
Nouveau membre

Messages : 14
Inscrit(e) le : 18/12/2012

http://sanctumspiritum.forums-actifs.com/
Xude a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu en accordéon à centrer

Message par Xude le Sam 12 Jan 2013 - 13:28

Encore un petit up o/

(Désolé, ça ne fait pas exactement 24h que j'ai posté le message précédent, mais je préfère le faire maintenant avant d'oublier)

J'en profite pour vous mettre CSS, HTML et JavaScript, on ne sait jamais d'où un tel problème peut venir ^^

CSS ENTIER:
.forumline{
background-color: ##EFEFEF;
border-bottom: 6px #EFEFEF solid;
border-top: 1px #EFEFEF solid;
border-right: 1px #EFEFEF dotted;
border-left: 1px #EFEFEF dotted;
-webkit-box-shadow: 0px 0px 5px 1px #B0B2B4;
-moz-box-shadow: 0px 0px 5px 1px #B0B2B4;
box-shadow: 0px 0px 5px 1px #B0B2B4;
}

.bodyline {
-webkit-box-shadow: 0px 0px 10px 1px #B0B2B4;
-moz-box-shadow: 0px 0px 10px 1px #B0B2B4;
box-shadow: 0px 0px 10px 1px #B0B2B4;
}

/* ZONE DE SAISIE */
#text_editor_textarea{
color: #545454;}

u{border-bottom: 1px solid;border-color:#CBCBCB;text-decoration: none;}
I{border-bottom:none; color:#7A5E5E;text-decoration: none}

a {
color: #CDCDCD;
font-family: tahoma;
text-decoration: none!important;
font-variant: small-caps;
}

a:hover {
color: red;
font-family: tahoma;
text-decoration: none!important;
font-variant: small-caps;
}

.quote{
color: #383438;
line-height: 125%;
background-color: #EFEFEF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}

.quote:hover{
color: #383438;
line-height: 125%;
background-color: #F7F7F7;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}

.code{
font-family: tahoma;
font-size: 12px;
color: #C3C3C3;
line-height: 125%;
background-color: #EFEFEF;
border-top: 3px #CCCCCC solid;
border-bottom: 5px #CCCCCC solid;
border-right: 1px #CCCCCC solid;
border-left: 1px #CCCCCC solid;
-moz-border-radius:6px;
padding: 5px
}

.profavatar img { /* profil personnalisé */
background-color : #FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding : 5px;
margin-top : - 10px;
margin-bottom : - 10px;
margin-left : 10px;
margin-right : 10px;
font-face: Tahoma;
-webkit-box-shadow: 0px 0px 10px 1px #B0B2B4;
-moz-box-shadow: 0px 0px 10px 1px #B0B2B4;
box-shadow: 0px 0px 10px 1px #B0B2B4;
}

.profbouton { /*bouton du profil*/
background-color : #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding : 10px;
margin : 10px;
text-align : center;
-webkit-box-shadow: 0px 0px 10px 1px #B0B2B4;
-moz-box-shadow: 0px 0px 10px 1px #B0B2B4;
box-shadow: 0px 0px 10px 1px #B0B2B4;
}


textarea { /* fiche de jeux de rôles :p */
color: #CCCCCC;
font-face: tahoma;
}

.lastpost{ /* personnalisation de "messages : 10 | sujets : 2" */
padding: 5px;
font-family: Tahoma;
font-size: 10px;
width: 150px;
background: #EFEFEF;
color: #C6C6C6;
border: 1px solid #C6C6C6;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-o-border-radius: 5px;
}

.lastpost:hover { /* idem ! */
-webkit-box-shadow: 0px 0px 5px 1px #B0B2B4;
-moz-box-shadow: 0px 0px 5px 1px #B0B2B4;
box-shadow: 0px 0px 5px 1px #B0B2B4;
}


.categories{ /* personnalisation des catégories */
padding: 5px;
font-family: Tahoma;
font-size: 10px;
background: #EFEFEF;
color: #C6C6C6;
border: 1px solid #C6C6C6;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-o-border-radius: 5px;
}

#newbottom /* footer */
{
clear: both;
background-image: url(http://host.image.files.free.fr/host/4a04c4821c594back-bottom.png);
background-repeat: no-repeat;
background-position: center;
}

/* titres définis */

.titre1{
font-family: Georgia;
letter-spacing: -1px;
color: #332326;
text-shadow: 0px 0px 3px #332326;
}
.titre1:hover{
font-family: Georgia;
letter-spacing: -1px;
color: red;
text-shadow: 0px 0px 5px #ffffff;
cursor: ne-resize;
}

.titregrand{
font-family: Georgia;
letter-spacing: -1px;
color: #332326;
text-shadow: 0px 0px 3px #332326;
}
.titregrand:hover{
font-family: Georgia;
letter-spacing: 2px;
color: red;
text-shadow: 0px 0px 3px #929292;
cursor: ne-resize;
font-variant: small-caps;
}

.titregrand2{
font-family: Georgia;
letter-spacing: 2px;
color: red;
text-shadow: 0px 0px 3px #929292;
font-variant: small-caps;
font-size: 18pt;
}

.titregrand2:hover{
font-family: Georgia;
letter-spacing: 2px;
color: red;
text-shadow: 0px 0px 3px #929292;
font-variant: small-caps;
text-decoration: underline;
}

/* fin des titres */

/* cadre spécial (images PA */
.cadrespe{
border: 1px solid white;
padding: 3px;
align: left;
font-family: arial;
text-align: justify;
}

.cadrespe:hover{
border:1px dashed red;
align: left;
}


/* cadre prédef */
.cadre1{
border-left: 3px solid red;
text-align: justify;
padding: 5px;
left: 100px;
font-family: georgia;
}

.navig {
position: absolute;
top: 0px;
width: 100%;
background-color: #FFFFFF;
position: fixed;}
.mainmenu[href="/faq"]{display:none;}
.mainmenu[href="/calendar"]{display:none;}

body{
background-position: top center;
}

#description
{
color: #000000; /*mettre ici la couleur */
font-size: 12px; /*remplacer X par le nombre de pixel voulu*/
font-family: "Courier New", serif; /*remplacer POLICE par la police voulue. Si la police est composée de plusieurs mots, la mettre entre "" */
}

/* REGLAGES DE L ACCORDEON */

.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 li > h2 {
color: black;
font-weight: normal;
margin: 0;
z-index: 2;
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;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
}
.accordion li > h2 b {
display: inline-block;
position: absolute;
top: 10%;
top: 42%\9;
left: 10%;
left: 5%\9;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion li > h2:hover {
cursor: pointer;
}
.accordion li > div {
height: 100%;
position: absolute;
top: 0;
z-index: 1;
overflow: hidden;
background: white;
}
.accordion noscript p {
padding: 10px;
margin: 0;
background: white;
}

/* LE STYLE DE L ACCORDEON */
.dark {
border: 9px solid #353535;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #030303;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.dark li > h2 {
background: #030303;
font-family: Arial;
font-size: 16px;
line-height: 2.7em;
text-shadow: 0 -1px 0 #030303;
}
.dark li > h2 span {
background: #353535;
color: white;
}
.dark li > h2 b {
background: #353535\9;
color: #030303;
font-size: 20px;
text-shadow: -1px 1px 0 #5b5b5b;
}
.dark h2.selected span, .dark h2.selected span:hover {
background: #434343;
background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555));
background: -moz-linear-gradient(top left, #353535 0%, #555555 100%);
}
.dark h2.selected b {
background: #434343\9;
}
.dark li > div {
background: #030303;
margin-left: 5px;
}
/* LES ARRONDIS */
.rounded {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.rounded li > h2 span {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

/* LA LEGENDE */
figure {
display: block;
width: 100%;
height: 100%;
margin: 0
}

.stats2 {
text-align: justify;
padding:10px;
width:320px;}

.stats2 {
border-left : 1px dotted #000000 ;
-moz-border-radius: 25px 25px 15px 15px;
-webkit-border-radius: 25px 25px 15px 15px;
text-align: justify;
padding:10px;
width:320px;}

.listeconnected td { background-color: transparent;
text-align:justify;}

CSS ACCORDÉON:
/* REGLAGES DE L ACCORDEON */

.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 li > h2 {
color: black;
font-weight: normal;
margin: 0;
z-index: 2;
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;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
}
.accordion li > h2 b {
display: inline-block;
position: absolute;
top: 10%;
top: 42%\9;
left: 10%;
left: 5%\9;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion li > h2:hover {
cursor: pointer;
}
.accordion li > div {
height: 100%;
position: absolute;
top: 0;
z-index: 1;
overflow: hidden;
background: white;
}
.accordion noscript p {
padding: 10px;
margin: 0;
background: white;
}

/* LE STYLE DE L ACCORDEON */
.dark {
border: 9px solid #353535;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #030303;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.dark li > h2 {
background: #030303;
font-family: Arial;
font-size: 16px;
line-height: 2.7em;
text-shadow: 0 -1px 0 #030303;
}
.dark li > h2 span {
background: #353535;
color: white;
}
.dark li > h2 b {
background: #353535\9;
color: #030303;
font-size: 20px;
text-shadow: -1px 1px 0 #5b5b5b;
}
.dark h2.selected span, .dark h2.selected span:hover {
background: #434343;
background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555));
background: -moz-linear-gradient(top left, #353535 0%, #555555 100%);
}
.dark h2.selected b {
background: #434343\9;
}
.dark li > div {
background: #030303;
margin-left: 5px;
}
/* LES ARRONDIS */
.rounded {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.rounded li > h2 span {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

/* LA LEGENDE */
figure {
display: block;
width: 100%;
height: 100%;
margin: 0
}

HTML ACCORDÉON:
<div style="margin:auto;text-align:center;width:100%"><img src="http://i50.tinypic.com/wjdoqa.png" border="0" alt="" /></div>
<br>
<center><select style="width: 268px;" onchange="location = this.value">
<option selected="selected">Navigation rapide</option>
<option value="url1-de-renvoi">choix 1</option>
<option value="url2-de-renvoi">choix 2</option>
<option value="url3-de-renvoi">choix 3</option>
<option value="url4-de-renvoi">choix 4</option>
</select></center>
<br>
<br><div style="position: relative; width: 800px; margin: 5px auto;">
<div id="one" class="accordion">
<ol>
<li>
<h2><span>Bienvenue !</span></h2>
<div>
<figure>
<div style="width: 555px; height: 320px; opacity: 10; background-image: url(http://i47.tinypic.com/s0x1tl.jpg); -moz-border-radius: 46px 46px 7px 7px">
<br>
<br>
<center><table><tr><td><div style="border: 1px dashed;border-color:#ffffff;width: 360px; background-color: rgba(255, 255, 255, 0.5); padding: 2px; -moz-border-radius: 5px 5px 5px 5px;"><div style="font-family: arial; line-height:11px; text-align: justify;"><div style="text-align: center; color: black; text-shadow: 0px 0px 3px white; font-size: 40px; font-family: georgia; margin-top: -20px; line-height: 24px;">Genèse
</div><div style="height:170px; overflow:auto; ">BLABLA</div></font></div></div></td><td><div style="border: 1px dashed;border-color:#ffffff;width: 170px; background-color: rgba(255, 255, 255, 0.5); padding: 2px; -moz-border-radius: 5px 5px 5px 5px;"><div style="font-family: arial; line-height:11px; text-align: justify;"><font color=#3C3C3C><div style="text-align: center; color: black; text-shadow: 0px 0px 3px white; font-size: 40px; font-family: georgia; margin-top: -20px; line-height: 24px;">Évangiles
</div><div style="height:170px; overflow:auto; ">BLABLA</div></font></div></div></td></tr></table></center>
<br>
<br>
<center><table><tr><td><div style="border: 1px dashed;border-color:#ffffff;width: 475px; background-color: rgba(255, 255, 255, 0.5); padding: 2px; -moz-border-radius: 5px 5px 5px 5px;"><div style="font-family: arial; line-height:11px; text-align: justify;"><div style="text-align: right; color: black; text-shadow: 0px 0px 3px white; font-size: 20px; font-family: georgia; margin-top: -20px; line-height: 24px;">Priez pour nous !
</div><div style="height:50px; overflow:auto; ">Priez pour nous !
</div></font></div></div></td></tr></table></center>
</div>
</figure>
</div>
</li>

<li>
<h2><span>Actualités et Events</span></h2>
<div>
<figure>
<div style="width: 555px; height: 320px; opacity: 10; background-image: url(http://i50.tinypic.com/11uyfma.jpg); -moz-border-radius: 46px 46px 7px 7px">
Whoops. <br/> C'est parfait pour les liens, maintenant je teste <br /> les retours à la ligne
</div>
</figure>
</div>

</li>
<li>
<h2><span>Staff</span></h2>
<div>
<figure><div style="width: 555px; height: 320px; opacity: 10; background-image: url(http://i45.tinypic.com/16c9mxk.jpg); -moz-border-radius: 46px 46px 7px 7px">
Some caption text goes in here... <br /> Parfait pour les liens et retour à la ligne, alors testons les div<div style="border: 3px solid #CC0000; padding: 5px; background: #909090; width: 300px;">Là le texte dans un div à fond gris et à bordure rouge de 300px de large</div>
</div>
</figure>
</div>
</li>
<li>
<h2><span>Postes Vacants</span></h2>
<div>
<figure>
<div style="width: 555px; height: 320px; opacity: 10; background-image: url(http://i48.tinypic.com/2wh3sbd.jpg); -moz-border-radius: 46px 46px 7px 7px">
Pew pew pew!
<p style="border: 5px dotted #fff; padding: 10px; width: 500px;">
Et bien toutes balises sembles fonctionner sans problème, tu pourras donc en faire ce que tu veux !
<br />
Encore un test image : <br />
<img src="http://i25.servimg.com/u/f25/11/95/30/70/227.jpg" border="0" alt="" /></p>
</div>
</figure>
</div>
</li>
<li>
<h2><span>Partenaires</span></h2>
<div>
<figure>
<div style="width: 555px; height: 320px; opacity: 10; background-image: url(http://i48.tinypic.com/2ufsy7o.jpg); -moz-border-radius: 46px 46px 7px 7px">
More caption text here!<p style="border: 2px solid #ff8888; padding: 7px; color: #CC0000; width: 300px; background-position: right;">Dur à comprendre au départ car les explications sont en anglais, mais il est très simple une fois qu'on a le nez dedans !</p>
</div>
</figure>
</div>
</li>
</ol>
</div>
</div>
<br><br><br>

JAVASCRIP ACCORDÉON 1:
/*************************************************
*
* project: liteAccordion - horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/horizontal-accordion-jquery-plugin
* demo: http://www.nicolahibbert.com/demo/liteAccordion
*
* Version: 1.1.3
* Copyright: (c) 2010-2011 Nicola Hibbert
*
/*************************************************/
;(function($) {

$.fn.liteAccordion = function(options) {

// defaults
var defaults = {
containerWidth : 800,
containerHeight : 320,
headerWidth : 48,

firstSlide : 1,
onActivate : function() {},
slideSpeed : 800,
slideCallback : function() {},

autoPlay : false,
pauseOnHover : false,

theme : 'basic', // basic, light*, dark, stitch*
rounded : false,
enumerateSlides : false
},

// merge defaults with options in new settings object
settings = $.extend({}, defaults, options),

// define key variables
$accordion = this,
$slides = $accordion.find('li'),
slideLen = $slides.length,
slideWidth = settings.containerWidth - (slideLen * settings.headerWidth),
$header = $slides.children('h2'),

// core utility and animation methods
utils = {
getGroup : function(pos, index) {
if (this.offsetLeft === pos.left) {
return $header.slice(index + 1, slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth });
} else if (this.offsetLeft === pos.right) {
return $header.slice(0, index + 1).filter(function() { return this.offsetLeft === slideWidth + ($header.index(this) * settings.headerWidth) });
}
},
nextSlide : function(slideIndex) {
var slide = slideIndex + 1 || settings.firstSlide;

// get index of next slide
return function() {
return slide++ % slideLen;
}
},
play : function(slideIndex) {
var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
start = function() {
$header.eq(getNext()).click();
};

utils.playing = setInterval(start, settings.cycleSpeed);
},
pause : function() {
clearInterval(utils.playing);
},
playing : 0,
sentinel : false
};

// set container heights, widths, theme & corner style
$accordion
.height(settings.containerHeight)
.width(settings.containerWidth)
.addClass(settings.theme)
.addClass(settings.rounded && 'rounded');

// set tab width, height and selected class
$header
.width(settings.containerHeight)
.height(settings.headerWidth)
.eq(settings.firstSlide - 1).addClass('selected');

// ie Sad
if ($.browser.msie) {
if ($.browser.version.substr(0,1) > Cool {
$header.css('filter', 'none');
} else if ($.browser.version.substr(0,1) < 7) {
return false;
}
}

// set initial positions for each slide
$header.each(function(index) {
var $this = $(this),
left = index * settings.headerWidth;

if (index >= settings.firstSlide) left += slideWidth;

$this
.css('left', left)
.next()
.width(slideWidth)
.css({ left : left, paddingLeft : settings.headerWidth });

// add number to bottom of tab
settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');

});

// bind event handler for activating slides
$header.click(function(e) {
var $this = $(this),
index = $header.index($this),
$next = $this.next(),
pos = {
left : index * settings.headerWidth,
right : index * settings.headerWidth + slideWidth,
newPos : 0
},
$group = utils.getGroup.call(this, pos, index);

// set animation direction
if (this.offsetLeft === pos.left) {
pos.newPos = slideWidth;
} else if (this.offsetLeft === pos.right) {
pos.newPos = -slideWidth;
}

// check if animation in progress
if (!$header.is(':animated')) {

// activate onclick callback with slide div as context
if (e.originalEvent) {
if (utils.sentinel === this) return false;
settings.onActivate.call($next);
utils.sentinel = this;
} else {
settings.onActivate.call($next);
utils.sentinel = false;
}

// remove, then add selected class
$header.removeClass('selected').filter($this).addClass('selected');

// get group of tabs & animate
$group
.animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) })
.next()
.animate({ left : '+=' + pos.newPos }, settings.slideSpeed);

}
});

// pause on hover
if (settings.pauseOnHover) {
$accordion.hover(function() {
utils.pause();
}, function() {
utils.play($header.index($header.filter('.selected')));
});
}

// start autoplay, call utils with no args = start from firstSlide
settings.autoPlay && utils.play();

return $accordion;

};

})(jQuery);

JAVASCRIPT ACCORDÉON 2:
jQuery(document).ready(function(){
jQuery('#one').liteAccordion({
onTriggerSlide : function() {
this.find('figcaption').fadeOut();
},
onSlideAnimComplete : function() {
this.find('figcaption').fadeIn();
},
autoPlay : false,
pauseOnHover : false,
theme : 'stitch',
rounded : true,
theme : 'dark',
containerWidth : 800,
containerHeight : 320,
headerWidth: 48,
firstSlide : 1,
enumerateSlides : true
}).find('figcaption:first').show();
});

Xude
Nouveau membre

Messages : 14
Inscrit(e) le : 18/12/2012

http://sanctumspiritum.forums-actifs.com/
Xude a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu en accordéon à centrer

Message par Adam_sfp le Sam 12 Jan 2013 - 13:41

Bonjour

Regarder peut être du coté
margin-left:
ou
margin

Cordialement.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu en accordéon à centrer

Message par Xude le Sam 12 Jan 2013 - 19:32

C'est ce que j'ai fait, mais peu importe la valeur que j'y met, l'accordéon ne bouge pas ^^' Pareil pour les "position", etc... Il faut dire que je débute en codage, donc je me lance dans l'utilisation de plein de codes compliqués que je ne sais pas forcément interpréter, alors je suis assez désemparé devant un problème aussi ridicule qu'une histoire de centrage ^^'

Xude
Nouveau membre

Messages : 14
Inscrit(e) le : 18/12/2012

http://sanctumspiritum.forums-actifs.com/
Xude a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu en accordéon à centrer

Message par Adam_sfp le Sam 12 Jan 2013 - 22:14

Bonsoir

Et en enlevant
Code:
<div style="position: relative; width: 800px; margin: 5px auto;">
dans la partie Html?

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu en accordéon à centrer

Message par Xude le Sam 12 Jan 2013 - 22:20

Oh.

Ça fonctionne °°

Merci énormément pour ton aide, sans toi j'aurais tourné en rond pendant encore bien longtemps !

Je me sent vraiment bête, c'était une tout petite manipulation x)

Encore merci, et bonne soirée :3

Xude
Nouveau membre

Messages : 14
Inscrit(e) le : 18/12/2012

http://sanctumspiritum.forums-actifs.com/
Xude a été remercié(e) par l'auteur de ce sujet.

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


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