Menu accordéon

[Solid6Snake]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.entraide-youtubers.com/

Description du problème

Bonjour, je viens de placer un menu accordéon tout est ok par contre il est trop large ce menu.

Comment réduire un peu la hauteur du bloc?

Je ne trouve pas dans la feuille de style CSS pourtant j'ai cherché..

Merci d'avance!

[MlleAlys]

Bonjour,
Le réglage de la hauteur ne se fait pas dans le css mais directement dans le code de l'accordéon. Quel est votre code actuel ?

[Solid6Snake]

Bonjour et merci de répondre c'est sympa

Je souhaite diminuer juste la hauteur du bloc en faite mais je ne trouve pas la ligne pour modifier dans le code.


Voilà mon code dans affichage:

Code:

<div id="accordeon-pa" class="accordion">
                            
   <ol>
                                   
      <li>
                                          
         <h2>
                      <span>Animation</span>         
         </h2>
                                          
         <div>
                                    <figure>                <a href="https://www.youtube.com/watch?v=iCR5xBjFluU" target="_blank"><img src="https://i.ytimg.com/vi_webp/iCR5xBjFluU/mqdefault.webp" alt="" /></a>              </figure>                     
         </div>
                                      
      </li>
                                   
      <li>
                                          
         <h2>
                      <span>Miniature</span>         
         </h2>
                                          
         <div>
                                    <figure>            <a rel="nofollow" target="_blank" class="postlink" href="https://www.youtube.com/watch?v=bXrutNlXDRw"><img alt="" border="0" src="https://i.ytimg.com/vi_webp/bXrutNlXDRw/mqdefault.webp" /></a>                </figure>                     
         </div>
                                      
      </li>
                                   
      <li>
                                          
         <h2>
                      <span>Interview</span>         
         </h2>
                                          
         <div>
                                    <figure>                <a href="https://www.youtube.com/watch?v=PXpDZZjcRS4&feature=youtu.be&list=PL6mtO37tKk8LIgTUTbaUNXvYcO5eryR3b" class="postlink" target="_blank" rel="nofollow"><img src="https://i.ytimg.com/vi_webp/qLcWCCUy5rU/mqdefault.webp" border="0" alt="" /></a>              </figure>                     
         </div>
                                      
      </li>
                                   
      <li>
                                          
         <h2>
                      <span>Top 10</span>         
         </h2>
                                          
         <div>
                                    <figure>                <a rel="nofollow" target="_blank" class="postlink" href="https://www.youtube.com/watch?v=Mul1RIO_tTs"><img alt="" border="0" src="https://i.ytimg.com/vi_webp/36_FNjS2YI8/mqdefault.webp" /></a>              </figure>                     
         </div>
                                      
      </li>
                                   
      <li>
                                          
         <h2>
                      <span>Meilleur montage</span>         
         </h2>
                                          
         <div>
                                    <figure>              <a href="https://www.youtube.com/watch?v=V7K3_HwUpV0" class="postlink" target="_blank" rel="nofollow"><img src="https://i.ytimg.com/vi_webp/V7K3_HwUpV0/mqdefault.webp" border="0" alt="" /></a>              </figure>                     
         </div>
                                      
      </li>
                               
   </ol>
</div>

[Solid6Snake]

C'est border "o" qu'il faut modifier à chaque fois ?

J'ai beau regarder ce code je ne vois vraiment pas ou changer la dimension du bloc accordéon.

[MlleAlys]

par Solid6Snake Aujourd'hui à 7:51
par Solid6Snake Aujourd'hui à 13:47

..

Bonjour, Je vous rappelle qu'il est autorisé un seul UP ou double post par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné ! Pour ajouter ou modifier des informations de votre message précédent, merci d'éditer celui-ci plutôt que de poster à nouveau directement à sa suite. Je vous invite à lire : - Règles générales du forum - Charte de ce forum A bientôt sur ForumActif

Et pour afficher un code dans un mesage, merci également de le mettre entre balises "code" :

Code:

[code] LE CODE ICI [/code]

Cela permettra de prendre moins de place et de le rendre plus lisible grâce notamment à la préservation des caractères blancs, à la colorisation, etc.


Concernant la taille, je suis désolée je me suis trompée ce n'est pas dans le code de base, c'est ajouté à celui-ci grâce au javascript, je peux voir votre code javascript ? ^^

[Solid6Snake]

J'ai édité mon premier post désolé je n'ai pas l'habitude généralement je regarde vos tutos et ça passe tout seul mais là..

Voilà mon code:

Code:

$(document).ready(function() {
  $("#accordeon-pa").each(function(){
    $(this).liteAccordion({
      autoPlay:true,
      pauseOnHover:true,
      rounded:true,
      enumerateSlides:true,
      containerWidth: 960,
      containerHeight: 320
    })
  });
});
/*************************************************!
*
*  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:800,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:6000,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);

[Solid6Snake]

Ah autant pour moi c'est la ligne containerHeight: 320

Je viens seulement de le voir alors que j'avais le code devant les yeux lol

Encore désdolé merci c'est quand même avec votre aide

Sujet résolu encore merci

[MlleAlys]

par Solid6Snake Aujourd'hui à 21:59
par Solid6Snake Aujourd'hui à 22:03

..

Bonjour, Je vous rappelle à nouveau qu'il est autorisé un seul UP ou double post par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné ! Pour ajouter ou modifier des informations, merci d'éditer votre message précédent plutôt que de poster à nouveau directement à sa suite ! Je vous invite à lire : - Règles générales du forum - Charte de ce forum A bientôt sur ForumActif

Ce n'est pas le premier message du sujet que vous devez éditer mais le dernier si c'est vous qui l'avez posté... En gros vous ne pouvez pas poster deux messages à la suite s'il n'y a pas eu 24h d'écoulé entre les deux !

Et c'était effectivement bien là, je verrouille le sujet donc ^^