Dim 17 Sep - 14:26

Coucou !

J'espère ne pas te flanquer une attaque dès que tu vois apparaitre mon nom dans ta boutique, mais je reviens avec une minuscule commande, en espérant que tu voudras toujours bien de moi ^^'. Si jamais la commande est trop grosse d'un coup, je peux la scinder en deux ou plus pour te faciliter la vie si tu préfères ! (ou allez voir chez un autre codeur si ça ne te dit trop rien, je comprendrais ^^').
Forum : Cycle du Zodiaque
Taille de la fiche : 600px de largeur, après pour la hauteur ça n'a pas vraiment d'importance tant que tous les éléments sont là, je me vois mal te dire du faire du 650px de hauteur pour les partos par exemple alors que tu ne sais pas le faire en moins de 800px Oo. Mais si jamais ça peut aider voilà les mesures selon les maquettes de Nasty (j'ai ouvert photoshop et tout pour les mesures précises /MEURT/) :
- fiche officielle : 600px sur 800px sur l'exemple, mais peut être infini, la longueur des textes variant d'un sujet à l'autre, si besoin je sais modifier ça !
- fiche de présentation : 600px sur 1660px
- fiche de validation : 600px sur 600px
- fiche de liens : 600px sur 750px
- fiche de partenariat : 600px sur 650px
Fiche(s) demandé(s) : Alooooors, il y aurait une fiche officielle (pour tout ce qui est contexte, règlement...), une fiche de présentation, une fiche de validation, une fiche de liens et une fiche de partenariat. Voilà, voilà, c'est tout.
CSS intégré ou séparé ? Le CSS peut être séparé !
Dans le cas des fiches de publicité : [] A intégrer comme une fiche normale  [x] A intégrer en iframe
Maquette :

fiche officielle:

fiche de présentation:

fiche validation:

fiche de liens:

fiche partenariat:

Description (peut remplacer la maquette ou la compléter) : Concernant la fiche des liens, ça serait bien si on pouvait rajouter à "l'infini" des liens en-dessous en rajoutant le même code (je sais pas si c'est clair ?), et également si le fait de cliquer sur le pseudo du lien ramenait au profil du personnage (si possible !).
Pour la fiche des partenaires, en-dessous du rejoins-nous, j'aimerais pouvoir mettre la jolie bannière de Nasty : mais si ce n'est pas possible, point de problème ! A ce moment-là, serait-il possible de faire du "rejoins-nous" un lien qui ramène au forum ?

Je pense que c'est tout sinon, les maquettes me semblant plutôt claires. Si tu as toutefois des questions, n'hésite pas à demander ! /o/
Couleurs : Voici le joli mémo de Nasty :

DÈgradÈ & Titres/Accents :

--> Rouge brique : #92292e
--> Violet : #2a161f

Fonds & Blocs :
--> Gris clair : #eaeaea
--> Violet-gris moyen : #d8d2d2

Textes :
--> Violet foncÈ (sur fond clair) : #4f494b
--> Gris/violet clair (sur fond foncÈ) : #eaeaea

Concernant les dégradés, je sais qu'il y avait une méthode bien précise mais je ne sais plus quoi  


Polices à utiliser : Encore et toujours Oswald, c'est que je l'aime cette police maintenant, à la vie à la mort /MEURT/.
Images à utiliser :

Spoiler:

J'espère ne pas avoir oublié d'images... si jamais tu en as besoin d'autres, n'hésite pas à me le dire que je les fasse en quatrième vitesse /o/.
Acceptez-vous que le code finisse en LS ? Une fois encore, tout sort de la tête de Nasty, du coup ce n'est pas trop à moi de décider.
Autre chose à ajouter ? D'avance merci pour ton travail et pas de problème pour d'éventuels délais et tout : je serai patiente, promis !  Par ailleurs, si tu ne veux pas de la commande par manque de temps, d'envie, des deux... je m'en remettrai ! Difficilement et douloureusement, mais je serai forte, juré ! Par ailleurs, si j'ai été trop brouillon dans la commande parce que c'est un pack et que du coup tu n'y vois pas clair, n'hésite pas à me demander de remanier pour plus de clarté ou bien de demander des précisions (puis si jamais je ne suis pas certaine, je pourrai toujours demander à Nasty, même si je pense avoir tout compris xD).

Dim 17 Sep - 15:15

Tu me fais tellement rire quand tu débarques XDD

Ca devrait aller assez vite je pense (et Nasty a encore fait du bon boulot !). Pas de soucis pour les relations, par contre le lien vers le profil va falloir que tes membres jouent le jeu et ajoutent le lien (on peut laisser en faux lien dans le pire des cas, mais c'est pas magique quoi XD).

A première vue j'ai tout, tu pourras suivre l'avancée quelque part sur le même fofo test qu'avant.

J'éditerai au fur et à mesure que j'avancerai :3


Fiche officielle
Fiche de présentation
Fiche de validation
Fiche de liens
Fiche de partenaires UC

Lun 18 Sep - 12:13

C'est toujours un plaisir que d'amuser la galerie .

Assez vite hein... déjà trois des fiches qui sont faites et j'ai fait la demande hier, j'appelle ça très vite, moi xD. Concernant le lien, c'était l'idée, après ils le font ou non, mais en avoir la possibilité quoi, juste pour être sûre que c'était faisable !

Encore merci ~ !

Lun 18 Sep - 16:12

Je pense avoir fini les premières fiches, reste celle de pub. Je te passe déjà les codes pour celles-ci ?

Lun 18 Sep - 17:25

Oh, tu peux, oui ! Comme ça, j'aurai déjà le temps de regarder s'il y a un éventuel bug chez moi. Quelle rapidité !

Lun 18 Sep - 20:21

J'arrive j'arrive ♫

Alors ! Pour le CSS on a donc :

Code:

/*********************************** FICHES ***********************************/

/* RELATIONS */

#relations_fiche {
    background: #eaeaea;
    margin: auto;
    padding: 5%;
    width: 560px;
}

#relations_img {
  float: left;
  width: 250px;
  height: 250px;
}

#relations_entete {
    background: #d6d2d1;
    color: #494544;
    float: left;
    font-family: arial;
    font-size: 12px;
    padding: 3%;
    text-align: justify;
    width: 49%;
    height: 217px;
}

#relations_entete h2 {
    color: #972a25;
    font-family: Oswald, sans-serif;
    font-size: 30px;
    font-style: italic;
    margin: -10% 0 0;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 3px;
    text-align: center;
}

#relations_entete h3 {
    color: #972a25;
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
    font-weight: normal;
}

#relations_entete p {
    width: 100%;
    height: 140px;
    overflow: auto;
    margin-top: -7%;
}

#relations_entete a {
    color: #fff !important;
    display: inline-block;
    font-family: Oswald, sans-serif;
    font-size: 18px;
    margin: 2%;
    padding: 2%;
    text-transform: uppercase;
    width: 40%;
    text-align: center;
}

#presentation_bouton {
    background: #2a171d;
}

#mp_bouton {
    background: #912a2d;
}

#relations_roleplay, #relations_recherches {
    width: 50%;
    float: left;
    border-top: 5px solid #2a171d;
    margin: 0;
    background: #2a171d;
    color: #fff;
    text-align: justify;
    font-size: 10px;
    line-height: 1.5;
    font-family: Oswald, sans-serif;
}

#relations_recherches p, #relations_roleplay p {
    height: 100px;
    overflow: auto;
    padding: 2%;
    width: 96%;
    margin: 0;
}

#relations_roleplay {
    border-top: 5px solid #2a171d;
    background: #2a171d;
}

#relations_recherches {
    border-top: 5px solid #912a2d;
  background: #912a2d;
}

#relations_roleplay h4, #relations_recherches h4 {
    margin: auto;
    text-align: left;
    text-transform: uppercase;
    padding: 0 0 0 2%;
    font-size: 24px;
    font-weight: normal;
  background: #d6d2d1;
}

#relations_roleplay h4 {
  color: #2a171d;
}

#relations_recherches h4 {
  color: #8b3238;
}

.relations_mi {
    font-family: Oswald, sans-serif;
    font-weight: bold;
    font-size: 12px;
}

#relations_bloc {
    float: left;
    height: 150px;
    margin: 3% 2% 1% 0;
    width: 48%;
    background: #d6d2d1;
}

#relations_bloc img {
    float: left;
    margin-right: 2%;
    width: 94px;
    height: 150px;
}

#relations_bloc h4 {
    color: #972a25;
    font-family: Oswald, sans-serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 2px;
    margin: -3% 0 0;
    text-align: center;
    text-transform: uppercase;
}

#relations_bloc a {
    color: #972a25;
    font-family: Oswald, sans-serif;
    font-size: 13px;
    font-style: italic;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    display: block;
    margin: -1% 0 0 0;
}

#relations_bloc p {
    width: 60%;
    margin: auto;
    text-align: justify;
    font-size: 10px;
    line-height: 1;
    height: 110px;
    overflow: auto;
  color: #494544;
}


/* OFFICIELLE */

#officiel_fiche {
  margin: auto;
  width: 600px;
  background: #d6d2d1;
}

#officiel_entete {
  width: 90%;
  padding: 5%;
  text-align: center;
  background-image:-moz-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-webkit-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-o-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:linear-gradient(90deg, #2a171d, #922b2e);
}

#officiel_entete img {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  float: left;
  margin-right: 2%;
}

#officiel_entete h2 {
  color: #fff;
  font-family: Oswald, sans-serif;
  font-size: 30px;
  font-weight: normal;
  line-height: 1;
}

#officiel_contenu {
  width: 90%;
  padding: 2%;
  margin: auto;
  background: #fff;
  font-size: 11px;
  color: #000;
}

#officiel_contenu h3 {
  color: #972a25;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  font-weight: normal;
  margin: 0;
  font-family: Oswald, sans-serif;
}

#officiel_contenu h3:first-letter {
  font-size: 28px;
}

#officiel_fiche p {
  padding: 0;
  display: inline-block;
}

#officiel_fiche p:first-letter {
  padding-left: 3%;
}

.credits_fiche {
  width: 100%;
  padding: 1% 0;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  background-image:-moz-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-webkit-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-o-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:linear-gradient(90deg, #2a171d, #922b2e);
  font-family: Oswald, sans-serif;
  letter-spacing: 3px;
}


/* VALIDATION */

#validation_fiche {
  margin: auto;
  width: 600px;
  background: #d6d2d1;
}

#validation_entete {
  background-image:-moz-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-webkit-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-o-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:linear-gradient(90deg, #2a171d, #922b2e);
  width: 100%;
  height: 170px;
}

#validation_fiche img {
  margin: auto;
  display: block;
  margin-top: -18%;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 100%;
}

#validation_contenu {
  width: 90%;
  padding: 2%;
  height: 350px;
  overflow: auto;
  color: #000;
  background: #eaeaea;
  font-size: 11px;
  text-align: justify;
  margin: auto;
}

#validation_contenu h2 {
  color: #972a25;
  font-family: Oswald, sans-serif;
  font-size: 30px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}

#validation_contenu p:first-letter {
  padding-left: 3%;
}

#validation_contenu p {
  display: inline-block;
  padding: 0;
  margin: 0;
}

#validation_contenu a {
  font-weight: bold;
  color: #972a25;
}

.validation_morues, .validation_barbecs, .validation_paquerettes, .validation_perches {
  text-transform: uppercase;
}

.validation_morues {color: #61abda; border-bottom: 1px solid #61abda;}
.validation_barbecs {color: #d86062; border-bottom: 1px solid #d86062;}
.validation_paquerettes {color: #6edb5e; border-bottom: 1px solid #6edb5e;}
.validation_perches {color: #dcb860; border-bottom: 1px solid #dcb860;}


/* PRESENTATION */

#presentation_fiche {
  background: #d6d2cf;
  width: 600px;
  margin: auto;
  font-size: 12px;
  font-family: arial;
}

#presentation_entete {
  float: right;
  width: 350px;
  background-image:-moz-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-webkit-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-o-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:linear-gradient(90deg, #2a171d, #922b2e);
  color: #fff;
  padding: 17.2% 0;
  font-family: Oswald, sans-serif;
}

#presentation_entete h2 {
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

#presentation_entete h3 {
  font-size: 16px;
  font-style: italic;
  text-align: center;
  text-transform: uppercase;
  font-weight: normal;
  margin: 2% 0 0 0;
  letter-spacing: 5px;
}

.presentation_gauche img {
  width: 250px;
  height: 250px;
  float: left; 
}

#presentation_bg1 {
  background: #eaeaea;
  color: #4f494b;
  float: left;
  height: 170px;
  overflow: auto;
  padding: 15px;
  width: 370px;
}

#presentation_bg2 {
  background: #d6d2cf;
  color: #4f494b;
  float: right;
  height: 170px;
  overflow: auto;
  padding: 15px;
  width: 370px;
}

#presentation_bg3 {
  background: #eaeaea;
  color: #4f494b;
  height: 30%;
  overflow: auto;
  padding: 2%;
  width: 96%;
}

#presentation_bg4 {
  background: #eaeaea;
  color: #4f494b;
  height: 300px;
  overflow: auto;
  padding: 2%;
  width: 90%;
  margin: auto;
}

.presentation_droite img {
  float: right;
  height: 200px;
  width: 200px;
}

.mots_importants {
  font-weight: bold;
  color: #92292e;
  text-transform: uppercase;
  font-family: Oswald, sans-serif;
  line-height: 2;
}

#presentation_fiche h4, #presentation_fiche h5 {
  text-align: center;
  color: #fff;
  background-image:-moz-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-webkit-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-o-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:linear-gradient(90deg, #2a171d, #922b2e);
  font-family: Oswald, sans-serif;
  width: 100%;
  letter-spacing: 5px;
  text-align: center;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 30px;
  padding: 2% 0;
  font-style: italic;
  margin: 0;
}

#presentation_fiche h5 {
  width: 94%;
  margin: auto;
}

Fiche officielle

Code:

<div id="officiel_fiche"><div id="officiel_entete"><img src="https://2img.net/u/3615/13/47/01/avatars/131-15.png" /> <h2>Le titre qui peut être long si besoin genre wouloulou je suis le remplissage</h2><div class="clear"></div></div>
<div id="officiel_contenu"><h3>Stare at ceiling light hide when guests come over</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut euismod eros. Vivamus eu ipsum congue justo semper porta. Etiam a aliquam lorem, at ultricies nunc. Vestibulum tincidunt tincidunt nibh quis volutpat. Phasellus aliquet venenatis fermentum. Sed feugiat bibendum posuere. Suspendisse molestie convallis odio lacinia rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Donec mollis, turpis luctus efficitur venenatis, ipsum lectus dictum nibh, vitae facilisis enim tortor vel ex. Mauris ac augue a justo sollicitudin faucibus. Sed malesuada justo et lacinia hendrerit. Aenean enim nisl, euismod at malesuada nec, dictum id tellus. In hac habitasse platea dictumst. Praesent id ultricies mi. Vestibulum viverra est turpis, ut egestas sapien rhoncus quis. Nullam pellentesque tortor rutrum ante pulvinar, sed semper metus placerat. Cras neque nulla, scelerisque sed imperdiet eget, iaculis aliquam mi. In nec mi ligula. Duis in est nec lacus fermentum gravida in a metus. Sed aliquet vulputate massa. </p></div>
<div class="credits_fiche">© Le Cycle du Zodiaque</div></div>

Lun 18 Sep - 20:21

Fiche validation

Code:

<div id="validation_fiche"><div id="validation_entete"></div><img src="https://i11.servimg.com/u/f11/15/29/91/94/fiche_11.png" />
<div id="validation_contenu"><h2>Validation de Prénom Nom</h2>
<p><b><i>Bienvenue chez nous</i></b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut euismod eros. Vivamus eu ipsum congue justo semper porta. Etiam a aliquam lorem, at ultricies nunc. Vestibulum tincidunt tincidunt nibh quis volutpat. Phasellus aliquet venenatis fermentum. Sed feugiat bibendum posuere. Suspendisse molestie convallis odio lacinia rutrum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<center><a href="#">Lien</a> - <a href="#">Lien</a> - <a href="#">Lien</a></center>

<p>Tu finis chez les <span class="validation_morues">Morues</span>, <span class="validation_barbecs">Barbecs</span>, <span class="validation_paquerettes">Pâquerettes</span>, <span class="validation_perches">Perchés</span>, face de poisson !</p>

<p>→ Autres textes : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut euismod eros. Vivamus eu ipsum congue justo semper porta. Etiam a aliquam lorem, at ultricies nunc. Vestibulum tincidunt tincidunt nibh quis volutpat. Phasellus aliquet venenatis fermentum. Sed feugiat bibendum posuere. Suspendisse molestie convallis odio lacinia rutrum.</div>
<div class="credits_fiche">© Le Cycle du Zodiaque</div></div>

Fiche présentation

Code:

<div id="presentation_fiche"><img src="https://i11.servimg.com/u/f11/15/29/91/94/fiche_11.png" class="presentation_gauche"><div id="presentation_entete"><h2>Nom & Prénom</h2><h3>Signe</h3></div>
<div id="presentation_bg1"><span class="mots_importants">Cause du décès :</span> Votre réponse
<span class="mots_importants">Date du décès :</span> Votre réponse
<span class="mots_importants">Age au moment du décès :</span> Votre réponse
<span class="mots_importants">Temps passé chez Norbert :</span> Votre réponse
<span class="mots_importants">Signe astrologique :</span> Votre réponse
<span class="mots_importants">Genre :</span> Votre réponse</div><img src="https://i11.servimg.com/u/f11/15/29/91/94/fiche_12.png" class="presentation_droite">
<img src="https://i11.servimg.com/u/f11/15/29/91/94/fiche_10.png" class="presentation_gauche"><div id="presentation_bg2"><span class="mots_importants">Taille :</span> Votre réponse
<span class="mots_importants">Corpulence :</span> Votre réponse
<span class="mots_importants">Yeux :</span> Votre réponse
<span class="mots_importants">Cheveux :</span> Votre réponse
<span class="mots_importants">Style vestimentaire :</span> Votre réponse
<span class="mots_importants">Genre :</span> Votre réponse</div>
<h4>Personnalité</h4><div id="presentation_bg3"><span class="mots_importants">Caractère :</span> Votre réponse
<span class="mots_importants">Qualités :</span> Votre réponse
<span class="mots_importants">Défauts :</span> Votre réponse
<span class="mots_importants">Peurs :</span> Votre réponse
<span class="mots_importants">Préférences :</span> Votre réponse
<span class="mots_importants">Antipathies :</span> Votre réponse
<span class="mots_importants">Réputation :</span> Votre réponse
<span class="mots_importants">Aspirations :</span> Votre réponse</div>
<h5>Histoire</h5><div id="presentation_bg4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent gravida lectus at nisl vestibulum, et finibus felis sagittis. Sed facilisis ipsum ligula, commodo blandit orci elementum efficitur. Maecenas varius scelerisque euismod. Phasellus scelerisque et nibh a laoreet. Vivamus efficitur tellus ac erat suscipit mollis. Donec ut ante mi. Nunc laoreet vulputate laoreet. Praesent sagittis vulputate libero non semper. Nullam quis nisi sed ante malesuada gravida non a nulla. Phasellus semper, sapien ac vulputate malesuada, nisl dui varius libero, id semper ante eros ut est.

Nam cursus fermentum vulputate. Praesent in ex et lorem tincidunt consectetur sed non nunc. Phasellus finibus ultricies turpis, et mollis sem. Praesent accumsan dui non arcu consequat, eu consectetur nibh rhoncus. Ut molestie ligula id suscipit maximus. Morbi lobortis odio eget massa efficitur sodales eu et lorem. Cras tristique, risus eget laoreet tristique, nisi libero tempor velit, id dictum sem erat sed urna. Vivamus mattis, nulla sit amet porttitor feugiat, purus nulla consequat elit, dapibus vulputate dolor velit nec nisl.

Donec suscipit eleifend dictum. In quam urna, volutpat quis accumsan non, molestie at magna. Proin condimentum lacus sed auctor placerat. Nulla non sapien dapibus, condimentum mauris id, rhoncus mauris. Sed sollicitudin ipsum eu lacus cursus, vel ultrices felis bibendum. Phasellus faucibus neque in commodo finibus. Nulla sit amet lacus orci. Suspendisse non vulputate ligula. Aenean et sodales urna, nec fringilla enim. Mauris facilisis massa in diam mollis, id gravida libero ultricies. Vivamus congue faucibus interdum. Etiam lacus libero, tempus ut sem vitae, consectetur tincidunt enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque placerat ipsum turpis, sit amet euismod elit maximus ac. Duis nec lacus eu urna congue dictum interdum et augue. In vitae enim accumsan, porta sapien non, porttitor nunc.

Pellentesque facilisis sem nisl, sed mollis purus ultrices non. Curabitur maximus faucibus consequat. Quisque varius felis sit amet dapibus mattis. Sed ultrices est augue, nec porttitor nulla vulputate vel. Proin porttitor tellus sit amet tempor sollicitudin. Integer semper vestibulum arcu, et sagittis lacus egestas vestibulum. Morbi finibus congue gravida. Aliquam sed massa rutrum, hendrerit nulla vel, viverra mauris.

Vestibulum eu nisi vel quam auctor iaculis. Sed facilisis, lorem at tincidunt tempor, augue tellus vulputate eros, quis molestie ipsum nibh ut lectus. Sed arcu justo, aliquet eleifend fermentum eget, rhoncus eget metus. Proin cursus dapibus finibus. Nulla volutpat, elit ac pretium accumsan, diam urna auctor eros, vitae dignissim enim leo at nunc. Cras vel tempus elit. Maecenas sapien ipsum, venenatis sed dolor a, maximus blandit purus. Praesent consectetur nibh vel orci malesuada feugiat. Nullam sollicitudin mollis felis, ut bibendum est ultrices id. Cras consequat lectus et nisl consectetur, ac feugiat odio dapibus. Etiam condimentum orci porttitor erat aliquam vulputate. Nulla sit amet lorem convallis, efficitur nisi elementum, sodales magna. Curabitur convallis lorem mattis sapien viverra, vitae commodo ante vulputate. Aliquam cursus, dolor in porttitor auctor, augue ante dignissim eros, fringilla tincidunt mi ipsum ut dui. Suspendisse egestas dui lectus. </div>
<h4>Derrière l'écran</h4><div id="presentation_bg3"><span class="mots_importants">Prénom/Pseudo :</span> Votre réponse
<span class="mots_importants">Age :</span> Votre réponse
<span class="mots_importants">Comment as-tu trouvé le forum :</span> Votre réponse
<span class="mots_importants">T'aimes quoi ici ?</span> Votre réponse
<span class="mots_importants">En vrai, c'est quoi ta team ?</span> Votre réponse

Blablablablablablabla</div>

<div class="credits_fiche">© Le Cycle du Zodiaque</div></div>

Fiche relations

Code:

<div id="relations_fiche"><img src="https://i11.servimg.com/u/f11/15/29/91/94/05_lie10.png" id="relations_img" /><div id="relations_entete"><h2>Prénom Nom</h2><h3>Signe</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum vel sem sed venenatis. Nullam iaculis nisl nec ante varius, vel aliquet quam vehicula. Vivamus dictum vestibulum magna, sit amet semper lacus rutrum nec. Nullam a urna convallis, sagittis massa sed, faucibus orci. Quisque laoreet lectus et mi pretium, quis facilisis justo egestas. Cras tempor egestas justo, in pulvinar enim ultrices sit amet. Morbi lacus lectus, semper et lorem vel, rhoncus gravida tortor. Duis suscipit egestas ipsum, ac vehicula dui convallis a. Donec sed nunc nec sapien laoreet dapibus.</p> <a href="#" id="presentation_bouton">Présentation</a> <a href="#" id="mp_bouton">Message privé</a></div><div class="clear"></div><div id="relations_roleplay"><h4>Role Play</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum vel sem sed venenatis. Nullam iaculis nisl nec ante varius, vel aliquet quam vehicula. Vivamus dictum vestibulum magna, sit amet semper lacus rutrum nec. Nullam a urna convallis, sagittis massa sed, faucibus orci. Quisque laoreet lectus et mi pretium, quis facilisis justo egestas. Cras tempor egestas justo, in pulvinar enim ultrices sit amet. Morbi lacus lectus, semper et lorem vel, rhoncus gravida tortor. Duis suscipit egestas ipsum, ac vehicula dui convallis a. Donec sed nunc nec sapien laoreet dapibus. </p></div><div id="relations_recherches"><h4>Recherches</h4><p><span class="relations_mi">Recherche 1</span> : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum vel sem sed venenatis.

