Codage

15/05/1990

Nathan, si tu as le moindre soucis lors de l'installation, n'hésite pas à me contacter sur skype ou Mad World, j'aiderai avec plaisir Codage 3713450799

Il faudra bien sûr adapter des petites choses, notamment les tailles que je n'avais pas pu faire correctement.

PA

Code:: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mandali&display=swap" />
<div style="margin-bottom: 10px; position:relative; height : 550px; width : 806px;">

<div class="lienspa">

<div style="padding-top : 12px; padding-bottom : 15px;">
   <a href="https://">règlement</a> • <a href="https://">contexte</a> • <a href="https://">annexes</a> • <a href="https://">bottin avatars</a> • <a href="https://">bottin personnages</a> • <a href="https://">scénarios</a> • <a href="https://">invités</a>
</div>

</div>

<div style="width: 308px; height: 260px; position: absolute; top: 50px; left: 2px; text-align : justify;">

<div class="fond1pa">

<div class="bloc-contenant">

<div class="texte-dessous">
   l'intrigue en cours ici
</div>
   <img class="img-glisse" src="https://i.servimg.com/u/f53/13/27/27/02/imgint10.png" />
</div>

</div>

</div>

<div style="width: 285px; height: 300px; position: absolute; top: 50px; left: 314px; text-align : justify;">

<div class="fond2pa">

<div style="padding-bottom: 15px; padding-left: 15px; padding-right: 15px;">

<div class="titrepagc">
   CONTEXTE
</div>
   Il y a de quoi être complètement perdu, quand du jour au lendemain, on se retrouve dans un endroit totalement inconnu. Eh bien, c'est ce qui est arrivé à nos personnages de jeux vidéos préférés. Alors qu'ils étaient comme d'habitude en train de vivre leurs aventures extraordinaires, il y eut un grand flash qui les aveugla tous. Cela n'avait aucun sens, aucun d'eux ne comprenait ce qui venait de se produire. Ils s'étaient tous retrouvés dans une ville qu'ils ne connaissaient pas, on pouvait dire que c'était effrayant. Maintenant, ils devaient accepter leur sort et s'habituer à vivre à Game City, oui, c'était bien ce nom que portait cette ville. Certains de ces personnages vivaient normalement, vu qu'ils venaient d'un jeu réaliste. Mais d'autres ne se sentaient pas à leur place, et avaient envie de retourner chez eux.<br /> [...]
</div>

</div>

</div>

<div style="width: 200px; height: 300px; position: absolute; top: 50px; left: 604px; text-align : justify;">

<div class="fond3pa">

<div style="width: 200px; height: 70px; margin-bottom :7px;background-image:url(https://i.servimg.com/u/f53/13/27/27/02/jodiep10.png);">

<div class="imgopacité1">
   <strong>JODIE HOLMES</strong><br />administratrice<br />aucun dc<br /><a href="http://gamecity.forumactif.com/privmsg?mode=post&u=4">ENVOYER MP</a>
</div>

</div>

<div style="width: 200px; height: 70px; margin-bottom :7px;background-image:url(https://i.servimg.com/u/f53/13/27/27/02/nathpa10.png);">

<div class="imgopacité1">
   <strong>NATHAN DRAKE</strong><br />administratrice<br /><span style="font-size: 10px;">Daniella B, Isaak K, Rion S, Trish C & Dae Seo H.</span><br /><a href="http://gamecity.forumactif.com/privmsg?mode=post&u=5">ENVOYER MP</a>
</div>

</div>

<div style="width: 200px; height: 70px; margin-bottom :6px;background-image:url(https://i.servimg.com/u/f53/13/27/27/02/anapa10.png);">

<div class="imgopacité1">
   <strong>M. ANATOLIE SPICIO</strong><br />administratrice<br /><span style="font-size: 10px;">E.Thara F, Zoe B, Liam E. W & Michaela B. S</span><br /><a href="http://gamecity.forumactif.com/privmsg?mode=post&u=410">ENVOYER MP</a>
</div>

</div>

<div class="fondpaadmin">

<div style="padding : 5px;">

<center>
   <span style="font-family: 'Mandali', sans-serif; font-size: 28px;">STAFF</span>
<div style="font-family: Sérif; margin-top : -20px !important;">
   pour vous servir et vous divertir
</div>

</center>

</div>

</div>

</div>

</div>

<div style="width: 308px; height: 135px; position: absolute; top: 315px; left: 2px; text-align : justify;">

<div class="fond4pa">

<center>

<div class="titrepagc">

<center>
   NOS MEMBRES DU MOIS
</center>

</div>
   <span style="font-size: 13px;"><span style="font-family: Trebuchet MS;"><span style="color: #6600FF;">Prénom Nom</span> & <span style="color: #666633;">Prénom nom</span> </span> </span>
</center><img src="https://i.servimg.com/u/f53/13/27/27/02/membre10.png" style="width: 152px;" /><img src="https://i.servimg.com/u/f53/13/27/27/02/membre10.png" style="width: 152px;" />
</div>

</div>

<div style="width: 2
85px; height: 95px; position: absolute; top: 355px; left: 314px; text-align : justify;">

<div class="fond5pa">

<div class="titrepagc">
   ON A BESOIN D'EUX
</div>

<center>
   <img src="https://i.servimg.com/u/f53/13/27/27/02/img10.png" /> <img src="https://i.servimg.com/u/f53/13/27/27/02/img10.png" /> <img src="https://i.servimg.com/u/f53/13/27/27/02/img10.png" /> <img src="https://i.servimg.com/u/f53/13/27/27/02/img10.png" /> <img src="https://i.servimg.com/u/f53/13/27/27/02/img10.png" /> <img src="https://i.servimg.com/u/f53/13/27/27/02/img10.png" />
</center>

</div>

</div>

<div style="width: 200px; height: 95px; position: absolute; top: 355px; left: 604px; text-align : justify;">

<div class="fond6pa">

<div style="padding : 5px;">
   Le forum a ouvert le 03/07/2014 + nous demandons un minimum de dix lignes + le forum appartient à ses administratrices, merci de ne pas recopier ses éléments + design et codage de Nono et Halay.
</div>

</div>

</div>

<div style="width: 596px; height: 95px; position: absolute; top: 455px; left: 2px; text-align : justify;">

<div class="fond7pa">

<div class="titrepagc">
   NOS TOPS PARTENAIRES
</div><a href="https://"><img src="https://i.servimg.com/u/f62/11/25/40/17/logo110.png" /></a> <a href="https://"><img src="https://i.servimg.com/u/f62/11/25/40/17/logo110.png" /></a> <a href="https://"><img src="https://i.servimg.com/u/f62/11/25/40/17/logo110.png" /></a> <a href="https://"><img src="https://i.servimg.com/u/f62/11/25/40/17/logo110.png" /></a> <a href="https://"><img src="https://i.servimg.com/u/f62/11/25/40/17/logo110.png" /></a> <br />
<center>
   <a href="https://">demandes</a> + <a href="https://">partenaires</a> + <a href="https://">notre fiche et boutons</a>
</center>

</div>

</div>

<div style="width: 200px; height: 95px; position: absolute; top: 455px; left: 604px; text-align : justify;">

<div class="fond6pa">

<div class="titrepagc">
   UN PETIT VOTE
</div>

</div>

</div>

</div>

cat

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">

<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

</tr>


<tr>

<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>


<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>

<td><div class="titrecat"><h{catrow.forumrow.LEVEL} class="hierarchy">
<div style="background-color : #fdae5e; width : 776px; height ; 28px; margin : 3px;"><center><span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
   </span></div>
   </h{catrow.forumrow.LEVEL}></div>
   <table><tr><td>
   <div class="lienscat"><div style="padding-top : 10px;"></div>

<span class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

   <script type=”text/javascript”>$(‘.espaceforum’).each(function(){$(this).html($(this).html().replace(/,/g,””));});</script>
   </span> </div>
</td>
<td width="50px">

<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td>
  <div class="dernmess"><br/><br/><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>

</td>

<td>
<div class="desc"> <table><tr><td>
   <div style="height: 85px; margin-top :4px;"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span><br/>
   </div>
   <center> <div class="sujetsmess"><span class="gensmall">{catrow.forumrow.POSTS} parties dans</span> <span class="gensmall">{catrow.forumrow.TOPICS} cartes SD</span> </div></center>
   </td><td>

   
   <div style="width: 50px;"></div>
   <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
   </td></tr></table></div>
</td></tr></table>

</td>
</tr>


<tr>

<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><img src="{SPACER}" alt="" height="5" width="1" />

qeel

Code:: {JAVASCRIPT}

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>


<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>

</table>



<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
   <tr>
   <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

   <table>
   <tr>
   <td><span class="genmed">{L_USERNAME}:</span> </td>
   <td><input class="post" type="text" size="10" name="username"/> </td>
   <td>
   <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
   <span class="gensmall">{L_AUTO_LOGIN}</span>
   </td>
   </tr>

   <tr>
   <td><span class="genmed">{L_PASSWORD}:</span> </td>
   <td><input class="post" type="password" size="10" name="password"/> </td>
   <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
   </tr>
   </table>
   </td>

   
   <td width="10%" align="center" valign="middle" class="row1">
   <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
   </td>
   <td width="40%" class="align_gauche row1">
   <div class="social_btn">
   
   <div class="fb-login-button"></div>
   
   
   <div class="ti-connect"></div>
   
   </div>
   </td>
   

   </tr>
   </table>
</form>


{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top">

<span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>


<br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>

</td>
<td width="50%" align="right">
<span class="gensmall">
<a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
<a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
<a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>


<br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>


</span>
</td>
</tr>
</table>


<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
   <tr>
   <td width="50%" valign="top" align="right" class="row1">

   <table>
   <tr>
   <td><span class="genmed">{L_USERNAME}:</span> </td>
   <td><input class="post" type="text" size="10" name="username"/> </td>
   <td>
   <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
   <span class="gensmall">{L_AUTO_LOGIN}</span>
   </td>
   </tr>

   <tr>
   <td><span class="genmed">{L_PASSWORD}:</span> </td>
   <td><input class="post" type="password" size="10" name="password"/> </td>
   <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
   </tr>
   </table>
   </td>

   
   <td width="10%" align="center" valign="middle" class="row1">
   <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
   </td>
   <td width="40%" class="align_gauche row1">
   <div class="social_btn">
   
   <div class="fb-login-button"></div>
   
   
   <div class="ti-connect"></div>
   
   </div>
   </td>
   

   </tr>
   </table>
</form>



  <div style="position:relative;">
   <div style="position:absolute; top : 21px; left: 0px; width : 760px; height : 123px; font-size: 12px; z-index:2; text-align: justify; font-size : 12px;">
   <div class="systab s_float">
  <div class="selected">
   <span style="background-color : #0f496a;">JE SUIS COMME TOUT LE MONDE</span>
  <img style="float : left; border : 5px solid #0f496a; border-radius : 180px; margin-top : -12px;" class="imgqeel" src="https://i.servimg.com/u/f53/13/27/27/02/imgqee10.png"/> <div style="background-color : #f3dbbd; width : 454px; height : 95px; margin-left : 50px;">blabla ici</div> </div>
  <div>
   <span style="background-color : #2d9d53;">JE SERAI LE MAITRE DU MONDE</span>
  <img style="float : left; border : 5px solid #2d9d53; border-radius : 180px; margin-top : -12px;" class="imgqeel" src="https://i.servimg.com/u/f53/13/27/27/02/imgqee10.png"/> <div style="background-color : #f3dbbd; width : 454px; height : 95px; margin-left : 50px;">blabla ici</div> </div>

  <div>
   <span style="background-color : #7e54b4;">JE VIENS A LA RESCOUSSE</span>
  <img style="float : left; border : 5px solid #7e54b4; border-radius : 180px; margin-top : -12px;" class="imgqeel" src="https://i.servimg.com/u/f53/13/27/27/02/imgqee10.png"/> <div style="background-color : #f3dbbd; width : 454px; height : 95px; margin-left : 50px;">blabla ici</div> </div>

   <div>
   <span style="background-color : #d7851c;">TOUJOURS FIDELE AU POSTE</span>
  <img style="float : left; border : 5px solid #d7851c; border-radius : 180px; margin-top : -12px;" class="imgqeel" src="https://i.servimg.com/u/f53/13/27/27/02/imgqee10.png"/> <div style="background-color : #f3dbbd; width : 454px; height : 95px; margin-left : 50px;">blabla ici</div> </div>

   <div>
   <span style="background-color : #6a0231;">J'AI CHANGE DE PEAU</span>
  <img style="float : left; border : 5px solid #6a0231; border-radius : 180px; margin-top : -12px;" class="imgqeel" src="https://i.servimg.com/u/f53/13/27/27/02/imgqee10.png"/> <div style="background-color : #f3dbbd; width : 454px; height : 95px; margin-left : 50px;">blabla ici</div> </div>
  </div>

<div style="clear:left"></div>


</div>
   <div style="position:absolute; top : 260px; left: 18px; font-size: 12px; width:262px; height:151px; z-index:2; text-align: justify; font-size : 12px; background-color : #FDAE5E;">

  <div class="qeel1"> <div style="padding-top: 10px; padding-left: 10px; padding-right: 10px;"><span style="color: #292929;">
{NEWEST_USER}.
   {TOTAL_USERS_ONLINE}.</span><br/><br/>
   <span style="color: #292929;">{LOGGED_IN_USER_LIST}</span>
   </div>
   </div></div>
   <div style="position:absolute; top : 260px; left: 290px; font-size: 12px; width:195px; height:151px; z-index:2; text-align: justify; font-size : 12px;">
   <div style="text-align : center ; background-color : #FDAE5E; width : 195px; height :35px; margin-bottom : 4px;"><div style="padding-top: 6px; padding-left: 15px; padding-right: 15px;">
   <span style="font-size:18px;"><span id="delf">
   {TOTAL_USERS}</span>
   <script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Nous avons/,"");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/membres enregistrés/,"GAMERS.");</script>

   </span></div></div>
   <div style="margin-bottom : 2px; text-align : center; background-color : #FDAE5E; width : 195px; height :35px;"><div style="padding-top: 6px; padding-left: 15px; padding-right: 15px;">
   <span style="font-size:18px;"><span id="delf1">{TOTAL_POSTS}</span>
   <script type="text/javascript">document.getElementById('delf1').innerHTML=document.getElementById('delf1').innerHTML.replace(/Nos membres ont posté un total de/,"");</script><script type="text/javascript">document.getElementById('delf1').innerHTML=document.getElementById('delf1').innerHTML.replace(/messages/,"MESSAGES.");</script></span></div>
   </div>

   <table><tr><td><span id="avatar_dernier_membre"></span></td><td>
   <center> <span style="font-family: Sérif;"><span id="dernier_membre">{NEWEST_USER}</span></span></center></td></tr></table>
   </div>

   <div style="position:absolute; top : 260px; left: 495px; font-size: 12px; width:262px; height:151px; overflow: auto; z-index:2; text-align: justify; font-size : 12px; background-color : #FDAE5E;">
   <div style="padding-top: 10px; padding-left: 10px; padding-right: 10px;"> <table class="listlastconnected">{L_CONNECTED_MEMBERS}</table>
</div></div>
   <img src="https://i.servimg.com/u/f53/13/27/27/02/qeel_g10.png" width="771" height="434" border="0" usemap="#map2" />


   <map name="map2">





</map>

{CHATBOX_BOTTOM}
<br clear="all" />

<table border="0" cellspacing="3" cellpadding="0" align="center">
<tr>
<td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
<td><span class="gensmall">{L_NEW_POSTS}</span></td>
<td></td>
<td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
<td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
<td>  </td>
<td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
<td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
</tr>
</table>


{AUTO_DST}

css

Code:: /* CODAGE GAME*/
   #avatar {
   width: 200px;
   height: 320px;
   }

/* .systab .tab => les onglet */
a.forumlink, a.forumlink:link, a.forumlink:active, a.forumlink:visited {
font-weight:normal;
font-family: 'Open Sans', sans-serif;
color: #e1d3a0;
font-size: 18px;
float : bottom;
height : 27px;
letter-spacing: 0px;
}

.systab .tab {
  padding: 2px 10px;
  color: #000;
  cursor: pointer;
   transition: all 0.75s; /*correspond à la vitesse de transition entre l'image & les informations*/
   -webkit-transition: all 0.75s; /*pour que la transition fonctionne sur Chrome & Safari*/
   -moz-transition: all 0.75s; /*pour que la transition fonctionne sur Mozilla*/
   -ms-transition: all 0.75s; /*pour que la transition fonctionne sur Internet Explorer*/
   -o-transition: all 0.75s; /*pour que la transition fonctionne sur Opera*/
   opacity: 1; /*correspond à l'opacité de l'image*/
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
  background: #b8efa1;
  color: #487f31;
  border-color: #487f31;
   opacity: 0.75; /*correspond à l'opacité de l'image restant derrière le texte après avoir passé la souris*/
}

/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
  color: #ccc;
  background: #333;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets */
.systab .contents {
  margin-top: 1px;
  margin-bottom: 1px;
  color: #000;
  padding: 10px;
}
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
  display: block;
  margin: 4px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
  float: left;
}

/* AVATAR DERNIER UTILISATEUR ENREGISTRE QEEL */
   #avatar_dernier_membre {
   width:45px; height:73px;
   }
   #avatar_dernier_membre img {
   width:45px;
   }

.listlastconnected td {
text-align : justify;
background-color:transparent;
background-image:none; }

   .bloc-contenant {
   width:306px; /*largeur du bloc*/
   position: relative; /*pour pouvoir positionner l image plus bas en absolu*/
   overflow: hidden; /*pour ne pas voir l image quand elle sort*/
   }
   .texte-dessous {
   padding: 5px; /*marge intérieur du bloc*/
   height: 256px; /*hauteur du bloc*/
   overflow: auto; /*pour la barre de défilement si plus long*/
   }
   .img-glisse {
   width:306; /*largeur de l image s'adapte au bloc*/
   height:256; /*hauteur de l image s'adapte au bloc*/
   position: absolute; /*positionnement par rapport au boc*/
   top:0; /*positionnement vertical*/
   left:0; /*positionnement horizontal*/
   transition: top 1s ease; /*pour l effet de transition*/
   }

   .bloc-contenant:hover .img-glisse {
   top:-100%; /*au survol de bloc-contenant, l image est au dessus du bloc*/
   }

.fondpaadmin { height : 70px;
  width : 200px;
  background-color : #D4D4D4; }

.imgopacité1
   {font-family: 'Poiret One', cursive;
font-style: normal;
  font-size : 12px;
  font-color : #000000;
  text-align :center;
   width: 200px; /*correspond à la largeur*/
   height: 70px; /*correspond à la hauteur*/
   background-color:#ffffff; /*correspond à la couleur de fond des informations*/
   transition: all 0.75s; /*correspond à la vitesse de transition entre l'image & les informations*/
   -webkit-transition: all 0.75s; /*pour que la transition fonctionne sur Chrome & Safari*/
   -moz-transition: all 0.75s; /*pour que la transition fonctionne sur Mozilla*/
   -ms-transition: all 0.75s; /*pour que la transition fonctionne sur Internet Explorer*/
   -o-transition: all 0.75s; /*pour que la transition fonctionne sur Opera*/
   opacity: 0; /*correspond à l'opacité de l'image*/
   }

   .imgopacité1:hover {
   opacity: 0.7; /*correspond à l'opacité de l'image restant derrière le texte après avoir passé la souris*/
   }

.fond1pa { background-color : #D4D4D4;
  height : 256px;
width : 306px;
}

.fond2pa { border : solid 2px #CDCDCD;
  background-color : #D4D4D4;
height : 296px;
width : 283px;
}

.fond3pa {
height : 300px;
width : 200px;
}

.fond4pa { border : solid 2px #CDCDCD;
  background-color : #D4D4D4;
height : 135px;
width : 304px;
}

.fond5pa { border : solid 2px #CDCDCD;
  background-color : #D4D4D4;
height : 95px;
width : 283px;
}

.fond6pa { border : solid 2px #CDCDCD;
  background-color : #D4D4D4;
height : 95px;
width : 196px;
}

.fond7pa { background-color : #D4D4D4;
height : 95px;
width : 595px;
   border : solid 2px #CDCDCD;
}

.lienspa {
height : 45px;
  width : 802px;
  background-color : #333333;
  font-size : 14px;
  text-transform: uppercase;
   }

.lienspa a { font-family: 'Mandali', sans-serif;
  color: #ffffff;
   transition: all 0.75s; /*correspond à la vitesse de transition entre l'image & les informations*/}

.lienspa a:hover {
color : #68DB74; }

.titrepagc { font-weight: normal;
font-size : 18px;
letter-spacing: 2px;
font-variant: small-caps;
text-align : left;
   font-family: 'Mandali', sans-serif;

}

.titrecat { background-color : #efefef;
width : 770px;
  padding : 2px;
  text-align : center; }

  .lienscat { background-color : #efefef;
width : 155px;
  height : 120px;
}

.sousfo {
background-color : #a2a2a2;
  width : 140px;
  margin-left :05px;
  margin-right : 05px;
  margin-top : -5px;
padding : 2px;
text-align : center;}

.sujetsmess { background-color : #ffffff;
   width : 250px;
  padding : 2px;
text-align : center;}

.desc { background-color : #efefef;
width : 400px;
  height : 116px;
padding : 2px;
text-align : justify;}

.lastpost-avatar img {
align : right !important;
opacity:0.9;
transition: all ease 1s;
width :60px;
height : 96px; }

.lastpost-avatar img:hover {
opacity:0.5;
transition: all ease 1s; }

.supvirg {
font-family: 'Thasadith', sans-serif;
text-transform: lowercase;
font-size : 12px !important;
font-weight : normal;
line-height:14px;}

.dernmess { background-color : #efefef;
  width : 155px;
   height : 120px;
  text-align : center; }

07/04/1988

Jodie,

Désolé de te déranger, je suis en train d'installer le design sur le forum de test pour le préparer.
J'ai quelques bug.

La PA qui est reste pas dans le cadre de la pa et le qeel qui par en steak xD

https://testgraphnono.forumperso.com/

Je sais pas si tu as la solution ?