Probleme code accordeon redimmension Bouton_activeProbleme code accordeon redimmension Bouton_hoverProbleme code accordeon redimmension Fb-hoverProbleme code accordeon redimmension Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Probleme code accordeon redimmension EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Probleme code accordeon redimmension EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Probleme code accordeon redimmension EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Probleme code accordeon redimmension EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Probleme code accordeon redimmension EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Probleme code accordeon redimmension EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Probleme code accordeon redimmension EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Probleme code accordeon redimmension EmptySam 11 Fév 2023, 06:04 par Krager

-20%
Le deal à ne pas rater :
Sony PULSE Elite – Casque PS5 sans fil (blanc) à 119€
119 € 149 €
Voir le deal

Partagez
 

Probleme code accordeon redimmension

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://expert-wrestling.forumpro.fr/
EWF
{ Membre }
{ Membre }

Masculin Messages : 22



Probleme code accordeon redimmension Empty
Bonjours , c'est encore moi xD

Donc voilà j'ai utiliser un tuto accordeon : http://forum.forumactif.com/t327581-message-d-accueil-en-accordeon

Voici mon forum :

Vous pouvez constatez qu'il y a une marge , j'ai beau refaire une image , sa la redimensionne directement et ne prend pas toute l'espace . Etant content de vos services , je vous remercie d'avance , si quelqu'un peut jeter un coup d'oeil

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: 100%;
        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: 11%;
        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 }

    /****************************************** Dark */
    .accordion {
        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);
        -ms-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);
    }
    .accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
    .accordion .slide > h2 span { background: #353535; color: white }
    .accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
    .accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
        background: #353535;
        background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
        background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
        background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
        background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
        background: linear-gradient(left,  #353535 0%,#555555 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
    }
    .accordion .slide > h2.selected b {
        background: #383838;
        background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
        background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
        background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
        background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
        background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    }
    .accordion .slide > div { background: #030303;  }

    /*************************************** 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% }
    .ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

    /******************************************** FA */
    .accordion figure .full { width: 100%; height: 100%; }
    .accordion h2 { border: none; }

    /* centrer l'accordéon */
    .accordion { margin: auto; }

Java :
Code:
$(document).ready(function() {
          $("#accordeon-pa").each(function(){
            $(this).liteAccordion({
              autoPlay:true,
              pauseOnHover:true,
              rounded:true,
              enumerateSlides:true,
              containerWidth: 960,
              containerHeight: 300
            })
          });
        });
        /*************************************************!
        *
        *  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);

Generalité :
Code:
<div style="position: relative; width: 700px; margin: 2px auto;top:110;left:20"><div id="accordeon-pa" class="accordion">
                    <ol>
                     
                        <li>
                            <h2><span>Inscription</span></h2>
                            <div>
                              <figure>
                              <img class="full" src="http://image.noelshack.com/fichiers/2012/24/1339717371-EWFPresentation.png" alt="image">
                              </figure>
                            </div>
                        </li>
                <li>
                            <h2><span>Champion Thunder</span></h2>
                            <div>
                              <figure>
                              <img class="full" src="<a href="http://www.casimages.com/img.php?i=12100904490926242.png" class="postlink" target="_blank" rel="nofollow"><img src="http://nsa31.casimages.com/img/2012/10/09/12100904490926242.png" border="0" alt="" /></a>
                              </figure>
                            </div>
                        </li>
                <li>
                            <h2><span>Champion Nitro </span></h2>
                            <div>
                              <figure>
                              <img class="full" src="<a href="http://www.casimages.com/img.php?i=121009045531236966.png" class="postlink" target="_blank" rel="nofollow"><img src="http://nsa31.casimages.com/img/2012/10/09/121009045531236966.png" border="0" alt="" /></a>
                              </figure>
                            </div>
                        </li>
             
             
             
                </ol></div></div>


Autant vous avouez forum actif a pas sur me repondre , merci d'avance Very Happy
MessageSujet: Probleme code accordeon redimmension   Probleme code accordeon redimmension EmptyVen 12 Oct 2012, 11:03
Revenir en haut Aller en bas
Doare
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



Probleme code accordeon redimmension Empty
La solution va être assez simple... ajouter à ton CSS la règle suivante :
Code:
.accordion figure {
  margin:0;
}

A part ça, dans ton HTML, tu as deux lignes mal formées de ce type :
Code:
<img class="full" src="<a href="http://www.casimages.com/img.php?i=12100904490926242.png" class="postlink" target="_blank" rel="nofollow"><img src="http://nsa31.casimages.com/img/2012/10/09/12100904490926242.png" border="0" alt="" /></a>
Un intrus avant le début de ton lien pour les images des 2e et 3e onglets. Smile
Et attention, en corrigeant, n'oublie pas de reporter class="full" à tes images...
MessageSujet: Re: Probleme code accordeon redimmension   Probleme code accordeon redimmension EmptyVen 12 Oct 2012, 14:24
Revenir en haut Aller en bas
http://expert-wrestling.forumpro.fr/
EWF
{ Membre }
{ Membre }

Masculin Messages : 22



Probleme code accordeon redimmension Empty
Un Grand merci a toi Very Happy

C'est nickel ici Very Happy

J'ai trouver l'intrus et je ne c'est pas pourquoi il etait la :s
MessageSujet: Re: Probleme code accordeon redimmension   Probleme code accordeon redimmension EmptyVen 12 Oct 2012, 17:51
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Probleme code accordeon redimmension Empty
Hello !
Le problème semble être résolu, je me permets donc de classer (:
S'il y a un souci, n'hésite pas à le signaler à un modérateur !
Merci de ta compréhension Probleme code accordeon redimmension 926145
MessageSujet: Re: Probleme code accordeon redimmension   Probleme code accordeon redimmension EmptyVen 12 Oct 2012, 18:03
Revenir en haut Aller en bas
Contenu sponsorisé




Probleme code accordeon redimmension Empty
MessageSujet: Re: Probleme code accordeon redimmension   Probleme code accordeon redimmension Empty
Revenir en haut Aller en bas
 

Probleme code accordeon redimmension

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Problème code accordéon
» Problème d'accordéon
» Problème avec le [code][/code], besoin d'aide !!
» Problème d'iframe et affichage accordéon
» Probléme avec un script, once again, effet accordéon

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit