Je me suis permis de tenter quelque chose également. :p
En revanche, comme j'ai du toucher à ma feuille de style CSS, je vais devoir t'envoyer vers mon forum-test tout moche. Il vaudrait donc mieux que tu essaies mon code sur ton propre forum, où tu auras un meilleur aperçu
.
Bref, assez bavardé, ta commande t'attend.
Palons code, maintenant.
Tu devras inclure ceci à ta feuille de style CSS (Affichage -> Couleurs -> Feuille de style CSS) :
- Code:
.description
{
display: block;
width: 200px;
margin: auto;
height: 400px;
overflow: hidden;
}
.description_contenu
{
position: absolute;
width: 200px;
height: 400px;
overflow: 400px;
background-color: #EFE9DD;
font-size: 11.5px;
font-family:'Georgia';
color: #3E352E;
text-align: justify;
padding:0px;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.description_contenu:hover
{
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
filter: alpha(opacity=80);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
Et le code de la fiche :
- Code:
<center><div style="width:650px; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border-left:3px #ED017F solid; border-right:3px #ED017F solid; background-color:#FEFA75; padding:15px;"><table><td><center><div class="description"><div style="display: block; text-align: justify; width: 200px; height: 400px; background: url(http://i.imgur.com/suVI5gr.png) center center no-repeat;"><div class="description_contenu"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;"><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Nom : </span>[VOTRE NOM ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Âge : </span>[VOTRE ÂGE ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Lieu de naissance : </span>[VOTRE LIEU DE NAISSANCE ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Race : </span>[VOTRE RACE ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Pouvoirs & capacités : </span><br />[VOS POUVOIRS ICI.]<br /></div></div></div></div></center></td><td style="width:3px;"></td><td><div style="width:225px; height:380px; overflow:auto; padding:10px; border:1px #DB1578 dashed;"><center><span style="font-variant:small-caps; font-size:20px; font-family:'Georgia'; letter-spacing:1px; text-shadow:1px 1px 1px grey; color:#DB1578;">[Pseudo ici.]</span></center><br /><script type="text/javascript" src="http://tinyurl.com/var-fa"></script><link href="http://fonts.googleapis.com/css?family=Miniver" rel="stylesheet" type="text/css"><div style="font-family:'Miniver';font-size:20px;color:green; margin-left:35px; margin-bottom:-10px;">Moi...</div><br /><div style="border-bottom:2px black dashed;text-align:justify;"><span style=" font-family:'Georgia'; color:black; font-size:11px;line-height:12px;">Présentation de vous. Histoire, caractère, physique etc.</span></div><br /><script type="text/javascript" src="http://tinyurl.com/var-fa"></script><link href="http://fonts.googleapis.com/css?family=Miniver" rel="stylesheet" type="text/css"><div style="font-family:'Miniver';font-size:20px;color:green; margin-left:35px; margin-bottom:-10px;">Mes RP's</div><br /><span style="text-align:center; font-family:'Georgia'; color:black; line-height:12px; font-size:11px;"><a href="http://sanctuary-of-heart.forumactif.org/#">Nom du RP</a> - avec XX - en cours/terminé<br /><a href="http://sanctuary-of-heart.forumactif.org/#">Nom du RP</a> - avec XX - en cours/terminé<br /><a href="http://sanctuary-of-heart.forumactif.org/#">Nom du RP</a> - avec XX - en cours/terminé<br /><a href="http://sanctuary-of-heart.forumactif.org/#">Nom du RP</a> - avec XX - en cours/terminé<br /></span></div></td><td style="width:3px;"></td><td><div style="width:150px; height:380px; overflow:auto; padding:10px; border:1px #DB1578 dashed;"><center><span style="font-variant:small-caps; font-size:18px; font-family:'Georgia'; letter-spacing:1px; text-shadow:1px 1px 1px grey;color:#DB1578;">Je recherche...</span></center><br /><span style=" font-family:'Georgia'; color:black; font-size:11px;"><div style="text-align:justify;">Liens désirés ici.</div></span></div></td></table></div></center><br />
<center><div style="width:650px; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;border-left:3px #ED017F solid; border-right:3px #ED017F solid; background-color:#FEFA75; padding:20px;"><center><span style="font-variant:small-caps; font-size:20px; font-family:'Georgia'; letter-spacing:1px; text-shadow:1px 1px 1px grey; color:#DB1578;">Mes liens...</span></center><br /><table><td><div class="description"><div style="display: block; text-align: justify; width: 200px; height: 400px; background: url(http://i.imgur.com/bDu6963.png) center center no-repeat;"><div class="description_contenu"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;"><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;text-align:justify;font-size:19px;"><center>[Nom du membre]</center></span><br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Âge : </span>[Âge DU PERSO ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Race : </span>[Race DU PERSO ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Description du lien : </span><br />[DESCRIPTION DU LIEN ICI.]<br /></div></div></div></div></td><td style="width:10px;"></td><td><div class="description"><div style="display: block; text-align: justify; width: 200px; height: 400px; background: url(http://i.imgur.com/bDu6963.png) center center no-repeat;"><div class="description_contenu"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;"><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;text-align:justify;font-size:19px;"><center>[Nom du membre]</center></span><br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Âge : </span>[Âge DU PERSO ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Race : </span>[Race DU PERSO ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Description du lien : </span><br />[DESCRIPTION DU LIEN ICI.]<br /></div></div></div></div></td><td style="width:10px;"></td><td><div class="description"><div style="display: block; text-align: justify; width: 200px; height: 400px; background: url(http://i.imgur.com/bDu6963.png) center center no-repeat;"><div class="description_contenu"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;"><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;text-align:justify;font-size:19px;"><center>[Nom du membre]</center></span><br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Âge : </span>[Âge DU PERSO ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Race : </span>[Race DU PERSO ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Description du lien : </span><br />[DESCRIPTION DU LIEN ICI.]<br /></div></div></div></div></td></table><br /><table><td><div class="description"><div style="display: block; text-align: justify; width: 200px; height: 400px; background: url(http://i.imgur.com/bDu6963.png) center center no-repeat;"><div class="description_contenu"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;"><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;text-align:justify;font-size:19px;"><center>[Nom du membre]</center></span><br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Âge : </span>[Âge DU PERSO ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Race : </span>[Race DU PERSO ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Description du lien : </span><br />[DESCRIPTION DU LIEN ICI.]<br /></div></div></div></div></td><td style="width:10px;"></td><td><div class="description"><div style="display: block; text-align: justify; width: 200px; height: 400px; background: url(http://i.imgur.com/bDu6963.png) center center no-repeat;"><div class="description_contenu"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;"><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;text-align:justify;font-size:19px;"><center>[Nom du membre]</center></span><br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Âge : </span>[Âge DU PERSO ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Race : </span>[Race DU PERSO ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Description du lien : </span><br />[DESCRIPTION DU LIEN ICI.]<br /></div></div></div></div></td><td style="width:10px;"></td><td><div class="description"><div style="display: block; text-align: justify; width: 200px; height: 400px; background: url(http://i.imgur.com/bDu6963.png) center center no-repeat;"><div class="description_contenu"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;"><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;text-align:justify;font-size:19px;"><center>[Nom du membre]</center></span><br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Âge : </span>[Âge DU PERSO ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Race : </span>[Race DU PERSO ICI.]<br /><span style="text-shadow:1px 1px 1px white; font-variant:small-caps; letter-spacing:1px; word-spacing:2px;">Description du lien : </span><br />[DESCRIPTION DU LIEN ICI.]<br /></div></div></div></div></td></table>
<center><i><span style="font-size:9px;font-family:'Georgia'; letter-spacing:1px;">(c) Code de Lou, pour <a href="http://www.never-utopia.com">Never-Utopia</span></a></i></center></div></center>
Si question couleurs, ça ne va pas, n'hésite pas à me le dire. Je ne m'y connais pas du tout dans ce domaine, donc j'ai fait au mieux avec ce que tu m'as donné. La structure n'est pas complètement respectée, je peux l'arranger, si tu veux. Que dire d'autre ? Ah oui ! Je ne savais pas trop quels champs utiliser pour afficher les informations sur les membres. J'ai regardé rapidement ton forum, et je me suis dit que ça irait. Mais encore une fois, c'est modifiable.
J'espère que tu passes de bonnes vacances
. A très vite !
Hiro'.