Pa en accordeon

Messages : 225 Date d'inscription : 30/12/2011 Localisation : Dans la neige <3

Code:: .accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif; } .accordion ul { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none; } .accordion li > h2 {color: #ffffff; font-weight: normal; margin: 0; z-index: 2; 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; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top; transform: translateX(-100%) rotate(-90deg); transform-origin: right top; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .accordion li > h2 span { display: block; padding-right: 8%; text-align: right; height: 90%; margin-top: 5px; } .accordion li > h2 b { display: inline-block; position: absolute; top: 10%; top: 42%\9; left: 10%; left: 5%\9; text-align: center; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .accordion li > h2:hover { cursor: pointer; } .accordion li > div { height: 100%; position: absolute; top: 0; z-index: 1; overflow: hidden; background: white; } .accordion noscript p { padding: 10px; margin: 0; background: white; } /****************************************** Base */ .basic li > h2 { background: #E03C1B; color: white; line-height: 1.8em; } .basic li > div h3 { margin: 15px 10px; } .basic li > div p { margin: 10px; font-size: 14px; } /****************************************** foncé */ .dark { border: 9px solid #E03C1B; border-bottom-width: 8px; padding: 5px 5px 6px 0; background: #FFFFFF; -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); -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); } .dark li > h2 { background: #ffffff; font-size: 16px; line-height: 2.7em; text-shadow: 0 -1px 0 #030303; } .dark li > h2 span { background: #E03C1B; color: white; } .dark li > h2 b { background: #E03C1B\9; color: #ffffff; font-size: 20px; text-shadow: -1px 1px 0 #5b5b5b; } .dark h2.selected span, .dark h2.selected span:hover { background: #E03C1B; background: -webkit-gradient(linear, left top, right top, color-stop(0, #E03C1B), color-stop(1, #555555)); background: -moz-linear-gradient(top left, #E88A60 0%, #E03C1B 100%); } .dark h2.selected b { background: #ffffff\9; } .dark li > div { background: #ffffff; margin-left: 5px; } /*************************************** Arrondis */ .rounded { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .rounded li > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

Code:: .ongl1, .ongl2, .ongl3, .ongl4 { display: inline-block; width: 75px; height: 30px; margin-left: 20px; background-color: #E88A60; border-top: 1px solid #e13b1b; border-left: 1px solid #e13b1b; border-right: 1px solid #e13b1b; border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; text-align: center; } .ongl1:hover, .ongl2:hover, .ongl3:hover, .ongl4:hover { background-color: #E88A60; } .ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a { display: block; padding-top: 2px; font-weight: bold; text-decoration: none !important; color: #e13b1b !important; font-size: 18px; } .ongl1 a:hover, .ongl2 a:hover, .ongl3 a:hover, .ongl4 a:hover { color: #e13b1b !important; text-shadow: 1px 1px 0px #23334c; } #content1 { display: block; height: 300px; overflow: hidden; background: #E88A60; border: 1px solid #e13b1b; font-size: 11px; color: #e13b1b; } #content2, #content3, #content4 { display: none; } #accueil1:target #content1 { display: block; height: 300px; overflow: hidden; border: 1px solid #e13b1b; font-size: 11px; color: #e13b1b; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); } #accueil2:target #content2 { display: block; height: 300px; overflow: hidden; background: #E88A60; font-size: 11px; color: #e13b1b; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100); } #accueil3:target #content3 { display: block; height: 300px; overflow: hidden; background: #E88A60; font-size: 11px; color: #e13b1b; } #accueil4:target #content4 { display: block; height: 300px; overflow: hidden; background: #E88A60; font-size: 11px; color: #e13b1b; } .info_accueil { padding: 10px; text-align: justify; } .credit { display: block; text-align: right; margin-right: 20px; } .credit a { font-size: 10px; text-decoration: none !important; } a { text-decoration: none !important; } tr.post span.gensmall { display: none; }

Messages : 225 Date d'inscription : 30/12/2011 Localisation : Dans la neige <3

Code:: <div id="one" class="accordion"> <ul> <li> <h2><span>Welcome</span></h2> <div style="background-image: url('http://i43.tinypic.com/qwx5jq.png'); height: 341px; width: 643px ; background-position: right ; background-repeat: no-repeat;"> </div> </li> <li> <h2><span>New's</span></h2> <div style="background-image: url('http://i40.tinypic.com/34evx91.jpg'); height: 397px; width: 638px ; background-position: right ; background-repeat: no-repeat;"><p style="font-weight:normal;color:#913320;border: 1px dotted #913320;letter-spacing:0pt;word-spacing:0pt;font-size:44px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:0;">Les New's</p> <marquee style="text-align:justify;" scrollamount="1" direction="up" height="210px;"> <b<b><span style="font-weight: bold;">» 14/01/2O12 :</span> Ouverture d'Okami <br><b>» 15/01/2O12 :</b> Installation de la page d'acceuil <br><b>» 25/03/2O12 :</b>Gekigami rejoint le staff en tant que modérateur. <br><b>» 21/03/2O12 :</b>Moegami rejoint le staff en tant d'admin à multiples fonctions. <b></marquee> </div> </li> <li> <h2><span>Prédéfinis</span></h2> <div style="background-image: url('http://i39.tinypic.com/2gt1c0x.png'); height: 397px; width: 643px ; background-position: up ; background-repeat: no-repeat;"> <p style="font-weight:normal;color:#913320;border: 1px dotted #913320;letter-spacing:0pt;word-spacing:0pt;font-size:44px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:0;">Prédéfinis</p> <table border="0" cellpadding="0" cellspacing="0"> <tbody><tr height="2"><td>  <div class="tfabulle"> <img src="http://s3.tinypic.com/1z97yh_th.jpg" alt=""> <div class="in_bulle"> <p style="text-align:center;">Gekigami <br><br><a href="http://testdetamama.forumgratuit.org/t20-dieux-12-13" class="postlink">Intéressé ?</a> </p></div> </div>   <div class="tfabulle"> <img src="http://i297.photobucket.com/albums/mm238/Kaboom-Deidara/Okami/26270771.png" alt=""> <div class="in_bulle"> <p style="text-align:center;">Nuregami <br><br><a href="http://testdetamama.forumgratuit.org/t20-dieux-12-13" class="postlink">Intéressé ?</a> </p></div> </div>   <div class="tfabulle"> <img src="http://i47.servimg.com/u/f47/11/17/76/43/nuze10.jpg" alt=""> <div class="in_bulle"> <p style="text-align:center;">Kazegami <br><br><a href="http://testdetamama.forumgratuit.org/t20-dieux-12-13">Intéressé ?</a> </p></div> </div>   <div class="tfabulle"> <img src="http://l-userpic.livejournal.com/104039684/30318878" alt=""> <div class="in_bulle"> <p style="text-align:center;">Yomigami <br><br><a href="http://testdetamama.forumgratuit.org/t20-dieux-12-13">Intéressé ?</a> </p></div> </div>  </td></tr> <tr><td>  <div class="tfabulle"> <img src="http://l-userpic.livejournal.com/99582098/26816457" alt=""> <div class="in_bulle"> <p style="text-align:center;">Kasugami <br><br><a href="http://testdetamama.forumgratuit.org/t20-dieux-12-13" class="postlink">Intéressé ?</a> </p></div> </div>   <div class="tfabulle"> <img src="http://l-userpic.livejournal.com/102075200/24630782" alt=""> <div class="in_bulle"> <p style="text-align:center;">Tei <br><br><a href="http://testdetamama.forumgratuit.org/t54-guerriers-canins-0-4" class="postlink">Intéressé ?</a> </p></div> </div>   <div class="tfabulle"> <img src="http://i47.servimg.com/u/f47/11/17/76/43/0123.jpg" alt=""> <div class="in_bulle"> <p style="text-align:center;">Jin <br><br><a href="http://testdetamama.forumgratuit.org/t54-guerriers-canins-0-4" class="postlink">Intéressé ?</a> </p></div> </div>   <div class="tfabulle"> <img src="http://img.photobucket.com/albums/v408/tolerant/chocofeather/25/bakugami3_ljchocofeather.png" alt=""> <div class="in_bulle"> <p style="text-align:center;">Bakugami <br><br><a href="http://testdetamama.forumgratuit.org/t20-dieux-11-13" class="postlink">Intéressé ?</a> </p></div> </div>  </td></tr> </tbody></table> </div> </li> <li> <h2><span>Partenaires</span></h2> <div> <p style="font-weight:normal;color:#913320;border: 1px dotted #913320; letter-spacing:0pt;word-spacing:0pt;font-size:44px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:0;">Best Partenaires</p> <center><a href="http://onedaystown.forumactif.com/"><img src="http://i47.servimg.com/u/f47/15/67/34/33/logo110.jpg"><a href="http://northwoods-manor.bbactif.com" class="postlink" target="_blank" rel="nofollow"><img src="http://i64.servimg.com/u/f64/16/14/16/64/60310.png" border="0" alt="" /></a><a href="http://angeldarkdream.forumactif.org/forum.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://img203.imageshack.us/img203/2706/88x3102.png" border="0" alt="" /></a> <a href="http://tales-chronicle.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img845.imageshack.us/img845/5329/88x312d.png" border="0" alt="" /></a><a href="http://yuugen.fr1.co/"><img src="http://nsm05.casimages.com/img/2012/03/18//12031804442799739598300.jpg" /></a> </center><br> <p style="font-weight:normal;color:#913320;border: 1px dotted #913320;letter-spacing:0pt;word-spacing:0pt;font-size:44px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:0;">Other Partenaires</p> <marquee behavior="scroll" direction="left" scrollamount="1" height="60"> <center><a href="http://hotel-kinshi.forumgratuit.org/"><img src="http://zupimages.net/up/2/110933540.png"></a<a href="http://www.floral-fascination.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i43.tinypic.com/mr4y1f.png" border="0" alt="" /></a><a href="http://horizonparallele.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img594.imageshack.us/img594/1544/minibouton.png" border="0" alt="" /></a> <a href="http://karnevale-avenue.forumactif.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i56.tinypic.com/33jprv5.png" border="0" alt="" /></a> <a href="http://yellow-submarine.azureforum.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img72.xooimage.com/files/4/e/a/8831-2e462e5.jpg" border="0" alt="" /></a><a href="http://olyates.forumgratuit.org/" class="postlink" "postlink"><img src="http://i45.servimg.com/u/f45/16/45/82/56/part112.png" border="0" alt="" /></a><a href="http://sakura-town.forum-canada.net/" target="blank"><img src="http://img17.imageshack.us/img17/6913/logo2tp.jpg"></a><a href="http://tokyo-revolution.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i43.servimg.com/u/f43/16/03/89/98/01-bou10.gif" border="0" alt="" /></a><a href="http://http://hatem.frbb.net/" class="postlink" target="_blank" rel="nofollow"><img src="http://vandlight.voila.net/stock/hatem/88x31.png" border="0" alt="" /></a><a href="http://redgarden.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img11.imageshack.us/img11/306/sanstitre2fp.png" border="0" alt="" /></a><a href="http://pension-zj.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i44.tinypic.com/8yt5dv.png" border="0" alt="" /> </a><a href="http://zeldarpg.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://img11.hostingpics.net/pics/172573ico.jpg" border="0" alt="" /></a><a href="http://pensionnat-shuwan.forumactif.fr/" class="postlink" target="_blank" rel="nofollow"><img src="http://i44.tinypic.com/xo16hc.png" border="0" alt="" /></a><a href="http://leretourdeganon.alianceforum.com" target="_blank"><img src="http://i912.photobucket.com/albums/ac325/Miettes_SoP/toru/logo.gif" alt="La Légende de Zelda : Le retour de Ganondorf" title="La Légende de Zelda : Le retour de Ganondorf" /></a><a href="http://sumquoderis.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://nimga.fr/f/CA2M0.png" border="0" alt="" /></a><a href="http://silver-stables.forumactif.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://img560.imageshack.us/img560/7839/logosilverstable8832.png" border="0" alt="" /></a><a href="http://zelda-tbe.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i42.tinypic.com/f9jxg5.png" border="0" alt="" /></a><a href="http://fantasya-rpg.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://www.pixenli.com/images/1333236020057388300.png" border="0" alt="" /></a><a href="http://isisnahl.forumactif.org/"><img src="http://img11.hostingpics.net/pics/924650logo.jpg"> </a><a href="http://lafolia.forumgratuit.org/" class="postlink" target="_blank" rel="nofollow"><img src="http://i39.tinypic.com/29vatt4.png" border="0" alt="" /></a><a href="http://game-emporium.bbfr.net/" class="postlink" target="_blank" rel="nofollow"><img src="http://img15.hostingpics.net/pics/888321logo.png" border="0" alt="" /></a> </center></marquee> <center><a href="http://www.root-top.com/topsite/virtu4lgames/in.php?ID=2795" class="postlink" target="_blank" rel="nofollow"><img src="http://local-static3.forum-files.fobby.net/forum_attachments/0024/9933/ebff10-love.gif" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/ed/in.php?ID=792" class="postlink" target="_blank" rel="nofollow"><img src="http://local-static3.forum-files.fobby.net/forum_attachments/0024/9933/ebff10-love.gif" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/chenshen/in.php?ID=753" class="postlink" target="_blank" rel="nofollow"><img src="http://local-static3.forum-files.fobby.net/forum_attachments/0024/9933/ebff10-love.gif" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/azu/in.php?ID=1805" class="postlink" target="_blank" rel="nofollow"><img src="http://local-static3.forum-files.fobby.net/forum_attachments/0024/9933/ebff10-love.gif" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/azzare34/in.php?ID=7320" class="postlink" target="_blank" rel="nofollow"><img src="http://local-static3.forum-files.fobby.net/forum_attachments/0024/9933/ebff10-love.gif" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/callista/in.php?ID=297" class="postlink" target="_blank" rel="nofollow"><img src="http://local-static3.forum-files.fobby.net/forum_attachments/0024/9933/ebff10-love.gif" border="0" alt="" /></a></center> </div> </li> <li> <h2><span>Staff</span></h2> <div style="background-image: url('http://i40.tinypic.com/2zyycrq.png'); height: 397px; width: 643px ; background-position: up ; background-repeat: no-repeat;"> <p style="font-weight:normal;color:#913320;border: 1px dotted #913320;letter-spacing:0pt;word-spacing:0pt;font-size:44px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:0;">Le Staff</p> <table border="0" cellpadding="0" cellspacing="0"> <tbody><tr height="2"><td>  <div class="tfabulle"> <img src="http://img-cache.cdn.gaiaonline.com/5c38d3c1b8729ac9a499d661939a67cc/http://i177.photobucket.com/albums/w213/narutosgirlbackoff688/Black%20Cat/0000Itegami1ICONjpg.jpg" alt=""> <div class="in_bulle"> <p style="text-align:center;">Itegami <br><b>Fonda'</b> <br><br><br>Dieu </p></div> </div>   <div class="tfabulle"> <img src="http://nsa22.casimages.com/img/2012/03/26/120326014407681886.png" alt=""> <div class="in_bulle"> <p style="text-align:center;">Moegami <br><b>Admin mutlifonction</b> <br><br><br>Dieu </p></div> </div>   <div class="tfabulle"> <img src="http://i42.tinypic.com/wgzwvl.png" alt=""> <div class="in_bulle"> <p style="text-align:center;">Gekigami <br><b>Modérateur</b> <br><br><br>Dieu </p></div> </div>  </div> </td></tr> </tbody></table> </div> </li> </ul> </div> <center><a href="http://www.annuaire-rn.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i42.tinypic.com/wbtg83.png" border="0" alt="" /></a><a href="http://www.sawen.net/"" class="postlink" target="_blank" rel="nofollow"><img src="http://i40.tinypic.com/2zdqbk6.jpg" border="0" alt="" /></a> </center>

Page 1 sur 1