Invité, CECI EST UN FORUM TEST PRIVE ET FERME POUR UNIQUE UTILISATION DE JABBERION
 
AccueilAccueil    CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 CODE PA 01

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Abhess

avatar

Messages : 577
Gallions : 5732
Date d'inscription : 25/06/2010
Age : 24
Localisation :

MessageSujet: CODE PA 01   Mer 23 Juil - 1:03

Code:
<div id="accueil"><div id="page1"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Titre page 1</span></td><td><div class="contenu">Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.</div></td></tr></table></div><div id="page2"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Titre page 2</span></td><td><div class="contenu">Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.</div></td></tr></table></div><div id="page3"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Titre page 3</span></td><td><div class="contenu">Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.</div></td></tr></table></div><div id="page4"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Titre page 4</span></td><td><div class="contenu">Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.</div></td></tr></table></div><div id="page5"><table class="contenu_page"><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">Titre page 5</span></td><td><div class="contenu">Placez ici le contenu de votre page : texte, liens, images (attention pas trop grandes sinon elles seront coupées), partenaires, top sites ou ce que vous souhaitez. Il est déconseillé d'utiliser le défilement "marquee" dont l'affichage est très souvent mal géré par les navigateurs.</div></td></tr></table></div>
</div>
<!-- Merci de ne PAS enlever le crédit ! Il est fait pour être en petit, de la couleur de vos liens, en dessous de l'accordéon, il ne fera pas fuir vos membres  et il permet de remercier le créateur du code que vous utilisez pour votre propre forum [Sparrow-style] -->
<span class="credit"><a href="http://www.never-utopia.com">(c) par Never-Utopia</a></span>




CSS


Code:
#accueil
{
width: 900px;
height: 400px;
overflow: hidden;
background: url(http://img11.hostingpics.net/pics/181185imagedefond.jpg) center no-repeat;
border: 3px solid #272727;
}
#page1
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #555555;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page1:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page2
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #777777;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page2:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page3
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #9b9b9b;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page3:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page4
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #bababa;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page4:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page5
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #dcdcdc;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}
#page5:hover
{
width: 80%;
height: 400px;
overflow: hidden;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-htm-transition: 2s;
-webkit-transition: 2s;
}

.contenu_page
{
width: 100%;
height: 400px;
}
.page_titre
{
display: inline-block;
height: 40px;
width: 400px;
color: #ffffff;
margin-left: -180px;
text-align: center;
font-size: 24px;
font-family: arial black;
letter-spacing: 2px;
text-shadow: 1px 1px 0px #5f5f5f;
-webkit-transform: rotate(-90deg);  
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.contenu
{
width: 0px;
height: 0px;
background-color: white;
overflow: hidden;
padding: 6px;
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;
}
#page1:hover .contenu, #page2:hover .contenu, #page3:hover .contenu, #page4:hover .contenu, #page5:hover .contenu
{
width: 650px;
height: 380px;
margin-left: -180px;
background-color: white;
overflow: none;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
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;
}

.credit
{
display: block;
text-align: right;
margin-right: 20px;
}
.credit a
{
font-size: 10px;
text-decoration: none !important;
}


READ THE STORY ϟ Wherever my story takes me, however dark and difficult the theme, there is always some hope and redemption, not because readers like happy endings, but because I am an optimist at heart. I know the sun will rise in the morning, that there is a light at the end of every tunnel.  ► hellsangels.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://london-kuroshiti.forumperso.com
Abhess

avatar

Messages : 577
Gallions : 5732
Date d'inscription : 25/06/2010
Age : 24
Localisation :

MessageSujet: Re: CODE PA 01   Mer 23 Juil - 1:07

Code:
<div id="mozaik"><div id="mozaik_top">
<span class="mozaik_titretop"><img src="http://img15.hostingpics.net/pics/612828topsite.png" alt="Top sites et Partenaires" /></span><div class="mozaik_contenu2">Votez pour nous !<br />
<a href="#"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="#"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="#"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a>
<br /><br />
Nos Partenaires<br />
<a href="#"><img src="http://media2.paperblog.fr/i/468/4683274/bienvenue-nouvelle-partenaire-house-of-night--L-41CNGx-175x130.jpeg" alt="Nom du forum" /></a><a href="#"><img src="http://4.bp.blogspot.com/-ZYIzBqlG43Y/TrGS0QHf0QI/AAAAAAAAAIs/PzQsIVI3s48/s1600/0000000000000101230110642314831.png" alt="Nom du forum" /></a><a href="#"><img src="http://img11.hostingpics.net/pics/913004Partenaire1.gif" alt="Nom du forum" /></a>
</div>
</div><div id="mozaik_credits"><span class="mozaik_titrecredits"><img src="http://img15.hostingpics.net/pics/603093crdits.png" alt="Nos Crédits" /></span><div class="mozaik_contenu3">Nous remercions ...<br /><br />
Le contexte a été élaboré et rédigé par ..., ... et ... sous inspiration des oeuvres de ...<br />
Le graphisme du forum a été réalisé par ... <br />
Le codage a pu être mis en place grâce à ..., avec l'aide de ... <br />
Cette page d'accueil a été réalisée par Sparrow-style, prise sur <a href="http://www.never-utopia.com">Never-Utopia</a>.<br /><br />
(c) merci de respecter le travail de ces personnes. </div>
</div><div id="mozaik_accueil"><div id="mozaik1"><div class="mozaik_titre1"></div><div class="mozaik_contenu"><img src="http://24.media.tumblr.com/tumblr_m2pft6YL5K1qhyiolo1_500.gif" alt="" class="mozaik_illu" />Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat.
<br /><br />
Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</div>
</div><div id="mozaik2"><div class="mozaik_titre2"></div><div class="mozaik_contenu"><div class="mozaik_news"><span class="mozaik_datenews">15/09/2012</span>Contenu nouveauté 1.</div><div class="mozaik_news"><span class="mozaik_datenews">21/09/2012</span>Contenu nouveauté 2.</div><div class="mozaik_news"><span class="mozaik_datenews">4/10/2012</span>Contenu nouveauté 3.</div></div>
</div><div id="mozaik3"><div class="mozaik_titre3"></div><div class="mozaik_contenu">

<span class="mozaik_avatar" style="background: url(http://i64.servimg.com/u/f64/09/04/37/22/avata360.png) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nom du perso'</span>Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.</span></span>

<span class="mozaik_avatar" style="background: url(http://img716.imageshack.us/img716/593/garfunkel01.jpg) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nom du perso'</span>Description du membre, lien MP, etc...</span></span>

<span class="mozaik_avatar" style="background: url(http://img688.imageshack.us/img688/56/johnnydepp11.png) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nom du perso'</span>Description du membre, lien MP, etc...</span></span></div></div><div id="mozaik4"><div class="mozaik_titre4"></div><div class="mozaik_contenu">
<table><tr>
<td style="vertical-align: top;"><span class="mozaik_predef"><span class="predef_icone"><img src="http://images1.fanpop.com/images/photos/1500000/Johnny-Depp-johnny-depp-1567237-100-100.jpg" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
<span class="mozaik_predef"><span class="predef_icone"><img src="http://www.1001cocktails.com/magazine/wp-content/uploads/johnnydepp_whisky-300x213-1-100x100.jpg" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
<span class="mozaik_predef"><span class="predef_icone"><img src="http://99.mgl.skyrock.net/art/PRIP.84674799.3.0.png" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
</td>
<td style="vertical-align: top;">
<span class="mozaik_predef"><span class="predef_icone"><img src="http://a4.img.v4.skyrock.net/0836/72220836/pics/photo_72220836_1.png" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
<span class="mozaik_predef"><span class="predef_icone"><img src="http://www.actucine.com/wp-content/uploads/2012/01/Johnny+Deep-100x100.jpg" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
</td>
</tr></table>
</div>
</div>
</div></div>



CSS


Code:
/* PAGE ACCUEIL MOZAIK */

#mozaik
{
  width: 660px;
  height: 260px;
  margin: auto;
}
#mozaik a
{
  font-weight: bold;
  color: #575757 !important;
  text-decoration: none !important;
}
#mozaik a:hover
{
  color: #3a3a3a;
  text-decoration: none !important;
}
#mozaik_top
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 238px;
  overflow: hidden;
  margin-top: 10px;
  float: left;
  background: #b9b9b9;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_top:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #d6d6d6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_credits
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 238px;
  overflow: hidden;
  margin-top: 10px;
  float: right;
  background: #b9b9b9;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_credits:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #d6d6d6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_titretop
{
  display: block;
  width: 30px;
  height: 238px;
  float: left;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_top:hover .mozaik_titretop
{
  background-color: #9e9e9e;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_titrecredits
{
  display: block;
  width: 30px;
  height: 238px;
  float: right;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_credits:hover .mozaik_titrecredits
{
  background-color: #9e9e9e;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_accueil
{
  width: 600px;
  height: 240px;
  margin: auto;
  padding: 10px;
  text-align: justify;
}
#mozaik1
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 120px;
  overflow: hidden;
  background: #c19898;
  border-left: 3px solid #9e3535;
  box-shadow: 0px 0px 0px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik1:hover
{
  z-index: 999;
  width: 600px;
  height: 240px;
  background: #dcdcdc;
  border-left: 0px solid #9e3535;
  box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik2
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 120px;
  overflow: hidden;
  background: #a8b6cc;
  border-right: 3px solid #3b5d94;
  box-shadow: 0px 0px 0px #000000;
  margin-left: 300px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik2:hover
{
  z-index: 999;
  width: 600px;
  height: 240px;
  margin-left: 0px;
  background: #dcdcdc;
  border-right: 0px solid #3b5d94;
  box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik3
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 120px;
  overflow: hidden;
  background: #a3c5a5;
  border-left: 3px solid #429046;
  box-shadow: 0px 0px 0px #000000;
  margin-top: 120px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik3:hover
{
  z-index: 999;
  width: 600px;
  height: 240px;
  margin-top: 0px;
  background: #dcdcdc;
  border-left: 0px solid #429046;
  box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik4
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 120px;
  overflow: hidden;
  background: #d7d1a0;
  border-right: 3px solid #c7b731;
  box-shadow: 0px 0px 0px #000000;
  margin-left: 300px;
  margin-top: 120px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik4:hover
{
  z-index: 999;
  width: 600px;
  height: 240px;
  margin-left: 0px;
  margin-top: 0px;
  background: #dcdcdc;
  border-right: 0px solid #c7b731;
  box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

.mozaik_titre1
{
  width: 300px;
  height: 120px;
  background: url(http://img15.hostingpics.net/pics/372569contexte.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik1:hover .mozaik_titre1
{
  width: 600px;
  height: 60px;
  background: url(http://img15.hostingpics.net/pics/372569contexte.png) top left no-repeat #9e3535;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_titre2
{
  width: 300px;
  height: 120px;
  background: url(http://img15.hostingpics.net/pics/898361lesnews.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik2:hover .mozaik_titre2
{
  width: 600px;
  height: 60px;
  background: url(http://img15.hostingpics.net/pics/898361lesnews.png) top left no-repeat #3b5d94;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_titre3
{
  width: 300px;
  height: 120px;
  background: url(http://img15.hostingpics.net/pics/707275staff.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik3:hover .mozaik_titre3
{
  width: 600px;
  height: 60px;
  background: url(http://img15.hostingpics.net/pics/707275staff.png) top left no-repeat #429046;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_titre4
{
  width: 300px;
  height: 120px;
  background: url(http://img15.hostingpics.net/pics/585458predef.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik4:hover .mozaik_titre4
{
  width: 600px;
  height: 60px;
  background: url(http://img15.hostingpics.net/pics/585458predef.png) top left no-repeat #c7b731;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

.mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 160px;
  overflow: auto;
  font-size: 11px;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}
.mozaik_contenu2
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 220px;
  overflow: auto;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}
.mozaik_contenu3
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 220px;
  overflow: auto;
  font-size: 11px;
  font-style: italic;
  text-align: left;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}
.mozaik_illu
{
  width: 150px;
  float: left;
  border: 1px solid #ffffff;
  margin: 5px;
}
.mozaik_news
{
  margin: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #3b5d94;
}
.mozaik_datenews
{
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #3b5d94;
  margin-right: 20px;
}
.mozaik_avatar
{
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 80px;
  height: 150px;
  overflow: hidden;
  border: 2px solid #9e9e9e;
  box-shadow: 0px 0px 0px #000000;
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  filter: alpha(opacity=50);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_avatar:hover
{
  position: relative;
  z-index: 999;
  display: inline-block;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border: 2px solid #9e9e9e;
  box-shadow: 0px 0px 5px #000000;
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_avatardescr
{
  display: block;
  background: url(http://img15.hostingpics.net/pics/301068noir50.png);
  margin-top: 150px;
  height: 150px;
  overflow: auto;
  color: #e4e4e4;
  font-size: 10px;
  line-height: 12px;
  text-shadow: 1px 1px 0px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_avatar:hover .mozaik_avatardescr
{
  margin-top: 130px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_avatardescr:hover
{
  margin-top: 0px !important;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_avatartitre
{
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mozaik_predef
{
  clear: both;
  display: block;
  height: 60px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_predef:hover
{
  display: block;
  height: 60px;
  box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_predef a
{
  text-transform: uppercase;
  color: #52400a !important;
  text-decoration: none !important;
  text-shadow: 1px 1px 0px #ffffff;
}
.mozaik_predef a:hover
{
  text-decoration: none !important;
}
.predef_icone
{
  display: block;
  float: left;
  width: 50px;
  height 50px;
  overflow: hidden;
  margin: 5px;
  border: 2px solid #9e9e9e;
}
.predef_icone img
{
  width: 50px;
}
.predef_nom
{
  display: block;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #937723;
}


Ajouter une news :
Code:
<div class="mozaik_news"><span class="mozaik_datenews">15/09/2012</span>Contenu nouveauté 1.</div>

Ajouter un membre du staff :
Code:
<span class="mozaik_avatar" style="background: url(http://img716.imageshack.us/img716/593/garfunkel01.jpg) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nom du perso'</span>Description du membre, lien MP, etc...</span></span>

Ajouter un prédéfini :
Code:
<span class="mozaik_predef"><span class="predef_icone"><img src="http://images1.fanpop.com/images/photos/1500000/Johnny-Depp-johnny-depp-1567237-100-100.jpg" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>


READ THE STORY ϟ Wherever my story takes me, however dark and difficult the theme, there is always some hope and redemption, not because readers like happy endings, but because I am an optimist at heart. I know the sun will rise in the morning, that there is a light at the end of every tunnel.  ► hellsangels.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://london-kuroshiti.forumperso.com
 
CODE PA 01
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Code Pénal Ayisyen an demode.
» Du code d'éthique de l'Armée Mainoise
» [Code Source] Code Source
» THE question ! [le code, pour marquer ton nom ! ]
» Séminaire: la levée du Code International du Scret Magique

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Les Enfants Perdus RPG :: HRPG :: BOOK OF VICTORY-
Sauter vers: