Partagez | 
 

 Pa en accordeon

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar')">


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

MessageSujet: Pa en accordeon   Dim 31 Mar - 10:39

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; }
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://testdetamama.forumgratuit.org
avatar')">


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

MessageSujet: Re: Pa en accordeon   Dim 31 Mar - 10:40

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>
<!-- DEBUT INFOBULLE -->
                <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>

<!-- FIN INFOBULLE -->
<!-- DEBUT INFOBULLE -->
                <div class="tfabulle"> <img src="http://illiweb.com/fa/pbucket.gif" 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>

<!-- FIN INFOBULLE -->
<!-- DEBUT INFOBULLE -->
                <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>

<!-- FIN INFOBULLE -->
<!-- DEBUT INFOBULLE -->
                <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>

<!-- FIN INFOBULLE -->
</td></tr>
<tr><td>
<!-- DEBUT INFOBULLE -->
                <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>

<!-- FIN INFOBULLE -->
<!-- DEBUT INFOBULLE -->
                <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>

<!-- FIN INFOBULLE -->
<!-- DEBUT INFOBULLE -->
                <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>

<!-- FIN INFOBULLE -->
<!-- DEBUT INFOBULLE -->
                <div class="tfabulle"> <img src="http://illiweb.com/fa/pbucket.gif" 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>

<!-- FIN INFOBULLE -->
</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://illiweb.com/fa/pbucket.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>
<!-- DEBUT INFOBULLE -->
                <div class="tfabulle"> <img src="http://img-cache.cdn.gaiaonline.com/5c38d3c1b8729ac9a499d661939a67cc/http://illiweb.com/fa/pbucket.gif" alt="">
  <div class="in_bulle">
      <p style="text-align:center;">Itegami
<br><b>Fonda'</b>
<br><br><br>Dieu

  </p></div>
</div>

<!-- FIN INFOBULLE -->
<!-- DEBUT INFOBULLE -->
                <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>

<!-- FIN INFOBULLE -->
<!-- DEBUT INFOBULLE -->
                <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>

<!-- FIN INFOBULLE -->

</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>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://testdetamama.forumgratuit.org
 

Pa en accordeon

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

 Sujets similaires

-
» ACCORDEON
» carte accordeon
» Pli accordéon ?
» Le 09 juillet 2010 ! Tutoriel mini-album à tags croisés
» Accordéon Diatonique

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Okami :: Le Nippon :: Le Village de Kamiki-