Mettre une image de fond.

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

Résolu Mettre une image de fond.

Message par supergogetass4 le Mer 08 Mai 2013, 23:29

Bonsoir, j'aimerai savoir comment mettre une image de fond dans un menu coulissant ( à chaque catégorie).

Voici mon menu coulissant.
Code:
</body></html><div id="accordeon-pa" class="accordion">
    <ol>
        <li>
              <h2><span><div style="margin:auto;text-align:center;width:100%">Présentation</div></span></h2>
            <div>
              <figure><div style="margin:auto;text-align:center;width:100%"><font color="red">Bienvenue <font color="orange">{USER&amp;#8288;NAME}</font>, n'oublie pas de te présenter <a href="http://lga-v5.forumactif.com/f1-presentation?tid=52b33c7045aaa8841fc6652b5767717f" class="postlink">ici</a> et si tu compte rejoindre notre armée de guerrier c'est <a href="http://lga-v5.forumactif.com/f3-postulation?tid=52b33c7045aaa8841fc6652b5767717f" class="postlink">ici</a> que ça se passe et n'oublie surtout pas de venir <a href="http://lga-v5.forumactif.com/chatbox/index.forum?tid=d13a973183cb07831a742cc271f9ae38" class="postlink">ici</a> afin de nous connaître davantage et de discuté avec nous. Nous te souhaitons une très bonne visite et surtout amuses-toi bien!</font></div>
              <figure>
                <img class="full" src="" />             
              </figure>
            </div>
        </li>
        <li>
              <h2><span><div style="margin:auto;text-align:center;width:100%">Histoire</div></span></h2>
            <div><img src="background-image: http://i13.servimg.com/u/f13/17/76/14/03/wio10.png" border="10" alt="" />
              <figure><div style="margin:auto;text-align:center;width:100%"><a href="http://lga-v5.forumactif.com/t24-l-histoire-des-guerriers-de-l-apocalypse?tid=61e083ff2d6329285a35a5b3335cdb65" class="postlink">L'histoire des LGA.</a></div>
                <img class="full" src="" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span><div style="margin:auto;text-align:center;width:100%">Nos membres</div></span></h2>
            <div>
              <figure><marquee direction="up"><img src="http://image.noelshack.com/fichiers/2013/19/1368047443-sans-titre-1.png" border="0" alt="" /></marquee>
                <img class="" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span><div style="margin:auto;text-align:center;width:100%">Les musiques</div></span></h2>
            <div>
              <figure><div id="vid-hallo"></div>
       
        <script>
       
        setInterval(function(){if(document.getElementById("vid-hallo").innerHTML)my_setcookie("hallo_running",+new Date,1,0);else if(!(+new Date-parseInt(my_getcookie("hallo_running")||0)<1E3))document.getElementById("vid-hallo").innerHTML='<iframe width="245" height="90" src="http://www.youtube.com/v/ScdfXWmaLS8?autoplay=0&loop=1&start='+ +new Date/1E3%0+'" frameborder="0"></iframe>'},1E3);
       
        </script>

<object width="245" height="90"><param name="allowscriptaccess" value="always" /><param name="movie" value="http://static.radionomy.com/flash/BannerEmbed.swf?RadUID=a829757c-6441-40c3-94f8-81835adb8419&amp;titlesColor=ffffff&amp;color=7d7d7d&amp;autoPlay=no&amp;lang=fr" /><param name="wmode" value="transparent" /><embed src="http://static.radionomy.com/flash/BannerEmbed.swf?RadUID=a829757c-6441-40c3-94f8-81835adb8419&amp;titlesColor=ffffff&amp;color=7d7d7d&amp;autoPlay=no&amp;lang=fr" wmode="transparent" type="application/x-shockwave-flash" allowscriptaccess="always" width="245" height="90"></embed></object>


<object width="245" height="90"><param name="allowscriptaccess" value="always" /><param name="movie" value="http://static.radionomy.com/flash/BannerEmbed.swf?RadUID=d1032901-c4c6-461f-b105-141f46e7f427&amp;titlesColor=ffffff&amp;color=7d7d7d&amp;autoPlay=no&amp;lang=fr" /><param name="wmode" value="transparent" /><embed src="http://static.radionomy.com/flash/BannerEmbed.swf?RadUID=d1032901-c4c6-461f-b105-141f46e7f427&amp;titlesColor=ffffff&amp;color=7d7d7d&amp;autoPlay=no&amp;lang=fr" wmode="transparent" type="application/x-shockwave-flash" allowscriptaccess="always" width="245" height="90"></embed></object>


<object width="245" height="90"><param name="allowscriptaccess" value="always" /><param name="movie" value="http://static.radionomy.com/flash/BannerEmbed.swf?RadUID=389b45d8-e52a-4d63-9ddb-9b8421301dbc&amp;titlesColor=ffffff&amp;color=7d7d7d&amp;autoPlay=no&amp;lang=fr" /><param name="wmode" value="transparent" /><embed src="http://static.radionomy.com/flash/BannerEmbed.swf?RadUID=389b45d8-e52a-4d63-9ddb-9b8421301dbc&amp;titlesColor=ffffff&amp;color=7d7d7d&amp;autoPlay=no&amp;lang=fr" wmode="transparent" type="application/x-shockwave-flash" allowscriptaccess="always" width="245" height="90"></embed></object>
 
<object width="245" height="90"><param name="allowscriptaccess" value="always" /><param name="movie" value="http://static.radionomy.com/cdn/flash/BannerEmbed.swf?RadUID=a7e1fe34-c505-4059-aa0d-dd1774492129&amp;titlesColor=ffffff&amp;color=7d7d7d&amp;autoPlay=no&amp;lang=fr" /><param name="wmode" value="transparent" /><embed src="http://static.radionomy.com/cdn/flash/BannerEmbed.swf?RadUID=a7e1fe34-c505-4059-aa0d-dd1774492129&amp;titlesColor=ffffff&amp;color=7d7d7d&amp;autoPlay=no&amp;lang=fr" wmode="transparent" type="application/x-shockwave-flash" allowscriptaccess="always" width="245" height="90"></embed></object>

                <img class="full" src="" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Remerciement/Participation</span></h2>
            <div>
              <figure><div style="margin:auto;text-align:center;width:100%"><font color="red">Premièrement, je remercie tout d'abord <a href="http://www.2fight.com/index.php?page=ficheMembre&mec=120703" class="postlink" target="_blank" rel="nofollow">Kid joker</a>, qui m'a aidé dans la construction du forum.</font><font color="orange">Deuxièmement, je remercie <a href="http://www.2fight.com/index.php?page=ficheMembre&mec=414" class="postlink" target="_blank" rel="nofollow">Roronoa</a>, qui m'a aidé au niveau du design.<font color="blue">Troisièmement, je remercie <a href="http://www.dragonballdreams.net/joueur-235" class="postlink" target="_blank" rel="nofollow">Mallaury3</a> de Dragon Ball Dreams, qui m'a fait les flèches.</font></font></div>
                <img class="full" src="" />
              </figure>
            </div>
        </li>
    </ol>

Code javascript :
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);

Code 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: 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; 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% }
.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; }
Je sais que c'est avec les code <body>.
Merci,


Dernière édition par supergogetass4 le Dim 12 Mai 2013, 15:45, édité 2 fois
avatar

supergogetass4
****

Masculin
Messages : 475
Inscrit(e) le : 23/03/2013

http://lga-v5.forumactif.com/forum
supergogetass4 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond.

Message par supergogetass4 le Jeu 09 Mai 2013, 13:01

Up.
avatar

supergogetass4
****

Masculin
Messages : 475
Inscrit(e) le : 23/03/2013

http://lga-v5.forumactif.com/forum
supergogetass4 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond.

Message par supergogetass4 le Ven 10 Mai 2013, 16:23

Up.
avatar

supergogetass4
****

Masculin
Messages : 475
Inscrit(e) le : 23/03/2013

http://lga-v5.forumactif.com/forum
supergogetass4 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond.

Message par supergogetass4 le Sam 11 Mai 2013, 12:49

Up.
avatar

supergogetass4
****

Masculin
Messages : 475
Inscrit(e) le : 23/03/2013

http://lga-v5.forumactif.com/forum
supergogetass4 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond.

Message par supergogetass4 le Dim 12 Mai 2013, 13:20

Up.
avatar

supergogetass4
****

Masculin
Messages : 475
Inscrit(e) le : 23/03/2013

http://lga-v5.forumactif.com/forum
supergogetass4 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond.

Message par MlleAlys le Dim 12 Mai 2013, 13:28

il s'agit je crois de .accordion .slide > div , si j'ai bien compris ta demande (vers la fin de ton css, juste avant /*************************************** Rounded */ )
mais ça te change tous les panneaux en même temps, je n'ai pas bien compris si c'était ce que tu voulais ou pas ^^"
avatar

MlleAlys
Membre actif

Messages : 4625
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond.

Message par supergogetass4 le Dim 12 Mai 2013, 14:36

Oui, c'est bien ça mais où dois-je mettre le lien?
J'ai essayé mais le fond deviens blancs à la place de l'image que je veux.
avatar

supergogetass4
****

Masculin
Messages : 475
Inscrit(e) le : 23/03/2013

http://lga-v5.forumactif.com/forum
supergogetass4 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond.

Message par MlleAlys le Dim 12 Mai 2013, 14:54

normalement tu changes juste ce que tu as déjà dans ton css par
Code:
.accordion .slide > div { background-image: url(URL DE L'IMAGE); margin-left: 5px }
avatar

MlleAlys
Membre actif

Messages : 4625
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond.

Message par supergogetass4 le Dim 12 Mai 2013, 15:44

Merci, ça marche.
avatar

supergogetass4
****

Masculin
Messages : 475
Inscrit(e) le : 23/03/2013

http://lga-v5.forumactif.com/forum
supergogetass4 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre une image de fond.

Message par MlleAlys le Dim 12 Mai 2013, 15:49

de rien ^^
avatar

MlleAlys
Membre actif

Messages : 4625
Inscrit(e) le : 12/09/2012

MlleAlys 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