NIGHT WORLD.

**PNJ** Messages : 98

Spoiler:

Code:: /* Bloc principal */
.monBloc {
position: relative;
overflow: hidden;
width: 220px;
height: 70px;
background: black;
}
/* Bloc de recouvrement */
.blocVolet {
position: absolute;
width: 220px;
height: 70px;
top: 0;
left: 0;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
background-image: url('http://i48.tinypic.com/344a34p.png');
}
.blocVolet2 {
position: absolute;
width: 220px;
height: 70px;
top: 0;
left: 0;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
background-image: url('http://i46.tinypic.com/etb7rb.png');
}
.blocVolet3 {
position: absolute;
width: 220px;
height: 70px;
top: 0;
left: 0;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
background-image: url('http://i73.servimg.com/u/f73/17/48/93/08/tumblr10.png');
}
/* Changement au survol */
.monBloc:hover > .blocVolet {
top: 70px;
}
.monBloc:hover > .blocVolet2 {
top: 70px;
}
.monBloc:hover > .blocVolet3 {
top: 70px;
}
.pa {
opacity: 0.3;
}

.pa:hover {
opacity: 1;}

.pres {
opacity: 0.3;
width: 500px;
}

.pres:hover {
opacity: 1;
width: 500px;}

Code:: <TABLE cellSpacing=10 cellPadding=3 width="100%" align=center>
<TBODY>
<TR>
<TD align=left width=230></TD>
<TD align=center width=230></TD>
<TD align=right width=230></TD></TR>
<TR>
<TD style="TEXT-ALIGN: justify" width="230"> <center><div class="pa"><img src="http://25.media.tumblr.com/tumblr_mbrej6Z8Ue1r3x0fno1_500.gif" width="245"></div></center><div style="border-top: 1px dotted grey; border-bottom: 1px dotted grey; background-color: black; width: 230px; padding: 10px">Le night world n'est pas un endroit précis. Il nous entoure. C'est une société secrète de vampires, loup-garous, sorcières, et autres créatures de la nuit qui vivent parmi nous. Ils sont magnifiques et irrésistibles aux humains. Ton professeur au lycée pourrait en faire partie, ou même ton petit ami.
Les règles du Night World autorisent ces monstres à chasser les humains. C'est ok de jouer avec leurs cœurs, c'est même ok de les tuer. Il y a seulement deux choses qu'il ne faut surtout pas faire avec eux, sinon, c'est la mort;<br>
⇨ Leur apprendre l'existence du night world. <br>
⇨ Tomber amoureux d'un humain.</div></TD>
<TD style="TEXT-ALIGN: justify" width=230> <div style="border-top: 1px dotted grey; border-bottom: 1px dotted grey; background-color: black; width: 230px; height: 100px; padding: 10px">◐ Le forum a été créé le 06.10.2012<br>
◐ Le forum a ouvert ses portes le jj.mm.aaaa<br>
◐ La nouvelle version a été réalisée par Sugar Slaughther, nous la remercions pour son travail !</div><br><br> <center><div class="monBloc">
<div class="blocVolet"></div><div style="font-family: georgia; color: grey; font-style: italic; font-size: 22px;">bethany l. odair</div><br><div style="color: lightgrey; font-size: 8px; margin-top: -20px;">FONDATRICE - CHILDISH DREAMS</div> <br><div style="color: lightgrey; font-size: 8px; margin-top: 15px; font-style: italic;">DC; aucun.</div>
</div><div class="monBloc">
<div class="blocVolet2"></div><div style="font-family: georgia; color: grey; font-style: italic; font-size: 22px;">saul nguyen</div><br><div style="color: lightgrey; font-size: 8px; margin-top: -15px;">ADMINISTRATRICE - LOFTICRIS</div> <br><div style="color: lightgrey; font-size: 8px; margin-top: 15px; font-style: italic;">DC; aucun.</div>
</div><div class="monBloc">
<div class="blocVolet3"></div><div style="font-family: georgia; color: grey; font-style: italic; font-size: 22px;">p. siobhan hawkins</div><br><div style="color: lightgrey; font-size: 8px; margin-top: -20px;">ADMINISTRATRICE - BLUE BIRD</div> <br><div style="color: lightgrey; font-size: 8px; margin-top: 15px; font-style: italic;">DC; aucun.</div>
</div></td>
</td></table></TD></center>
<TD style="TEXT-ALIGN: justify" width=230> <br><br><br><div style="margin-top: -6px; border-top: 1px dotted grey; border-bottom: 1px dotted grey; background-color: black; width: 230px; height: 100px; padding: 10px; font-size: 10px;">Tu veux absolument voir ton scénario pris ? Tu veux que le frère de ton personnage nous rejoigne, que ta petite-amie atterrisse sur le forum ? Well, c'est simple. Il suffit de remonter les sujets de notre publicité sur <a href="http://childishdreams.weshforum.com/?tid=88af46f7452750dd68c6df5470596a56" class="postlink">Bazzart</a> et <a href="http://childishdreams.weshforum.com/?tid=88af46f7452750dd68c6df5470596a56" class="postlink">Pub Rpg Design</a>. Ou tu peux utiliser la vieille bonne manière ; la vente par tes propres moyens. </div>
<br><center><div style="border-top: 1px dotted grey; border-bottom: 1px dotted grey; background-color: black; width: 230px; height: 100px; padding: 10px"><div class="cssactif_tableaupartenaire">
<a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a>
</div><div style="font-size: 10px";> <a href="http://childishdreams.weshforum.com/t39-demande-de-partenariat" class="postlink">Devenir partenaires ?</a> ◐ <a href="http://childishdreams.weshforum.com/t38-friends" class="postlink">Nos partenaires. </a></div> </center>
</div><center><div class="pa"><img src="http://25.media.tumblr.com/tumblr_m8qm19XBy81qej15qo1_500.gif" width="245"></div></center>
</TD></TR></TBODY></TABLE>

Code:: div.cssactif_tableaupartenaire {
width: 208px; /* À adapter en fonction du nombre de colonnes désirées (typiquement: (NOMBRE_COLONNE * (2*MARGE)) + (4 * Largeur initiale) */
line-height: 0; /* À ne pas modifier */
}
div.cssactif_tableaupartenaire a, div.cssactif_tableaupartenaire a img {
height: 18px; /* Hauteur initiale */
width: 50px; /* Largeur initiale */
}
div.cssactif_tableaupartenaire a {
display: inline-block; /* À ne pas modifier */
position: relative; /* À ne pas modifier */
margin: 1px; /* MARGE entre les images */
}

div.cssactif_tableaupartenaire a img {
display: block; /* À ne pas modifier */
position: absolute; /* À ne pas modifier */
left: 0; /* À ne pas modifier */
top: 0; /* À ne pas modifier */

/* Transitions pour différents navigateurs */
/* navigateur: toutes_transitions durée type */
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

div.cssactif_tableaupartenaire a:hover img {
height: 31px; /* Hauteur finale */
width: 88px; /* Largeur finale */
z-index: 99; /* Place l'image au-dessus des autres */

/* Positionne le logo de pleine taille au centre - À adapter */
left: -50%;
top: -50%;
}

**PNJ** Messages : 98

Code:: <TABLE cellSpacing=10 cellPadding=3 width="100%" align=center><TBODY><TR><TD align=left width=230 margin-top: -40px></TD><TD align=center width=230></TD><TD align=right width=230></TD></TR><TR><TD style="TEXT-ALIGN: justify" width="230"> <div style="border-top: 0px dotted grey; border-bottom: 0px dotted grey; background-color: #FAE4D1; width: 230px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; overflow:auto; padding: 10px; font-size: 9px;"><center><div class="pa"><img src="http://24.media.tumblr.com/8073335cda4f1f75b0de179e86631a10/tumblr_mleha6slSn1r7ra3qo2_250.gif" width="230"></div></center>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </div></TD>
<TD style="TEXT-ALIGN: justify" width=230> <div style="border-top: -15px; dotted grey; border-bottom: 0px dotted grey; background-color: #FAE4D1; border-top-left-radius: 50px; border-bottom-right-radius: 50px; width: 230px; height: 160px; overflow:auto; padding: 10px; font-size: 9px;">◐ Le forum a été créé le 06.10.2012 ◐ Le forum a ouvert ses portes le jj.mm.aaaa ◐ La nouvelle version a été réalisée par TOXIC GLAM, nous la remercions pour son travail !</div><br><center><div class="monBloc">
<div class="blocVolet"></div><div style="font-family: georgia; color: grey; font-style: italic; font-size: 22px;">bethany l. odair</div><br><div style="color: lightgrey; font-size: 8px; margin-top: -20px;">FONDATRICE - CHILDISH DREAMS</div> <br><div style="color: lightgrey; font-size: 8px; margin-top: 15px; font-style: italic;">DC; aucun.</div>
</div><div class="monBloc">
<div class="blocVolet2"></div><div style="font-family: georgia; color: grey; font-style: italic; font-size: 22px;">saul nguyen</div><br><div style="color: lightgrey; font-size: 8px; margin-top: -15px;">ADMINISTRATRICE - LOFTICRIS</div> <br><div style="color: lightgrey; font-size: 8px; margin-top: 15px; font-style: italic;">DC; aucun.</div>
</div><div class="monBloc">
<div class="blocVolet3"></div><div style="font-family: georgia; color: grey; font-style: italic; font-size: 22px;">p. siobhan hawkins</div><br><div style="color: lightgrey; font-size: 8px; margin-top: -20px;">ADMINISTRATRICE - BLUE BIRD</div> <br><div style="color: lightgrey; font-size: 8px; margin-top: 15px; font-style: italic;">DC; aucun.</div>
</div></td>
</td></table></TD></center>
<TD style="TEXT-ALIGN: justify" width=230> <br><br><br><div style="margin-top: -6px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; border-top: 0px dotted grey; border-bottom: 0px dotted grey; background-color: #FAE4D1; width: 230px; height: 140px; padding: 10px; overflow:auto; font-size: 10px;">Tu veux absolument voir ton scénario pris ? Tu veux que le frère de ton personnage nous rejoigne, que ta petite-amie atterrisse sur le forum ? Well, c'est simple. Il suffit de remonter les sujets de notre publicité sur <a href="http://childishdreams.weshforum.com/?tid=88af46f7452750dd68c6df5470596a56" class="postlink">Bazzart</a> et <a href="http://childishdreams.weshforum.com/?tid=88af46f7452750dd68c6df5470596a56" class="postlink">Pub Rpg Design</a>. Ou tu peux utiliser la vieille bonne manière ; la vente par tes propres moyens. </div><br><center><div style="border-top: 0px dotted grey; border-bottom: 0px dotted grey; border-top-left-radius: 50px; border-bottom-right-radius: 50px; overflow:auto; background-color: #FAE4D1; width: 230px; height: 210px; padding: 10px"><div class="cssactif_tableaupartenaire">
<a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a><a href="http://www.css-actif.com" title="CSSActif"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" alt="CSSActif" /></a>
</div><div style="font-size: 10px";> <a href="http://childishdreams.weshforum.com/t39-demande-de-partenariat" class="postlink">Devenir partenaires ?</a> ◐ <a href="http://childishdreams.weshforum.com/t38-friends" class="postlink">Nos partenaires. </a>
</div><center><div class="pa"><img src="http://25.media.tumblr.com/64cf2d6d6f7f0d1f271367d98d3edce0/tumblr_ml3ti7r1sl1qe7736o7_250.gif" width="230"></div> </center></div></center>
</TD></TR></TBODY></TABLE>

» KATHLEEN •• she expected the world, but it flew away from her reach.

NIGHT WORLD.

NIGHT WORLD.

Sujets similaires

Sujets similaires