Bug Chatbox, les membres en ligne ne s'affichent pas

par Kaiji Ven 23 Nov 2012 - 20:12

Bonsoir !

J'ai mis le forum que j'administre en maintenance, seulement un bug apparaît avec la chatbox : les membres en ligne ne s'affichent pas :O Et j'ai eu beau farfouiller je ne vois pas tellement d'où pourrait provenir le soucis. J'ai modifié pas mal de templates (index_box, index_body, overall_header, topics_list_box, viewtopic_body, et deux templates pour la modification des messageries privées). Voilà l'apparence :
https://2img.net/image.noelshack.com/fichiers/2012/47/1353697735-sans-titre-1.png

(Par exemple là, trois membres sont en ligne mais aucun ne s'affiche, et ça le fait également quand la chatbox est affichée en grand. Comme j'ai modifié beaucoup de templates et ne voit pas lequel pourrait être la source du problème, je donne seulement le CSS et suivrai les instructions ensuite !

Code:: /*------------------------------- BANNIÈRE MAINTENANCE -------------------------------*/ body{ background-position: top center; background-repeat: no-repeat; background-attachment: scroll; } /* ------------------------------- MODÈLE ADMINISTRATIF ----------------------------------*/ .fondtitreadmin{ height:100px;width:400px;background-image:url('http://image.noelshack.com/fichiers/2012/47/1353682319-haut.png');text-align:center;border-radius:200px 200px 0px 0px;padding-top:100px;padding-left:30px;padding-right:30px;line-height:20px; } .titreadmin{ color:#dbaf88;text-shadow:#fff 1px 1px 0px;font-family:cookie;font-size:50px; } .soustitreadmin{ color:#dbaf88;text-shadow:#6c3619 1px 1px 0px;font-family:cookie;font-size:30px; } .fondadmin{ background-color:#fce5c3;width:420px;padding:20px;text-align:justify;border-radius:0px 0px 10px 10px } /*------------------------------ QEEL -------------------------------*/ .qeel{ background-image:url('http://image.noelshack.com/fichiers/2012/47/1353415113-fond2.jpg');width:700px;height:450px } .titleqeel{ font-family:'Cookie', Helvetica, sans-serif; font-size:23px; color:#fff; text-shadow:#8a5536 1px 1px 0px; } .fonddeqeel{ background-color:#F1D1A1; width:730px; } .trans .row1 { background-color : transparent; text-align:justify } /* .... */ .bodylinewidth { -moz-border-radius: 3px; -webkit-border-radius: 30px; border-radius: 30px; background-color:#e5bc87; } .row3Right { border: none !important; } .thHead { border: none !important; } .thCornerL, .thCornerR, .thTop { border: none !important; } .thLeft, .thRight { border-left: none !important; border-right: none !important; } .catLeft, .catRight { border: none! important; } .catHead { border: none !important; } .catBottom { border: none !important; } /*---------------------------------- CATEGORIES ------------------------------------*/ .forumlink a { font-size:35px;font-family:'Cookie', Helvetica, sans-serif;text-shadow:#faead1 1px 1px 0px; position: relative; z-index: 25; line-height: 25%; padding-left: 100px; margin-top: 30px; margin-bottom: -10px; font-weight: 200; } .forumlink a:hover { color: #dcb000; } .swirlcorner { position: relative; z-index: 90; } .titredesc { font-weight: bold; text-transform: uppercase; font-size: 9px; color: #A6733F; } .titredesc:hover { color: #dcb000; } .topicsmessages { font-family: cookie; font-size: 20px; text-shadow:#faead1 1px 1px 0px; padding-left: 150px; margin-bottom: -20px; color: #A6733F; position: relative; z-index: 2; font-weight: 200; } .descriptionsf { width:340px;line-height:normal;font-size:11px;background-color:#e8c898;border:#e2c291 2px solid;padding:6px; border-radius:5px;height:90px;text-shadow:#faead1 1px 1px 0px; text-align: justify; overflow: auto; position: relative; z-index: 0;margin-top: 0px; height: 90px; } .sfetimage { width: 160px; font-size:11px;background-color:#e8c898;border:#e2c291 2px solid;border-radius:5px;height:120px;text-shadow:#faead1 1px 1px 0px; } .lastpost { width:140px;line-height:normal;font-size:11px;background-color:#e8c898;border:#e2c291 2px solid;padding-top:10px; border-radius:5px;height:90px;text-shadow:#faead1 1px 1px 0px;text-align:center; } .lastpost a { font-weight: 200; font-family: cookie; font-size: 20px; } .sousforum { font-size: 0px; } .sousforum a { font-size: 10px; line-height: 80%; padding: 10px; } .sousforum a:before { content: " ↬ "; } #cadresf { /* Encadrement global des 2 divs */ position:relative; width:160px; height:120px; overflow:hidden; /* Permet de cacher ce qui dépasse */ border-radius: 05px 05px 05px 05px } .imgsf { background:white; /* le bg de la div qui contient l'avatar */ position:absolute; /* Laissez comme ceci */ top:0;/* Laissez comme ceci */ left:0;/* Laissez comme ceci */ width:100%;/* Laissez comme ceci */ height:100%;/* Laissez comme ceci */ z-index:1;/* La position par rapport à l'autre div qui contient les infos */ -webkit-transition:all 1.0s;/* Laissez comme ceci */ -moz-transition:all 1.0s;/* Laissez comme ceci */ -o-transition:all 1.0s;/* Laissez comme ceci */ -ms-transition:all 1.0s;/* Laissez comme ceci */ transition:all 1.0s;/* Laissez comme ceci */ } #cadresf:hover > .imgsf { opacity: 1; } .infosf { background-image: url(http://image.noelshack.com/fichiers/2012/47/1353346671-fbgemv2.png); position:absolute;/* Laissez comme ceci */ top:0;/* Laissez comme ceci */ left:0;/* Laissez comme ceci */ width:100%;/* Laissez comme ceci */ height:100%;/* Laissez comme ceci */ z-index:2;/* La position par rapport à l'autre div qui contient les infos (ici en dessous)*/ opacity:0;/* on met l'opacité à zero pour un effet stylé ;) */ margin-top:-120px;/* on décale la div de 200px, elle est invisible grâce a l'overflow:hidden de #englob */ padding-top: 10px; -webkit-transition:all 1.0s;/* Laissez comme ceci */ -moz-transition:all 1.0s;/* Laissez comme ceci */ -o-transition:all 1.0s;/* Laissez comme ceci */ -ms-transition:all 1.0s;/* Laissez comme ceci */ transition:all 1.0s;/* Laissez comme ceci */ overflow: auto; } #cadresf:hover > .infosf { opacity:1;/* Lorsque la souris passe sur la div #englob, on augmente l'opacité des infos */ margin-top:0px;/* et on décale cette div à 0px (position par défaut) */ } /*------------------------------- BARRE DE NAVIGATION -------------------------------*/ a.mainmenu { font-size: 23px; color : #8e362d; text-shadow:#f8f5f9 1px 1px 1px; text-transform: lowercase; font-family:arial; letter-spacing:-3px; margin-top: 0px; position: relative; z-index: 15; } a.mainmenu:hover { color : #bf905c; } /*----------------------------------- LIENS -----------------------------------*/ a:link {text-decoration: none;} a:hover{text-decoration: none!important;} a {text-decoration: none;} /*-------------------------------------------PAGE D'ACCUEIL------------------------------------*/ a.pub{ color:#590d0d; text-shadow:#fff 1px 1px 0px; line-height:10px; } a.pub:hover{ color:#b16b11; letter-spacing:1px; text-shadow:#fff 1px 1px 0px; } a.ficheshelp{ color:#997131; text-shadow:#fff 1px 1px 0px; font-size:13px; font-family: Arial; letter-spacing:-1px; } a.ficheshelp:hover{ color:#993131; letter-spacing:2px; text-shadow:#fff 1px 1px 0px; } .titrepa { font-family: 'Cookie'; color:#cea86f; font-size: 50px; font-weight: 200; text-shadow: 1px 1px 0px white; margin-bottom: -100px; } .titreonglet{ letter-spacing:2px; font-size:30px; font-family: 'Cookie'; color:#72372c; text-shadow:#fff 1px 1px 0px; } .titreonglet:hover{ letter-spacing:2px; font-size:30px; font-family: 'Cookie'; color:#a15244; text-shadow:#fff 1px 1px 0px; } /*---------------------------------- NAVIGATION PA ------------------------------------*/ .tt-wrapper{ padding: 0; width: 200px; height: 30px; margin: 80px auto 10px auto; list-style: none; } .tt-wrapper li{ float: left; } .tt-wrapper li a{ display: block; width: 27px; height: 30px; margin: 0 2px; outline: none; background: transparent url(http://image.noelshack.com/fichiers/2012/47/1353529161-sans-titre-1.png) no-repeat top left; text-indent: -9000px; position: relative; } .tt-wrapper li .tt-gplus{ background-position: 0px 0px; } .tt-wrapper li .tt-twitter{ background-position: -27px 0px; } .tt-wrapper li .tt-dribbble{ background-position: -54px 0px; } .tt-wrapper li .tt-facebook{ background-position: -76px 0px; } .tt-wrapper li .tt-linkedin{ background-position: -103px 0px; } .tt-wrapper li .tt-forrst{ background-position: -128px 0px; } .tt-wrapper li a span{ width: 80px; height: auto; line-height: 20px; padding: 5px; left: 50%; margin-left: -64px; font-family: 'Cookie', Georgia, serif; font-weight: 200; font-style: italic; font-size: 22px; color: #719DAB; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #fff; background: rgba(255,255,255,0.9); text-indent: 0px; border-radius: 5px; position: absolute; bottom: 35px; opacity: 0; visibility: visible; pointer-events: none; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -webkit-transform: translate(35px) rotate(25deg) scale(1.5); -moz-transform: translate(35px) rotate(25deg) scale(1.5); -o-transform: translate(35px) rotate(25deg) scale(1.5); -ms-transform: translate(35px) rotate(25deg) scale(1.5); transform: translate(35px) rotate(25deg) scale(1.5); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tt-wrapper li a span:before, .tt-wrapper li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: 4px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1); } .tt-wrapper li a span:after{ bottom: -14px; margin-left: 7px; border-top: 10px solid #fff; } .tt-wrapper li a:hover span{ visibility: visible; opacity: 1; -webkit-transform: translate(0px) rotate(0deg) scale(1); -moz-transform: translate(0px) rotate(0deg) scale(1); -o-transform: translate(0px) rotate(0deg) scale(1); -ms-transform: translate(0px) rotate(0deg) scale(1); transform: translate(0px) rotate(0deg) scale(1); } /*------------------------------------------- STAFF PA -------------------------------------------*/ .ch-grid { margin: 10px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 10%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 100px; height: 100px; display: inline-block; margin-top: 6px; margin-left: 15px; } .ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; } .ch-info-wrap{ position: absolute; width: 80px; height: 80px; border-radius: 50%; perspective: 800px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; top: 20px; left: 20px; background: #F1D1A1; box-shadow: 0 0 0 10px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); margin-top: -11px; margin-left: -9px; } .ch-info{ position: absolute; width: 80px; height: 80px; border-radius: 50%; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; margin-top: -00px; } .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; } .ch-info .ch-info-back { transform: rotate3d(0,1,0,180deg); -moz-transform: rotate3d(0,1,0,180deg); -webkit-transform: rotate3d(0,1,0,180deg); background: #E5BC87; margin-top: -00px; } .ch-img-1 { background-image: url(http://image.noelshack.com/fichiers/2012/47/1353448094-0101.png); } .ch-img-2 { background-image: url(http://image.noelshack.com/fichiers/2012/47/1353448081-02.png); } .ch-img-3 { background-image: url(http://www.hollow-art.com/files/bases/20110312/brittany_robertson_in_life_unexpected_season_2_309.png); } .ch-img-4 { background-image: url(http://image.noelshack.com/fichiers/2012/47/1353448075-02.png); } .ch-img-5 { background-image: url(http://image.noelshack.com/fichiers/2012/47/1353448068-02.png); } .ch-img-6 { background-image: url(http://image.noelshack.com/fichiers/2012/47/1353448060-02.png); } .ch-img-7 { background-image: url(http://image.noelshack.com/fichiers/2012/47/1353448087-04.png); } .ch-img-8 { background-image: url(http://image.noelshack.com/fichiers/2012/47/1353591621-03.png); } .ch-item:hover .ch-info-wrap { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8); } .ch-item:hover .ch-info { transform: rotate3d(0,1,0,-180deg); -moz-transform: rotate3d(0,1,0,-180deg); -webkit-transform: rotate3d(0,1,0,-180deg); } .pseudostaff { font-family: 'Cookie', Arial, sans-serif; margin-top: 9px; margin-bottom: -00px; font-size: 18px; color: #a15100; text-shadow: white 1px 1px 1px; line-height: 80%; } .rangstaff { font-size: 8px; color: #5a330e; text-shadow: white 1px 1px 1px; margin-top: 00px; margin-bottom: -15px; line-height: 90%; } .contactstaff a { font-size: 8px; text-shadow: white 1px 1px 1px; text-decoration: none; } .contactstaff a:hover { text-decoration: none !important; } /*------------------------------------------- PROFIL -------------------------------------------*/ /* Code par Hiro pour CSSACTIF Modifié par Kaiji Merci de ne pas supprimer cette mention (http://www.css-actif.com) */ #englob { /* Encadrement global des 2 divs */ position:relative; width:200px; height:320px; overflow:hidden; /* Permet de cacher ce qui dépasse */ border-radius: 00px 00px 00px 00px } .imgp { background:white; /* le bg de la div qui contient l'avatar */ position:absolute; /* Laissez comme ceci */ top:0;/* Laissez comme ceci */ left:0;/* Laissez comme ceci */ width:100%;/* Laissez comme ceci */ height:100%;/* Laissez comme ceci */ z-index:1;/* La position par rapport à l'autre div qui contient les infos */ -webkit-transition:all 1.0s;/* Laissez comme ceci */ -moz-transition:all 1.0s;/* Laissez comme ceci */ -o-transition:all 1.0s;/* Laissez comme ceci */ -ms-transition:all 1.0s;/* Laissez comme ceci */ transition:all 1.0s;/* Laissez comme ceci */ } #englob:hover > .imgp { opacity: 1; } .infosp { background-image: url(http://image.noelshack.com/fichiers/2012/47/1353346671-fbgemv2.png); position:absolute;/* Laissez comme ceci */ top:0;/* Laissez comme ceci */ left:0;/* Laissez comme ceci */ width:100%;/* Laissez comme ceci */ height:100%;/* Laissez comme ceci */ z-index:2;/* La position par rapport à l'autre div qui contient les infos (ici en dessous)*/ opacity:0;/* on met l'opacité à zero pour un effet stylé ;) */ margin-top:-320px;/* on décale la div de 200px, elle est invisible grâce a l'overflow:hidden de #englob */ padding-top: 35px; -webkit-transition:all 1.0s;/* Laissez comme ceci */ -moz-transition:all 1.0s;/* Laissez comme ceci */ -o-transition:all 1.0s;/* Laissez comme ceci */ -ms-transition:all 1.0s;/* Laissez comme ceci */ transition:all 1.0s;/* Laissez comme ceci */ } #englob:hover > .infosp { opacity:0.8;/* Lorsque la souris passe sur la div #englob, on augmente l'opacité des infos */ margin-top:0px;/* et on décale cette div à 0px (position par défaut) */ } .ChampsProfil > span { white-space:normal !important; font-size:0px; } .ChampsProfil > span > span { font-size:9px; } .BlocProfil { font-size: 9px; padding: 4px; text-align:justify; } .nameprofil { position: relative; z-index: 20; margin-top: -10px; margin-bottom: -15px; background-color: #d8af79; width: 192px; border-left: 4px #8e362d solid; border-right: 4px #8e362d solid; line-height: 50%; letter-spacing: -1px; border-radius: 5px 5px 5px 5px; font-family:'Cookie', Helvetica, sans-serif; text-shadow:#faead1 1px 1px 0px; font-weight: 300; font-size:25px; } .name { font-family:'Cookie', Helvetica, sans-serif; text-shadow:#faead1 1px 1px 0px; font-weight: 100; font-size: 20px; line-height: 70%; } .fondprofil2 { width:200px; background-color: #e5bc87; border-radius: 10px 10px 10px 10px; } .profilrangimage { position: relative; z-index: 20; margin-bottom: -45px; margin-left: -44px; margin-right: -40px; } .online { position: relative; z-index: 0; margin-left: -50px; margin-bottom: -140px; } .fondprofil img { max-width: 195px; opacity: 0.6; -webkit-transition:all 1.0s; -moz-transition:all 1.0s; -o-transition:all 1.0s; -ms-transition:all 1.0s; transition:all 1.0s; } .fondprofil img:hover { opacity: 1; } .postbody { text-align:justify; padding-left:12px; padding-right:12px; padding-top: 10px; font-size:12px; font-family: arial; line-height: 95%; } /*------------------------------- MESSAGES -------------------------------*/ input,textarea { border-radius: 12px; padding: 5px; background-image: url('http://image.noelshack.com/fichiers/2012/47/1353344582-sans-titre-1.png'); } .quote { background-image: url('http://image.noelshack.com/fichiers/2012/47/1353344582-sans-titre-1.png'); border-radius: 8px; padding: 5px; line-height: 97%; } .code { background-image: url('http://image.noelshack.com/fichiers/2012/47/1353344582-sans-titre-1.png'); border-radius: 8px; padding: 5px; font-family: arial; line-height: 93%; } .spoiler_closed.hidden { display:none; } .spoiler_content { display:block; background-image: url(http://image.noelshack.com/fichiers/2012/47/1353344582-sans-titre-1.png); border-radius: 8px; padding: 5px; line-height: 97%; } .spoiler_content.hidden { display:none; } .fleche { background-image : url(http://image.noelshack.com/fichiers/2012/47/1353348168-1348616975-fleche.png); width: 20px; height :20px; position : relative; top :80px; z-index: 15; left :-19px; } .bulle{ background-color : #ebc995; border : 1px solid #E5BC87; border-radius:10px; padding : 5px; min-height : 100px; } /*------------------- LISTING DES SUJETS -------------------*/ .topictitle { font-size: 11px; color: #7A5E3B; } .postdetailstopics { color : #A6733F; } .postdetails a { font-weight: 200; font-family: cookie; font-size: 20px; text-shadow: white 1px 1px 0px; } /*------------------------------- SLIDESHOW MAISONS ----------------------------------*/ .cr-container{ width: 600px; height: 300px; position: relative; margin: 0 auto; overflow: hidden; border: 20px solid #F1D1A1; border-radius: 12px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); } .cr-container label{ font-style: italic; font-family: Cookie; width: 50px; height: 30px; cursor: pointer; color: #F1D1A1; line-height: 32px; font-size: 24px; font-weight: 200; float:left; position: relative; margin-top:265px; margin-left: 5px; z-index: 999; } .cr-container label:before{ content:''; width: 20px; height: 20px; position: absolute; left: 50%; border-radius: 50%; box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3); z-index:-1; } .cr-container label:after{ width: 1px; height: 300px; content: ''; color: #A18562; position: absolute; bottom: -20px; right: 0px; } .cr-container label.cr-label-img-7:after{ width: 0px; } .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1, .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2, .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3, .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4, .cr-container input.cr-selector-img-5:checked ~ label.cr-label-img-5, .cr-container input.cr-selector-img-6:checked ~ label.cr-label-img-6, .cr-container input.cr-selector-img-7:checked ~ label.cr-label-img-7{ color: #A6733F; } .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before, .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before, .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before, .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before, .cr-container input.cr-selector-img-5:checked ~ label.cr-label-img-5:before, .cr-container input.cr-selector-img-6:checked ~ label.cr-label-img-6:before, .cr-container input.cr-selector-img-7:checked ~ label.cr-label-img-7:before{ color: #A18562; } .cr-container input{ display: none; } .cr-bgimg{ width: 600px; height: 300px; position: absolute; left: 0px; top: 0px; z-index: 1; } .cr-bgimg{ background-repeat: no-repeat; background-position: 0 0; } .cr-bgimg div{ width: 150px; height: 100%; position: relative; float: left; overflow: hidden; background-repeat: no-repeat; } .cr-bgimg div span{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); opacity: 0; z-index: 2; text-indent: -9000px; } .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(1){ background-image: url(http://image.noelshack.com/fichiers/2012/47/1353519753-cabot.png); } .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(2){ background-image: url(http://image.noelshack.com/fichiers/2012/47/1353601496-dunster.png); } .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(3){ background-image: url(http://image.noelshack.com/fichiers/2012/47/1353519540-eliot.png); } .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(4){ background-image: url(http://image.noelshack.com/fichiers/2012/47/1353519541-lowell.png); } .cr-container input.cr-selector-img-5:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(5){ background-image: url(http://image.noelshack.com/fichiers/2012/47/1353519541-mather.png); } .cr-container input.cr-selector-img-6:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(6){ background-image: url(http://image.noelshack.com/fichiers/2012/47/1353601497-quincy.png); } .cr-container input.cr-selector-img-7:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(7){ background-image: url(http://image.noelshack.com/fichiers/2012/47/1353601499-winthrop.png); } .cr-bgimg div:nth-child(1) span{ background-position: 0px 0px; } .cr-bgimg div:nth-child(2) span{ background-position: -150px 0px; } .cr-bgimg div:nth-child(3) span{ background-position: -300px 0px; } .cr-bgimg div:nth-child(4) span{ background-position: -450px 0px; } .cr-bgimg div:nth-child(5) span{ background-position: 0px 0px; } .cr-bgimg div:nth-child(6) span{ background-position: -150px 0px; } .cr-bgimg div:nth-child(7) span{ background-position: -300px 0px; } .cr-container input:checked ~ .cr-bgimg div span{ -webkit-animation: scaleOut 0.6s ease-in-out; -moz-animation: scaleOut 0.6s ease-in-out; -o-animation: scaleOut 0.6s ease-in-out; -ms-animation: scaleOut 0.6s ease-in-out; animation: scaleOut 0.6s ease-in-out; } @-webkit-keyframes scaleOut{ 0%{ -webkit-transform: scale(1); opacity: 1; } 100%{ -webkit-transform: scale(1.5); opacity: 0; } } @-moz-keyframes scaleOut{ 0%{ -moz-transform: scale(1); opacity: 1; } 100%{ -moz-transform: scale(1.5); opacity: 0; } } @-o-keyframes scaleOut{ 0%{ -o-transform: scale(1); opacity: 1; } 100%{ -o-transform: scale(1.5); opacity: 0; } } @-ms-keyframes scaleOut{ 0%{ -ms-transform: scale(1); opacity: 1; } 100%{ -ms-transform: scale(1.5); opacity: 0; } } @keyframes scaleOut{ 0%{ transform: scale(1); opacity: 1; } 100%{ transform: scale(1.5); opacity: 0; } } .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1), .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3), .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4), .cr-container input.cr-selector-img-5:checked ~ .cr-bgimg div span:nth-child(5), .cr-container input.cr-selector-img-6:checked ~ .cr-bgimg div span:nth-child(6), .cr-container input.cr-selector-img-7:checked ~ .cr-bgimg div span:nth-child(7) { -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; -o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; -ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); z-index: 999; } .cr-titles h3{ color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); } .cr-titles h3 span{ z-index: 999; position: absolute; width: 100%; left: 0px; text-align: center; opacity: 0; top: 50%; } .cr-titles h3 span:nth-child(1){ left: 0px; font-family: 'Cookie', 'Arial Narrow', Arial, sans-serif; font-size: 25px; margin-left: 188px; margin-top: 40px; letter-spacing: 5px; color: transparent; text-shadow: 0px 0px 10px #fff; -webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; -moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; -o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; -ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; } .cr-titles h3 span:nth-child(2){ margin-top: 84px; letter-spacing: 0px; background: rgba(104,171,194,0.9); font-size: 14px; padding: 10px 0px; font-style: italic; font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; -webkit-transition: opacity 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out; } .cr-container input:checked ~ .cr-titles h3 span{ opacity: 0; text-shadow: 0px 0px 30px #fff; } .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1), .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1), .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1), .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1), .cr-container input.cr-selector-img-5:checked ~ .cr-titles h3:nth-child(5) span:nth-child(1), .cr-container input.cr-selector-img-6:checked ~ .cr-titles h3:nth-child(6) span:nth-child(1), .cr-container input.cr-selector-img-7:checked ~ .cr-titles h3:nth-child(7) span:nth-child(1){ opacity: 1; text-shadow: 0px 0px 1px #fff; } .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2), .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2), .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2), .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2), .cr-container input.cr-selector-img-5:checked ~ .cr-titles h3:nth-child(5) span:nth-child(2), .cr-container input.cr-selector-img-6:checked ~ .cr-titles h3:nth-child(6) span:nth-child(2), .cr-container input.cr-selector-img-7:checked ~ .cr-titles h3:nth-child(7) span:nth-child(2){ opacity: 1; } /* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */ @media screen and (max-width: 768px) { .cr-container input{ display: inline; width: 24%; margin-top: 350px; z-index: 999; position: relative; } .cr-container label{ display: none; } } /*------------------------------- AFFICHAGE MP ----------------------------------*/ .avatarmp { height: 320px; width: 200px; border: 4px solid #E5BC87; border-radius: 8px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; } .avatarmp:hover { opacity: 0.7; } .genmed { letter-spacing: -1px; } .fleche2 { background-image : url(http://image.noelshack.com/fichiers/2012/47/1353348168-1348616975-fleche.png); width: 20px; height :20px; position : relative; top :50px; z-index: 15; left :-19px; } .statsmp { text-align: center; border-bottom: #E5BC87 1px solid; background-image: url(http://image.noelshack.com/fichiers/2012/47/1353600220-1353599485-mp2.png); }

Merci d'avance.

EDIT : En fait j'ai réussi à régler le problème toute seule ! <3 Merci, vous pouvez archiver !