save pa UC

Code:: <link href="http://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css" /><style type="text/css">
#wrapper{
width: 790px;
height: 560px;
position: relative;
background: grey;
}

#partie_staff{
position: absolute;
top: 35px;
left:217px;
}

.onglet
{
display:inline-block;
padding:3px;
cursor:pointer;
width: 30px;
height: 30px;
}

.onglet_0
{
background:transparent;
width: 30px;
height: 30px;
}

.onglet_1
{
background:transparent;
padding-bottom:4px;
width: 30px;
height: 30px;
}

.contenu_onglet
{
background-color: transparent;
margin-top:-1px;
padding:5px;
display:none;
width: 380px;
height: 100px;
text-align: justify;
font-size: 11px;
font-family: DejaVu Sans;

}
.contenustaff {
width: 340px;
height: 107px;
background-color: #EDFAFF;
border-left: 3px solid #0E86AD;
border-right: 3px solid #0E86AD;
font-size: 10px;
font-family: courrier;
text-align: center;
}

.nomdustaff {
font-size: 28px;
font-family: Lobster;
color: #FF6600;
text-shadow: 1px 0px 0px black;
}

.info2{color: #E95633;
text-shadow: 1px 1px 1px black;
font-family: Lobster;
letter-spacing: 1px;
letter-spacing: 1px;
font-size: 18px;
line-height: 15px;
}

.cube{
height: 30px;
width: 30px;
background-color: black;
} /**/

#navigation_pa{
width: 200px;
height:200px;
background: #665E4E;
position: absolute;
top: 10px;
left: 10px;
}

.lien_pa{
font-size: 14px;
text-transform: uppercase;
text-align: center;
margin-top: 15px;
transition: background 0.5s;
}

li.lien_pa:hover{
background: #80251F!important;
}

#nav {
width: 200px;
list-style: none;
margin: 0;
padding: 0;
}

#nav li {
color: #fff ;
margin-bottom: 1px ;
}

#nav li a {
display: block ;
text-decoration: none ;
color: white;
}

#nav li a:hover, #nav li a:focus, #nav li a:active {
background: #80251F;
}

#partie_credit{
width: 200px;
height:200px;
background: #665E4E;
position: absolute;
top: 10px;
right: 10px;

}
</style>
<div id="wrapper">
<div id="partie_staff">

<script type="text/javascript">
//
</script>
<div class="systeme_onglets">

<div class="onglets" align="center">
<span class="onglet_0 onglet" id="onglet_NomOnglet1" onmouseover="javascript:change_onglet('NomOnglet1');" onmouseout="javascript:change_onglet('NomOnglet1');"><div class="cube"></div></span> <span class="onglet_0 onglet" id="onglet_NomOnglet2" onmouseover="javascript:change_onglet('NomOnglet2');"><div class="cube"></div></span> <span class="onglet_0 onglet" id="onglet_NomOnglet3" onmouseover="javascript:change_onglet('NomOnglet3');"><div class="cube"></div></span> <span class="onglet_0 onglet" id="onglet_NomOnglet4" onmouseover="javascript:change_onglet('NomOnglet4');"><div class="cube"></div></span> <span class="onglet_0 onglet" id="onglet_NomOnglet5" onmouseover="javascript:change_onglet('NomOnglet5');"><div class="cube"></div></span> <span class="onglet_0 onglet" id="onglet_NomOnglet6" onmouseover="javascript:change_onglet('NomOnglet6');"><div class="cube"></div></span>
</div>

<div class="contenu_onglets" align="center">

<div class="contenu_onglet" id="contenu_onglet_NomOnglet1">

<div class="contenustaff">

<table>

<tbody>

<tr>

<td>
<img src="http://i61.photobucket.com/albums/h58/bourniio/stock1/Stock4/4429.png"/>
</td>

<td>

<div class="nomdustaff">
Nom Prénom 1
</div>
POSTE OCCUPE<br />Un peu de blabla sur lui<br /><a href="URL_PROFIL" class="postlink">Son profil?</a>
</td>

</tr>

</tbody>

</table>

</div>

</div>

<div class="contenu_onglet" id="contenu_onglet_NomOnglet2">

<div class="contenustaff">

<table>

<tbody>

<tr>

<td>
<img src="http://i61.photobucket.com/albums/h58/bourniio/stock1/Stock4/4429.png"/>
</td>

<td>

<div class="nomdustaff">
Nom Prénom 2
</div>
POSTE OCCUPE<br />Un peu de blabla sur lui<br /><a href="URL_PROFIL" class="postlink">Son profil?</a>
</td>

</tr>

</tbody>

</table>

</div>

</div>

<div class="contenu_onglet" id="contenu_onglet_NomOnglet3">

<div class="contenustaff">

<table>

<tbody>

<tr>

<td>
<img src="http://i61.photobucket.com/albums/h58/bourniio/stock1/Stock4/4429.png"/>
</td>

<td>

<div class="nomdustaff">
Nom Prénom 3
</div>
POSTE OCCUPE<br />Un peu de blabla sur lui<br /><a href="URL_PROFIL" class="postlink">Son profil?</a>
</td>

</tr>

</tbody>

</table>

</div>

</div>

<div class="contenu_onglet" id="contenu_onglet_NomOnglet4">

<div class="contenustaff">

<table>

<tbody>

<tr>

<td>
<img src="http://i61.photobucket.com/albums/h58/bourniio/stock1/Stock4/4429.png"/>
</td>

<td>

<div class="nomdustaff">
Nom Prénom 4
</div>
POSTE OCCUPE<br />Un peu de blabla sur lui<br /><a href="URL_PROFIL" class="postlink">Son profil?</a>
</td>

</tr>

</tbody>

</table>

</div>

</div>

<div class="contenu_onglet" id="contenu_onglet_NomOnglet5">

<div class="contenustaff">

<table>

<tbody>

<tr>

<td>
<img src="http://i61.photobucket.com/albums/h58/bourniio/stock1/Stock4/4429.png"/>
</td>

<td>

<div class="nomdustaff">
Nom Prénom 5
</div>
POSTE OCCUPE<br />Un peu de blabla sur lui<br /><a href="URL_PROFIL" class="postlink">Son profil?</a>
</td>

</tr>

</tbody>

</table>

</div>

</div>

<div class="contenu_onglet" id="contenu_onglet_NomOnglet6">

<div class="contenustaff">

<table>

<tbody>

<tr>

<td>
<img src="http://i61.photobucket.com/albums/h58/bourniio/stock1/Stock4/4429.png" />
</td>

<td>

<div class="nomdustaff">
Nom Prénom 6
</div>
POSTE OCCUPE<br />Un peu de blabla sur lui<br /><a href="URL_PROFIL" class="postlink">Son profil?</a>
</td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

</div>
<script type="text/javascript">
//
</script>
</div>

<div id="navigation_pa">


<div class="lien_pa">

<ul id="nav">

<li>
<a href="http://doomsdaythebeginning.forumactif.com/t48-notre-reglement">Reglement</a>
</li>

<li>
<a href="http://doomsdaythebeginning.forumactif.com/t57-histoire-du-forum#232">Contexte</a>
</li>

<li>
<a href="http://doomsdaythebeginning.forumactif.com/t52-les-groupes-du-forum">Groupe</a>
</li>

<li>
<a href="http://doomsdaythebeginning.forumactif.com/f15-aides-de-jeu">Annexe</a>
</li>

<li>
<a href="http://doomsdaythebeginning.forumactif.com/t33-bottin-des-avatars">Bottin</a>
</li>

<li>
<a href="http://doomsdaythebeginning.forumactif.com/f21-coin-des-invites">Coin des invités</a>
</li>

<li>
<a href="http://doomsdaythebeginning.forumactif.com/t60-nos-partenaires">Nos partenaires</a>
</li>

<li>
<a href="http://doomsdaythebeginning.forumactif.com/t67-demande-de-partenariat">Devenir partenaire</a>
</li>

<li>
<a href="http://doomsdaythebeginning.forumactif.com/t20-nos-boutons">Nous lier</a>
</li>

</ul>

</div>

</div>



<div id="partie_credit">
texte
</div>

</div>

Code:: <link href="http://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css" /><style type="text/css">
#wrapper{
width: 790px;
height: 560px;
position: relative;
background: grey;
}

#partie_staff{
position: absolute;
top: 35px;
left:212px;
}

.sous_texte{
text-align: center;
font-size: 14px;
margin-top:10px;
font-family: 'Open Sans Condensed', sans-serif;
color: #c1cec0;
}
.onglet
{
display:inline-block;
padding:3px;
cursor:pointer;
width: 30px;
height: 30px;
}

.onglet_0
{
background:transparent;
width: 30px;
height: 30px;
}

.onglet_1
{
background:transparent;
padding-bottom:4px;
width: 30px;
height: 30px;
}

.contenu_onglet
{
background-color: transparent;
margin-top:-1px;
padding:5px;
display:none;
width: 380px;
height: 100px;
text-align: justify;
font-size: 11px;
font-family: DejaVu Sans;

}
.contenustaff {
width: 340px;
height: 107px;
background-color: #EDFAFF;
border-left: 3px solid #0E86AD;
border-right: 3px solid #0E86AD;
font-size: 10px;
font-family: courrier;
text-align: center;
}

.nomdustaff {
font-size: 28px;
font-family: Lobster;
color: #FF6600;
text-shadow: 1px 0px 0px black;
}

.info2{color: #E95633;
text-shadow: 1px 1px 1px black;
font-family: Lobster;
letter-spacing: 1px;
letter-spacing: 1px;
font-size: 18px;
line-height: 15px;
}

.cube{
height: 30px;
width: 30px;
background-color: black;
} /**/

#navigation_pa{
width: 200px;
height:200px;
background: #665E4E;
position: absolute;
top: 10px;
left: 10px;
}

.lien_pa{
font-size: 14px;
text-transform: uppercase;
text-align: center;
margin-top: 15px;
transition: background 0.5s;
}

li.lien_pa:hover{
background: #80251F!important;
}

#nav {
width: 200px;
list-style: none;
margin: 0;
padding: 0;
}

#nav li {
color: #fff ;
margin-bottom: 1px ;
}

#nav li a {
display: block ;
text-decoration: none ;
color: white;
}

#nav li a:hover, #nav li a:focus, #nav li a:active {
background: #80251F;
}

#partie_news{
width: 200px;
height:200px;
background: #665E4E;
position: absolute;
top: 10px;
right: 10px;
text-align: justify;
overflow: auto;
padding-left: 5px;
padding-right: 5px;
}

#contexte_fow{
width: 770px;
height:120px;
background: #665E4E;
position: absolute;
top: 220px;
left: 10px;
}

.contexte{
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
text-align: justify;
padding: 8px;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
}

/* Bloc principal */
.monBloc {
position: relative; /* important ! */
overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
width: 770px; /* largeur du bloc */
height: 120px; /* hauteur du bloc */
}

/* Bloc de recouvrement */
.blocVolet {
position: absolute; /* positionnement absolu (important) */
top: 0; /* (important) */
left: 0; /* (important) */
width: 300px; /* largeur du bloc (identique au bloc principal) */
height: 120px; /* hauteur du bloc (identique au bloc principal) */
background-image: url(http://img15.hostingpics.net/pics/282627imagecontexte.png);
/* réglage de la transition */
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
z-index: 50;
}

/* Changement au survol */
.monBloc:hover > .blocVolet {
left: -300px; /* le bloc se décalera vers la gauche de 250px; (largeur du bloc) */
}

#partie_mission{
position: absolute;
top: 130px;
left:5px;
background: white;
width: 200px;
height:200px;
}

#membre_mois{
position: absolute;
top: 130px;
left:212px;
}

#credit_info{
position: absolute;
top: 253px;
left:237px;
background: white;
width: 290px;
height: 75px;
padding-left: 5px;
padding-right: 5px;
text-align: justify;
}

#info_divers{
position: absolute;
top: 130px;
right: 5px;
background: white;
width: 200px;
height:200px;
padding-left: 5px;
padding-right: 5px;
text-align: justify;
}

</style>
<div id="wrapper">

<div id="partie_staff">
      <script type="text/javascript">
//
</script>
   <div class="systeme_onglets">

      <div class="onglets" align="center">
            <span class="onglet_0 onglet" id="onglet_NomOnglet1" onmouseover="javascript:change_onglet('NomOnglet1');" onmouseout="javascript:change_onglet('NomOnglet1');"></span>
         <div style="" class="cube">

         </div><span class="onglet_0 onglet" id="onglet_NomOnglet1" onmouseover="javascript:change_onglet('NomOnglet1');" onmouseout="javascript:change_onglet('NomOnglet1');"></span> <span class="onglet_0 onglet" id="onglet_NomOnglet2" onmouseover="javascript:change_onglet('NomOnglet2');"></span>
         <div style="" class="cube">

         </div><span class="onglet_0 onglet" id="onglet_NomOnglet2" onmouseover="javascript:change_onglet('NomOnglet2');"></span> <span class="onglet_0 onglet" id="onglet_NomOnglet3" onmouseover="javascript:change_onglet('NomOnglet3');"></span>
         <div style="" class="cube">

         </div><span class="onglet_0 onglet" id="onglet_NomOnglet3" onmouseover="javascript:change_onglet('NomOnglet3');"></span> <span class="onglet_0 onglet" id="onglet_NomOnglet4" onmouseover="javascript:change_onglet('NomOnglet4');"></span>
         <div style="" class="cube">

         </div><span class="onglet_0 onglet" id="onglet_NomOnglet4" onmouseover="javascript:change_onglet('NomOnglet4');"></span> <span class="onglet_0 onglet" id="onglet_NomOnglet5" onmouseover="javascript:change_onglet('NomOnglet5');"></span>
         <div style="" class="cube">

         </div><span class="onglet_0 onglet" id="onglet_NomOnglet5" onmouseover="javascript:change_onglet('NomOnglet5');"></span> <span class="onglet_0 onglet" id="onglet_NomOnglet6" onmouseover="javascript:change_onglet('NomOnglet6');"></span>
         <div style="" class="cube">

         </div><span class="onglet_0 onglet" id="onglet_NomOnglet6" onmouseover="javascript:change_onglet('NomOnglet6');"></span>
      </div>

      <div class="contenu_onglets" align="center">

         <div class="contenu_onglet" id="contenu_onglet_NomOnglet1">

            <div class="contenustaff">

               <table>

                  <tbody>

                     <tr>

                        <td>
                              <img src="http://i61.photobucket.com/albums/h58/bourniio/stock1/Stock4/4429.png" />
                        </td>

                        <td>

                           <div class="nomdustaff">
                                 Nom Prénom 1
                           </div>
                              POSTE OCCUPE<br />Un peu de blabla sur lui<br /><a href="URL_PROFIL" class="postlink">Son profil?</a>
                        </td>

                     </tr>

                  </tbody>

               </table>

            </div>

         </div>

         <div class="contenu_onglet" id="contenu_onglet_NomOnglet2">

            <div class="contenustaff">

               <table>

                  <tbody>

                     <tr>

                        <td>
                              <img src="http://i61.photobucket.com/albums/h58/bourniio/stock1/Stock4/4429.png" />
                        </td>

                        <td>

                           <div class="nomdustaff">
                                 Nom Prénom 2
                           </div>
                              POSTE OCCUPE<br />Un peu de blabla sur lui<br /><a href="URL_PROFIL" class="postlink">Son profil?</a>
                        </td>

                     </tr>

                  </tbody>

               </table>

            </div>

         </div>

         <div class="contenu_onglet" id="contenu_onglet_NomOnglet3">

            <div class="contenustaff">

               <table>

                  <tbody>

                     <tr>

                        <td>
                              <img src="http://i61.photobucket.com/albums/h58/bourniio/stock1/Stock4/4429.png" />
                        </td>

                        <td>

                           <div class="nomdustaff">
                                 Nom Prénom 3
                           </div>
                              POSTE OCCUPE<br />Un peu de blabla sur lui<br /><a href="URL_PROFIL" class="postlink">Son profil?</a>
                        </td>

                     </tr>

                  </tbody>

               </table>

            </div>

         </div>

         <div class="contenu_onglet" id="contenu_onglet_NomOnglet4">

            <div class="contenustaff">

               <table>

                  <tbody>

                     <tr>

                        <td>
                              <img src="http://i61.photobucket.com/albums/h58/bourniio/stock1/Stock4/4429.png" />
                        </td>

                        <td>

                           <div class="nomdustaff">
                                 Nom Prénom 4
                           </div>
                              POSTE OCCUPE<br />Un peu de blabla sur lui<br /><a href="URL_PROFIL" class="postlink">Son profil?</a>
                        </td>

                     </tr>

                  </tbody>

               </table>

            </div>

         </div>

         <div class="contenu_onglet" id="contenu_onglet_NomOnglet5">

            <div class="contenustaff">

               <table>

                  <tbody>

                     <tr>

                        <td>
                              <img src="http://i61.photobucket.com/albums/h58/bourniio/stock1/Stock4/4429.png" />
                        </td>

                        <td>

                           <div class="nomdustaff">
                                 Nom Prénom 5
                           </div>
                              POSTE OCCUPE<br />Un peu de blabla sur lui<br /><a href="URL_PROFIL" class="postlink">Son profil?</a>
                        </td>

                     </tr>

                  </tbody>

               </table>

            </div>

         </div>

         <div class="contenu_onglet" id="contenu_onglet_NomOnglet6">

            <div class="contenustaff">

               <table>

                  <tbody>

                     <tr>

                        <td>
                              <img src="http://i61.photobucket.com/albums/h58/bourniio/stock1/Stock4/4429.png" />
                        </td>

                        <td>

                           <div class="nomdustaff">
                                 Nom Prénom 6
                           </div>
                              POSTE OCCUPE<br />Un peu de blabla sur lui<br /><a href="URL_PROFIL" class="postlink">Son profil?</a>
                        </td>

                     </tr>

                  </tbody>

               </table>

            </div>

         </div>

      </div>

   </div>
      <script type="text/javascript">
//
</script>
</div>

<div id="navigation_pa">

   
   <div class="lien_pa">

      <ul id="nav">

         <li>
               <a href="http://doomsdaythebeginning.forumactif.com/t48-notre-reglement">Reglement</a>
         </li>

         <li>
               <a href="http://doomsdaythebeginning.forumactif.com/t57-histoire-du-forum#232">Contexte</a>
         </li>

         <li>
               <a href="http://doomsdaythebeginning.forumactif.com/t52-les-groupes-du-forum">Groupe</a>
         </li>

         <li>
               <a href="http://doomsdaythebeginning.forumactif.com/f15-aides-de-jeu">Annexe</a>
         </li>

         <li>
               <a href="http://doomsdaythebeginning.forumactif.com/t33-bottin-des-avatars">Bottin</a>
         </li>

         <li>
               <a href="http://doomsdaythebeginning.forumactif.com/f21-coin-des-invites">Coin des invités</a>
         </li>

         <li>
               <a href="http://doomsdaythebeginning.forumactif.com/t60-nos-partenaires">Nos partenaires</a>
         </li>

         <li>
               <a href="http://doomsdaythebeginning.forumactif.com/t67-demande-de-partenariat">Devenir partenaire</a>
         </li>

         <li>
               <a href="http://doomsdaythebeginning.forumactif.com/t20-nos-boutons">Nous lier</a>
         </li>

      </ul>

   </div>

</div>


<div id="partie_news">
      <strong>00/00/0000 :</strong> Ici écrire la news qui doit paraitre sur la PA<br /> <strong>00/00/0000 :</strong> Ici écrire la news qui doit paraitre sur la PA<br /> <strong>00/00/0000 :</strong> Ici écrire la news qui doit paraitre sur la PA<br /> <strong>00/00/0000 :</strong> Ici écrire la news qui doit paraitre sur la PA<br /> <strong>00/00/0000 :</strong> Ici écrire la news qui doit paraitre sur la PA<br /> <strong>00/00/0000 :</strong> Ici écrire la news qui doit paraitre sur la PA<br /> <strong>00/00/0000 :</strong> Ici écrire la news qui doit paraitre sur la PA<br /> <strong>00/00/0000 :</strong> Ici écrire la news qui doit paraitre sur la PA<br />
</div>


<div id="contexte_fow">

   <div class="monBloc">

      <div class="blocVolet">

      </div>

      <div class="contexte">
            Le monde a tremblé... Du sang a coulé et ce qui n'aurait jamais dut avoir lieu s'est produit : Lucifer est de retour sur Terre. Les chasseurs qui avaient tout fait pour éviter que cela ne se produise ont donc échouer. Mais maintenant il va falloir combattre ! La guerre est imminente et son issue reste incertaine pour ne pas dire très sombre. Si Dean et Sam, accompagnés de leurs amis Bobby Singer et Alix Spencer, semblent être à la tête du mouvement pour rétablir l'ordre, de l'autre côté Lucifer compte bien envoyer ses plus fidèles Démons tel que Caym, ou même Valafar ... S'ils ne veulent pas lui prendre le trône bien sur ! [...]<br />
      </div>

      <center>
            <a target="_blank" href="http://oo-supernatural-oo.forumactif.org/t7750-saison-3-intrigue-n06">En savoir plus...</a>
      </center>

   </div>

   <div id="partie_mission">

      <div class="sous_texte">
            Mission Intrigue & Avancement
      </div>
         <a rel="nofollow" target="_blank" href="http://oo-supernatural-oo.forumactif.org/t7748-la-nuit-des-horreurs" class="lien_pa_color">La nuit des horreurs</a> ¤ <span style="color: red;">✘</span><br /> <a rel="nofollow" target="_blank" href="http://oo-supernatural-oo.forumactif.org/t7748-la-nuit-des-horreurs" class="lien_pa_color">La nuit des horreurs</a> ¤ <span style="color: green;">✔</span><br /> <a rel="nofollow" target="_blank" href="http://oo-supernatural-oo.forumactif.org/t7748-la-nuit-des-horreurs" class="lien_pa_color">La nuit des horreurs</a> ¤ <span style="color: red;">✘</span><br /> <a rel="nofollow" target="_blank" href="http://oo-supernatural-oo.forumactif.org/t7748-la-nuit-des-horreurs" class="lien_pa_color">La nuit des horreurs</a> ¤ <span style="color: green;">✔</span><br /> <a rel="nofollow" target="_blank" href="http://oo-supernatural-oo.forumactif.org/t7748-la-nuit-des-horreurs" class="lien_pa_color">La nuit des horreurs</a> ¤ <span style="color: red;">✘</span><br /> <a rel="nofollow" target="_blank" href="http://oo-supernatural-oo.forumactif.org/t7748-la-nuit-des-horreurs" class="lien_pa_color">La nuit des horreurs</a> ¤ <span style="color: green;">✔</span><br />
   </div>

   <div id="membre_mois">
         <iframe name="iframe" src="http://oo-supernatural-oo.forumactif.org/h1-top-membres" style="width: 350px; height:190px;" align="justify" frameborder="0"> </iframe> <br />
   </div>

   <div id="credit_info">

      <div class="sous_texte">
            Crédit du forum
      </div>
         Forum ouvert le 01/03/2010 Design et codage by Nono Merci à <a href="http://www.css-actif.com/" class="lien_pa_color">CSS Actif</a> et <a href="http://www.never-utopia.com/" class="lien_pa_color">Never Utopia</a>. Optimisé pour Firefox 15 lignes minimum
   </div>

   <div id="info_divers">

      <div class="sous_texte">
            Période RPG de l'Action
      </div>
         Nous sommes en Décembre 2010, Janvier & Février 2011 L'Hiver est là. Les températures sont au plus bas, il neige d'ailleurs. Les journées sont très courtes, il fait nuit dès 17 heures. Le Soleil ne pointe quasiment plus le bout de son nez. Les gants et bonnets sont de rigueur !
   </div>

</div>


</div>