Abhess
Messages : 577 Gallions : 5732 Date d'inscription : 25/06/2010 Age : 31 Localisation :
| Sujet: 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; } | |
|
Abhess
Messages : 577 Gallions : 5732 Date d'inscription : 25/06/2010 Age : 31 Localisation :
| Sujet: 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> | |
|