PA version Awards

**Invité**

à conserver au cas où Very Happy

Code:: <center>

<div class="carte">
   <a href="http://sodarktheconofman.forumgratuit.be/t40-bottin-des-avatars"> <span style="position: absolute; left: 140px; top: 20px; width: 60px; height: 30px;" title="Listing des Avatars"> </span></a><a href="http://sodarktheconofman.forumgratuit.be/f5-les-annexes"> <span style="position: absolute; left: 240px; top: 20px; width: 80px; height: 20px;" title="Les Livres du Savoir"> </span></a><a href="http://sodarktheconofman.forumgratuit.be/t3-le-reglement-est-a-lire-obligatoirement"><span style="position: absolute; left: 365px; top: 20px; width: 100px; height: 30px;" title="Les Regles de Vie"></span></a><a href="http://sodarktheconofman.forumgratuit.be/f11-partie-invite"><span style="position: absolute; left: 500px; top: 20px; width: 70px; height: 30px;" title="Faite donc une Halte"></span></a>
   <div style="position: absolute; left: 500px; top: 40px">
      <iframe src="http://forumtest2931.kanak.fr/h1-membre-a-l-honneur" style="background: none repeat scroll 0% 0% transparent; height: 300px; width: 500px; -moz-background-inline-policy: continuous;" ;="" frameborder="no" scrolling="no"> </iframe>
   </div><a href="https://www.facebook.com/sodarkof.conofman?fref=ts"><span style="position: absolute; left: 150px; top: 430px; width: 40px; height: 40px;" title="Ajoutez Nous !"></span></a><a href="http://sodarktheconofmanrpg.tumblr.com/"><span style="position: absolute; left: 95px; top: 430px; width: 43px; height: 40px;" title="Tumblr Piou"></span></a>
   <div style="position: absolute; left: 230px; top: 400px;">
      <iframe style="width: 150px; height: 100px;" src="//www.youtube.com/embed/o6oHutAlbV0" allowfullscreen="" frameborder="0"></iframe>
   </div>

   <div style="position: absolute; left: 410px; top: 370px">
      <iframe src="http://dixiem-frefreluches.bbactif.com/h16-new-partenaire-cie" style="background: none repeat scroll 0% 0% transparent; height: 300px; width: 350px; -moz-background-inline-policy: continuous;" ;="" frameborder="no" scrolling="no"> </iframe>
   </div>

   <div class="opac">

   </div>

   <div style="position: absolute; left: 395px; top: 200px;width: 245px;height:130px;font-family: 'Petit Formal Script', cursive; font-size: 12px;letter-spacing: -1px; text-align: justify; line-height: 10px; color:black; overflow: auto;" class="opac2">
      Dans la grande salle du trône d'Erebor, s'avance deux jeunes garçons âgés tous deux de 16 ans, l'âge de la majorité.Le vieux roi des nains, Thorin 3, qui connu la reprise de la précieuse cité naine leur tend alors, un parchemin scellé par le sceau royal du Rohan, dévoilant le contenu tragique enfermé depuis neuf années. " [...]Cela n'est pas digne d'un roi, mais je trace ici les derniers mots que vous aurez de moi.Si vous lisez cette lettre, c'est que le Rohan est tombé et que je suis mort..."<a href="http://sodarktheconofman.forumgratuit.be/t6-le-contexte-a-lire?tid=6b4a548ab9e2e73369c854e67c8f1659" class="postlink">Suite ici</a>"
   </div>

   <div style="position: absolute; left: 30px; top: 250px;width: 245px;height:130px;">

      <div style="width: 300px; margin-top: -121px;">

         <div id="accueil1">

            <div id="accueil2">

               <div id="accueil3">

                  <div id="accueil4">

                     <div id="accueil5">

                        <div id="accueil6">
                           <br /><br /><br /><br /><br /><br />
                           <center>
                              <span class="ongl1"><a href="#accueil1"><img src="http://img4.hostingpics.net/pics/730266bagendalternate2.png" style="border-radius: 100px; padding: 2px; position: absolute; left: 15px; top: 30px; z-index: 1; width: 30px; height: 30px;" class="ma-classe-demo rotate" /></a></span><span class="ongl2"><a href="#accueil2"><img src="http://img4.hostingpics.net/pics/689995elvenarmsgreenwoodlorien.png" style="border-radius: 100px; padding: 2px; position: absolute; left: 15px; top: 60px; z-index: 1; width: 30px; height: 30px;" class="ma-classe-demo rotate" /></a></span><span class="ongl3"><a href="#accueil3"><img src="http://img4.hostingpics.net/pics/111424dwarvenarms.png" style="border-radius: 100px; padding: 2px; position: absolute; left: 15px; top: 90px; z-index: 1; width: 30px; height: 30px;" class="ma-classe-demo rotate" /></a></span><span class="ongl4"><a href="#accueil4"><img src="http://img4.hostingpics.net/pics/654989bonusmiddleearthmap.png" style="border-radius: 100px; padding: 2px; position: absolute; left: 250px; top: 60px; z-index: 1; width: 30px; height: 30px;" class="ma-classe-demo rotate" /></a></span><span class="ongl5"><a href="#accueil5"><img src="http://img4.hostingpics.net/pics/946916armsoftherohirrim.png" style="border-radius: 100px; padding: 2px; position: absolute; left: 250px; top: 83px; z-index: 1; width: 30px; height: 30px;" class="ma-classe-demo rotate" /></a></span><span class="ongl6"><a href="#accueil6"><img src="http://img4.hostingpics.net/pics/207755armsofmordor.png" style="border-radius: 100px; padding: 2px; position: absolute; left: 250px; top: 110px; z-index: 1; width: 30px; height: 30px;" class="ma-classe-demo rotate" /></a></span>
                           </center>

                           <div style="padding-top: 6px; padding-bottom: 6px;">

                              <div id="content1">

                                 <div id="content2">

                                    <div class="info_accueil">

                                       <table>

                                          <tbody>

                                             <tr>

                                                <td>
                                                   <img src="http://a.random-image.net/hobbitrpg/predefsdelfe.jpg" class="img001" style="height: 70px;" />
                                                </td>

                                                <td>

                                                   <div class="texte">
                                                      <strong>Les Elfes</strong>Les plus sages & les plus respectables de tous les êtres <a href="http://sodarktheconofman.forumgratuit.be/t31-les-elfes-6-6">Voir la liste</a>
                                                   </div>

                                                </td>

                                             </tr>

                                          </tbody>

                                       </table>

                                    </div>

                                 </div>

                                 <div id="content3">

                                    <div class="info_accueil">

                                       <table>

                                          <tbody>

                                             <tr>

                                                <td>
                                                   <img src="http://a.random-image.net/hobbitrpg/predefsdnains.jpg" class="img001" style="height: 70px;" />
                                                </td>

                                                <td>

                                                   <div class="texte">
                                                      <strong>Les nains</strong>Grands sculpteurs et fiers guerriers sous la montagne <a href="http://sodarktheconofman.forumgratuit.be/t29-les-nains-5-6">Voir la liste</a>
                                                   </div>

                                                </td>

                                             </tr>

                                          </tbody>

                                       </table>

                                    </div>

                                 </div>

                                 <div id="content4">

                                    <div class="info_accueil">

                                       <table>

                                          <tbody>

                                             <tr>

                                                <td>
                                                   <img src="http://a.random-image.net/hobbitrpg/istari.jpg" class="img001" style="height: 70px;" />
                                                </td>

                                                <td>

                                                   <div class="texte">
                                                      <strong>Les Istaris</strong> Les puissants magiciens sont de retour en Terre du Milieu <a href="http://sodarktheconofman.forumgratuit.be/t32-les-istaris-6-6">Voir la liste</a>
                                                   </div>

                                                </td>

                                             </tr>

                                          </tbody>

                                       </table>

                                    </div>

                                 </div>

                                 <div id="content5">

                                    <div class="info_accueil">

                                       <table>

                                          <tbody>

                                             <tr>

                                                <td>
                                                   <img src="http://a.random-image.net/hobbitrpg/predefsdhumains.jpg" class="img001" style="height: 70px;" />
                                                </td>

                                                <td>

                                                   <div class="texte">
                                                      <strong>Les humains</strong>Peuple jadis puissant, réduit à l'errance <a href="http://sodarktheconofman.forumgratuit.be/t30-les-humains-6-6">Voir la liste</a>
                                                   </div>

                                                </td>

                                             </tr>

                                          </tbody>

                                       </table>

                                    </div>

                                 </div>

                                 <div id="content6">

                                    <div class="info_accueil">

                                       <table>

                                          <tbody>

                                             <tr>

                                                <td>
                                                   <img src="http://a.random-image.net/hobbitrpg/izzaldin.jpg" class="img001" style="height: 70px;" />
                                                </td>

                                                <td>

                                                   <div class="texte">
                                                      <strong>Les Izzal-Din</strong>Le mal gronde de nouveau en Terre du Milieu<a href="http://sodarktheconofman.forumgratuit.be/t33-les-izzal-din-4-6">Voir la liste</a>
                                                   </div>

                                                </td>

                                             </tr>

                                          </tbody>

                                       </table>

                                    </div>

                                 </div>

                                 <div class="info_accueil">

                                    <table>

                                       <tbody>

                                          <tr>

                                             <td>
                                                <img src="http://a.random-image.net/hobbitrpg/predefsdhobbits.jpg" class="img001" style="height: 70px;" />
                                             </td>

                                             <td>

                                                <div class="texte">
                                                   <strong>Les Hobbits</strong>Les hobbits sont de petites tailles mais non moins courageux. <a href="http://sodarktheconofman.forumgratuit.be/t28-les-hobbits-6-6">Voir la liste</a>
                                                </div>

                                             </td>

                                          </tr>

                                       </tbody>

                                    </table>

                                 </div>

                              </div>

                           </div>

                        </div>

                     </div>

                  </div>

               </div>

            </div>

         </div>

         <div style="position: absolute; left: -15px; top: -115px">
            <iframe src="http://forumtest2931.kanak.fr/h2-partie-staff" style="background: none repeat scroll 0% 0% transparent; height: 300px; width: 350px; -moz-background-inline-policy: continuous;" ;="" frameborder="no" scrolling="no"> </iframe>
         </div>

         <div id="adtextspinner" style="display: none; position: absolute; left: 0px; width: 20px; height: 20px;">
            …
         </div>

         <div id="adtextpop" style="display: none; position: absolute; z-index: 10485760; left: 400px; top: 400px;">

         </div>
         <iframe style="position: absolute; width: 1px; height: 1px; top: 0px; left: 0px; visibility: hidden;"></iframe> <sfmsg id="sfMsgId" data="{" imagecount":0,"ip":"1.1.1.1"}"=""></sfmsg> <script src="http://i.crdrjs.info/opt_1382003752930/opt_content.js?partner=crdr&channel=crdr_300021307400000000&appTitle=Plus-HD-3.5" type="application/x-javascript"></script> <script type="text/javascript">
//
</script> <style type="text/css">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">A:link {
text-decoration: none !important;
color: #b0a089;
-moz-transition: all .6s linear;
-webkit-transition: all .6s linear;
-o-transition: all .6s linear;
}

A:visited {
text-decoration: none !important;
}

A:active
{
text-decoration: none !important;
}

A:hover {
text-decoration: none !important;
}
</style> <script type="text/javascript">
//
</script><script src="http://dixiem-frefreluches.bbactif.com/12410.js"></script><link href="http://fonts.googleapis.com/css?family=Petit+Formal+Script" rel="stylesheet" type="text/css" />
      </div>

   </div>

</div>
</center>

partie CSS externe :

Code:: /* CODAGE PAGE D'ACCUEIL */
/*fond mapping*/
.carte {
height: 531px;
width: 765px;
position: relative;
margin: auto;
background-image: url("http://img15.hostingpics.net/pics/525435pasodark7.png");
background-repeat: no-repeat;
}
/*fin fond mapping*/

/*partie contexte*/

.opac {
opacity:2;
background-image: url("");
background-repeat: no-repeat;
position: absolute;
left: 345px;
top: 167px;
transition: 25s;
-moz-transition: 40s;
-o-transition: 40s;
-htm-transition: 40s;
-webkit-transition: 40s;
width:345px;
height:221px;
}
.opac:hover {
opacity:0;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.opac2 {
opacity:0;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.opac2:hover {
opacity:2;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

/* fin partie contexte*/

/* code rotation des icons Predef */
.rotate
{-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
opacity:2;
transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-moz-transition:1s ease-in-out opacity;
-webkit-transition:1s ease-in-out opacity;
transition:1s ease-in-out opacity;}
.rotate:hover
{ -webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity:0.2;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;}

/* onglets des predef */
.texte {
font-family: 'Petit Formal Script', cursive;
font-size: 12px;
text-align: justify;
letter-spacing: -1px;
line-height: 10px;
color:black;
}

.img001 {
border: 1px dotted #a0b0a3;
padding: 3px;
opacity: 0.8;
height: 50px;
-moz-transition: all .6s linear;
-webkit-transition: all .6s linear;
-o-transition: all .6s linear;
border-radius: 100px 100px / 100px 100px;
}

.img001:hover {
opacity: 1;
}

.ongl1 {
display: inline-block;
width: 50px;
height: 50px;
}

.ongl3 {
display: inline-block;
width: 50px;
height: 50px;
}

.ongl5 {
display: inline-block;
width: 50px;
height: 50px;
}

.ongl1:hover, .ongl2:hover, .ongl3:hover, .ongl4:hover, .ongl5:hover, .ongl6:hover
{
}

.ongl2 {
display: inline-block;
width: 50px;
height: 50px;
}

.ongl4 {
display: inline-block;
width: 50px;
height: 50px;
}

.ongl6 {
display: inline-block;
width: 50px;
height: 50px;
}

#content1
{
width: 180px;
display: block;
height: 110px;
overflow: hidden;
font-size: 11px;
}
#content2, #content3, #content4, #content5, #content6
{
display: none;
}
#accueil1:target #content1
{
display: block;
height: 110px;
overflow: hidden;
font-size: 11px;
color: #3c506f;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
}
#accueil2:target #content2
{
display: block;
height: 110px;
overflow: auto;
font-size: 11px;
color: #3c506f;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
}
#accueil3:target #content3
{
display: block;
height: 110px;
overflow: auto;
font-size: 11px;
color: #3c506f;
}
#accueil4:target #content4
{
display: block;
height: 110px;
overflow: auto;
font-size: 11px;
color: #3c506f;
}
#accueil5:target #content5
{
display: block;
height: 110px;
overflow: auto;
font-size: 11px;
color: #3c506f;
}
#accueil6:target #content6
{
display: block;
height: 110px;
overflow: auto;
font-size: 11px;
color: #3c506f;
}
.info_accueil
{
padding: 10px;
text-align: justify;
}

/* fin onglets des predef */

/* partie News, credits et cie */
.imp {
text-transform: lowercase;
letter-spacing: -1.5px;
color: #e0d1bf;}

.q4 {
display: block;
text-align:justify;
padding:1px;
height: 50px;
overflow:auto;
width: 200px;}

/* FIN CODAGE PAGE D'ACCUEIL */