apparence accueil accordeon

[emc2]

Bonsoir,

Je rencontre un gros soucis de format actuellement. Sur un forum de test que j'utilise pour faire des essais, j'ai créé un accueil avec un panneau en accordéon. Il fonctionne parfaitement bien. Malheureusement, quand je veux l'appliquer sur le forum auquel il est destiné, ce même panneau prend des dimensions démesurées. Apparemment, il deux fois plus grand que prévu. Je ne comprends pas d'ou cela peut venir.

ici l'accordeon avec ses dimensions voulues: http://vote-archives.forumgratuit.org/

et là le forum sur lequel je dois le poser, mais il est beaucoup trop grand ! http://politique.forum-actif.net/

Si vous pouviez m'aider à résoudre ce poblème d'apparence, merci beaucoup.
le html que mis dans: affichage, généralité, message sur la page d'accueil

Code:

<div id="accordeon-pa" class="accordion">
    <ol>
        <li>
            <h2><font size="6"><span>La commune</span></font></h2>
            <div>
              <figure>
                <a href="http://politique.forum-actif.net/f132-commune-du-forum"><img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord16.jpg" alt="image" /></a>
              </figure>
            </div>
        </li>
        <li>
            <h2><font size="6"><span>L' U.H.P.</span></font></h2>
            <div>
              <figure>
              <a href="http://politique.forum-actif.net/f22-l-union-pour-l-humanite-et-pour-la-paix"><img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord19.jpg" alt="image" /></a>
              </figure>
            </div>
        </li>
        <li>
            <h2><font size="6"><span>L' A.F.N.</span></font></h2>
            <div>
              <figure>
              <a href="http://politique.forum-actif.net/f23-alliance-francaise-nationaliste"><img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord17.jpg" alt="image" /></a>
              </figure>
            </div>
        </li>
        <li>
            <h2><font size="6"><span>Le P.A.N.</span></font></h2>
            <div>
              <figure>
              <a href="http://politique.forum-actif.net/f21-peuples-avenir-nation"><img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord18.jpg" alt="image" /></a>
              </figure>
            </div>
        </li>
        <li>
            <h2><font size="6"><span>Maison Royale</span></font></h2>
            <div>
              <figure>
                <a href="http://politique.forum-actif.net/f5-la-maison-royale"><img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord20.jpg" alt="image" /></a>
              </figure>
            </div>
        </li>
        <li>
            <h2><font size="6"><span>Le M.E.I.S.</span></font></h2>
            <div>
              <figure>
                <a href="http://politique.forum-actif.net/f66-mouvement-europeen-imperial-et-social"><img class="full" src="http://i49.servimg.com/u/f49/17/19/42/30/accord21.jpg" alt="image" /></a>
              </figure>
            </div>
        </li>
    </ol>
</div>

là, c'est mon script que j'ai placé dans mes javascript

Code:

$(document).ready(function() {
  $("#accordeon-pa").each(function(){
    $(this).liteAccordion({
      autoPlay:true,
      pauseOnHover:true,
      rounded:true,
      enumerateSlides:true,
      containerWidth: 1300,
      containerHeight: 350
    })
  });
});
/*************************************************!
*
*  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
*
**************************************************/
(function(b){var a=function(g,l){var i={headerWidth:48,activateOn:"click",firstSlide:1,slideSpeed:1200,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:9000,easing:"swing",theme:"basic",rounded:false,enumerateSlides:false,linkable:false},h=b.extend({},i,l),c=g.children("ol").children("li"),j=c.children(":first-child"),k=c.length,f=h.containerWidth-k*h.headerWidth,e={play:function(m){var n=d.nextSlide(m&&m);if(d.playing){return}d.playing=setInterval(function(){j.eq(n()).trigger("click.liteAccordion")},h.cycleSpeed)},stop:function(){clearInterval(d.playing);d.playing=0},next:function(){e.stop();j.eq(d.currentSlide===k-1?0:d.currentSlide+1).trigger("click.liteAccordion")},prev:function(){e.stop();j.eq(d.currentSlide-1).trigger("click.liteAccordion")},destroy:function(){e.stop();b(window).unbind(".liteAccordion");g.attr("style","").removeClass("accordion basic dark light stitch").removeData("liteAccordion").unbind(".liteAccordion").find("li > :first-child").unbind(".liteAccordion").filter(".selected").removeClass("selected").end().find("b").remove();c.removeClass("slide").children().attr("style","")},debug:function(){return{elem:g,defaults:i,settings:h,methods:e,core:d}}},d={setStyles:function(){g.width(h.containerWidth).height(h.containerHeight).addClass("accordion").addClass(h.rounded&&"rounded").addClass(h.theme);c.addClass("slide").children(":first-child").width(h.containerHeight).height(h.headerWidth).eq(h.firstSlide-1).addClass("selected");j.each(function(m){var p=b(this),o=m*h.headerWidth,n=j.first().next(),q=parseInt(n.css("marginLeft"),10)||parseInt(n.css("marginRight"),10)||0;if(m>=h.firstSlide){o+=f}p.css("left",o).next().width(f-q).css({left:o,paddingLeft:h.headerWidth});h.enumerateSlides&&p.append("<b>"+(m+1)+"</b>")})},bindEvents:function(){if(h.activateOn==="click"){j.bind("click.liteAccordion",d.triggerSlide)}else{if(h.activateOn==="mouseover"){j.bind({"mouseover.liteAccordion":d.triggerSlide,"click.liteAccordion":d.triggerSlide})}}if(h.pauseOnHover&&h.autoPlay){g.bind("mouseover.liteAccordion",function(){d.playing&&e.stop()}).bind("mouseout.liteAccordion",function(){!d.playing&&e.play(d.currentSlide)})}},linkable:function(){var m=(function(){var o=[];c.each(function(){if(b(this).attr("name")){o.push((b(this).attr("name")).toLowerCase())}});return m=o})();var n=function(p){var o;if(p.type==="load"&&!window.location.hash){return}if(p.type==="hashchange"&&d.playing){return}o=b.inArray((window.location.hash.slice(1)).toLowerCase(),m);if(o>-1&&o<m.length){j.eq(o).trigger("click.liteAccordion")}};b(window).bind({"hashchange.liteAccordion":n,"load.liteAccordion":n})},currentSlide:h.firstSlide-1,nextSlide:function(m){var n=m+1||d.currentSlide+1;return function(){return n++%k}},playing:0,animSlideGroup:function(m,o,n){var p=n?":lt("+(m+1)+")":":gt("+m+")";c.filter(p).each(function(){var r=b(this),q=c.index(r);r.children().stop(true).animate({left:(n?0:f)+q*h.headerWidth},h.slideSpeed,h.easing,function(){if(!d.slideAnimCompleteFlag){h.onSlideAnimComplete.call(o);d.slideAnimCompleteFlag=true}})})},slideAnimCompleteFlag:false,triggerSlide:function(p){var o=b(this),m=j.index(o),n=o.next();d.currentSlide=m;d.slideAnimCompleteFlag=false;j.removeClass("selected").filter(o).addClass("selected");if(p.originalEvent&&h.autoPlay){e.stop();e.play(m)}if(h.linkable&&!d.playing){window.location.hash=o.parent().attr("name")}h.onTriggerSlide.call(n);d.animSlideGroup(m,n,true);d.animSlideGroup(m,n)},ieClass:function(){var m=+(b.browser.version).charAt(0);if(m<7){e.destroy()}if(m===7||m===8){c.each(function(n){b(this).addClass("slide-"+n)})}g.addClass("ie ie"+m)},init:function(){if(b.browser.msie){d.ieClass()}d.setStyles();d.bindEvents();if(h.cycleSpeed<h.slideSpeed){h.cycleSpeed=h.slideSpeed}if(h.linkable&&"onhashchange" in window){d.linkable()}h.autoPlay&&e.play()}};d.init();return e};b.fn.liteAccordion=function(e){var d=this,c=d.data("liteAccordion");if(typeof e==="object"||!e){return d.each(function(){var f;if(c){return}f=new a(d,e);d.data("liteAccordion",f)})}else{if(typeof e==="string"&&c[e]){if(e==="debug"){return c[e].call(d)}else{c[e].call(d);return d}}}}})(jQuery);

ici 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: '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: 40; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }
 
/***************************************** Light */
.accordion {
    border: 9px solid #cadceb;
    border-bottom-width: 8px;
    padding: 5px 5px 6px 0;
    background: #030303;
    -webkit-box-shadow: -1px -1px 0 #CADCEB, 1px 1px 0 #CADCEB, 0 5px 15px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: -1px -1px 0 #CADCEB, 1px 1px 0 #CADCEB, 0 5px 15px rgba(0, 0, 0, 0.4);
    -ms-box-shadow: -1px -1px 0 #CADCEB, 1px 1px 0 #CADCEB, 0 5px 15px rgba(0, 0, 0, 0.4);
    -o-box-shadow: -1px -1px 0 #CADCEB, 1px 1px 0 #CADCEB, 0 5px 15px rgba(0, 0, 0, 0.4);
  box-shadow: -1px -1px 0 #CADCEB, 1px 1px 0 #CADCEB, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 white; line-height: 265% }
.accordion .slide > h2 span {
    background: #cadceb;
    background: -moz-linear-gradient(left,  #cadceb 0%, #cadceb 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#cadceb), color-stop(100%,#cadceb));
    background: -webkit-linear-gradient(left,  #cadceb 0%,#cadceb 100%);
    background: -o-linear-gradient(left,  #cadceb 0%,#cadceb 100%);
    background: -ms-linear-gradient(left,  #cadceb 0%,#cadceb 100%);
    background: linear-gradient(left,  #cadceb 0%,#cadceb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
    -webkit-box-shadow: -1px -1px 0 #030303 inset, 1px 1px 0 #030303 inset;
    -moz-box-shadow: -1px -1px 0 #030303 inset, 1px 1px 0 #030303 inset;
    -o-box-shadow: -1px -1px 0 #030303 inset, 1px 1px 0 #030303 inset;
  box-shadow: -1px -1px 0 #030303 inset, 1px 1px 0 #030303 inset;
    color: #030303;
}
.accordion .slide > h2 b { background: #cadceb; color: #cadceb; 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: #cadceb; 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; }
/* .systab .tab => les onglet */
.systab .tab {
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
}

[mimi-76-]

Bonjour, votre accordéon, change sa taille car, votre forum n'est pas de la même taille.

[emc2]

ok, et comment puis-je réduire la taille de mon accordéon afin de l'adapter au second forum ?

[emc2]

ok, et comment puis-je réduire la taille de mon accordéon afin de l'adapter au second forum ?

................. en fait, je viens de voir que dans le script je pouvais réduire les dimensions du tableau,

Code:

containerWidth: 1300,
      containerHeight: 350

sur ces deux lignes. Chose étrange, cela réduit bien mon accordéon sur mon forum de test, mais sur le forum de destination, même avec les nouvelles dimensions revue à la baisse, ça ne change rien, mon accordéon est toujours aussi démesuré. De plus les images hébergées sont beaucoup plus trouble. je suppose que c'est le résultat de l'agrandissement non désiré qui provoque cela.
Donc si quelqu'un peut me donner une indication pour ajuster ces dimensions, je lui en serais reconnaissant.

[mimi-76-]

containerWidth: 1300,
containerHeight: 350

Bonjour, il est déconseiller de toucher au code javascript.

Et de plus, un administrateur vas vous dire qu'il est interdit up avant 24h, qu'il faut faire edit .

[Manumanu]

@mimi-76: Il n'y a pas grand mal à toucher à une fonction javascript ; du reste, il ne fait là que renseigner des paramètres de la fonction, ce qui est tout à fait normal et prévu

@emc2: Je ne vois pas l'accordéon sur le forum en question ? Il faudrait que je puisse le regarder pour chercher ce qui ne va pas.

[Ea]

Bonjour,


On peut toucher au javascript, et surtout les paramètres dont le changement sont le plus utile ont été mis en haut exprès :

( ce qu'il y a en bas il ne devrait pas y avoir besoin d'y toucher )

Code:

$(document).ready(function() {
  $("#accordeon-pa").each(function(){
    $(this).liteAccordion({
      autoPlay:true, /* passer d'un slide à l'autre automatiquement */
      pauseOnHover:true, /* arrêter le défilement si on survole avec la souris */
      rounded:true, /* arrondis */
      enumerateSlides:true, /* numéroter les slides */
      containerWidth: 1300, /* largeur en pixels */
      containerHeight: 350 /* hauteur en pixels */
    })
  });
});

On peut également le personnaliser par d'autres options indiquées là :
http://nicolahibbert.com/demo/liteAccordion/

Chose étrange, cela réduit bien mon accordéon sur mon forum de test, mais sur le forum de destination, même avec les nouvelles dimensions revue à la baisse, ça ne change rien, mon accordéon est toujours aussi démesuré. De plus les images hébergées sont beaucoup plus trouble. je suppose que c'est le résultat de l'agrandissement non désiré qui provoque cela.
Donc si quelqu'un peut me donner une indication pour ajuster ces dimensions, je lui en serais reconnaissant.

Le script est peut-être deux fois sur le forum ( et il y a l'autre version avec les mauvaises dimensions ).

Cordialement.

[emc2]

J'ai vérifié, et le script ne s'y trouve pas deux fois. Quand au fait que l'on ne voit pas l'accordeon sur le forum qui doit l'accueillir, je ne l'y met pas car il prend les deux tiers de l'écran, c'est très gênant pour les membres du forum.
J'ai remarqué une différence entre les deux forum. Le forum de test est un phpBB2, le forum de destination est un phpBB3. Ensuite dans le forum de destination, dans le PA, général, configuration, structure des pages, j'ai deux paramètres: "hauteur de la cellule image catégoie/forum" et idem pour la largeur, il sont rensignés à 40px, alors que sur mon forum de test, je n'ai pas des paramètres.
Je n'ai toujours pas trouvé la solution pour mettre cet accordéon de manière acceptable.

[Ea]

Si je test sur le forum avec ce que vous avez mis dans :
http://vote-archives.forumgratuit.org/

=> https://i.imgur.com/3uvZD.png

J'ai exactement les mêmes dimensions sur l'autre forum :

=> https://i.imgur.com/oEDqX.png

( et ce sont bien les dimensions mentionnées dans le script )


Cordialement.

[emc2]

Même en diminuant la taille des mes images pour chaque panneaux, j'obtiens invariablement ceci sur le forum:

Spoiler:

Alors que l'accordeon devrait se présenter comme ceci:

Spoiler:

EDIT ...

C'est ok, j'ai trouvé l'erreur ! je n'avais pas sélectionné "sur le portail" au dessus, l'on doit choisir ou cela doit apparaître, je n'avais rien sélectionné. C'est ok, cela marche à présent !