<span class="relations_mi">Recherche 2</span> : Nullam iaculis nisl nec ante varius, vel aliquet quam vehicula. Vivamus dictum vestibulum magna, sit amet semper lacus rutrum nec.

<span class="relations_mi">Recherche 3</span> : Nullam a urna convallis, sagittis massa sed, faucibus orci. Quisque laoreet lectus et mi pretium, quis facilisis justo egestas. Cras tempor egestas justo, in pulvinar enim ultrices sit amet. Morbi lacus lectus, semper et lorem vel, rhoncus gravida tortor. Duis suscipit egestas ipsum, ac vehicula dui convallis a. Donec sed nunc nec sapien laoreet dapibus. </p></div>

<div id="relations_bloc"><img src="https://img11.hostingpics.net/pics/396750img2.jpg" /><h4>Nom du lien</h4><a href="#">Prénom</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum vel sem sed venenatis. Nullam iaculis nisl nec ante varius, vel aliquet quam vehicula. Vivamus dictum vestibulum magna, sit amet semper lacus rutrum nec. Nullam a urna convallis, sagittis massa sed, faucibus orci. Quisque laoreet lectus et mi pretium, quis facilisis justo egestas. Cras tempor egestas justo, in pulvinar enim ultrices sit amet. Morbi lacus lectus, semper et lorem vel, rhoncus gravida tortor. Duis suscipit egestas ipsum, ac vehicula dui convallis a. Donec sed nunc nec sapien laoreet dapibus. </p></div> <div id="relations_bloc"><img src="https://img11.hostingpics.net/pics/396750img2.jpg" /><h4>Nom du lien</h4><a href="#">Prénom</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum vel sem sed venenatis. Nullam iaculis nisl nec ante varius, vel aliquet quam vehicula. Vivamus dictum vestibulum magna, sit amet semper lacus rutrum nec. Nullam a urna convallis, sagittis massa sed, faucibus orci. Quisque laoreet lectus et mi pretium, quis facilisis justo egestas. Cras tempor egestas justo, in pulvinar enim ultrices sit amet. Morbi lacus lectus, semper et lorem vel, rhoncus gravida tortor. Duis suscipit egestas ipsum, ac vehicula dui convallis a. Donec sed nunc nec sapien laoreet dapibus. </p></div><div class="clear"></div> <div id="relations_bloc"><img src="https://img11.hostingpics.net/pics/396750img2.jpg" /><h4>Nom du lien</h4><a href="#">Prénom</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum vel sem sed venenatis. Nullam iaculis nisl nec ante varius, vel aliquet quam vehicula. Vivamus dictum vestibulum magna, sit amet semper lacus rutrum nec. Nullam a urna convallis, sagittis massa sed, faucibus orci. Quisque laoreet lectus et mi pretium, quis facilisis justo egestas. Cras tempor egestas justo, in pulvinar enim ultrices sit amet. Morbi lacus lectus, semper et lorem vel, rhoncus gravida tortor. Duis suscipit egestas ipsum, ac vehicula dui convallis a. Donec sed nunc nec sapien laoreet dapibus. </p></div> <div id="relations_bloc"><img src="https://img11.hostingpics.net/pics/396750img2.jpg" /><h4>Nom du lien</h4><a href="#">Prénom</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum vel sem sed venenatis. Nullam iaculis nisl nec ante varius, vel aliquet quam vehicula. Vivamus dictum vestibulum magna, sit amet semper lacus rutrum nec. Nullam a urna convallis, sagittis massa sed, faucibus orci. Quisque laoreet lectus et mi pretium, quis facilisis justo egestas. Cras tempor egestas justo, in pulvinar enim ultrices sit amet. Morbi lacus lectus, semper et lorem vel, rhoncus gravida tortor. Duis suscipit egestas ipsum, ac vehicula dui convallis a. Donec sed nunc nec sapien laoreet dapibus. </p></div><div class="clear"></div></div>

Et pour ajouter une ligne de relation il faut copier ceci :

Code:

<div id="relations_bloc"><img src="https://img11.hostingpics.net/pics/396750img2.jpg" /><h4>Nom du lien</h4><a href="#">Prénom</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum vel sem sed venenatis. Nullam iaculis nisl nec ante varius, vel aliquet quam vehicula. Vivamus dictum vestibulum magna, sit amet semper lacus rutrum nec. Nullam a urna convallis, sagittis massa sed, faucibus orci. Quisque laoreet lectus et mi pretium, quis facilisis justo egestas. Cras tempor egestas justo, in pulvinar enim ultrices sit amet. Morbi lacus lectus, semper et lorem vel, rhoncus gravida tortor. Duis suscipit egestas ipsum, ac vehicula dui convallis a. Donec sed nunc nec sapien laoreet dapibus. </p></div> <div id="relations_bloc"><img src="https://img11.hostingpics.net/pics/396750img2.jpg" /><h4>Nom du lien</h4><a href="#">Prénom</a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum vel sem sed venenatis. Nullam iaculis nisl nec ante varius, vel aliquet quam vehicula. Vivamus dictum vestibulum magna, sit amet semper lacus rutrum nec. Nullam a urna convallis, sagittis massa sed, faucibus orci. Quisque laoreet lectus et mi pretium, quis facilisis justo egestas. Cras tempor egestas justo, in pulvinar enim ultrices sit amet. Morbi lacus lectus, semper et lorem vel, rhoncus gravida tortor. Duis suscipit egestas ipsum, ac vehicula dui convallis a. Donec sed nunc nec sapien laoreet dapibus. </p></div><div class="clear"></div>

Juste avant le dernier "div" de la fiche.

Jeu 21 Sep - 0:30

Alors ?

Voila pour la fiche pub :

Jeu 21 Sep - 12:31

Navrée, navrée, ayant été malade cette semaine j'ai complètement oublié d'essayer mais c'est chose faite et tout fonctionne parfaitement ! Je me suis même amusée à remplir avec trois tonnes de texte pour voir jusqu'à quel point on pouvait remplir eeeeeet... on peut remplir beaucoup .

Pour la fiche de pub, elle est parfaite aussi ! Juste une mini question, il y aurait moyen que tout le titre du haut "le cycle du Zodiaque" soit sur une seule ligne ? Sinon c'est très bien comme ça, hein !

Jeu 21 Sep - 12:52

Ca va mieux ? :O

Ah chez moi c'est sur une ligne :O
Je vais réduire le letter-spacing du coup.

Pour le code, tu dois donc créer une page HTML sur ton forum en mode avancé et coller ceci :

Code:

<html lang="fr" class="no-js">
<head>
<meta charset="UTF-8" />
<title>Le Cycle du Zodiaque</title>
<style>
#publicite_cdz {
  width: 600px;
  margin: auto;
  background: url('https://i11.servimg.com/u/f11/15/29/91/94/04_fon11.jpg') no-repeat bottom #1c1318;
  font-size: 11px;
  font-family: arial;
  color: #fff;
  padding: 0 0 2% 0;
}
  
#publicite_cdz_entete {
  background-image:-moz-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-webkit-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-o-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:linear-gradient(90deg, #2a171d, #922b2e);
  color: #fff;
  padding: 1% 0;
  font-family: Oswald, sans-serif;
  text-align: center;
  text-transform: uppercase;
}
  
#publicite_cdz_entete h2 {
  font-size: 30px;
  letter-spacing: 10px;
  margin: 0;
  padding: 0;
  font-weight: normal;
}
  
#publicite_cdz_entete h3 {
  font-size: 14px;
  margin: 0;
  padding: 0;  
  font-weight: normal;
  font-style: italic;
}
  
#publicite_cdz_predef {
  width: 90%;
  margin: auto;
  background: #d6d2d1;
  padding: 4% 0;
  text-align: center;
}
  
#publicite_cdz_predef img {
  margin: 0 4%;
  width: 50px;
  height: 50px;
}
  
#publicite_cdz_bloc, .cdz_mauve, .cdz_rouge {
  float: left;
  width: 45%;
  display: block;
}
  
.cdz_mauve {
  margin-left: 5%;
  background: #2a171d;
}

.cdz_rouge {
  background: #912a2d;
}
  
.cdz_mauve h4, .cdz_rouge h4 {
  background: #f1f1f1;
  width: 99%;
  font-family: Oswald, sans-serif;
  font-size: 18px;
  padding: 0.5%;
  margin: 0;
  text-transform: uppercase;
  font-weight: normal;
}
  
.cdz_mauve h4 {
  color: #2a171d;
}
  
.cdz_rouge h4 {
  color: #912a2d;
}
  
#publicite_cdz_texte {
  width: 90%;
  padding: 5%;
  height: 120px;
  overflow: auto;
}
  
.publicite_cdz_news {
  font-family: Oswald, sans-serif;
  font-size: 12px;
}
  
#publicite_cdz_liens {
  width: 90%;
  margin: auto;
  background: #d6d2d1;
  padding: 3% 0;
  text-align: center;
}
  
#publicite_cdz_liens a {
  display: inline-block;
  margin: 1% 2%;
  background: #eaeaea;
  width: 25%;
  color: #912a2d !important;
  text-align: center;
  text-decoration: none;
  letter-spacing: 3px;
  font-size: 13px;
  padding: 1%;
}
  
#publicite_cdz_bottom {
  background-image:-moz-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-webkit-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:-o-linear-gradient(90deg, #2a171d, #922b2e);
  background-image:linear-gradient(90deg, #2a171d, #922b2e);
  color: #fff;
  padding: 1% 0;
  font-family: Oswald, sans-serif;
  text-align: center;
  text-transform: uppercase;
  width: 90%;
  margin: auto;
}
  
#publicite_cdz_bottom a {
  font-size: 30px;
  letter-spacing: 13px;
  margin: 0;
  padding: 0;
  color: #fff !important;
  text-decoration: none;
  font-weight: normal;
  font-style: italic;
}
  
.clear {
  clear: both;
}
</style></head>
  <body>
    <div id="publicite_cdz">
       <img src="https://i11.servimg.com/u/f11/15/29/91/94/04_ban11.jpg" alt="Bannière Cycle du Zodiaque" />
       <div id="publicite_cdz_entete">
           <h2>Le Cycle du Zodiaque</h2>
           <h3>Forum RPG - Avatars dessinés - Ouvert depuis le 01/02/03</h3>
       </div>
       <div id="publicite_cdz_predef">
           <a href="#" target="_blank"><img src="https://i11.servimg.com/u/f11/15/29/91/94/05_lie10.png" /></a>
           <a href="#" target="_blank"><img src="https://i11.servimg.com/u/f11/15/29/91/94/05_lie10.png" /></a>
           <a href="#" target="_blank"><img src="https://i11.servimg.com/u/f11/15/29/91/94/05_lie10.png" /></a>
           <a href="#" target="_blank"><img src="https://i11.servimg.com/u/f11/15/29/91/94/05_lie10.png" /></a>
           <a href="#" target="_blank"><img src="https://i11.servimg.com/u/f11/15/29/91/94/05_lie10.png" /></a>
       </div>
       <div id="publicite_cdz_bloc"class="cdz_mauve" >
           <h4>Contexte</h4>
       <div id="publicite_cdz_texte">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel lacinia augue. Aliquam consequat lobortis purus eget convallis. Praesent in ullamcorper massa. Integer eu velit fermentum, molestie elit vel, efficitur felis. Sed libero magna, venenatis consectetur lectus eget, placerat aliquet eros. Nulla pellentesque tincidunt nunc. Mauris aliquet ante ac pulvinar tincidunt. Ut sagittis mi non nisi sodales condimentum. Cras consectetur consectetur leo, non placerat odio porta sit amet. Nam sem ex, porttitor in aliquet in, efficitur ac ipsum. In luctus, ipsum id viverra imperdiet, nunc lorem tincidunt dolor, non ullamcorper elit mauris id felis. Praesent est dolor, congue vel arcu sed, venenatis condimentum dui. Cras sit amet augue justo. Sed ut elementum nulla. Praesent a massa luctus, pharetra nunc a, aliquet sapien. </div>
       </div>
       <div id="publicite_cdz_bloc"class="cdz_rouge" >
           <h4>News</h4>
           <div id="publicite_cdz_texte">
                   <span class="publicite_cdz_news">02/02/02</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br /><br />
                   <span class="publicite_cdz_news">02/02/02</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
                   <span class="publicite_cdz_news">02/02/02</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
           </div>
       </div>
       <div class="clear">
       </div>
       <div id="publicite_cdz_liens">
           <a href="#" target="_blank">Lien 1</a>
           <a href="#" target="_blank">Lien 2</a>
           <a href="#" target="_blank">Lien 3</a>
           <a href="#" target="_blank">Lien 4</a>
           <a href="#" target="_blank">Lien 5</a>
           <a href="#" target="_blank">Lien 6</a>
       </div>
       <div id="publicite_cdz_bottom">
           <a href="#" target="_blank">Rejoins-nous !</a>
       </div>
        <a href="#" target="_blank">
                <img style="display: block; margin: auto;" src="https://i11.servimg.com/u/f11/15/29/91/94/bouton10.jpg" alt="Rejoindre le Cycle du Zodiaque" />
        </a>
      
    </div>
  </body>

Attention, quand tu modifies la page pense bien à cliquer sur le second rouage ("Modifier en mode avancé (HTML)").

Et dans ton message tu insères ceci :

Code:

<center><iframe src="URL PAGE HTML" height="880" width="620" frameborder="0" scrolling="no"></iframe></center>

En remplaçant avec l'URL de ta page :3

Ven 22 Sep - 23:38

Bof, bof, mais j'ai bon espoir que le weekend mette de l'ordre dans tout ça u.u !

Hum... Bizarre, c'est mon ordi qui a dû déconner parce que même sur un petit écran ça s'affiche correctement Oo. Enfin merci quand même du coup, même si ça semblait être momentané >.<".

Puis sinon c'est impec', comme d'habitude ! Tout fonctionne à merveille et je suis toute émue d'avoir passé ma dernière commande de codage pour le premier thème, c'est qu'on viendrait rien que pour le plaisir . Du coup, on peut considérer la commande comme terminée (enfin de mon côté .x.) !

Encore merci pour tout ton travail, ce fut un plaisir ! /o/ (Vous aurez de jolis crédits avec Nasty, promis )

Sam 23 Sep - 0:12

Courage !

J'ai modifié après coup donc heureusement que ça marche XD

Han ma boutique elle va être drôlement vide sans toi Ecoute c'était avec plaisir, longue vie à ton fofo et à bientôt :D