Mettre une image de fond.
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Mettre une image de fond.
Bonsoir, j'aimerai savoir comment mettre une image de fond dans un menu coulissant ( à chaque catégorie).
Voici mon menu coulissant.
Code javascript :
Code CSS :
Merci,
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&#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&titlesColor=ffffff&color=7d7d7d&autoPlay=no&lang=fr" /><param name="wmode" value="transparent" /><embed src="http://static.radionomy.com/flash/BannerEmbed.swf?RadUID=a829757c-6441-40c3-94f8-81835adb8419&titlesColor=ffffff&color=7d7d7d&autoPlay=no&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&titlesColor=ffffff&color=7d7d7d&autoPlay=no&lang=fr" /><param name="wmode" value="transparent" /><embed src="http://static.radionomy.com/flash/BannerEmbed.swf?RadUID=d1032901-c4c6-461f-b105-141f46e7f427&titlesColor=ffffff&color=7d7d7d&autoPlay=no&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&titlesColor=ffffff&color=7d7d7d&autoPlay=no&lang=fr" /><param name="wmode" value="transparent" /><embed src="http://static.radionomy.com/flash/BannerEmbed.swf?RadUID=389b45d8-e52a-4d63-9ddb-9b8421301dbc&titlesColor=ffffff&color=7d7d7d&autoPlay=no&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&titlesColor=ffffff&color=7d7d7d&autoPlay=no&lang=fr" /><param name="wmode" value="transparent" /><embed src="http://static.radionomy.com/cdn/flash/BannerEmbed.swf?RadUID=a7e1fe34-c505-4059-aa0d-dd1774492129&titlesColor=ffffff&color=7d7d7d&autoPlay=no&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; }
Merci,
Dernière édition par supergogetass4 le Dim 12 Mai 2013 - 15:45, édité 2 fois
Re: Mettre une image de fond.
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 ^^"
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 ^^"
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Mettre une image de fond.
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.
J'ai essayé mais le fond deviens blancs à la place de l'image que je veux.
Re: Mettre une image de fond.
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 }
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Mettre une image de fond.
Merci, ça marche.
Re: Mettre une image de fond.
de rien ^^
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Sujets similaires
» Comment mettre une image en fond lorsque notre bannière est déjà le fond ?
» Comment mettre une image de fond à la chatbox?(Image que l'on voit lorque l'on est pas connecté).
» Mettre une image de fond à un header de fond
» Mettre une image de fond ici
» Mettre un image en fond des onglets
» Comment mettre une image de fond à la chatbox?(Image que l'on voit lorque l'on est pas connecté).
» Mettre une image de fond à un header de fond
» Mettre une image de fond ici
» Mettre un image en fond des onglets
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum