Forum Test pour des nouilles accros aux cookies
 

Poster un nouveau sujet   Répondre au sujetPartagez | 
 

 PA new

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Admin
Admin suprême
Admin suprême
avatar

Féminin Age : 26
Messages : 61
Date d'inscription : 19/03/2014

Personnage
Sexe et âge: Jeune femme dans la fleur de l'âge
Aptitudes : Approche que je te zigouille !

MessageSujet: PA new   25/9/2015, 10:30

HTML
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;
}
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ewietest.forumactif.org
Admin
Admin suprême
Admin suprême
avatar

Féminin Age : 26
Messages : 61
Date d'inscription : 19/03/2014

Personnage
Sexe et âge: Jeune femme dans la fleur de l'âge
Aptitudes : Approche que je te zigouille !

MessageSujet: Re: PA new   25/9/2015, 11:51

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 une 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>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ewietest.forumactif.org
Nelou
Neleam__Admin, Modo Chevaliers/Petits/MdC
Neleam__Admin, Modo Chevaliers/Petits/MdC
avatar

Féminin Age : 24
Messages : 236
Date d'inscription : 22/03/2014

Personnage
Sexe et âge: femme de 21 ans
Aptitudes : super intelligente et extrèmement drôle

MessageSujet: Re: PA new   25/9/2015, 22:55

les couleurs des fonds des carrés, ils se modifient dans le CSS ou le html ?
l'autre jour (hier) je tentais de modifier dans le CSS et.. il ne se passait rien --'

il faut donc préparer des textes et images pour les catégories ?

et on peut mettre les cases plus grandes ? Histoire d'y caser un peu plus de blabla ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ewilan.forumactif.fr
Nelou
Neleam__Admin, Modo Chevaliers/Petits/MdC
Neleam__Admin, Modo Chevaliers/Petits/MdC
avatar

Féminin Age : 24
Messages : 236
Date d'inscription : 22/03/2014

Personnage
Sexe et âge: femme de 21 ans
Aptitudes : super intelligente et extrèmement drôle

MessageSujet: Re: PA new   27/9/2015, 01:29

j'ai donc compris suite à ton sms Nessa Very Happy

Je suis en train de "mettre à jour" la partie HTML, directement sur le fow, ici. Je fais des sauvegardes de temps à autre ^^
Du coup...
Pour les présentations des admins, il faudra refaire des images. Est-ce qu'on met le nom en lien ? (ex : Neleam) ou il reste "normal" (ex : Nessa et Myya). Dans le texte, on présente ça comment ? admin - est super cool, fait du codage et des rps supers rigolos. ?
Est-ce qu'on met les modos ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ewilan.forumactif.fr
Admin
Admin suprême
Admin suprême
avatar

Féminin Age : 26
Messages : 61
Date d'inscription : 19/03/2014

Personnage
Sexe et âge: Jeune femme dans la fleur de l'âge
Aptitudes : Approche que je te zigouille !

MessageSujet: Re: PA new   28/9/2015, 11:45

Oups, pardon, j'avais pas vu que tu avais répondu ^^" je me servais du sujet comme sauvegarde parce que j'ai appris que word faisait parfois planter les braves codes en y ajoutant les siens en mode invisible (saleté de ninja TT)
Donc oui comme je disais en sms pas de panique, y a pas que des images x')

Pour les admins je pense que tu n'es même pas obligée de refaire des images Smile Si tu veux, puisqu'il y a déjà la nom dessus, suffit d'enlever le cadre qui se met autour dans le CSS, à la place du Nom mettre "MP" et on peut laisser ou pas la description, la remplacer par autre chose... C'est modifiable Smile
Maintenant si tu tiens à refaire des images tu peux aussi hein, sens-toi libre d'exprimer ta créativité héhé.

Je suis pour qu'on mette les modos !

PS : Mais... je viens de lire ma description dans Staff !! MDRR Tu es dingues X'DD j'ai même pas de fouet d'abord U_u *referme discrètement le placard*.

De mon côté je vois ce que ça donnerait pour garder les rectangles principaux ouverts (sinon personne ne verra jamais les news par ex TT)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ewietest.forumactif.org
Nessa
Capitaine Aline__Admine
Capitaine Aline__Admine
avatar

Féminin Age : 26
Messages : 136
Date d'inscription : 31/03/2014

Personnage
Sexe et âge:
Aptitudes :

MessageSujet: Re: PA new   6/10/2015, 11:45

Je fais ici des sauvegardes des différentes versions de la PA.

Capture d'écran 1 :



CSS
Code:

/* PAGE ACCUEIL MOZAIK */

/*ensemble de l'espace contenant les rectangles*/
#mozaik
{
  width: 990px;
  height: 485px;
  background-image: url(http://img11.hostingpics.net/pics/707758fondPAess4990x485px.png);
  margin: auto;
}

/*mise en forme des liens de la PA*/
#mozaik a
{
  font-weight: bold;
  color: #575757 !important;
  text-decoration: none !important;
}

/*modifications au passage de la souris sur les liens de la PA*/
#mozaik a:hover
{
  color: #3a3a3a;
  text-decoration: none !important;
}

/*le bandeau à gauche avec top-sites et partenaires FERME*/
#mozaik_top
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 480px;
  overflow: hidden;
  margin-top: 10px;
  float: left;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau partenaires (à gauche) OUVERT au passage de la souris*/
#mozaik_top:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau à droite = les crédits FERMES*/
#mozaik_credits
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 480px;
  overflow: hidden;
  margin-top: 10px;
  float: right;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau Crédits OUVERT au passage de la souris*/
#mozaik_credits:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Partenaires FERMEE*/
.mozaik_titretop
{
  display: block;
  width: 30px;
  height: 480px;
  float: left;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Partenaires OUVERT*/
#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;
}

/*image titre Crédits FERMEE*/
.mozaik_titrecredits
{
  display: block;
  width: 30px;
  height: 480px;
  float: right;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Crédits OUVERTE au passage de la souris*/
#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;
}



/*ensemble des 4 rectangles FERMES*/
#mozaik_accueil
{
  width: 930px;
  height: 485px;
  padding: 10px;
  margin: auto;
  text-align: justify;
}



/*Contexte OUVERT au passage de la souris*/
#mozaik1
{
  position: absolute;
  margin-left: 40px;
  z-index: 1;
  width: 850px;
  height: 180px;
  background: transparent;
   border-left: 0px solid #9e3535;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*News OUVERTES au passage de la souris*/
#mozaik2
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 240px;
  margin-left: 310px;
  margin-top: 200px;
  background: transparent;
  border-right: 0px solid #3b5d94;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*le Staff OUVERT au passage de la souris*/
#mozaik3
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 240px;
  margin-top: 200px;
  background: transparent;
  border-left: 0px solid #429046;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*Prédéfinis OUVERTS au passage de la souris*/
#mozaik4
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 240px;
  margin-left: 630px;
  margin-top: 200px;
  background: transparent;
  border-right: 0px solid #c7b731;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*Nouveau FERME*/
#mozaik5
{
  position: absolute;
  z-index: 1;
  width: 208px;
  height: 200px;
margin-left: 361px;
  margin-top: 142px;
  overflow: hidden;
  background: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*Nouveau OUVERT au passage de la souris*/
#mozaik5:hover
{
  z-index: 999;
  width: 400px;
  height: 205px;
  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;
}

/*titre image (transparent) Nouveau FERME*/
.mozaik_titre5
{
  width: 208px;
  height: 200px;
  background: url(http://img15.hostingpics.net/pics/479214cercleorange208x200.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau brun) Nouveau OUVERT au passage de la souris*/
#mozaik5:hover .mozaik_titre5
{
  width: 300px;
  height: 45px;
  background: url(http://img15.hostingpics.net/pics/911673PANouveau.png) top center no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau vert) Contexte OUVERT au passage de la souris*/
#mozaik1 .mozaik_titre1
{
  width: 850px;
  height: 40px;
  background: url(http://img15.hostingpics.net/pics/948392PAvertecontexte.png) top center no-repeat;
}


/*titre image(bandeau rouge) News OUVERTES au passage de la souris*/
#mozaik2 .mozaik_titre2
{
  width: 300px;
  height: 30px;
  background: url(http://img11.hostingpics.net/pics/843963PArougenews300px.png) top center no-repeat;
}


/*titre image(bandeau jaune) Staff OUVERT au passage de la souris*/
#mozaik3 .mozaik_titre3
{
  width: 300px;
  height: 30px;
  background: url(http://img11.hostingpics.net/pics/435740PAjaunestaff300px.png) top center no-repeat;
}



/*titre image(bandeau bleu) Prédéfinis OUVERTS au passage de la souris*/
#mozaik4 .mozaik_titre4
{
  width: 300px;
  height: 30px;
  background: url(http://img11.hostingpics.net/pics/570186PAbleuepredef300px.png) top center no-repeat;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*contenu de chaque mozaik OUVERTE sous bandeau de couleur*/
.mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 180px;
  overflow: auto;
  font-size: 11px;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}

/*contenu Partenariat OUVERT*/
.mozaik_contenu2
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 485px;
  overflow: auto;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}

/*contenu Crédits OUVERT*/
.mozaik_contenu3
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 485px;
  overflow: auto;
  font-size: 11px;
  font-style: italic;
  text-align: left;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}

/*image dans Contexte OUVERT*/
.mozaik_illu
{
  width: 150px;
  float: left;
  border: 1px solid #ffffff;
  margin: 5px;
}

/*traits bleus de News OUVERTES*/
.mozaik_news
{
  margin: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #3b5d94;
}

/*dates News OUVERTES*/
.mozaik_datenews
{
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #3b5d94;
  margin-right: 20px;
}

/*Staff avatars sans passer la souris dessus*/
.mozaik_avatar
{
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 130px;
  height: 102px;
  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;
}

/*Staff avatars au passage de la souris*/
.mozaik_avatar:hover
{
  position: relative;
  z-index: 999;
  display: inline-block;
  width: 150px;
  height: 102px;
  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;
}

/*description sur avatars du Staff*/
.mozaik_avatardescr
{
  display: block;
  background: url(http://img15.hostingpics.net/pics/301068noir50.png);
  margin-top: 82px;
  height: 102px;
  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;
}

/*passage de la souris sur avatar dans Staff = apparition de "Nom du Perso" en bas de l'image*/
.mozaik_avatar:hover .mozaik_avatardescr
{
  margin-top: 82px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*dans Staff, passage de la souris sur "Nom du Perso" = apparition de la description du perso*/
.mozaik_avatardescr:hover
{
  margin-top: 0px !important;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*style de "Nom du Perso" dans Staff*/
.mozaik_avatartitre
{
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/*bloc contenant icones+descriptions de chaque Prédéfinis*/
.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;
}

/*cadre apparaissant autour du bloc de chaque Prédéfinis au passage de la souris*/
.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;
}

/*style du lien "Voir sa fiche" des Prédéfinis*/
.mozaik_predef a
{
  text-transform: uppercase;
  color: #52400a !important;
  text-decoration: none !important;
  text-shadow: 1px 1px 0px #ffffff;
}

/*style du lien "Voir sa fiche" des Prédéfinis au passage de la souris*/
.mozaik_predef a:hover
{
  text-decoration: none !important;
}

/*position des icones des Prédéfinis*/
.predef_icone
{
  display: block;
  float: left;
  width: 50px;
  height 50px;
  overflow: hidden;
  margin: 5px;
  border: 2px solid #9e9e9e;
}

/*images des icônes des Prédéfinis*/
.predef_icone img
{
  width: 50px;
}

/*style des "Noms" des persos Prédéfinis*/
.predef_nom
{
  display: block;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #937723;
}


HTML :

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="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><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 />    Forum référencé<br />      <a href="http://antredurpg.fr-bb.com"><img src="http://i38.servimg.com/u/f38/17/93/17/20/gif10010.gif" alt="Top" /></a><br /><br />    Nos Partenaires<br />    <a href="http://www.terramysticarpg.com"><img src="http://i18.servimg.com/u/f18/16/08/46/70/logo_p11.png" alt="Terra Mystica" /></a><a href="http://univers-batman-rpg.forumactif.org/"><img src="http://img15.hostingpics.net/pics/536395batman.png" alt="Univers Batman" /></a><a href="http://tara-duncan.actifforum.com/"><img src="http://i58.servimg.com/u/f58/13/22/29/39/bouton10.png" alt="tara Duncan" /></a>  <a href="http://marchombres.forumactif.fr/"><img src="http://img15.hostingpics.net/pics/601938Lavoiedesmarchombres.gif" alt="La Voie des Marchombres" /></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 tous les membres pour faire vivre ce monde fabuleux qu'est Gwendalavir !<br /><br />    Le contexte a été élaboré et rédigé par Ludwiga, Nessa, Neleam et Myya sous inspiration des oeuvres de Pierre Bottero.<br />    Le graphisme a été réalisé par Neleam et Nessa. <br />    Le codage a pu être mis en place grâce à Nessa, avec l'aide de Neleam. <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://bdstock.fr/wp-content/uploads/2013/10/Ewilan_t1.jpg" alt="" class="mozaik_illu" />Le Monde d'Ewilan est un forum-rpg basé sur les romans de Pierre Bottero. Venez incarner un personnage issu de la guilde ou du peuple de votre choix et écrivez votre propre histoire en Gwendalavir !<br />    <br />Il y a quelques années déjà, Ewilan, Salim, Ellana et leurs compagnons entraient dans le Livre des légendes pour avoir défait l’odieuse méduse qui hantait les spires et mis fin à la menace des Mercenaires du Chaos. L’Empire, malmené des années durant par les Pirates, les Mercenaires, les Ts’liches et les peuples de l’Est, se remet de ses blessures. Mais le danger n’est pas encore écarté… Il rôde dans les contrées alaviriennes et l’Empire doit faire appel à de nouveaux héros pour contrer la menace !                      
 </div>
                                                                  
 </div>
                                                            
 <div id="mozaik2">
                                                            
 <div class="mozaik_titre2">
                                                            
 </div>
                                                            
 <div class="mozaik_contenu">
                                                            
 <div class="mozaik_news">
                               <span class="mozaik_datenews">26/09/2015</span>Rien ne se passe...                    
 </div>
                                                            
 <div class="mozaik_news">
                               <span class="mozaik_datenews">27/09/2015</span>Dormez braves gens !                    
 </div>
                                                            
 <div class="mozaik_news">
                               <span class="mozaik_datenews">4/10/2012</span>Une nouvelle PA pour un forum qui refait peau neuve ! Pour plus de dynamisme n'hésitez pas à contacter les admines ou à donner des idées dans la place publique                     
 </div>
                                                            
 </div>
                                                                  
 </div>
                                                            
 <div id="mozaik3">
                                                            
 <div class="mozaik_titre3">
                                                            
 </div>
                                                            
 <div class="mozaik_contenu">
                                    <span class="mozaik_avatar" style="background: url(http://i18.servimg.com/u/f18/15/92/10/15/pa-nes11.png) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nessa'</span>Chef suprême elle possède un fouet qui lui permet e faire reigner l'ordre (et la terreur). Si vous déisrez une mort douloureuse, vous pouvez tentez votre chance par ici -<a href="http://ewilan.forumactif.fr/u990" target="_blank"><span style="font-size: 15px;">MP</span></a>-</span></span>     <span class="mozaik_avatar" style="background: url(http://i18.servimg.com/u/f18/15/92/10/15/pa-nel11.png) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre"><a href="http://ewilan.forumactif.fr/u363" target="_blank"><span style="font-size: 15px;">Neleam</span></a>'</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">Myya'</span>Description du membre, lien MP, etc...</span></span>                              
 </div>
                                                            
 </div>
                                                            
 <div id="mozaik4">
                                                            
 <div class="mozaik_titre4">
                                                            
 </div>
                                                            
 <div class="mozaik_contenu">
                                                    <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/463119YlahmLozianfrontalierdadoption.jpg" alt="Predef" /></span><span class="predef_nom">Ylaïhm Lozian</span>Frontalier d'adoption. <a href="http://ewilan.forumactif.fr/t2021-libre-ylaihm-lozian-frontalier-d-adoption">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/385274Lakila.jpg" alt="Predef" /></span><span class="predef_nom">Lakila</span>Chevalier en devenir. <a href="http://ewilan.forumactif.fr/t2107-libre-lakila-chevalier-en-devenir">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/156557WilelmineMoonglanefrontaliere.jpg" alt="Predef" /></span><span class="predef_nom">Wilelmine Moonglane</span>Fougueuse frontalière. <a href="http://ewilan.forumactif.fr/t1976-libre-wilelmine-moonglane-fougueuse-frontaliere">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/370198MirageZelpherAstarioteHurindite.jpg" alt="Predef" /></span><span class="predef_nom">Mirage Zelpher</span>Une Astariote Hurindite. <a href="http://ewilan.forumactif.fr/t1984-libre-mirage-zelpher-une-astariote-hurindite">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/493778Dewenmdcmetamorphe.jpg" alt="Predef" /></span><span class="predef_nom">Dewën Kal'Helur</span>Mercenaire du Chaos Métamorphe <a href="http://ewilan.forumactif.fr/t1985-libre-dewen-kal-helur-un-mercenaire-du-chaos-metamorphe">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/795818LilipOukilipPetite.jpg" alt="Predef" /></span><span class="predef_nom">Lilipip Oukilip</span>Une Petite qui a de la trempe. <a href="http://ewilan.forumactif.fr/t2492-libre-lilipip-oukilip-une-petite-qui-a-de-la-trempe">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/853174PytipokPetit.jpg" alt="Predef" /></span><span class="predef_nom">Pytipokoupotipyk Nianiak</span>Un petit haineux. <a href="http://ewilan.forumactif.fr/t2496-libre-pytipokoupotipyk-nianiak-un-petit-haineux">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/805430AndyKennethPirate.jpg" alt="Predef" /></span><span class="predef_nom"> Andy Kenneth</span>Séduisant Pirate Aline <a href="http://ewilan.forumactif.fr/t2006-libre-andrea-andy-kenneth-seduisant-pirate-aline">Voir sa fiche</a></span>            
 <table>
                                                            
 <tbody>
                                                            
 <tr>
                          
 </tr>
                                
 <tr>
                          
 </tr>
                          
 <tr>
                          
 </tr>
                                                
 <tr>
                          
 </tr>
                                
 <tr>
                          
 </tr>
                                                            
 </tbody>
                                                            
 </table>
                                                                  
 </div>
                                                                  
 </div>
                                                                    
 </div>
</div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nelou
Neleam__Admin, Modo Chevaliers/Petits/MdC
Neleam__Admin, Modo Chevaliers/Petits/MdC
avatar

Féminin Age : 24
Messages : 236
Date d'inscription : 22/03/2014

Personnage
Sexe et âge: femme de 21 ans
Aptitudes : super intelligente et extrèmement drôle

MessageSujet: Re: PA new   6/10/2015, 12:04

je trouve les cercles trop violent niveau couleur, ça attire beaucoup trop le regard...
mais sinon la disposition me plat plus comme ça Smile Ca semble plus justifié que en "carré"

je serais pour supprimer l'image qui est dans l'analyse (genre la couverture d'Ewie), ça fait un peu... "on a mit ça parce qu'il fallait mettre un truc mais ça n'a pas tellement de sens"

Sinon je pense que c'est pas mal Very Happy
Et les couleurs de fond sont nettement mieux comme ça ! \o/
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ewilan.forumactif.fr
Nessa
Capitaine Aline__Admine
Capitaine Aline__Admine
avatar

Féminin Age : 26
Messages : 136
Date d'inscription : 31/03/2014

Personnage
Sexe et âge:
Aptitudes :

MessageSujet: Re: PA new   6/10/2015, 12:34

Violent, oui je trouvais aussi x) Mieux maintenant ?
Par contre, j'ai répondu sur le vrai forum, comme ça je ne perds pas mes sauvegarde de CSS et HTML au milieu de nos commentaires X_X
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nessa
Capitaine Aline__Admine
Capitaine Aline__Admine
avatar

Féminin Age : 26
Messages : 136
Date d'inscription : 31/03/2014

Personnage
Sexe et âge:
Aptitudes :

MessageSujet: Re: PA new   6/10/2015, 14:09

Structure 1, essai 2 :  cercles plus incrustés. Images staff sans filtre.

Capture :
Spoiler:
 

CSS :
Code:
/* PAGE ACCUEIL MOZAIK */

/*ensemble de l'espace contenant les rectangles*/
#mozaik
{
  width: 990px;
  height: 485px;
  background-image: url(http://img11.hostingpics.net/pics/813214fondPA990x485pxPNG.png);
  /*background-image: url(http://img11.hostingpics.net/pics/707758fondPAess4990x485px.png);*/
  margin: auto;
}

/*mise en forme des liens de la PA*/
#mozaik a
{
  font-weight: bold;
  color: #575757 !important;
  text-decoration: none !important;
}

/*modifications au passage de la souris sur les liens de la PA*/
#mozaik a:hover
{
  color: #3a3a3a;
  text-decoration: none !important;
}

/*le bandeau à gauche avec top-sites et partenaires FERME*/
#mozaik_top
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 480px;
  overflow: hidden;
  margin-top: 10px;
  float: left;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau partenaires (à gauche) OUVERT au passage de la souris*/
#mozaik_top:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau à droite = les crédits FERMES*/
#mozaik_credits
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 480px;
  overflow: hidden;
  margin-top: 10px;
  float: right;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau Crédits OUVERT au passage de la souris*/
#mozaik_credits:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Partenaires FERMEE*/
.mozaik_titretop
{
  display: block;
  width: 30px;
  height: 480px;
  float: left;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Partenaires OUVERT*/
#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;
}

/*image titre Crédits FERMEE*/
.mozaik_titrecredits
{
  display: block;
  width: 30px;
  height: 480px;
  float: right;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Crédits OUVERTE au passage de la souris*/
#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;
}



/*ensemble des 4 rectangles FERMES*/
#mozaik_accueil
{
  width: 930px;
  height: 485px;
  padding: 10px;
  margin: auto;
  text-align: justify;
}



/*Contexte*/
#mozaik1
{
  position: absolute;
  margin-left: 40px;
  z-index: 1;
  width: 850px;
  height: 180px;
  background: transparent;
   border-left: 0px solid #9e3535;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*News*/
#mozaik2
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 240px;
  margin-left: 310px;
  margin-top: 210px;
  background: transparent;
  border-right: 0px solid #3b5d94;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*le Staff*/
#mozaik3
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 240px;
  margin-top: 210px;
  background: transparent;
  border-left: 0px solid #429046;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*Prédéfinis*/
#mozaik4
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 240px;
  margin-left: 630px;
  margin-top: 210px;
  background: transparent;
  border-right: 0px solid #c7b731;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*titre image (transparent) Nouveau FERME*/
.mozaik_titre5
{
  width: 208px;
  height: 200px;
  background: url(http://img15.hostingpics.net/pics/479214cercleorange208x200.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau brun) Nouveau OUVERT au passage de la souris*/
#mozaik5:hover .mozaik_titre5
{
  width: 300px;
  height: 45px;
  background: url(http://img15.hostingpics.net/pics/911673PANouveau.png) top center no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau vert) Contexte OUVERT au passage de la souris*/
#mozaik1 .mozaik_titre1
{
  width: 850px;
  height: 40px;
  background: url(http://img15.hostingpics.net/pics/948392PAvertecontexte.png) top center no-repeat;
}


/*titre image(bandeau rouge) News OUVERTES au passage de la souris*/
#mozaik2 .mozaik_titre2
{
  width: 300px;
  height: 30px;
  background: url(http://img11.hostingpics.net/pics/843963PArougenews300px.png) top center no-repeat;
}


/*titre image(bandeau jaune) Staff OUVERT au passage de la souris*/
#mozaik3 .mozaik_titre3
{
  width: 300px;
  height: 30px;
  background: url(http://img11.hostingpics.net/pics/435740PAjaunestaff300px.png) top center no-repeat;
}



/*titre image(bandeau bleu) Prédéfinis OUVERTS au passage de la souris*/
#mozaik4 .mozaik_titre4
{
  width: 300px;
  height: 30px;
  background: url(http://img11.hostingpics.net/pics/570186PAbleuepredef300px.png) top center no-repeat;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*contenu de chaque mozaik OUVERTE sous bandeau de couleur*/
.mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 180px;
  overflow: auto;
  font-size: 11px;
   color: #595959;
  text-shadow: 1px 1px 0px #f1f1f1;
}

/*contenu Partenariat OUVERT*/
.mozaik_contenu2
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 485px;
  overflow: auto;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}

/*contenu Crédits OUVERT*/
.mozaik_contenu3
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 485px;
  overflow: auto;
  font-size: 11px;
  font-style: italic;
  text-align: left;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}

/*image dans Contexte OUVERT*/
.mozaik_illu
{
  width: 150px;
  float: left;
  border: 1px solid #ffffff;
  margin: 5px;
}

/*traits bleus de News OUVERTES*/
.mozaik_news
{
  margin: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #3b5d94;
}

/*dates News OUVERTES*/
.mozaik_datenews
{
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #3b5d94;
  margin-right: 20px;
}

/*Staff avatars sans passer la souris dessus*/
.mozaik_avatar
{
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 130px;
  height: 102px;
  overflow: hidden;
  border: 2px solid #9e9e9e;
  box-shadow: 0px 0px 0px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*Staff avatars au passage de la souris*/
.mozaik_avatar:hover
{
  position: relative;
  z-index: 999;
  display: inline-block;
  width: 150px;
  height: 102px;
  overflow: hidden;
  border: 2px solid #9e9e9e;
  box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*description sur avatars du Staff*/
.mozaik_avatardescr
{
  display: block;
  background: url(http://img15.hostingpics.net/pics/301068noir50.png);
  margin-top: 82px;
  height: 102px;
  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;
}

/*passage de la souris sur avatar dans Staff = apparition de "Nom du Perso" en bas de l'image*/
.mozaik_avatar:hover .mozaik_avatardescr
{
  margin-top: 82px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*dans Staff, passage de la souris sur "Nom du Perso" = apparition de la description du perso*/
.mozaik_avatardescr:hover
{
  margin-top: 0px !important;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*style de "Nom du Perso" dans Staff*/
.mozaik_avatartitre
{
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/*bloc contenant icones+descriptions de chaque Prédéfinis*/
.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;
}

/*cadre apparaissant autour du bloc de chaque Prédéfinis au passage de la souris*/
.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;
}

/*style du lien "Voir sa fiche" des Prédéfinis*/
.mozaik_predef a
{
  text-transform: uppercase;
  color: #52400a !important;
  text-decoration: none !important;
  text-shadow: 1px 1px 0px #ffffff;
}

/*style du lien "Voir sa fiche" des Prédéfinis au passage de la souris*/
.mozaik_predef a:hover
{
  text-decoration: none !important;
}

/*position des icones des Prédéfinis*/
.predef_icone
{
  display: block;
  float: left;
  width: 50px;
  height 50px;
  overflow: hidden;
  margin: 5px;
  border: 2px solid #9e9e9e;
}

/*images des icônes des Prédéfinis*/
.predef_icone img
{
  width: 50px;
}

/*style des "Noms" des persos Prédéfinis*/
.predef_nom
{
  display: block;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #937723;
}


HTML :
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="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><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 />    Forum référencé<br />      <a href="http://antredurpg.fr-bb.com"><img src="http://i38.servimg.com/u/f38/17/93/17/20/gif10010.gif" alt="Top" /></a><br /><br />    Nos Partenaires<br />    <a href="http://www.terramysticarpg.com"><img src="http://i18.servimg.com/u/f18/16/08/46/70/logo_p11.png" alt="Terra Mystica" /></a><a href="http://univers-batman-rpg.forumactif.org/"><img src="http://img15.hostingpics.net/pics/536395batman.png" alt="Univers Batman" /></a><a href="http://tara-duncan.actifforum.com/"><img src="http://i58.servimg.com/u/f58/13/22/29/39/bouton10.png" alt="tara Duncan" /></a>  <a href="http://marchombres.forumactif.fr/"><img src="http://img15.hostingpics.net/pics/601938Lavoiedesmarchombres.gif" alt="La Voie des Marchombres" /></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 tous les membres pour faire vivre ce monde fabuleux qu'est Gwendalavir !<br /><br />    Le contexte a été élaboré et rédigé par Ludwiga, Nessa, Neleam et Myya sous inspiration des oeuvres de Pierre Bottero.<br />    Le graphisme a été réalisé par Neleam et Nessa. <br />    Le codage a pu être mis en place grâce à Nessa, avec l'aide de Neleam. <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">
                                Le Monde d'Ewilan est un forum-rpg basé sur les romans de Pierre Bottero. Venez incarner un personnage issu de la guilde ou du peuple de votre choix et écrivez votre propre histoire en Gwendalavir !<br />    <br />Il y a quelques années déjà, Ewilan, Salim, Ellana et leurs compagnons entraient dans le Livre des légendes pour avoir défait l’odieuse méduse qui hantait les spires et mis fin à la menace des Mercenaires du Chaos. L’Empire, malmené des années durant par les Pirates, les Mercenaires, les Ts’liches et les peuples de l’Est, se remet de ses blessures. Mais le danger n’est pas encore écarté… Il rôde dans les contrées alaviriennes et l’Empire doit faire appel à de nouveaux héros pour contrer la menace !                      
 </div>
                                                                    
 </div>
                                                              
 <div id="mozaik2">
                                                              
 <div class="mozaik_titre2">
                                                              
 </div>
                                                              
 <div class="mozaik_contenu">
                                                              
 <div class="mozaik_news">
                                <span class="mozaik_datenews">26/09/2015</span>Rien ne se passe...                      
 </div>
                                                              
 <div class="mozaik_news">
                                <span class="mozaik_datenews">27/09/2015</span>Dormez braves gens !                      
 </div>
                                                              
 <div class="mozaik_news">
                                <span class="mozaik_datenews">4/10/2012</span>Une nouvelle PA pour un forum qui refait peau neuve ! Pour plus de dynamisme n'hésitez pas à contacter les admines ou à donner des idées dans la place publique                       
 </div>
                                                              
 </div>
                                                                    
 </div>
                                                              
 <div id="mozaik3">
                                                              
 <div class="mozaik_titre3">
                                                              
 </div>
                                                              
 <div class="mozaik_contenu">
                                     <span class="mozaik_avatar" style="background: url(http://i18.servimg.com/u/f18/15/92/10/15/pa-nes11.png) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nessa'</span>Chef suprême elle possède un fouet qui lui permet e faire reigner l'ordre (et la terreur). Si vous déisrez une mort douloureuse, vous pouvez tentez votre chance par ici -<a href="http://ewilan.forumactif.fr/u990" target="_blank"><span style="font-size: 15px;">MP</span></a>-</span></span>     <span class="mozaik_avatar" style="background: url(http://i18.servimg.com/u/f18/15/92/10/15/pa-nel11.png) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre"><a href="http://ewilan.forumactif.fr/u363" target="_blank"><span style="font-size: 15px;">Neleam</span></a>'</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">Myya'</span>Description du membre, lien MP, etc...</span></span>                                
 </div>
                                                              
 </div>
                                                              
 <div id="mozaik4">
                                                              
 <div class="mozaik_titre4">
                                                              
 </div>
                                                              
 <div class="mozaik_contenu">
                                                     <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/463119YlahmLozianfrontalierdadoption.jpg" alt="Predef" /></span><span class="predef_nom">Ylaïhm Lozian</span>Frontalier d'adoption. <a href="http://ewilan.forumactif.fr/t2021-libre-ylaihm-lozian-frontalier-d-adoption">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/385274Lakila.jpg" alt="Predef" /></span><span class="predef_nom">Lakila</span>Chevalier en devenir. <a href="http://ewilan.forumactif.fr/t2107-libre-lakila-chevalier-en-devenir">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/156557WilelmineMoonglanefrontaliere.jpg" alt="Predef" /></span><span class="predef_nom">Wilelmine Moonglane</span>Fougueuse frontalière. <a href="http://ewilan.forumactif.fr/t1976-libre-wilelmine-moonglane-fougueuse-frontaliere">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/370198MirageZelpherAstarioteHurindite.jpg" alt="Predef" /></span><span class="predef_nom">Mirage Zelpher</span>Une Astariote Hurindite. <a href="http://ewilan.forumactif.fr/t1984-libre-mirage-zelpher-une-astariote-hurindite">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/493778Dewenmdcmetamorphe.jpg" alt="Predef" /></span><span class="predef_nom">Dewën Kal'Helur</span>Mercenaire du Chaos Métamorphe <a href="http://ewilan.forumactif.fr/t1985-libre-dewen-kal-helur-un-mercenaire-du-chaos-metamorphe">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/795818LilipOukilipPetite.jpg" alt="Predef" /></span><span class="predef_nom">Lilipip Oukilip</span>Une Petite qui a de la trempe. <a href="http://ewilan.forumactif.fr/t2492-libre-lilipip-oukilip-une-petite-qui-a-de-la-trempe">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/853174PytipokPetit.jpg" alt="Predef" /></span><span class="predef_nom">Pytipokoupotipyk Nianiak</span>Un petit haineux. <a href="http://ewilan.forumactif.fr/t2496-libre-pytipokoupotipyk-nianiak-un-petit-haineux">Voir sa fiche</a></span><span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/805430AndyKennethPirate.jpg" alt="Predef" /></span><span class="predef_nom"> Andy Kenneth</span>Séduisant Pirate Aline <a href="http://ewilan.forumactif.fr/t2006-libre-andrea-andy-kenneth-seduisant-pirate-aline">Voir sa fiche</a></span>              
 <table>
                                                              
 <tbody>
                                                              
 <tr>
                            
 </tr>
                                  
 <tr>
                            
 </tr>
                            
 <tr>
                            
 </tr>
                                                  
 <tr>
                            
 </tr>
                                  
 <tr>
                            
 </tr>
                                                              
 </tbody>
                                                              
 </table>
                                                                    
 </div>
                                                                    
 </div>
                                                                      
 </div>
</div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nelou
Neleam__Admin, Modo Chevaliers/Petits/MdC
Neleam__Admin, Modo Chevaliers/Petits/MdC
avatar

Féminin Age : 24
Messages : 236
Date d'inscription : 22/03/2014

Personnage
Sexe et âge: femme de 21 ans
Aptitudes : super intelligente et extrèmement drôle

MessageSujet: Re: PA new   8/10/2015, 17:58

c'est super cette idée de garder tous les codes ici ! Very Happy Super pratique ! ^^

du coup je voulais dire que j'ai vainement tenté de mettre un onglet sur le côté où on pourrait retrouver tous les liens utiles, sauf que... j'y arrive pas T.T
Le texte dedans n'apparait pas.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ewilan.forumactif.fr
Nessa
Capitaine Aline__Admine
Capitaine Aline__Admine
avatar

Féminin Age : 26
Messages : 136
Date d'inscription : 31/03/2014

Personnage
Sexe et âge:
Aptitudes :

MessageSujet: Re: PA new   11/10/2015, 13:41

Sauvegarde tant que tout va bien avant de faire les test pour "l'onglet" spécial nouveaux Smile

CSS :
Code:
/* PAGE ACCUEIL MOZAIK */

/*ensemble de l'espace contenant les rectangles*/
#mozaik
{
  width: 990px;
  height: 485px;
  background-image: url(http://img11.hostingpics.net/pics/813214fondPA990x485pxPNG.png);
  /*background-image: url(http://img11.hostingpics.net/pics/707758fondPAess4990x485px.png);*/
  margin: auto;
}

/*mise en forme des liens de la PA*/
#mozaik a
{
  font-weight: bold;
  color: #575757 !important;
  text-decoration: none !important;
}

/*modifications au passage de la souris sur les liens de la PA*/
#mozaik a:hover
{
  color: #3a3a3a;
  text-decoration: none !important;
}

/*le bandeau à gauche avec top-sites et partenaires FERME*/
#mozaik_top
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 480px;
  overflow: hidden;
  margin-top: 10px;
  float: left;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau partenaires (à gauche) OUVERT au passage de la souris*/
#mozaik_top:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau à droite = les crédits FERMES*/
#mozaik_credits
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 480px;
  overflow: hidden;
  margin-top: 10px;
  float: right;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau Crédits OUVERT au passage de la souris*/
#mozaik_credits:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Partenaires FERMEE*/
.mozaik_titretop
{
  display: block;
  width: 30px;
  height: 480px;
  float: left;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Partenaires OUVERT*/
#mozaik_top:hover .mozaik_titretop
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Crédits FERMEE*/
.mozaik_titrecredits
{
  display: block;
  width: 30px;
  height: 480px;
  float: right;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Crédits OUVERTE au passage de la souris*/
#mozaik_credits:hover .mozaik_titrecredits
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}



/*ensemble des 4 rectangles FERMES*/
#mozaik_accueil
{
  width: 930px;
  height: 485px;
  padding: 10px;
  margin: auto;
  text-align: justify;
}



/*Contexte*/
#mozaik1
{
    position: absolute;
  margin-left: 40px;
  z-index: 1;
  width: 850px;
  height: 180px;
  background: transparent;
    /*box-shadow: 0px 0px 5px #000000;*/
}



/*News*/
#mozaik2
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-left: 315px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*le Staff*/
#mozaik3
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*Prédéfinis*/
#mozaik4
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-left: 630px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*titre image (transparent) Nouveau FERME*/
.mozaik_titre5
{
  width: 208px;
  height: 200px;
  background: url(http://img15.hostingpics.net/pics/479214cercleorange208x200.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau brun) Nouveau OUVERT au passage de la souris*/
#mozaik5:hover .mozaik_titre5
{
  width: 300px;
  height: 45px;
  background: url(http://img15.hostingpics.net/pics/911673PANouveau.png) top center no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau vert) Contexte OUVERT au passage de la souris*/
#mozaik1 .mozaik_titre1
{
  width: 850px;
  height: 40px;
  background: url(http://img15.hostingpics.net/pics/113953titresannalyse.png) top center no-repeat;
}


/*titre image(bandeau rouge) News OUVERTES au passage de la souris*/
#mozaik2 .mozaik_titre2
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/450060titres2volonte.png) top center no-repeat;
}


/*titre image(bandeau jaune) Staff OUVERT au passage de la souris*/
#mozaik3 .mozaik_titre3
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/460142titres2pouvoir.png) top center no-repeat;
}



/*titre image(bandeau bleu) Prédéfinis OUVERTS au passage de la souris*/
#mozaik4 .mozaik_titre4
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/504734titres2creativit.png) top center no-repeat;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*contenu de chaque mozaik OUVERTE sous bandeau de couleur*/
.mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 240px;
  overflow: auto;
  font-size: 11px;
  color: #595959;
  text-shadow: 1px 1px 0px #f1f1f1;
}

/*contenu Partenariat OUVERT*/
.mozaik_contenu2
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 485px;
  overflow: auto;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}

/*contenu Crédits OUVERT*/
.mozaik_contenu3
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 485px;
  overflow: auto;
  font-size: 11px;
  font-style: italic;
  text-align: left;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}

/*image dans Contexte OUVERT*/
.mozaik_illu
{
  width: 150px;
  float: left;
  border: 1px solid #ffffff;
  margin: 5px;
}

/*traits bleus de News OUVERTES*/
.mozaik_news
{
  margin: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #3b5d94;
}

/*dates News OUVERTES*/
.mozaik_datenews
{
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #3b5d94;
  margin-right: 20px;
}

/*contenu de mozaik STAFF*/
.staff_mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 240px;
  overflow: auto;

}

/*bloc contenant la description Staff*/
.staff_description
{
  display: block;
  width: 280px;
  margin: auto;
  height: 44px;
  overflow: hidden;
  border: 2px solid transparent;
 
}

/*contenu de la description Staff*/
.staff_description_contenu
{
  position: absolute;
  display: block;
  width: 280px;
  height: 50px;
  overflow: hidden;
  background-color: #DFD1A4;
  font-size: 10px;
  color: #595959;
  text-align: justify;
padding: 0px;
  margin: auto;
  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 apparaissant au passage de la souris Staff*/
.staff_description_contenu:hover
{
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
  box-shadow: 0px 0px 5px #000000;
  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;
}

/*style cellules fusionnées tableau Admin-Modo Staff*/
.td_staff_descr
{
width: 276px;
height: auto;
text-align: center;
}

/*style cellules indiv Profil Staff*/
.td_staff_profil
{
  width: 138px;
  height:auto;
  padding-right: 7px;
  text-align: right;
}
/*style cellules indiv MP Staff*/
.td_staff_mp
{
  width: 138px;
  height:auto;
  padding-left: 7px;
  text-align: left;
}


/*style de "Nom du Perso" dans Staff*/
.mozaik_avatartitre
{
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/*bloc contenant icones+descriptions de chaque Prédéfinis*/
.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;
}

/*cadre apparaissant autour du bloc de chaque Prédéfinis au passage de la souris*/
.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;
}

/*style du lien "Voir sa fiche" des Prédéfinis*/
.mozaik_predef a
{
  text-transform: uppercase;
  color: #52400a !important;
  text-decoration: none !important;
  text-shadow: 1px 1px 0px #ffffff;
}

/*style du lien "Voir sa fiche" des Prédéfinis au passage de la souris*/
.mozaik_predef a:hover
{
  text-decoration: none !important;
}

/*position des icones des Prédéfinis*/
.predef_icone
{
  display: block;
  float: left;
  width: 50px;
  height 50px;
  overflow: hidden;
  margin: 5px;
  border: 2px solid #9e9e9e;
}

/*images des icônes des Prédéfinis*/
.predef_icone img
{
  width: 50px;
}

/*style des "Noms" des persos Prédéfinis*/
.predef_nom
{
  display: block;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #937723;
}

HTML :
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="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><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 />    Forum référencé<br />      <a href="http://antredurpg.fr-bb.com"><img src="http://i38.servimg.com/u/f38/17/93/17/20/gif10010.gif" alt="Top" /></a><br /><br />    Nos Partenaires<br />    <a href="http://www.terramysticarpg.com"><img src="http://i18.servimg.com/u/f18/16/08/46/70/logo_p11.png" alt="Terra Mystica" /></a><a href="http://univers-batman-rpg.forumactif.org/"><img src="http://img15.hostingpics.net/pics/536395batman.png" alt="Univers Batman" /></a><a href="http://tara-duncan.actifforum.com/"><img src="http://i58.servimg.com/u/f58/13/22/29/39/bouton10.png" alt="tara Duncan" /></a>  <a href="http://marchombres.forumactif.fr/"><img src="http://img15.hostingpics.net/pics/601938Lavoiedesmarchombres.gif" alt="La Voie des Marchombres" /></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 tous les membres pour faire vivre ce monde fabuleux qu'est Gwendalavir !<br /><br />    Le contexte a été élaboré et rédigé par Ludwiga, Nessa, Neleam et Myya sous inspiration des oeuvres de Pierre Bottero.<br />    Le graphisme a été réalisé par Neleam et Nessa. <br />    Le codage a pu être mis en place grâce à Nessa, avec l'aide de Neleam. <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">
                                                                                                                            Le Monde d'Ewilan est un forum-rpg basé sur les romans de Pierre Bottero. Venez incarner un personnage issu de la guilde ou du peuple de votre choix et écrivez votre propre histoire en Gwendalavir !<br />    <br />Il y a quelques années déjà, Ewilan, Salim, Ellana et leurs compagnons entraient dans le Livre des légendes pour avoir défait l’odieuse méduse qui hantait les spires et mis fin à la menace des Mercenaires du Chaos. L’Empire, malmené des années durant par les Pirates, les Mercenaires, les Ts’liches et les peuples de l’Est, se remet de ses blessures. Mais le danger n’est pas encore écarté… Il rôde dans les contrées alaviriennes et l’Empire doit faire appel à de nouveaux héros pour contrer la menace !                                                                                                     
         </div>
                                                                                                                                                                                                                                            
      </div>
                                                                                                                                                                                                                                   
      <div id="mozaik2">
                                                                                                                                                                                                                                      
         <div class="mozaik_titre2">
                                                                                                                                                                                                                                         
         </div>
                                                                                                                                                                                                                                      
         <div class="mozaik_contenu">
                                                                                                                                                                                 
            <div class="mozaik_news">
                                                                                                   <span class="mozaik_datenews">26/09/2015</span>Rien ne se passe <span style="text-decoration: line-through;">dans le petit village de thiercelieux</span>... Dormez braves gens !                                                                       
            </div>
                                                                                                                                                                                                                                                                                         
            <div class="mozaik_news">
                                                                                                   <span class="mozaik_datenews">09/10/2012</span>Après deux semaines de dur labeur, vos admines préférées ont réussi à installer la nouvelle PA ! Rien ne les arrête ! N'hésitez pas à leur envoyer vos cookies en remerciement ou à commenter dans la place publique.                               
            </div>
                                                                       
            <div class="mozaik_news">
                                                                                                   <span class="mozaik_datenews">//info\\</span> Le Staff recrute ! Animateurs, codeurs, responsables de pubs et partenariats... N'hésitez pas à contacter le staff si vous êtes intéressés ;)                               
            </div>
                                                                                                                                                                                 
         </div>
                                                                                                                                                                                    
      </div>
                                                                                                                                                                                             
      <div id="mozaik3">
                                                                                                                                                                                                                                      
         <div class="mozaik_titre3">
                                                                                                                                                                                                                                         
         </div>
                                                                                                                                                                                                                                      
         <div class="staff_mozaik_contenu">
                                                                                   
            <div class="staff_description" style="background-image: url(http://img11.hostingpics.net/pics/941088adminstestneleam2.png); background-repeat: no-repeat; background-position: center;">
                                                                          
               <div class="staff_description_contenu">
                                                                 
                  <table>
                                                                      
                     <tbody>
                                                               
                        <tr>
                                                                          
                           <td colspan="2" class="td_staff_descr">
                                                    Admine, Chevalier membrivore connue sous le nom de Terreur des Cookies.                   
                           </td>
                                                                          
                        </tr>
                                                                     
                        <tr>
                                                                      
                           <td class="td_staff_profil">
                                                    <a href="http://ewilan.forumactif.fr/u363">Profil</a>                       
                           </td>
                                                                                  
                           <td class="td_staff_mp">
                                                    MP                       
                           </td>
                                                                
                        </tr>
                                                                       
                     </tbody>
                                                                    
                  </table>
                                                                 
               </div>
                                                                                  
            </div>
                                                           
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/852208adminstestnessa.png); background-repeat: no-repeat; background-position: center;">
                                                                          
               <div class="staff_description_contenu">
                                               
                  <table>
                                                  
                     <tbody>
                                                     
                        <tr>
                                                        
                           <td style="width: 276px; height:12px; text-align: center;">
                                              Admine qui a peur des crabes et du vide mais qui fouettera le (ou la) premie(re) qui en rira !               
                           </td>
                                                        
                        </tr>
                                                     
                        <tr>
                                                        
                           <td styl="width: 276px; height: 12px; text-align: center;">
                                              Vous pouvez l'amadouer en lui envoyant une bouteille de rhum par la post >MP< ou simplement l'observer (de loin!) (très loin...) lorsqu'elle fait son footing sur la plage <a href="http://ewilan.forumactif.fr/u390">ici</a>               
                           </td>
                                                        
                        </tr>
                                                     
                     </tbody>
                                                  
                  </table>
                                               
               </div>
                                                                                  
            </div>
                                                                             
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/535485adminstestmyya.png); background-repeat: no-repeat; background-position: center;">
                                                                          
               <div class="staff_description_contenu">
                                                    Admine, <a href="http://ewilan.forumactif.fr/u681">Profil</a>, MP, Palmares, etc.                                 
               </div>
                                                                                  
            </div>
                                                                             
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/522016adminstestdream.png); background-repeat: no-repeat; background-position: center;">
                                                                          
               <div class="staff_description_contenu">
                                                  Modo, <a href="http://ewilan.forumactif.fr/u908">Profil</a>, MP, Palmares, etc.                                 
               </div>
                                                                            
            </div>
                                                                         
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/522680adminstestkillian.png); background-repeat: no-repeat; background-position: center;">
                                                                          
               <div class="staff_description_contenu">
                                                Modo, <a href="http://ewilan.forumactif.fr/u420">Profil</a>, MP, Palmares, etc.                             
               </div>
                                                                          
            </div>
                                                                                                                                 
         </div>
                                                                                                                                                                                                                                      
      </div>
                                                                                                                                                                                                                                 
      <div id="mozaik4">
                                                                                                                                                                                                                                      
         <div class="mozaik_titre4">
                                                                                                                                                                                                                                         
         </div>
                                                                                                                                                                                                                                      
         <div class="mozaik_contenu">
                                                                                                                                                  <span class="mozaik_predef"><span class="predef_icone"><img src="http://i21.servimg.com/u/f21/15/92/10/15/perso_11.jpg" alt="Predef" /></span><span class="predef_nom">Ewilan Gil'Sayan</span>Faut-il vraiment présenter cette dessinatrice sans pareil..?<a href="http://ewilan.forumactif.fr/t2250-ewilan-gil-sayan-libre"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://i21.servimg.com/u/f21/15/92/10/15/perso_10.jpg" alt="Predef" /></span><span class="predef_nom">Salim Condo</span>Marchombre de légende.<a href="http://ewilan.forumactif.fr/t2251-salim-condo-libre"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/385274Lakila.jpg" alt="Predef" /></span><span class="predef_nom">Lakila</span>Chevalier en devenir. <a href="http://ewilan.forumactif.fr/t2107-libre-lakila-chevalier-en-devenir"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/156557WilelmineMoonglanefrontaliere.jpg" alt="Predef" /></span><span class="predef_nom">Wilelmine Moonglane</span>Fougueuse frontalière. <a href="http://ewilan.forumactif.fr/t1976-libre-wilelmine-moonglane-fougueuse-frontaliere"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/493778Dewenmdcmetamorphe.jpg" alt="Predef" /></span><span class="predef_nom">Dewën Kal'Helur</span>Mercenaire du Chaos Métamorphe <a href="http://ewilan.forumactif.fr/t1985-libre-dewen-kal-helur-un-mercenaire-du-chaos-metamorphe"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/853174PytipokPetit.jpg" alt="Predef" /></span><span class="predef_nom">Pytipokoupotipyk Nianiak</span>Un petit haineux. <a href="http://ewilan.forumactif.fr/t2496-libre-pytipokoupotipyk-nianiak-un-petit-haineux"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/805430AndyKennethPirate.jpg" alt="Predef" /></span><span class="predef_nom"> Andy Kenneth</span>Séduisant Pirate Aline <a href="http://ewilan.forumactif.fr/t2006-libre-andrea-andy-kenneth-seduisant-pirate-aline"><br />Voir sa fiche</a></span>                                                                                                                                                                                                       
         </div>
                                                                                                                                                                                                                                            
      </div>
                                                                                                                                                                                                                                         
   </div>
</div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nessa
Capitaine Aline__Admine
Capitaine Aline__Admine
avatar

Féminin Age : 26
Messages : 136
Date d'inscription : 31/03/2014

Personnage
Sexe et âge:
Aptitudes :

MessageSujet: Re: PA new   11/10/2015, 16:10

Onglet pour Guide des nouveaux avec liens utiles (le moins pire ou presque TT):

CSS :
Code:

/*bandeau à droite = Guide FERMES*/
#mozaik_guide
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 238px;
  overflow: hidden;
  float: right;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau Guide OUVERT au passage de la souris*/
#mozaik_guide:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*image titre Guide FERMEE*/
.mozaik_titreguide
{
  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;
}

/*image titre Guide OUVERTE au passage de la souris*/
#mozaik_guide:hover .mozaik_titreguide
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*contenu Guide OUVERT*/
.mozaik_contenu_guide
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 238px;
  overflow: auto;
  font-size: 11px;
  font-style: italic;
  text-align: left;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}

HTML :
Code:
   
<div id="mozaik_guide">
                                                                                                                                <span class="mozaik_titreguide"><img src="http://img15.hostingpics.net/pics/714842carteetboussole.png" alt="Carte et Boussole" /></span>                                                                                                                         
      <div class="mozaik_contenu_guide">
                                                                                                                                   Des liens pleins de liens utiles tralala par ici prenez toute la place mes chéwis x') Là c'est le règlement et ici les règles de RP, et là la présentation... Et ici le contexte détaillé, et tu peux MP les admins : suffit de passer ta souris sur leur tronche dans la PA et de cliquer sur >>MP<<, tu devrais t'en sortir !  (personne ne critique mes textes pour les test TT)                                                                                                                   
      </div>
      
   </div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nessa
Capitaine Aline__Admine
Capitaine Aline__Admine
avatar

Féminin Age : 26
Messages : 136
Date d'inscription : 31/03/2014

Personnage
Sexe et âge:
Aptitudes :

MessageSujet: Re: PA new   13/10/2015, 11:00

Ajout Guide du nouveau en bandeau ouvrant sous crédits : REUSSI ! :

CSS :
Code:
/* PAGE ACCUEIL MOZAIK */

/*ensemble de l'espace contenant les rectangles*/
#mozaik
{
  width: 990px;
  height: 485px;
  background-image: url(http://img11.hostingpics.net/pics/813214fondPA990x485pxPNG.png);
  /*background-image: url(http://img11.hostingpics.net/pics/707758fondPAess4990x485px.png);*/
  margin: auto;
}

/*mise en forme des liens de la PA*/
#mozaik a
{
  font-weight: bold;
  color: #575757 !important;
  text-decoration: none !important;
}

/*modifications au passage de la souris sur les liens de la PA*/
#mozaik a:hover
{
  color: #3a3a3a;
  text-decoration: none !important;
}

/*le bandeau à gauche avec top-sites et partenaires FERME*/
#mozaik_top
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 480px;
  overflow: hidden;
  margin-top: 10px;
  float: left;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau partenaires (à gauche) OUVERT au passage de la souris*/
#mozaik_top:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*image titre Partenaires FERMEE*/
.mozaik_titretop
{
  display: block;
  width: 30px;
  height: 480px;
  float: left;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Partenaires OUVERT*/
#mozaik_top:hover .mozaik_titretop
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*contenu Partenariat OUVERT*/
.mozaik_contenu2
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 485px;
  overflow: auto;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}
/*bandeau à droite = les crédits FERMES*/
#mozaik_credits
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 238px;
  overflow: hidden;
  float: right;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau Crédits OUVERT au passage de la souris*/
#mozaik_credits:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}


/*image titre Crédits FERMEE*/
.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;
}

/*image titre Crédits OUVERTE au passage de la souris*/
#mozaik_credits:hover .mozaik_titrecredits
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*contenu Crédits OUVERT*/
.mozaik_contenu3
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 238x;
  overflow: auto;
  font-size: 11px;
  font-style: italic;
  text-align: left;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}

/*bandeau en bas à droite = le Guide FERME*/
#mozaik_guide
{
  position: absolute;
  z-index: 1;
  width: 30px;
  height: 238px;
  overflow: hidden;
  margin-top: 240px;
  margin-left: 958px;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau Guide OUVERT au passage de la souris*/
#mozaik_guide:hover
{
  margin-left: 658px;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}


/*image titre Guide FERMEE*/
.mozaik_titreguide
{
  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;
}

/*image titre Guide OUVERTE au passage de la souris*/
#mozaik_guide:hover .mozaik_titreguide
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*contenu Guide OUVERT*/
.mozaik_contenu3
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 238px;
  overflow: auto;
  font-size: 11px;
  font-style: italic;
  text-align: left;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}


/*ensemble des 4 rectangles FERMES*/
#mozaik_accueil
{
  width: 930px;
  height: 485px;
  padding: 10px;
  margin: auto;
  text-align: justify;
}



/*Contexte*/
#mozaik1
{
    position: absolute;
  margin-left: 40px;
  z-index: 1;
  width: 850px;
  height: 180px;
  background: transparent;
    /*box-shadow: 0px 0px 5px #000000;*/
}



/*News*/
#mozaik2
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-left: 315px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*le Staff*/
#mozaik3
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*Prédéfinis*/
#mozaik4
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-left: 630px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*titre image (transparent) Nouveau FERME*/
.mozaik_titre5
{
  width: 208px;
  height: 200px;
  background: url(http://img15.hostingpics.net/pics/479214cercleorange208x200.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau brun) Nouveau OUVERT au passage de la souris*/
#mozaik5:hover .mozaik_titre5
{
  width: 300px;
  height: 45px;
  background: url(http://img15.hostingpics.net/pics/911673PANouveau.png) top center no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau vert) Contexte OUVERT au passage de la souris*/
#mozaik1 .mozaik_titre1
{
  width: 850px;
  height: 40px;
  background: url(http://img15.hostingpics.net/pics/113953titresannalyse.png) top center no-repeat;
}


/*titre image(bandeau rouge) News OUVERTES au passage de la souris*/
#mozaik2 .mozaik_titre2
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/450060titres2volonte.png) top center no-repeat;
}


/*titre image(bandeau jaune) Staff OUVERT au passage de la souris*/
#mozaik3 .mozaik_titre3
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/460142titres2pouvoir.png) top center no-repeat;
}



/*titre image(bandeau bleu) Prédéfinis OUVERTS au passage de la souris*/
#mozaik4 .mozaik_titre4
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/504734titres2creativit.png) top center no-repeat;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*contenu de chaque mozaik OUVERTE sous bandeau de couleur*/
.mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 240px;
  overflow: auto;
  font-size: 11px;
  color: #595959;
  text-shadow: 1px 1px 0px #f1f1f1;
}


/*image dans Contexte OUVERT*/
.mozaik_illu
{
  width: 150px;
  float: left;
  border: 1px solid #ffffff;
  margin: 5px;
}

/*traits bleus de News OUVERTES*/
.mozaik_news
{
  margin: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #3b5d94;
}

/*dates News OUVERTES*/
.mozaik_datenews
{
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #3b5d94;
  margin-right: 20px;
}

/*contenu de mozaik STAFF*/
.staff_mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 240px;
  overflow: auto;

}

/*bloc contenant la description Staff*/
.staff_description
{
  display: block;
  width: 280px;
  margin: auto;
  height: 44px;
  overflow: hidden;
  border: 2px solid transparent;
 
}

/*contenu de la description Staff*/
.staff_description_contenu
{
  position: absolute;
  display: block;
  width: 280px;
  height: 50px;
  overflow: hidden;
  background-color: #DFD1A4;
  font-size: 10px;
  color: #595959;
  text-align: justify;
padding: 0px;
  margin: auto;
  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 apparaissant au passage de la souris Staff*/
.staff_description_contenu:hover
{
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
  box-shadow: 0px 0px 5px #000000;
  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;
}

/*style cellules fusionnées tableau Admin-Modo Staff*/
.td_staff_descr
{
width: 276px;
height: auto;
text-align: center;
}

/*style cellules indiv Profil Staff*/
.td_staff_profil
{
  width: 138px;
  height:auto;
  padding-right: 7px;
  text-align: right;
}
/*style cellules indiv MP Staff*/
.td_staff_mp
{
  width: 138px;
  height:auto;
  padding-left: 7px;
  text-align: left;
}


/*style de "Nom du Perso" dans Staff*/
.mozaik_avatartitre
{
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/*bloc contenant icones+descriptions de chaque Prédéfinis*/
.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;
}

/*cadre apparaissant autour du bloc de chaque Prédéfinis au passage de la souris*/
.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;
}

/*style du lien "Voir sa fiche" des Prédéfinis*/
.mozaik_predef a
{
  text-transform: uppercase;
  color: #52400a !important;
  text-decoration: none !important;
  text-shadow: 1px 1px 0px #ffffff;
}

/*style du lien "Voir sa fiche" des Prédéfinis au passage de la souris*/
.mozaik_predef a:hover
{
  text-decoration: none !important;
}

/*position des icones des Prédéfinis*/
.predef_icone
{
  display: block;
  float: left;
  width: 50px;
  height 50px;
  overflow: hidden;
  margin: 5px;
  border: 2px solid #9e9e9e;
}

/*images des icônes des Prédéfinis*/
.predef_icone img
{
  width: 50px;
}

/*style des "Noms" des persos Prédéfinis*/
.predef_nom
{
  display: block;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #937723;
}


HTML :
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="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><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 />    Forum référencé<br />      <a href="http://antredurpg.fr-bb.com"><img src="http://i38.servimg.com/u/f38/17/93/17/20/gif10010.gif" alt="Top" /></a><br /><br />    Nos Partenaires<br />    <a href="http://www.terramysticarpg.com"><img src="http://i18.servimg.com/u/f18/16/08/46/70/logo_p11.png" alt="Terra Mystica" /></a><a href="http://univers-batman-rpg.forumactif.org/"><img src="http://img15.hostingpics.net/pics/536395batman.png" alt="Univers Batman" /></a><a href="http://tara-duncan.actifforum.com/"><img src="http://i58.servimg.com/u/f58/13/22/29/39/bouton10.png" alt="tara Duncan" /></a>  <a href="http://marchombres.forumactif.fr/"><img src="http://img15.hostingpics.net/pics/601938Lavoiedesmarchombres.gif" alt="La Voie des Marchombres" /></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 tous les membres pour faire vivre ce monde fabuleux qu'est Gwendalavir !<br /><br />    Le contexte a été élaboré et rédigé par Ludwiga, Nessa, Neleam et Myya sous inspiration des oeuvres de Pierre Bottero.<br />    Le graphisme a été réalisé par Neleam et Nessa. <br />    Le codage a pu être mis en place grâce à Nessa, avec l'aide de Neleam. <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_guide">
                                                                                                                            <span class="mozaik_titreguide"><img src="http://img11.hostingpics.net/pics/301667guidedunouveau.png" alt="Guide" /></span>                                                                                                                     
      <div class="mozaik_contenu3">
                                                                                                                                 LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS                                                                                                                     
      </div>
                                                                                                                                                                                                                                                   
   </div>
                                                                                                                                                                                                                                        
   <div id="mozaik_accueil">
                                                                                                                                                                                                                                                 
      <div id="mozaik1">
                                                                                                                                                                                                                                                          
         <div class="mozaik_titre1">
                                                                                                                                                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
         <div class="mozaik_contenu">
                                                                                                                                        Le Monde d'Ewilan est un forum-rpg basé sur les romans de Pierre Bottero. Venez incarner un personnage issu de la guilde ou du peuple de votre choix et écrivez votre propre histoire en Gwendalavir !<br />    <br />Il y a quelques années déjà, Ewilan, Salim, Ellana et leurs compagnons entraient dans le Livre des légendes pour avoir défait l’odieuse méduse qui hantait les spires et mis fin à la menace des Mercenaires du Chaos. L’Empire, malmené des années durant par les Pirates, les Mercenaires, les Ts’liches et les peuples de l’Est, se remet de ses blessures. Mais le danger n’est pas encore écarté… Il rôde dans les contrées alaviriennes et l’Empire doit faire appel à de nouveaux héros pour contrer la menace !                                                                                                             
         </div>
                                                                                                                                                                                                                                                            
      </div>
                                                                                                                                                                                                                                                 
      <div id="mozaik2">
                                                                                                                                                                                                                                                          
         <div class="mozaik_titre2">
                                                                                                                                                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
         <div class="mozaik_contenu">
                                                                                                                                                                                                           
            <div class="mozaik_news">
                                                                                                                   <span class="mozaik_datenews">26/09/2015</span>Rien ne se passe <span style="text-decoration: line-through;">dans le petit village de thiercelieux</span>... Dormez braves gens !                                                                                   
            </div>
                                                                                                                                                                                                                                                                                                                   
            <div class="mozaik_news">
                                                                                                                   <span class="mozaik_datenews">09/10/2012</span>Après deux semaines de dur labeur, vos admines préférées ont réussi à installer la nouvelle PA ! Rien ne les arrête ! N'hésitez pas à leur envoyer vos cookies en remerciement ou à commenter dans la place publique.                                           
            </div>
                                                                                                 
            <div class="mozaik_news">
                                                                                                                   <span class="mozaik_datenews">//info\\</span> Le Staff recrute ! Animateurs, codeurs, responsables de pubs et partenariats... N'hésitez pas à contacter le staff si vous êtes intéressés ;)                                           
            </div>
                                                                                                                                                                                                       
         </div>
                                                                                                                                                                                                    
      </div>
                                                                                                                                                                                                           
      <div id="mozaik3">
                                                                                                                                                                                                                                                          
         <div class="mozaik_titre3">
                                                                                                                                                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
         <div class="staff_mozaik_contenu">
                                                                                                             
            <div class="staff_description" style="background-image: url(http://img11.hostingpics.net/pics/941088adminstestneleam2.png); background-repeat: no-repeat; background-position: center;">
                                                                                                          
               <div class="staff_description_contenu">
                                                                                                       
                  <table>
                                                                                                                  
                     <tbody>
                                                                                                                 
                        <tr>
                                                                                                                                  
                           <td colspan="2" class="td_staff_descr">
                                                                                  Admine, Chevalier membrivore connue sous le nom de Terreur des Cookies.                                               
                           </td>
                                                                                                                              
                        </tr>
                                                                                                                       
                        <tr>
                                                                                                                              
                           <td class="td_staff_profil">
                                                                                  <a href="http://ewilan.forumactif.fr/u363">Profil</a>                                                 
                           </td>
                                                                                                                                          
                           <td class="td_staff_mp">
                                                                                  MP                                                   
                           </td>
                                                                                                                    
                        </tr>
                                                                                                                     
                     </tbody>
                                                                                                            
                  </table>
                                                                                                   
               </div>
                                                                                                              
            </div>
                                                                                     
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/852208adminstestnessa.png); background-repeat: no-repeat; background-position: center;">
                                                                                                          
               <div class="staff_description_contenu">
                                                                                     
                  <table>
                                                                                              
                     <tbody>
                                                                                                       
                        <tr>
                                                                                                                
                           <td style="width: 276px; height:12px; text-align: center;">
                                                                            Admine qui a peur des crabes et du vide mais qui fouettera le (ou la) premie(re) qui en rira !                                           
                           </td>
                                                                                                            
                        </tr>
                                                                                                       
                        <tr>
                                                                                                                
                           <td styl="width: 276px; height: 12px; text-align: center;">
                                                                            Vous pouvez l'amadouer en lui envoyant une bouteille de rhum par la post >MP< ou simplement l'observer (de loin!) (très loin...) lorsqu'elle fait son footing sur la plage <a href="http://ewilan.forumactif.fr/u390">ici</a>                                         
                           </td>
                                                                                                            
                        </tr>
                                                                                                   
                     </tbody>
                                                                                          
                  </table>
                                                                                 
               </div>
                                                                                                              
            </div>
                                                                                                       
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/535485adminstestmyya.png); background-repeat: no-repeat; background-position: center;">
                                                                                                          
               <div class="staff_description_contenu">
                                                                      Admine, <a href="http://ewilan.forumactif.fr/u681">Profil</a>, MP, Palmares, etc.                                               
               </div>
                                                                                                              
            </div>
                                                                                                       
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/522016adminstestdream.png); background-repeat: no-repeat; background-position: center;">
                                                                                                          
               <div class="staff_description_contenu">
                                                                    Modo, <a href="http://ewilan.forumactif.fr/u908">Profil</a>, MP, Palmares, etc.                                               
               </div>
                                                                                                        
            </div>
                                                                                                   
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/522680adminstestkillian.png); background-repeat: no-repeat; background-position: center;">
                                                                                                          
               <div class="staff_description_contenu">
                                                                  Modo, <a href="http://ewilan.forumactif.fr/u420">Profil</a>, MP, Palmares, etc.                                           
               </div>
                                                                                                      
            </div>
                                                                                                                                                       
         </div>
                                                                                                                                                                                                                                                      
      </div>
                                                                                                                                                                                                                                               
      <div id="mozaik4">
                                                                                                                                                                                                                                                          
         <div class="mozaik_titre4">
                                                                                                                                                                                                                                                               
         </div>
                                                                                                                                                                                                                                                          
         <div class="mozaik_contenu">
                                                                                                                                                              <span class="mozaik_predef"><span class="predef_icone"><img src="http://i21.servimg.com/u/f21/15/92/10/15/perso_11.jpg" alt="Predef" /></span><span class="predef_nom">Ewilan Gil'Sayan</span>Faut-il vraiment présenter cette dessinatrice sans pareil..?<a href="http://ewilan.forumactif.fr/t2250-ewilan-gil-sayan-libre"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://i21.servimg.com/u/f21/15/92/10/15/perso_10.jpg" alt="Predef" /></span><span class="predef_nom">Salim Condo</span>Marchombre de légende.<a href="http://ewilan.forumactif.fr/t2251-salim-condo-libre"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/385274Lakila.jpg" alt="Predef" /></span><span class="predef_nom">Lakila</span>Chevalier en devenir. <a href="http://ewilan.forumactif.fr/t2107-libre-lakila-chevalier-en-devenir"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/156557WilelmineMoonglanefrontaliere.jpg" alt="Predef" /></span><span class="predef_nom">Wilelmine Moonglane</span>Fougueuse frontalière. <a href="http://ewilan.forumactif.fr/t1976-libre-wilelmine-moonglane-fougueuse-frontaliere"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/493778Dewenmdcmetamorphe.jpg" alt="Predef" /></span><span class="predef_nom">Dewën Kal'Helur</span>Mercenaire du Chaos Métamorphe <a href="http://ewilan.forumactif.fr/t1985-libre-dewen-kal-helur-un-mercenaire-du-chaos-metamorphe"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/853174PytipokPetit.jpg" alt="Predef" /></span><span class="predef_nom">Pytipokoupotipyk Nianiak</span>Un petit haineux. <a href="http://ewilan.forumactif.fr/t2496-libre-pytipokoupotipyk-nianiak-un-petit-haineux"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/805430AndyKennethPirate.jpg" alt="Predef" /></span><span class="predef_nom"> Andy Kenneth</span>Séduisant Pirate Aline <a href="http://ewilan.forumactif.fr/t2006-libre-andrea-andy-kenneth-seduisant-pirate-aline"><br />Voir sa fiche</a></span>                                                                                                                                                                                                               
         </div>
                                                                                                                                                                                                                                                            
      </div>
                                                                                                                                                                                                                                                   
   </div>
</div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nessa
Capitaine Aline__Admine
Capitaine Aline__Admine
avatar

Féminin Age : 26
Messages : 136
Date d'inscription : 31/03/2014

Personnage
Sexe et âge:
Aptitudes :

MessageSujet: Re: PA new   14/10/2015, 10:41

Inversion de Crédits et Guide :

HTML :
Code:
 
<div id="mozaik">
                                                                                                                                                                                                                                                    
   <div id="mozaik_top">
                                                                                                                                      <span class="mozaik_titretop"><img src="http://i21.servimg.com/u/f21/15/92/10/15/barre_10.png" alt="Top sites et Partenaires" /></span>                                                                                                                         
      <div class="mozaik_contenu2">
                                                                                                                                       Votez pour nous !<br />    <a href="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><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 />    Forum référencé<br />      <a href="http://antredurpg.fr-bb.com"><img src="http://i38.servimg.com/u/f38/17/93/17/20/gif10010.gif" alt="Top" /></a><br /><br />    Nos Partenaires<br />    <a href="http://www.terramysticarpg.com"><img src="http://i18.servimg.com/u/f18/16/08/46/70/logo_p11.png" alt="Terra Mystica" /></a><a href="http://univers-batman-rpg.forumactif.org/"><img src="http://img15.hostingpics.net/pics/536395batman.png" alt="Univers Batman" /></a><a href="http://tara-duncan.actifforum.com/"><img src="http://i58.servimg.com/u/f58/13/22/29/39/bouton10.png" alt="tara Duncan" /></a>  <a href="http://marchombres.forumactif.fr/"><img src="http://img15.hostingpics.net/pics/601938Lavoiedesmarchombres.gif" alt="La Voie des Marchombres" /></a>                                                                                                                       
      </div>
                                                                                                                                                                                                                                                             
   </div>
                                                                                                                                            
   <div id="mozaik_guide">
                                                                                                                                  <span class="mozaik_titreguide"><img src="http://i21.servimg.com/u/f21/15/92/10/15/barre_12.png" alt="Guide" /></span>                                                                                                                         
      <div class="mozaik_contenu3">
                                                                                                                                       LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS LIENS                                                                                                                         
      </div>
                                                                                                                                                                                                                                                             
   </div>
   <div id="mozaik_credits">
                                                                                                                                  <span class="mozaik_titrecredits"><img src="http://i21.servimg.com/u/f21/15/92/10/15/barre_13.png" alt="Nos Crédits" /></span>                                                                                                                         
      <div class="mozaik_contenu3">
                                                                                                                                       Nous remercions tous les membres pour faire vivre ce monde fabuleux qu'est Gwendalavir !<br /><br />    Le contexte a été élaboré et rédigé par Ludwiga, Nessa, Neleam et Myya sous inspiration des oeuvres de Pierre Bottero.<br />    Le graphisme a été réalisé par Neleam et Nessa. <br />    Le codage a pu être mis en place grâce à Nessa, avec l'aide de Neleam. <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">
                                                                                                                                              Le Monde d'Ewilan est un forum-rpg basé sur les romans de Pierre Bottero. Venez incarner un personnage issu de la guilde ou du peuple de votre choix et écrivez votre propre histoire en Gwendalavir !<br />    <br />Il y a quelques années déjà, Ewilan, Salim, Ellana et leurs compagnons entraient dans le Livre des légendes pour avoir défait l’odieuse méduse qui hantait les spires et mis fin à la menace des Mercenaires du Chaos. L’Empire, malmené des années durant par les Pirates, les Mercenaires, les Ts’liches et les peuples de l’Est, se remet de ses blessures. Mais le danger n’est pas encore écarté… Il rôde dans les contrées alaviriennes et l’Empire doit faire appel à de nouveaux héros pour contrer la menace !                                                                                                                   
         </div>
                                                                                                                                                                                                                                                                      
      </div>
                                                                                                                                                                                                                                                           
      <div id="mozaik2">
                                                                                                                                                                                                                                                                    
         <div class="mozaik_titre2">
                                                                                                                                                                                                                                                                         
         </div>
                                                                                                                                                                                                                                                                    
         <div class="mozaik_contenu">
                                                                                                                                                                                                                     
            <div class="mozaik_news">
                                                                                                                       <span class="mozaik_datenews">26/09/2015</span>Rien ne se passe <span style="text-decoration: line-through;">dans le petit village de thiercelieux</span>... Dormez braves gens !                                                                                       
            </div>
                                                                                                                                                                                                                                                                                                                             
            <div class="mozaik_news">
                                                                                                                       <span class="mozaik_datenews">09/10/2012</span>Après deux semaines de dur labeur, vos admines préférées ont réussi à installer la nouvelle PA ! Rien ne les arrête ! N'hésitez pas à leur envoyer vos cookies en remerciement ou à commenter dans la place publique.                                               
            </div>
                                                                                                           
            <div class="mozaik_news">
                                                                                                                       <span class="mozaik_datenews">//info\\</span> Le Staff recrute ! Animateurs, codeurs, responsables de pubs et partenariats... N'hésitez pas à contacter le staff si vous êtes intéressés ;)                                               
            </div>
                                                                                                                                                                                                                 
         </div>
                                                                                                                                                                                                              
      </div>
                                                                                                                                                                                                                     
      <div id="mozaik3">
                                                                                                                                                                                                                                                                    
         <div class="mozaik_titre3">
                                                                                                                                                                                                                                                                         
         </div>
                                                                                                                                                                                                                                                                    
         <div class="staff_mozaik_contenu">
                                                                                                                       
            <div class="staff_description" style="background-image: url(http://img11.hostingpics.net/pics/941088adminstestneleam2.png); background-repeat: no-repeat; background-position: center;">
                                                                                                                    
               <div class="staff_description_contenu">
                                                                                                                 
                  <table>
                                                                                                                            
                     <tbody>
                                                                                                                           
                        <tr>
                                                                                                                                            
                           <td colspan="2" class="td_staff_descr">
                                                                                        Admine, Chevalier membrivore connue sous le nom de Terreur des Cookies.                                                   
                           </td>
                                                                                                                                        
                        </tr>
                                                                                                                                 
                        <tr>
                                                                                                                                        
                           <td class="td_staff_profil">
                                                                                        <a href="http://ewilan.forumactif.fr/u363">Profil</a>                                                       
                           </td>
                                                                                                                                                    
                           <td class="td_staff_mp">
                                                                                        MP                                                       
                           </td>
                                                                                                                              
                        </tr>
                                                                                                                               
                     </tbody>
                                                                                                                      
                  </table>
                                                                                                             
               </div>
                                                                                                                        
            </div>
                                                                                               
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/852208adminstestnessa.png); background-repeat: no-repeat; background-position: center;">
                                                                                                                    
               <div class="staff_description_contenu">
                                                                                               
                  <table>
                                                                                                        
                     <tbody>
                                                                                                                 
                        <tr>
                                                                                                                          
                           <td style="width: 276px; height:12px; text-align: center;">
                                                                                  Admine qui a peur des crabes et du vide mais qui fouettera le (ou la) premie(re) qui en rira !                                               
                           </td>
                                                                                                                      
                        </tr>
                                                                                                                 
                        <tr>
                                                                                                                          
                           <td styl="width: 276px; height: 12px; text-align: center;">
                                                                                  Vous pouvez l'amadouer en lui envoyant une bouteille de rhum par la post >MP< ou simplement l'observer (de loin!) (très loin...) lorsqu'elle fait son footing sur la plage <a href="http://ewilan.forumactif.fr/u390">ici</a>                                               
                           </td>
                                                                                                                      
                        </tr>
                                                                                                             
                     </tbody>
                                                                                                    
                  </table>
                                                                                           
               </div>
                                                                                                                        
            </div>
                                                                                                                 
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/535485adminstestmyya.png); background-repeat: no-repeat; background-position: center;">
                                                                                                                    
               <div class="staff_description_contenu">
                                                                            Admine, <a href="http://ewilan.forumactif.fr/u681">Profil</a>, MP, Palmares, etc.                                                     
               </div>
                                                                                                                        
            </div>
                                                                                                                 
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/522016adminstestdream.png); background-repeat: no-repeat; background-position: center;">
                                                                                                                    
               <div class="staff_description_contenu">
                                                                          Modo, <a href="http://ewilan.forumactif.fr/u908">Profil</a>, MP, Palmares, etc.                                                     
               </div>
                                                                                                                  
            </div>
                                                                                                             
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/522680adminstestkillian.png); background-repeat: no-repeat; background-position: center;">
                                                                                                                    
               <div class="staff_description_contenu">
                                                                        Modo, <a href="http://ewilan.forumactif.fr/u420">Profil</a>, MP, Palmares, etc.                                                 
               </div>
                                                                                                                
            </div>
                                                                                                                                                                 
         </div>
                                                                                                                                                                                                                                                                
      </div>
                                                                                                                                                                                                                                                         
      <div id="mozaik4">
                                                                                                                                                                                                                                                                    
         <div class="mozaik_titre4">
                                                                                                                                                                                                                                                                         
         </div>
                                                                                                                                                                                                                                                                    
         <div class="mozaik_contenu">
                                                                                                                                                                    <span class="mozaik_predef"><span class="predef_icone"><img src="http://i21.servimg.com/u/f21/15/92/10/15/perso_11.jpg" alt="Predef" /></span><span class="predef_nom">Ewilan Gil'Sayan</span>Faut-il vraiment présenter cette dessinatrice sans pareil..?<a href="http://ewilan.forumactif.fr/t2250-ewilan-gil-sayan-libre"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://i21.servimg.com/u/f21/15/92/10/15/perso_10.jpg" alt="Predef" /></span><span class="predef_nom">Salim Condo</span>Marchombre de légende.<a href="http://ewilan.forumactif.fr/t2251-salim-condo-libre"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/385274Lakila.jpg" alt="Predef" /></span><span class="predef_nom">Lakila</span>Chevalier en devenir. <a href="http://ewilan.forumactif.fr/t2107-libre-lakila-chevalier-en-devenir"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/156557WilelmineMoonglanefrontaliere.jpg" alt="Predef" /></span><span class="predef_nom">Wilelmine Moonglane</span>Fougueuse frontalière. <a href="http://ewilan.forumactif.fr/t1976-libre-wilelmine-moonglane-fougueuse-frontaliere"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/493778Dewenmdcmetamorphe.jpg" alt="Predef" /></span><span class="predef_nom">Dewën Kal'Helur</span>Mercenaire du Chaos Métamorphe <a href="http://ewilan.forumactif.fr/t1985-libre-dewen-kal-helur-un-mercenaire-du-chaos-metamorphe"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/853174PytipokPetit.jpg" alt="Predef" /></span><span class="predef_nom">Pytipokoupotipyk Nianiak</span>Un petit haineux. <a href="http://ewilan.forumactif.fr/t2496-libre-pytipokoupotipyk-nianiak-un-petit-haineux"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/805430AndyKennethPirate.jpg" alt="Predef" /></span><span class="predef_nom"> Andy Kenneth</span>Séduisant Pirate Aline <a href="http://ewilan.forumactif.fr/t2006-libre-andrea-andy-kenneth-seduisant-pirate-aline"><br />Voir sa fiche</a></span>                                                                                                                                                                                                                     
         </div>
                                                                                                                                                                                                                                                                      
      </div>
                                                                                                                                                                                                                                                             
   </div>
</div>

CSS :
Code:
/* PAGE ACCUEIL MOZAIK */

/*ensemble de l'espace contenant les rectangles*/
#mozaik
{
  width: 990px;
  height: 485px;
  background-image: url(http://img11.hostingpics.net/pics/813214fondPA990x485pxPNG.png);
  /*background-image: url(http://img11.hostingpics.net/pics/707758fondPAess4990x485px.png);*/
  margin: auto;
}

/*mise en forme des liens de la PA*/
#mozaik a
{
  font-weight: bold;
  color: #575757 !important;
  text-decoration: none !important;
}

/*modifications au passage de la souris sur les liens de la PA*/
#mozaik a:hover
{
  color: #3a3a3a;
  text-decoration: none !important;
}

/*le bandeau à gauche avec top-sites et partenaires FERME*/
#mozaik_top
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 480px;
  overflow: hidden;
  margin-top: 10px;
  float: left;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau partenaires (à gauche) OUVERT au passage de la souris*/
#mozaik_top:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*image titre Partenaires FERMEE*/
.mozaik_titretop
{
  display: block;
  width: 30px;
  height: 480px;
  float: left;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Partenaires OUVERT*/
#mozaik_top:hover .mozaik_titretop
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*contenu Partenariat OUVERT*/
.mozaik_contenu2
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 485px;
  overflow: auto;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}
/*bandeau à droite = Guide FERME*/
#mozaik_guide
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 238px;
  overflow: hidden;
  float: right;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau Crédits OUVERT au passage de la souris*/
#mozaik_guide:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}


/*image titre Crédits FERMEE*/
.mozaik_titreguide
{
  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;
}

/*image titre Crédits OUVERTE au passage de la souris*/
#mozaik_guide:hover .mozaik_titreguide
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*contenu Crédits OUVERT*/
.mozaik_contenu3
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 238x;
  overflow: auto;
  font-size: 11px;
  font-style: italic;
  text-align: left;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}

/*bandeau en bas à droite = le Guide FERME*/
#mozaik_credits
{
  position: absolute;
  z-index: 1;
  width: 30px;
  height: 238px;
  overflow: hidden;
  margin-top: 240px;
  margin-left: 958px;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau Guide OUVERT au passage de la souris*/
#mozaik_credits:hover
{
  margin-left: 658px;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}


/*image titre Guide FERMEE*/
.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;
}

/*image titre Guide OUVERTE au passage de la souris*/
#mozaik_credits:hover .mozaik_titrecredits
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*contenu Guide OUVERT*/
.mozaik_contenu3
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 238px;
  overflow: auto;
  font-size: 11px;
  font-style: italic;
  text-align: left;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}


/*ensemble des 4 rectangles FERMES*/
#mozaik_accueil
{
  width: 930px;
  height: 485px;
  padding: 10px;
  margin: auto;
  text-align: justify;
}



/*Contexte*/
#mozaik1
{
    position: absolute;
  margin-left: 40px;
  z-index: 1;
  width: 850px;
  height: 180px;
  background: transparent;
    /*box-shadow: 0px 0px 5px #000000;*/
}



/*News*/
#mozaik2
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-left: 315px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*le Staff*/
#mozaik3
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*Prédéfinis*/
#mozaik4
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-left: 630px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*titre image (transparent) Nouveau FERME*/
.mozaik_titre5
{
  width: 208px;
  height: 200px;
  background: url(http://img15.hostingpics.net/pics/479214cercleorange208x200.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau brun) Nouveau OUVERT au passage de la souris*/
#mozaik5:hover .mozaik_titre5
{
  width: 300px;
  height: 45px;
  background: url(http://img15.hostingpics.net/pics/911673PANouveau.png) top center no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau vert) Contexte OUVERT au passage de la souris*/
#mozaik1 .mozaik_titre1
{
  width: 850px;
  height: 40px;
  background: url(http://img15.hostingpics.net/pics/113953titresannalyse.png) top center no-repeat;
}


/*titre image(bandeau rouge) News OUVERTES au passage de la souris*/
#mozaik2 .mozaik_titre2
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/450060titres2volonte.png) top center no-repeat;
}


/*titre image(bandeau jaune) Staff OUVERT au passage de la souris*/
#mozaik3 .mozaik_titre3
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/460142titres2pouvoir.png) top center no-repeat;
}



/*titre image(bandeau bleu) Prédéfinis OUVERTS au passage de la souris*/
#mozaik4 .mozaik_titre4
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/504734titres2creativit.png) top center no-repeat;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*contenu de chaque mozaik OUVERTE sous bandeau de couleur*/
.mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 240px;
  overflow: auto;
  font-size: 11px;
  color: #595959;
  text-shadow: 1px 1px 0px #f1f1f1;
}


/*image dans Contexte OUVERT*/
.mozaik_illu
{
  width: 150px;
  float: left;
  border: 1px solid #ffffff;
  margin: 5px;
}

/*traits bleus de News OUVERTES*/
.mozaik_news
{
  margin: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #3b5d94;
}

/*dates News OUVERTES*/
.mozaik_datenews
{
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #3b5d94;
  margin-right: 20px;
}

/*contenu de mozaik STAFF*/
.staff_mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 240px;
  overflow: auto;

}

/*bloc contenant la description Staff*/
.staff_description
{
  display: block;
  width: 280px;
  margin: auto;
  height: 44px;
  overflow: hidden;
  border: 2px solid transparent;
 
}

/*contenu de la description Staff*/
.staff_description_contenu
{
  position: absolute;
  display: block;
  width: 280px;
  height: 50px;
  overflow: hidden;
  background-color: #DFD1A4;
  font-size: 10px;
  color: #595959;
  text-align: justify;
padding: 0px;
  margin: auto;
  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 apparaissant au passage de la souris Staff*/
.staff_description_contenu:hover
{
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
  box-shadow: 0px 0px 5px #000000;
  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;
}

/*style cellules fusionnées tableau Admin-Modo Staff*/
.td_staff_descr
{
width: 276px;
height: auto;
text-align: center;
}

/*style cellules indiv Profil Staff*/
.td_staff_profil
{
  width: 138px;
  height:auto;
  padding-right: 7px;
  text-align: right;
}
/*style cellules indiv MP Staff*/
.td_staff_mp
{
  width: 138px;
  height:auto;
  padding-left: 7px;
  text-align: left;
}


/*style de "Nom du Perso" dans Staff*/
.mozaik_avatartitre
{
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/*bloc contenant icones+descriptions de chaque Prédéfinis*/
.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;
}

/*cadre apparaissant autour du bloc de chaque Prédéfinis au passage de la souris*/
.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;
}

/*style du lien "Voir sa fiche" des Prédéfinis*/
.mozaik_predef a
{
  text-transform: uppercase;
  color: #52400a !important;
  text-decoration: none !important;
  text-shadow: 1px 1px 0px #ffffff;
}

/*style du lien "Voir sa fiche" des Prédéfinis au passage de la souris*/
.mozaik_predef a:hover
{
  text-decoration: none !important;
}

/*position des icones des Prédéfinis*/
.predef_icone
{
  display: block;
  float: left;
  width: 50px;
  height 50px;
  overflow: hidden;
  margin: 5px;
  border: 2px solid #9e9e9e;
}

/*images des icônes des Prédéfinis*/
.predef_icone img
{
  width: 50px;
}

/*style des "Noms" des persos Prédéfinis*/
.predef_nom
{
  display: block;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #937723;
}
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nessa
Capitaine Aline__Admine
Capitaine Aline__Admine
avatar

Féminin Age : 26
Messages : 136
Date d'inscription : 31/03/2014

Personnage
Sexe et âge:
Aptitudes :

MessageSujet: Re: PA new   15/10/2015, 13:38

Message pour Carte et Boussole (bug d'affichage car trop long. Et du coup, moche):

Code:
<center>Bienvenue {USERNAME} !</center>
Voici un petit Guide pour t'accompagner dans tes débuts sur le forum.
Comme partout, le premier arrêt obligatoire est le <a href="http://ewilan.forumactif.fr/t1430-reglement-du-forum">>>Règlement<<</a>. Lis-le bien, ainsi que les deux notes dans<a href="http://ewilan.forumactif.fr/f1-decrets-imperiaux">>>Décrets Impériaux<<</a> car un mot de passe est caché entre les lignes ! Il te sera très utile pour la suite... <br />
Passée cette formalité, nous pouvons entrer dans le vif du sujet : le contexte ! Vital pour calibrer ton personnage et tes RPs. Rendez-vous à la <a href="http://ewilan.forumactif.fr/f3-la-vigie">>>Vigie<<</a> pour découvrir le Contexte, la Carte du Monde, se remémorer la Chronologie, les Personnages des romans et s'imprégner des différentes Guildes jouables.<br />
Ça y est ! Maintenant que tu sais où tu es tombé(e), il est temps de passer aux choses sérieuses : nous présenter ton personnage. Pour cela, direction la <a href="http://ewilan.forumactif.fr/f87-salle-de-presentation">>>Salle de Présentation<<</a>. Ici tu trouveras un modèle de fiche et ses explications. Copie le code de la fiche et ouvre ton propre sujet pour la remplir. Pas de panique, si tu n'es pas à l'aise avec les codes, écrit simplement où il est indiqué "écrire ici". <br />
Une fois remplie ta fiche présentation, le staff passera pour la lire et valider ton personnage. Il contrôlera aussi le mot de passe (je t'avais dit qu'il serait utile !) et t'aiguillera pour la suite de l'aventure.<br />
Toujours perdu(e) ? La <a href="http://ewilan.forumactif.fr/f88-place-publique">>>Place Publique<<</a> est là pour recueillir te questions et y répondre rapidement. N'hésite pas non plus à envoyer un MP (=message privé) à un membre du Staff. Passe ta souris sur leurs images, à gauche de cette page d'accueil, pour révéler leur profil et les contacter en un clic. <br />
<center>Toute l'équipe du Monde d'Ewilan te souhaite encore la bienvenue !
Puisses-tu te plaire parmi nous et nous régaler de mille et une aventures !</center>

CORRECTION :
Code:
<center>Bienvenue {USERNAME} !</center>
Voici quelques liens utiles pour accompagner tes débuts sur le forum.
[list][*] S'il s'agit de ton tout premier forum RP, rendez-vous <a href="http://ewilan.forumactif.fr/t1899-carte-et-boussole">>>ICI<<</a>[/list]
Si tu es déjà un habitué des lieux, tu connais le protocole ! Mais attention, une mot de passe est caché dans les règlements.
[list][*] Règlement :<a href="http://ewilan.forumactif.fr/f1-decrets-imperiaux">>>Décrets Impériaux<<</a>
[*] Contexte : <a href="http://ewilan.forumactif.fr/f3-la-vigie">>>Vigie<<</a>
[*] Présentation : <a href="http://ewilan.forumactif.fr/f87-salle-de-presentation">>>Salle de Présentation<<</a>
[*] Un problème, une question ? : <a href="http://ewilan.forumactif.fr/f88-place-publique">>>Place Publique<<</a>
[/list]
Le Staff te souhaite encore la bienvenue ! N'hésite pas à nous envoyer un MP en cas de besoin. POur nous contacter : passe la souris sur les images du staff, à gauche de cette page d'accueil.
À très bientôt !

Bienvenue Invité !

Voici quelques liens utiles pour accompagner tes débuts sur le forum.

  • S'il s'agit de ton tout premier forum RP, rendez-vous >>ICI<<

Si tu es déjà un habitué des lieux, tu connais le protocole ! Mais attention, une mot de passe est caché dans les règlements.

Le Staff te souhaite encore la bienvenue ! N'hésite pas à nous envoyer un MP en cas de besoin. POur nous contacter : passe la souris sur les images du staff, à gauche de cette page d'accueil.
À très bientôt !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nessa
Capitaine Aline__Admine
Capitaine Aline__Admine
avatar

Féminin Age : 26
Messages : 136
Date d'inscription : 31/03/2014

Personnage
Sexe et âge:
Aptitudes :

MessageSujet: Re: PA new   15/10/2015, 14:17

Tout fonctionne !

HTML :
Code:
 
<div id="mozaik">
                                                                                                                                                                                                                                                                                
   <div id="mozaik_top">
                                                                                                                                                    <span class="mozaik_titretop"><img src="http://i21.servimg.com/u/f21/15/92/10/15/barre_16.png" alt="Top sites et Partenaires" /></span>                                                                                                                                       
      <div class="mozaik_contenu2">
                                                                                                                                                     Votez pour nous !<br />    <a href="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="http://www.root-top.com/topsite/obsession27/in.php?ID=23203"><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 />    Forum référencé<br />      <a href="http://antredurpg.fr-bb.com"><img src="http://i38.servimg.com/u/f38/17/93/17/20/gif10010.gif" alt="Top" /></a><br /><br />    Nos Partenaires<br />    <a href="http://www.terramysticarpg.com"><img src="http://i18.servimg.com/u/f18/16/08/46/70/logo_p11.png" alt="Terra Mystica" /></a><a href="http://univers-batman-rpg.forumactif.org/"><img src="http://img15.hostingpics.net/pics/536395batman.png" alt="Univers Batman" /></a><a href="http://tara-duncan.actifforum.com/"><img src="http://i58.servimg.com/u/f58/13/22/29/39/bouton10.png" alt="tara Duncan" /></a>  <a href="http://marchombres.forumactif.fr/"><img src="http://img15.hostingpics.net/pics/601938Lavoiedesmarchombres.gif" alt="La Voie des Marchombres" /></a>                                                                                                                                     
      </div>
                                                                                                                                                                                                                                                                                         
   </div>
                                                                                                                                                                        
   <div id="mozaik_guide">
                                                                                                                                                <span class="mozaik_titreguide"><img src="http://i21.servimg.com/u/f21/15/92/10/15/barre_15.png" alt="Guide" /></span>                                                                                                                                       
      <div class="mozaik_contenu3">
                  
         <center>
                Bienvenue {USERNAME} !   
         </center>
             Voici quelques liens utiles pour accompagner tes débuts sur le forum.   
         <ul>
                 
            <li>
                   S'il s'agit de ton tout premier forum RP, rendez-vous <a href="http://ewilan.forumactif.fr/t1899-carte-et-boussole">>>ICI<<</a>   
            </li>
                 
         </ul>
             Si tu es déjà un habitué des lieux, tu connais le protocole ! Mais attention, une mot de passe est caché dans les règlements.   
         <ul>
                 
            <li>
                   Règlement :<a href="http://ewilan.forumactif.fr/f1-decrets-imperiaux">>>Décrets Impériaux<<</a>   
            </li>
                 
            <li>
                   Contexte : <a href="http://ewilan.forumactif.fr/f3-la-vigie">>>Vigie<<</a>   
            </li>
                 
            <li>
                   Présentation : <a href="http://ewilan.forumactif.fr/f87-salle-de-presentation">>>Salle de Présentation<<</a>   
            </li>
                 
            <li>
                   Un problème, une question ? : <a href="http://ewilan.forumactif.fr/f88-place-publique">>>Place Publique<<</a>   
            </li>
                 
         </ul>
             Le Staff te souhaite encore la bienvenue ! N'hésite pas à nous envoyer un MP en cas de besoin. Pour nous contacter : passe la souris sur les images du staff, à gauche de cette page d'accueil. À très bientôt !<br /><br />                     
      </div>
                                                                                                                                                                                                                                                                                         
   </div>
                            
   <div id="mozaik_credits">
                                                                                                                                                <span class="mozaik_titrecredits"><img src="http://i21.servimg.com/u/f21/15/92/10/15/barre_14.png" alt="Nos Crédits" /></span>                                                                                                                                       
      <div class="mozaik_contenu3">
                                                                                                                                                     Nous remercions tous les membres pour faire vivre ce monde fabuleux qu'est Gwendalavir !<br /><br />    Le contexte a été élaboré et rédigé par Ludwiga, Nessa, Neleam et Myya sous inspiration des oeuvres de Pierre Bottero.<br />    Le graphisme a été réalisé par Neleam et Nessa. <br />    Le codage a pu être mis en place grâce à Nessa, avec l'aide de Neleam. <br />  La majorité du codage du forum a été adapté de codes pris 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">
                                                                                                                                                            Le Monde d'Ewilan est un forum-rpg basé sur les romans de Pierre Bottero. Venez incarner un personnage issu de la guilde ou du peuple de votre choix et écrivez votre propre histoire en Gwendalavir !<br />    <br />Il y a quelques années déjà, Ewilan, Salim, Ellana et leurs compagnons entraient dans le Livre des légendes pour avoir défait l’odieuse méduse qui hantait les spires et mis fin à la menace des Mercenaires du Chaos. L’Empire, malmené des années durant par les Pirates, les Mercenaires, les Ts’liches et les peuples de l’Est, se remet de ses blessures. Mais le danger n’est pas encore écarté… Il rôde dans les contrées alaviriennes et l’Empire doit faire appel à de nouveaux héros pour contrer la menace !                                                                                                                                 
         </div>
                                                                                                                                                                                                                                                                                                  
      </div>
                                                                                                                                                                                                                                                                                       
      <div id="mozaik2">
                                                                                                                                                                                                                                                                                                
         <div class="mozaik_titre2">
                                                                                                                                                                                                                                                                                                     
         </div>
                                                                                                                                                                                                                                                                                                
         <div class="mozaik_contenu">
                                                                                                                                                                                                                                                 
            <div class="mozaik_news">
                                                                                                                                     <span class="mozaik_datenews">26/09/2015</span>Rien ne se passe <span style="text-decoration: line-through;">dans le petit village de thiercelieux</span>... Dormez braves gens !                                                                                                     
            </div>
                                                                                                                                                                                                                                                                                                                                                         
            <div class="mozaik_news">
                                                                                                                                     <span class="mozaik_datenews">09/10/2012</span>Après deux semaines de dur labeur, vos admines préférées ont réussi à installer la nouvelle PA ! Rien ne les arrête ! N'hésitez pas à leur envoyer vos cookies en remerciement ou à commenter dans la place publique.                                                             
            </div>
                                                                                                                                       
            <div class="mozaik_news">
                                                                                                                                     <span class="mozaik_datenews">//info\\</span> Le Staff recrute ! Animateurs, codeurs, responsables de pubs et partenariats... N'hésitez pas à contacter le staff si vous êtes intéressés ;)                                                             
            </div>
                                                                                                                                                                                                                                             
         </div>
                                                                                                                                                                                                                                          
      </div>
                                                                                                                                                                                                                                                 
      <div id="mozaik3">
                                                                                                                                                                                                                                                                                                
         <div class="mozaik_titre3">
                                                                                                                                                                                                                                                                                                     
         </div>
                                                                                                                                                                                                                                                                                                
         <div class="staff_mozaik_contenu">
                                                                                                                                                   
            <div class="staff_description" style="background-image: url(http://img11.hostingpics.net/pics/941088adminstestneleam2.png); background-repeat: no-repeat; background-position: center;">
                                                                                                                                                
               <div class="staff_description_contenu">
                                                                                                                                             
                  <table>
                                                                                                                                                        
                     <tbody>
                                                                                                                                                       
                        <tr>
                                                                                                                                                                        
                           <td colspan="2" class="td_staff_descr">
                                                                                                      ADMINE, Chevalier membrivore connue sous le nom de Terreur des Cookies.                                                                 
                           </td>
                                                                                                                                                                    
                        </tr>
                                                                                                                                                             
                        <tr>
                                                                                                                                                                    
                           <td class="td_staff_profil">
                                                                                                      <a href="http://ewilan.forumactif.fr/u363">>>Profil<<</a>                                                                     
                           </td>
                                                                                                                                                                                
                           <td class="td_staff_mp">
                                                                                                      <a href="http://ewilan.forumactif.fr/privmsg?mode=post&u=363">>>MP<<</a>                                                                     
                           </td>
                                                                                                                                                          
                        </tr>
                                                                                                                                                           
                     </tbody>
                                                                                                                                                  
                  </table>
                                                                                                                                         
               </div>
                                                                                                                                                    
            </div>
                                                                                                                           
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/852208adminstestnessa.png); background-repeat: no-repeat; background-position: center;">
                                                                                                                                                
               <div class="staff_description_contenu">
                                                                                                                           
                  <table>
                                                                                                                                                        
                     <tbody>
                                                                                                                                                       
                        <tr>
                                                                                                                                                                        
                           <td colspan="2" class="td_staff_descr">
                                                                                                      ADMINE, Pirate ne se déplaçant jamais sans son fouet ni sa bouteille de rhum.                                                                 
                           </td>
                                                                                                                                                                    
                        </tr>
                                                                                                                                                             
                        <tr>
                                                                                                                                                                    
                           <td class="td_staff_profil">
                                                                                                      <a href="http://ewilan.forumactif.fr/u390">>>Profil<<</a>                                                                     
                           </td>
                                                                                                                                                                                
                           <td class="td_staff_mp">
                                                                                                      <a href="http://ewilan.forumactif.fr/privmsg?mode=post&u=390"> >>MP<<</a>                                                                     
                           </td>
                                                                                                                                                          
                        </tr>
                                                                                                                                                           
                     </tbody>
                                                                                                                                                  
                  </table>
                                                                                                                       
               </div>
                                                                                                                                                    
            </div>
                                                                                                                                             
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/535485adminstestmyya.png); background-repeat: no-repeat; background-position: center;">
                                                                                                                                                
               <div class="staff_description_contenu">
                                                                                                       
                  <table>
                                                                                                                                                        
                     <tbody>
                                                                                                                                                       
                        <tr>
                                                                                                                                                                        
                           <td colspan="2" class="td_staff_descr">
                                                                                                      ADMINE, Faëlle timbrée et triple championne de hula hop en Gwendalvir.                                                     
                           </td>
                                                                                                                                                                    
                        </tr>
                                                                                                                                                             
                        <tr>
                                                                                                                                                                    
                           <td class="td_staff_profil">
                                                                                                      <a href="http://ewilan.forumactif.fr/u681">>>Profil<<</a>                                                                     
                           </td>
                                                                                                                                                                                
                           <td class="td_staff_mp">
                                                                                                      <a href="http://ewilan.forumactif.fr/privmsg?mode=post&u=681"> >>MP<<</a>                                                                     
                           </td>
                                                                                                                                                          
                        </tr>
                                                                                                                                                           
                     </tbody>
                                                                                                                                                  
                  </table>
                                                                                                 
               </div>
                                                                                                                                                    
            </div>
                                                                                                                                             
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/522016adminstestdream.png); background-repeat: no-repeat; background-position: center;">
                                                                                                                                                
               <div class="staff_description_contenu">
                                                                                                   
                  <table>
                                                                                                                                                        
                     <tbody>
                                                                                                                                                       
                        <tr>
                                                                                                                                                                        
                           <td colspan="2" class="td_staff_descr">
                                                                                                      MODO hantant le fow, fervente adoratrice d’un truc appelé Edwin.                                                   
                           </td>
                                                                                                                                                                    
                        </tr>
                                                                                                                                                             
                        <tr>
                                                                                                                                                                    
                           <td class="td_staff_profil">
                                                                                                      <a href="http://ewilan.forumactif.fr/u908">>>Profil<<</a>                                                                     
                           </td>
                                                                                                                                                                                
                           <td class="td_staff_mp">
                                                                                                      <a href="http://ewilan.forumactif.fr/privmsg?mode=post&u=908"> >>MP<<</a>                                                                     
                           </td>
                                                                                                                                                          
                        </tr>
                                                                                                                                                           
                     </tbody>
                                                                                                                                                  
                  </table>
                                             
               </div>
                                                                                                                                              
            </div>
                                                                                                                                         
            <div class="staff_description" style="background-image: url(http://img15.hostingpics.net/pics/522680adminstestkillian.png); background-repeat: no-repeat; background-position: center;">
                                                                                                                                                
               <div class="staff_description_contenu">
                                                                                                                                                 
                  <table>
                                                                                                                                                        
                     <tbody>
                                                                                                                                                       
                        <tr>
                                                                                                                                                                        
                           <td colspan="2" class="td_staff_descr">
                                                                                                      MODO, Marchombre addict au flood et model pour la marque de parfum Checsi                                           
                           </td>
                                                                                                                                                                    
                        </tr>
                                                                                                                                                             
                        <tr>
                                                                                                                                                                    
                           <td class="td_staff_profil">
                                                                                                      <a href="http://ewilan.forumactif.fr/u420">>>Profil<<</a>                                                                     
                           </td>
                                                                                                                                                                                
                           <td class="td_staff_mp">
                                                                                                      <a href="http://ewilan.forumactif.fr/privmsg?mode=post&u=420"> >>MP<<</a>                                                                     
                           </td>
                                                                                                                                                          
                        </tr>
                                                                                                                                                           
                     </tbody>
                                                                                                                                                  
                  </table>
                                             
               </div>
                                                                                                                                            
            </div>
                                                                                                                                                                                             
         </div>
                                                                                                                                                                                                                                                                                            
      </div>
                                                                                                                                                                                                                                                                                     
      <div id="mozaik4">
                                                                                                                                                                                                                                                                                                
         <div class="mozaik_titre4">
                                                                                                                                                                                                                                                                                                     
         </div>
                                                                                                                                                                                                                                                                                                
         <div class="mozaik_contenu">
                                                                                                                                                                                  <span class="mozaik_predef"><span class="predef_icone"><img src="http://i21.servimg.com/u/f21/15/92/10/15/perso_11.jpg" alt="Predef" /></span><span class="predef_nom">Ewilan Gil'Sayan</span>Faut-il vraiment présenter cette dessinatrice sans pareil..?<a href="http://ewilan.forumactif.fr/t2250-ewilan-gil-sayan-libre"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://i21.servimg.com/u/f21/15/92/10/15/perso_10.jpg" alt="Predef" /></span><span class="predef_nom">Salim Condo</span>Marchombre de légende.<a href="http://ewilan.forumactif.fr/t2251-salim-condo-libre"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/385274Lakila.jpg" alt="Predef" /></span><span class="predef_nom">Lakila</span>Chevalier en devenir. <a href="http://ewilan.forumactif.fr/t2107-libre-lakila-chevalier-en-devenir"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/156557WilelmineMoonglanefrontaliere.jpg" alt="Predef" /></span><span class="predef_nom">Wilelmine Moonglane</span>Fougueuse frontalière. <a href="http://ewilan.forumactif.fr/t1976-libre-wilelmine-moonglane-fougueuse-frontaliere"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/493778Dewenmdcmetamorphe.jpg" alt="Predef" /></span><span class="predef_nom">Dewën Kal'Helur</span>Mercenaire du Chaos Métamorphe <a href="http://ewilan.forumactif.fr/t1985-libre-dewen-kal-helur-un-mercenaire-du-chaos-metamorphe"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/853174PytipokPetit.jpg" alt="Predef" /></span><span class="predef_nom">Pytipokoupotipyk Nianiak</span>Un petit haineux. <a href="http://ewilan.forumactif.fr/t2496-libre-pytipokoupotipyk-nianiak-un-petit-haineux"><br />Voir sa fiche</a></span> <span class="mozaik_predef"><span class="predef_icone"><img src="http://img11.hostingpics.net/pics/805430AndyKennethPirate.jpg" alt="Predef" /></span><span class="predef_nom"> Andy Kenneth</span>Séduisant Pirate Aline <a href="http://ewilan.forumactif.fr/t2006-libre-andrea-andy-kenneth-seduisant-pirate-aline"><br />Voir sa fiche</a></span>                                                                                                                                                                                                                                   
         </div>
                                                                                                                                                                                                                                                                                                  
      </div>
                                                                                                                                                                                                                                                                                         
   </div>
</div>

CSS :
Code:
/* PAGE ACCUEIL MOZAIK */

/*ensemble de l'espace contenant les rectangles*/
#mozaik
{
  width: 990px;
  height: 485px;
  background-image: url(http://img11.hostingpics.net/pics/813214fondPA990x485pxPNG.png);
  /*background-image: url(http://img11.hostingpics.net/pics/707758fondPAess4990x485px.png);*/
  margin: auto;
}

/*mise en forme des liens de la PA*/
#mozaik a
{
  font-weight: bold;
  color: #575757 !important;
  text-decoration: none !important;
}

/*modifications au passage de la souris sur les liens de la PA*/
#mozaik a:hover
{
  color: #3a3a3a;
  text-decoration: none !important;
}

/*le bandeau à gauche avec top-sites et partenaires FERME*/
#mozaik_top
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 480px;
  overflow: hidden;
  margin-top: 10px;
  float: left;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau partenaires (à gauche) OUVERT au passage de la souris*/
#mozaik_top:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*image titre Partenaires FERMEE*/
.mozaik_titretop
{
  display: block;
  width: 30px;
  height: 480px;
  float: left;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*image titre Partenaires OUVERT*/
#mozaik_top:hover .mozaik_titretop
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
/*contenu Partenariat OUVERT*/
.mozaik_contenu2
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 485px;
  overflow: auto;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}
/*bandeau à droite = Guide FERME*/
#mozaik_guide
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 238px;
  overflow: hidden;
  float: right;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau Guide OUVERT au passage de la souris*/
#mozaik_guide:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}


/*image titre Guide FERMEE*/
.mozaik_titreguide
{
  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;
}

/*image titre Guide OUVERTE au passage de la souris*/
#mozaik_guide:hover .mozaik_titreguide
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*contenu Credits et Guide OUVERT*/
.mozaik_contenu3
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 238px;
  overflow: auto;
  font-size: 11px;
  font-style: italic;
  text-align: left;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}

/*bandeau en bas à droite = les Credits FERME*/
#mozaik_credits
{
  position: absolute;
  z-index: 1;
  width: 30px;
  height: 238px;
  overflow: hidden;
  margin-top: 240px;
  margin-left: 958px;
  background: #DFD1A4;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*bandeau Credits OUVERT au passage de la souris*/
#mozaik_credits:hover
{
  margin-left: 658px;
  z-index: 999;
  width: 330px;
  background: #ECDFB6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}


/*image titre Credits FERMEE*/
.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;
}

/*image titre Credits OUVERTE au passage de la souris*/
#mozaik_credits:hover .mozaik_titrecredits
{
  background-color: #d2bf80;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*ensemble des 4 rectangles FERMES*/
#mozaik_accueil
{
  width: 930px;
  height: 485px;
  padding: 10px;
  margin: auto;
  text-align: justify;
}



/*Contexte*/
#mozaik1
{
    position: absolute;
  margin-left: 40px;
  z-index: 1;
  width: 850px;
  height: 180px;
  background: transparent;
    /*box-shadow: 0px 0px 5px #000000;*/
}



/*News*/
#mozaik2
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-left: 315px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*le Staff*/
#mozaik3
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*Prédéfinis*/
#mozaik4
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 280px;
  margin-left: 630px;
  margin-top: 190px;
  background: transparent;
  /*box-shadow: 0px 0px 5px #000000;*/
}



/*titre image (transparent) Nouveau FERME*/
.mozaik_titre5
{
  width: 208px;
  height: 200px;
  background: url(http://img15.hostingpics.net/pics/479214cercleorange208x200.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau brun) Nouveau OUVERT au passage de la souris*/
#mozaik5:hover .mozaik_titre5
{
  width: 300px;
  height: 45px;
  background: url(http://img15.hostingpics.net/pics/911673PANouveau.png) top center no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*titre image(bandeau vert) Contexte OUVERT au passage de la souris*/
#mozaik1 .mozaik_titre1
{
  width: 850px;
  height: 40px;
  background: url(http://img15.hostingpics.net/pics/113953titresannalyse.png) top center no-repeat;
}


/*titre image(bandeau rouge) News OUVERTES au passage de la souris*/
#mozaik2 .mozaik_titre2
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/450060titres2volonte.png) top center no-repeat;
}


/*titre image(bandeau jaune) Staff OUVERT au passage de la souris*/
#mozaik3 .mozaik_titre3
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/460142titres2pouvoir.png) top center no-repeat;
}



/*titre image(bandeau bleu) Prédéfinis OUVERTS au passage de la souris*/
#mozaik4 .mozaik_titre4
{
  width: 300px;
  height: 30px;
  background: url(http://img15.hostingpics.net/pics/504734titres2creativit.png) top center no-repeat;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

/*contenu de chaque mozaik OUVERTE sous bandeau de couleur*/
.mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 240px;
  overflow: auto;
  font-size: 11px;
  color: #595959;
  text-shadow: 1px 1px 0px #f1f1f1;
}


/*image dans Contexte OUVERT*/
.mozaik_illu
{
  width: 150px;
  float: left;
  border: 1px solid #ffffff;
  margin: 5px;
}

/*traits bleus de News OUVERTES*/
.mozaik_news
{
  margin: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #3b5d94;
}

/*dates News OUVERTES*/
.mozaik_datenews
{
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #3b5d94;
  margin-right: 20px;
}

/*contenu de mozaik STAFF*/
.staff_mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 240px;
  overflow: auto;

}

/*bloc contenant la description Staff*/
.staff_description
{
  display: block;
  width: 280px;
  margin: auto;
  height: 44px;
  overflow: hidden;
  border: 2px solid transparent;
 
}

/*contenu de la description Staff*/
.staff_description_contenu
{
  position: absolute;
  display: block;
  width: 280px;
  height: 50px;
  overflow: hidden;
  background-color: #DFD1A4;
  font-size: 10px;
  color: #595959;
  text-align: justify;
padding: 0px;
  margin: auto;
  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 apparaissant au passage de la souris Staff*/
.staff_description_contenu:hover
{
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  filter: alpha(opacity=80);
  box-shadow: 0px 0px 5px #000000;
  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;
}

/*style cellules fusionnées tableau Admin-Modo Staff*/
.td_staff_descr
{
width: 276px;
height: auto;
text-align: center;
}

/*style cellules indiv Profil Staff*/
.td_staff_profil
{
  width: 138px;
  height:auto;
  padding-right: 7px;
  text-align: right;
}
/*style cellules indiv MP Staff*/
.td_staff_mp
{
  width: 138px;
  height:auto;
  padding-left: 7px;
  text-align: left;
}


/*style de "Nom du Perso" dans Staff*/
.mozaik_avatartitre
{
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/*bloc contenant icones+descriptions de chaque Prédéfinis*/
.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;
}

/*cadre apparaissant autour du bloc de chaque Prédéfinis au passage de la souris*/
.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;
}

/*style du lien "Voir sa fiche" des Prédéfinis*/
.mozaik_predef a
{
  text-transform: uppercase;
  color: #52400a !important;
  text-decoration: none !important;
  text-shadow: 1px 1px 0px #ffffff;
}

/*style du lien "Voir sa fiche" des Prédéfinis au passage de la souris*/
.mozaik_predef a:hover
{
  text-decoration: none !important;
}

/*position des icones des Prédéfinis*/
.predef_icone
{
  display: block;
  float: left;
  width: 50px;
  height 50px;
  overflow: hidden;
  margin: 5px;
  border: 2px solid #9e9e9e;
}

/*images des icônes des Prédéfinis*/
.predef_icone img
{
  width: 50px;
}

/*style des "Noms" des persos Prédéfinis*/
.predef_nom
{
  display: block;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #937723;
}
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




MessageSujet: Re: PA new   

Revenir en haut Aller en bas
 
PA new
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
EwieTest :: Hors-Jeu :: l'Auberge-
Poster un nouveau sujet   Répondre au sujetSauter vers: