[Commande codage] COMMANDE : Fiche(s) règlements/contexte/création de personnage/journal

Bonsoir,

J'aimerais passer une commande pour avoir une fiche de règlements/contexte/création de personnage/journal. Je n'ai qu'une vague idée de ce que j'aimerais, si ce n'est qu'elle soit sobre et stricte de préférence. Je voudrais la même base pour toutes les fiches, donc je pense que ça ne fera pas trop de boulot. Si jamais ça fait trop, n'hésitez pas à râler et on partira sur une seule

D'avance, un grand merci !



Type de commande :
Mise en page de message

Pour quel forum :
Sandragon

Maquette graphique/schéma/croquis :

Voici quelques déclinaisons de fiche qui m'inspirent beaucoup : ICI


Informations utiles (couleurs, images, etc, …) :
Il faut que cela s'accorde avec les tons noir et gris qu'il a essentiellement sur le forum. J'aimerais un fond qui ne gêne pas la couleur d'écriture qui est grise, voici une image que j'aime bien : LA

Je pense qu'un cadre me plairait bien aussi, si c'est possible.

Pour la fiche personnage, il faudrait juste prévoir de quoi pouvoir mettre l'avatar en 200*400 sur la droite en haut et séparer le bloc de corps en plusieurs parties (physique, caractère, histoire, etc.)

Pour le journal, pour l'instant je me contenterai de la même chose sans l'image, mais j'y reviendrai peut-être plus tard en fonction de l'inspiration en voyant l'avancement de la fiche

Le code pourra-t-il être mis en libre service ensuite ?
Yep, toujours !

Coucou

Allez ! Je me lance ^^

J'essaie de te proposer un truc rapidement ^^

Merci beaucoup Pénélope !

EDIT : j'ai oublié de te montrer cette image qui me plaît beaucoup, je la verrais bien en "entête" du cadre de la fiche, si tu arrives à en faire quelque chose avec quelques modifications.






EDIT 2 : J'aime bien elle aussi xD

Coucou

Voilà ce que je te propose :

http://miettes.lebonforum.com/h35-temp

Il faut encore que je fasse l'exemple pour les fiches de perso.

Je te laisse me dire toutes les modifs que tu veux que je fasse.

Coucou Pénélope,

J'aime beaucoup ta fiche je réfléchis pour trouver des modifications cela dit car elle ressemble trop à l'exemple que je t'ai donné ^^" Si tu as des idées d'inspiration qui te viennent pour la démarquer un peu, n'hésite pas à faire des essais ^^. Pour le titre, je le préférerais en marron plutôt qu'en jaune.

Je verrais bien aussi un petit quelque chose pour différencier les annonces des règlements et du contexte. Une couleur, je sais pas, une petite image (a mettre vers le titre ou sous titre par exemple). Je vais réfléchir à tout ça et je reviens viens toi. Désolée d'être difficile ^^"

Encore merci pour le temps que tu m'accordes !

Coucou, désolée pour le double post.

Me revoilà avec une idée un peu plus précise en tête

Alors à la place de la tapisserie que je t’ai donnée, je voudrais cette image de fond. (en fait l’image de la rose suffit à elle toute seule lol)

Cela dit j’ai oublié une précision importante concernant la réaction des fiches : Je voudrais que si le texte dépasse de la fiche, celle-ci s’allonge jusqu’au bout du texte. (Je ne veux pas de scroll.)

Donc la question est de savoir si ce sera faisable  avec ce fond ?

Pour le texte du corps de la fiche, je voudrais cette couleur #474747

Voilà le plan (j'ai enfin fini !)

La largeur me convient ainsi, j'aimerais garder la même. J'ai mis la place de l'avatar pour la fiche personnage, même si là c'est pour la fiche de règlement.

FICHE:

image du haut:

Image du bas :

Separateur:

Hello

Voilà avec tes modifs :
http://miettes.lebonforum.com/h35-temp

Je n'ai pas encore fait l'avatar. Bon par contre, l'image du titre est pas terrible terrible niveau qualité

Et ensuite, pour les titres dans le texte, tu as une idée/envie ?

Coucou, nickel comme ça !

Bon par contre, l'image du titre est pas terrible terrible niveau qualité

Oui en effet, en agrandissant ça a créé un peu de blanc autour, je verrais d'arranger ça et de remplacer l'image plus tard (quitte à la changer entièrement même), ne t'en fais pas

Et ensuite, pour les titres dans le texte, tu as une idée/envie ?

Pour l'instant ça ira, au besoin j’insérerai de légers et discrets séparateurs en reprenant le modèle du séparateur/titre que tu auras fait

Merci pour ma fiche de règlements

Coucou

J'ai fait quelques modifs et j'ai ajouté la fiche de perso (tout en bas)

http://miettes.lebonforum.com/h35-temp

Comme d'hab, je te laisse me dire si tu veux qu'on modifie des choses

Coucou Pénélope,

C'est très bien comme ça, merci
Je voulais savoir si tu saurais comment "encadrer" les titres ? Qu'il y ait une ligne au dessus et une en dessous, sur toute la largeur de la fiche. (Un peu comme mon séparateur TITRE) mais cette fois bien plus discret et fin, une simple ligne. J'ai essayé voir avec le _ du 8 mais je ne trouve pas le rendu super. Sinon ça ira très bien comme ça ne t'en fais pas ^^

Sur tous les titres ?

oui

Comme ça du coup ?

http://miettes.lebonforum.com/h35-temp

Exactement

Ah super !

Du coup, voilà la CSS à mettre dans la feuille de style de ton forum :

Code:

/*** ---- FICHES --- ***/
.lsm-fiche{
    background: #e6dbbf url('https://zupimages.net/up/19/28/jjwr.png') no-repeat center 530px ;
    border: 2px solid #969393;
    font-size: 12px;
    line-height: 1.2;
    margin: 10px auto;
    width: 700px;
}

/*** Header ***/
.lsm-fiche .lsm-header{
    background: #dacbac url('https://zupimages.net/up/19/28/1ryz.png') no-repeat top center;
    background-size: 100% auto;
    height: 480px;
    min-height: 80px;
    position: relative;
}

.lsm-fiche .lsm-header .lsm-titre-fiche{
    background: transparent url('https://zupimages.net/up/19/28/y8wf.png') repeat-x center top;
    bottom: -92px;
    color: #7d6446;
    font-size: 30px;
    font-weight: bold;
    height: 120px;
    line-height: 85px;
    overflow: hidden;
    padding: 10px 0;
    position: absolute;
    text-align: center;
    text-shadow: 3px 3px 3px #a7977d;
    width: 100%;
}

/*** Contenu ***/
.lsm-fiche .lsm-contenu{
    color: #474747;
    padding: 80px 30px 10px;
    text-align: justify;
}

/* Sous-titre & titre */       
.lsm-fiche .lsm-contenu .lsm-sous-titre-fiche{
    color: #7d6446;
    border-bottom: #7d6446 2px solid;
    border-top: #7d6446 2px solid;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
}

.lsm-fiche .lsm-contenu .lsm-sous-titre-fiche,
.lsm-fiche .lsm-contenu .lsm-titre1,
.lsm-fiche .lsm-contenu .lsm-titre2,
.lsm-fiche .lsm-contenu .lsm-titre3{
    box-sizing: content-box;
    left:  -30px;
    padding: 4px 30px;
    position: relative;
    width: 100%;
}

.lsm-fiche .lsm-contenu .lsm-titre1,
.lsm-fiche .lsm-contenu .lsm-titre2,
.lsm-fiche .lsm-contenu .lsm-titre3{
    color: #7d6446;
    font-weight: bold;
}

.lsm-fiche .lsm-contenu .lsm-titre1{
    border-bottom: #7d6446 2px solid;
    border-top: #7d6446 2px solid;
    font-size: 20px;           
}

.lsm-fiche .lsm-contenu .lsm-titre2{
    border-bottom: #7d6446 1px solid;
    border-top: #7d6446 1px solid;
    font-size: 16px;           
}

.lsm-fiche .lsm-contenu .lsm-titre3:before{
    content: "►";
    padding-right: 5px
}

/* Avatar */
.lsm-fiche .lsm-contenu .lsm-avatar{
    border: 2px solid #969393;
    float: right;
    margin:  0 0 10px 10px;
    position: relative;
    z-index: 100;
}

.lsm-fiche .lsm-contenu .lsm-avatar:after{
    clear: both;
    content: " ";
    display: block;
}

Pour le html, que ce soit une annonce ou une fiche, le code est le même, la seule différence c'est l'ajout de l'avatar. Voilà les 2 fiches :

* Les messages d'annonce

Code:

<div class="lsm-fiche"><!--
        --><div class="lsm-header"><!--
            --><div class="lsm-titre-fiche">Le titre</div><!--
        --></div><!--
        --><div class="lsm-contenu"><!--
            --><div class="lsm-sous-titre-fiche">Sous-titre</div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mi sodales, porta justo in, accumsan tortor. Morbi sodales nisi ut euismod ultricies. Suspendisse feugiat, ante eu dapibus ultricies, ante diam faucibus risus, ut lobortis mauris purus eu ante. Cras id libero leo. Etiam quis dui ac ante hendrerit iaculis. Duis scelerisque nulla diam, aliquam imperdiet ante varius in. Proin turpis nunc, pulvinar eget volutpat in, sodales at metus. Quisque cursus, dolor eu mattis ultrices, nibh sem euismod turpis, in tempor justo urna non tellus. Nunc convallis dui laoreet urna rutrum sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consequat molestie venenatis. Aliquam erat volutpat. Donec sed bibendum quam. Aenean quis nisi non est fermentum gravida. Integer eget condimentum nisl.
            </p>
            <div class="lsm-titre1">Titre de niveau 1</div>
            <p>
                Aliquam et erat sagittis, tincidunt nunc vestibulum, vulputate felis. Quisque libero leo, varius vel iaculis vitae, dapibus sit amet velit. Nullam sed rutrum risus. Duis ut est in ligula tristique hendrerit sit amet faucibus mi. Aenean massa dui, tempor sed libero vel, rhoncus eleifend ipsum. In hac habitasse platea dictumst. Aliquam et metus sit amet mi varius tincidunt.
            </p>
            <div class="lsm-titre2">Titre de niveau 2</div>
            <p>
                In felis ex, maximus ut felis placerat, maximus vehicula neque. Morbi molestie, nulla ut placerat tempor, velit enim maximus lacus, vel pretium ipsum metus id augue. Nulla eu quam euismod, iaculis dolor rhoncus, elementum urna. Pellentesque aliquam velit vel tristique dictum. Vestibulum tellus sapien, pretium quis neque ut, pulvinar tempor purus. Nulla laoreet vehicula lectus. Pellentesque efficitur vitae est sed eleifend.
            </p>
            <div class="lsm-titre3">Titre de niveau 3</div>
            <p>
                Cras eleifend sapien a congue pulvinar. Nam porta lacinia cursus. Ut vel urna volutpat, ultrices lacus ut, maximus neque. Vestibulum dolor sapien, finibus ac fermentum in, eleifend id orci. Sed fringilla ante urna, eu interdum velit sagittis sed. Maecenas vel turpis mollis libero tempor consequat. Nullam sagittis rutrum nunc, in hendrerit risus aliquet at. Quisque varius et mauris ut pharetra. Quisque tempus elit at molestie placerat. Nulla lobortis libero eget metus bibendum tristique. Suspendisse potenti. Suspendisse non dui massa. Aenean sed nibh eu dui faucibus tristique.
            </p>
            <p>
                Curabitur eget sem placerat, ornare enim eu, hendrerit erat. Sed ac ex in libero eleifend feugiat quis at libero. Aenean sodales tempor nisi, sit amet venenatis nisi lacinia sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin porta ipsum volutpat, commodo lacus sit amet, tincidunt nisi. Praesent blandit turpis non erat viverra lacinia. Proin suscipit consectetur nulla at fermentum. Aenean molestie sapien lorem, vel aliquet mi pulvinar ullamcorper. Proin dignissim vitae diam vel volutpat. Vestibulum placerat enim in est luctus vestibulum. Praesent libero velit, tincidunt sed hendrerit vel, dapibus eu turpis. Etiam ut enim ornare orci maximus pretium.
            </p>
        </div><!--       
    --></div>

* Une fiche

Code:

<div class="lsm-fiche"><!--   
        --><div class="lsm-header"><!--   
            --><div class="lsm-titre-fiche">Le titre</div><!--   
        --></div><!--   
        --><div class="lsm-contenu"><!--   
            --><img src="https://2img.net/u/4212/16/51/60/avatars/1-76.jpg" alt="Avatar Destiné" class="lsm-avatar" /><!--   
            --><div class="lsm-sous-titre-fiche">Sous-titre</div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mi sodales, porta justo in, accumsan tortor. Morbi sodales nisi ut euismod ultricies. Suspendisse feugiat, ante eu dapibus ultricies, ante diam faucibus risus, ut lobortis mauris purus eu ante. Cras id libero leo. Etiam quis dui ac ante hendrerit iaculis. Duis scelerisque nulla diam, aliquam imperdiet ante varius in. Proin turpis nunc, pulvinar eget volutpat in, sodales at metus. Quisque cursus, dolor eu mattis ultrices, nibh sem euismod turpis, in tempor justo urna non tellus. Nunc convallis dui laoreet urna rutrum sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consequat molestie venenatis. Aliquam erat volutpat. Donec sed bibendum quam. Aenean quis nisi non est fermentum gravida. Integer eget condimentum nisl.
            </p>
            <div class="lsm-titre1">Titre de niveau 1</div>
            <p>
                Aliquam et erat sagittis, tincidunt nunc vestibulum, vulputate felis. Quisque libero leo, varius vel iaculis vitae, dapibus sit amet velit. Nullam sed rutrum risus. Duis ut est in ligula tristique hendrerit sit amet faucibus mi. Aenean massa dui, tempor sed libero vel, rhoncus eleifend ipsum. In hac habitasse platea dictumst. Aliquam et metus sit amet mi varius tincidunt.
            </p>
            <div class="lsm-titre2">Titre de niveau 2</div>
            <p>
                In felis ex, maximus ut felis placerat, maximus vehicula neque. Morbi molestie, nulla ut placerat tempor, velit enim maximus lacus, vel pretium ipsum metus id augue. Nulla eu quam euismod, iaculis dolor rhoncus, elementum urna. Pellentesque aliquam velit vel tristique dictum. Vestibulum tellus sapien, pretium quis neque ut, pulvinar tempor purus. Nulla laoreet vehicula lectus. Pellentesque efficitur vitae est sed eleifend.
            </p>
            <div class="lsm-titre3">Titre de niveau 3</div>
            <p>
                Cras eleifend sapien a congue pulvinar. Nam porta lacinia cursus. Ut vel urna volutpat, ultrices lacus ut, maximus neque. Vestibulum dolor sapien, finibus ac fermentum in, eleifend id orci. Sed fringilla ante urna, eu interdum velit sagittis sed. Maecenas vel turpis mollis libero tempor consequat. Nullam sagittis rutrum nunc, in hendrerit risus aliquet at. Quisque varius et mauris ut pharetra. Quisque tempus elit at molestie placerat. Nulla lobortis libero eget metus bibendum tristique. Suspendisse potenti. Suspendisse non dui massa. Aenean sed nibh eu dui faucibus tristique.
            </p>
            <p>
                Curabitur eget sem placerat, ornare enim eu, hendrerit erat. Sed ac ex in libero eleifend feugiat quis at libero. Aenean sodales tempor nisi, sit amet venenatis nisi lacinia sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin porta ipsum volutpat, commodo lacus sit amet, tincidunt nisi. Praesent blandit turpis non erat viverra lacinia. Proin suscipit consectetur nulla at fermentum. Aenean molestie sapien lorem, vel aliquet mi pulvinar ullamcorper. Proin dignissim vitae diam vel volutpat. Vestibulum placerat enim in est luctus vestibulum. Praesent libero velit, tincidunt sed hendrerit vel, dapibus eu turpis. Etiam ut enim ornare orci maximus pretium.
            </p>

        </div><!--       
    --></div>

Ne supprime pas les commentaires

Code:

<!--

-->

Ils permettent d'éviter les retours à la ligne discracieux

Le rendu sur forum est disponible ici.

Un grand merci ! 

Si je peux me permettre une petite question...
Est-ce que c'est possible de mettre tout le code dans les fiches au lieu d'en mettre dans la CSS ?
Pour qu'elles soient "indépendantes"

Sinon c'est pas grave ne t'en fais pas ^^

C'est possible

Il te suffit de mettre ceci avant chaque fiche :

Code:

<style>.lsm-fiche{background:#e6dbbf url(https://zupimages.net/up/19/28/jjwr.png) no-repeat center 530px;border:2px solid #969393;font-size:12px;line-height:1.2;margin:10px auto;width:700px}.lsm-fiche .lsm-header{background:#dacbac url(https://zupimages.net/up/19/28/1ryz.png) no-repeat top center;background-size:100% auto;height:480px;min-height:80px;position:relative}.lsm-fiche .lsm-header .lsm-titre-fiche{background:transparent url(https://zupimages.net/up/19/28/y8wf.png) repeat-x center top;bottom:-92px;color:#7d6446;font-size:30px;font-weight:700;height:120px;line-height:85px;overflow:hidden;padding:10px 0;position:absolute;text-align:center;text-shadow:3px 3px 3px #a7977d;width:100%}.lsm-fiche .lsm-contenu{color:#474747;padding:80px 30px 10px;text-align:justify}.lsm-fiche .lsm-contenu .lsm-sous-titre-fiche{color:#7d6446;border-bottom:#7d6446 2px solid;border-top:#7d6446 2px solid;font-size:26px;font-weight:700;margin-bottom:30px;text-align:center}.lsm-fiche .lsm-contenu .lsm-sous-titre-fiche,.lsm-fiche .lsm-contenu .lsm-titre1,.lsm-fiche .lsm-contenu .lsm-titre2,.lsm-fiche .lsm-contenu .lsm-titre3{box-sizing:content-box;left:-30px;padding:4px 30px;position:relative;width:100%}.lsm-fiche .lsm-contenu .lsm-titre1,.lsm-fiche .lsm-contenu .lsm-titre2,.lsm-fiche .lsm-contenu .lsm-titre3{color:#7d6446;font-weight:700}.lsm-fiche .lsm-contenu .lsm-titre1{border-bottom:#7d6446 2px solid;border-top:#7d6446 2px solid;font-size:20px}.lsm-fiche .lsm-contenu .lsm-titre2{border-bottom:#7d6446 1px solid;border-top:#7d6446 1px solid;font-size:16px}.lsm-fiche .lsm-contenu .lsm-titre3:before{content:"►";padding-right:5px}.lsm-fiche .lsm-contenu .lsm-avatar{border:2px solid #969393;float:right;margin:0 0 10px 10px;position:relative;z-index:100}.lsm-fiche .lsm-contenu .lsm-avatar:after{clear:both;content:" ";display:block}</style>

par exemple :

* Pour les annonces

Code:

<style>.lsm-fiche{background:#e6dbbf url(https://zupimages.net/up/19/28/jjwr.png) no-repeat center 530px;border:2px solid #969393;font-size:12px;line-height:1.2;margin:10px auto;width:700px}.lsm-fiche .lsm-header{background:#dacbac url(https://zupimages.net/up/19/28/1ryz.png) no-repeat top center;background-size:100% auto;height:480px;min-height:80px;position:relative}.lsm-fiche .lsm-header .lsm-titre-fiche{background:transparent url(https://zupimages.net/up/19/28/y8wf.png) repeat-x center top;bottom:-92px;color:#7d6446;font-size:30px;font-weight:700;height:120px;line-height:85px;overflow:hidden;padding:10px 0;position:absolute;text-align:center;text-shadow:3px 3px 3px #a7977d;width:100%}.lsm-fiche .lsm-contenu{color:#474747;padding:80px 30px 10px;text-align:justify}.lsm-fiche .lsm-contenu .lsm-sous-titre-fiche{color:#7d6446;border-bottom:#7d6446 2px solid;border-top:#7d6446 2px solid;font-size:26px;font-weight:700;margin-bottom:30px;text-align:center}.lsm-fiche .lsm-contenu .lsm-sous-titre-fiche,.lsm-fiche .lsm-contenu .lsm-titre1,.lsm-fiche .lsm-contenu .lsm-titre2,.lsm-fiche .lsm-contenu .lsm-titre3{box-sizing:content-box;left:-30px;padding:4px 30px;position:relative;width:100%}.lsm-fiche .lsm-contenu .lsm-titre1,.lsm-fiche .lsm-contenu .lsm-titre2,.lsm-fiche .lsm-contenu .lsm-titre3{color:#7d6446;font-weight:700}.lsm-fiche .lsm-contenu .lsm-titre1{border-bottom:#7d6446 2px solid;border-top:#7d6446 2px solid;font-size:20px}.lsm-fiche .lsm-contenu .lsm-titre2{border-bottom:#7d6446 1px solid;border-top:#7d6446 1px solid;font-size:16px}.lsm-fiche .lsm-contenu .lsm-titre3:before{content:"►";padding-right:5px}.lsm-fiche .lsm-contenu .lsm-avatar{border:2px solid #969393;float:right;margin:0 0 10px 10px;position:relative;z-index:100}.lsm-fiche .lsm-contenu .lsm-avatar:after{clear:both;content:" ";display:block}</style>
<div class="lsm-fiche"><!--
        --><div class="lsm-header"><!--
            --><div class="lsm-titre-fiche">Le titre</div><!--
        --></div><!--
        --><div class="lsm-contenu"><!--
            --><div class="lsm-sous-titre-fiche">Sous-titre</div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mi sodales, porta justo in, accumsan tortor. Morbi sodales nisi ut euismod ultricies. Suspendisse feugiat, ante eu dapibus ultricies, ante diam faucibus risus, ut lobortis mauris purus eu ante. Cras id libero leo. Etiam quis dui ac ante hendrerit iaculis. Duis scelerisque nulla diam, aliquam imperdiet ante varius in. Proin turpis nunc, pulvinar eget volutpat in, sodales at metus. Quisque cursus, dolor eu mattis ultrices, nibh sem euismod turpis, in tempor justo urna non tellus. Nunc convallis dui laoreet urna rutrum sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consequat molestie venenatis. Aliquam erat volutpat. Donec sed bibendum quam. Aenean quis nisi non est fermentum gravida. Integer eget condimentum nisl.

            <div class="lsm-titre1">Titre de niveau 1</div>
            Aliquam et erat sagittis, tincidunt nunc vestibulum, vulputate felis. Quisque libero leo, varius vel iaculis vitae, dapibus sit amet velit. Nullam sed rutrum risus. Duis ut est in ligula tristique hendrerit sit amet faucibus mi. Aenean massa dui, tempor sed libero vel, rhoncus eleifend ipsum. In hac habitasse platea dictumst. Aliquam et metus sit amet mi varius tincidunt.

            <div class="lsm-titre2">Titre de niveau 2</div>
            In felis ex, maximus ut felis placerat, maximus vehicula neque. Morbi molestie, nulla ut placerat tempor, velit enim maximus lacus, vel pretium ipsum metus id augue. Nulla eu quam euismod, iaculis dolor rhoncus, elementum urna. Pellentesque aliquam velit vel tristique dictum. Vestibulum tellus sapien, pretium quis neque ut, pulvinar tempor purus. Nulla laoreet vehicula lectus. Pellentesque efficitur vitae est sed eleifend.

            <div class="lsm-titre3">Titre de niveau 3</div>
            Cras eleifend sapien a congue pulvinar. Nam porta lacinia cursus. Ut vel urna volutpat, ultrices lacus ut, maximus neque. Vestibulum dolor sapien, finibus ac fermentum in, eleifend id orci. Sed fringilla ante urna, eu interdum velit sagittis sed. Maecenas vel turpis mollis libero tempor consequat. Nullam sagittis rutrum nunc, in hendrerit risus aliquet at. Quisque varius et mauris ut pharetra. Quisque tempus elit at molestie placerat. Nulla lobortis libero eget metus bibendum tristique. Suspendisse potenti. Suspendisse non dui massa. Aenean sed nibh eu dui faucibus tristique.
           
            Curabitur eget sem placerat, ornare enim eu, hendrerit erat. Sed ac ex in libero eleifend feugiat quis at libero. Aenean sodales tempor nisi, sit amet venenatis nisi lacinia sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin porta ipsum volutpat, commodo lacus sit amet, tincidunt nisi. Praesent blandit turpis non erat viverra lacinia. Proin suscipit consectetur nulla at fermentum. Aenean molestie sapien lorem, vel aliquet mi pulvinar ullamcorper. Proin dignissim vitae diam vel volutpat. Vestibulum placerat enim in est luctus vestibulum. Praesent libero velit, tincidunt sed hendrerit vel, dapibus eu turpis. Etiam ut enim ornare orci maximus pretium.
        </div><!--       
    --></div>

* Pour les fiches

Code:

<style>.lsm-fiche{background:#e6dbbf url(https://zupimages.net/up/19/28/jjwr.png) no-repeat center 530px;border:2px solid #969393;font-size:12px;line-height:1.2;margin:10px auto;width:700px}.lsm-fiche .lsm-header{background:#dacbac url(https://zupimages.net/up/19/28/1ryz.png) no-repeat top center;background-size:100% auto;height:480px;min-height:80px;position:relative}.lsm-fiche .lsm-header .lsm-titre-fiche{background:transparent url(https://zupimages.net/up/19/28/y8wf.png) repeat-x center top;bottom:-92px;color:#7d6446;font-size:30px;font-weight:700;height:120px;line-height:85px;overflow:hidden;padding:10px 0;position:absolute;text-align:center;text-shadow:3px 3px 3px #a7977d;width:100%}.lsm-fiche .lsm-contenu{color:#474747;padding:80px 30px 10px;text-align:justify}.lsm-fiche .lsm-contenu .lsm-sous-titre-fiche{color:#7d6446;border-bottom:#7d6446 2px solid;border-top:#7d6446 2px solid;font-size:26px;font-weight:700;margin-bottom:30px;text-align:center}.lsm-fiche .lsm-contenu .lsm-sous-titre-fiche,.lsm-fiche .lsm-contenu .lsm-titre1,.lsm-fiche .lsm-contenu .lsm-titre2,.lsm-fiche .lsm-contenu .lsm-titre3{box-sizing:content-box;left:-30px;padding:4px 30px;position:relative;width:100%}.lsm-fiche .lsm-contenu .lsm-titre1,.lsm-fiche .lsm-contenu .lsm-titre2,.lsm-fiche .lsm-contenu .lsm-titre3{color:#7d6446;font-weight:700}.lsm-fiche .lsm-contenu .lsm-titre1{border-bottom:#7d6446 2px solid;border-top:#7d6446 2px solid;font-size:20px}.lsm-fiche .lsm-contenu .lsm-titre2{border-bottom:#7d6446 1px solid;border-top:#7d6446 1px solid;font-size:16px}.lsm-fiche .lsm-contenu .lsm-titre3:before{content:"►";padding-right:5px}.lsm-fiche .lsm-contenu .lsm-avatar{border:2px solid #969393;float:right;margin:0 0 10px 10px;position:relative;z-index:100}.lsm-fiche .lsm-contenu .lsm-avatar:after{clear:both;content:" ";display:block}</style>
<div class="lsm-fiche"><!--
        --><div class="lsm-header"><!--
            --><div class="lsm-titre-fiche">Le titre</div><!--
        --></div><!--
        --><div class="lsm-contenu"><!--
          --><img src="https://2img.net/u/4212/16/51/60/avatars/1-76.jpg" alt="Avatar Destiné" class="lsm-avatar" /><!--
            --><div class="lsm-sous-titre-fiche">Sous-titre</div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mi sodales, porta justo in, accumsan tortor. Morbi sodales nisi ut euismod ultricies. Suspendisse feugiat, ante eu dapibus ultricies, ante diam faucibus risus, ut lobortis mauris purus eu ante. Cras id libero leo. Etiam quis dui ac ante hendrerit iaculis. Duis scelerisque nulla diam, aliquam imperdiet ante varius in. Proin turpis nunc, pulvinar eget volutpat in, sodales at metus. Quisque cursus, dolor eu mattis ultrices, nibh sem euismod turpis, in tempor justo urna non tellus. Nunc convallis dui laoreet urna rutrum sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec consequat molestie venenatis. Aliquam erat volutpat. Donec sed bibendum quam. Aenean quis nisi non est fermentum gravida. Integer eget condimentum nisl.

            <div class="lsm-titre1">Titre de niveau 1</div>
            Aliquam et erat sagittis, tincidunt nunc vestibulum, vulputate felis. Quisque libero leo, varius vel iaculis vitae, dapibus sit amet velit. Nullam sed rutrum risus. Duis ut est in ligula tristique hendrerit sit amet faucibus mi. Aenean massa dui, tempor sed libero vel, rhoncus eleifend ipsum. In hac habitasse platea dictumst. Aliquam et metus sit amet mi varius tincidunt.

            <div class="lsm-titre2">Titre de niveau 2</div>
            In felis ex, maximus ut felis placerat, maximus vehicula neque. Morbi molestie, nulla ut placerat tempor, velit enim maximus lacus, vel pretium ipsum metus id augue. Nulla eu quam euismod, iaculis dolor rhoncus, elementum urna. Pellentesque aliquam velit vel tristique dictum. Vestibulum tellus sapien, pretium quis neque ut, pulvinar tempor purus. Nulla laoreet vehicula lectus. Pellentesque efficitur vitae est sed eleifend.

            <div class="lsm-titre3">Titre de niveau 3</div>
            Cras eleifend sapien a congue pulvinar. Nam porta lacinia cursus. Ut vel urna volutpat, ultrices lacus ut, maximus neque. Vestibulum dolor sapien, finibus ac fermentum in, eleifend id orci. Sed fringilla ante urna, eu interdum velit sagittis sed. Maecenas vel turpis mollis libero tempor consequat. Nullam sagittis rutrum nunc, in hendrerit risus aliquet at. Quisque varius et mauris ut pharetra. Quisque tempus elit at molestie placerat. Nulla lobortis libero eget metus bibendum tristique. Suspendisse potenti. Suspendisse non dui massa. Aenean sed nibh eu dui faucibus tristique.
           
            Curabitur eget sem placerat, ornare enim eu, hendrerit erat. Sed ac ex in libero eleifend feugiat quis at libero. Aenean sodales tempor nisi, sit amet venenatis nisi lacinia sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin porta ipsum volutpat, commodo lacus sit amet, tincidunt nisi. Praesent blandit turpis non erat viverra lacinia. Proin suscipit consectetur nulla at fermentum. Aenean molestie sapien lorem, vel aliquet mi pulvinar ullamcorper. Proin dignissim vitae diam vel volutpat. Vestibulum placerat enim in est luctus vestibulum. Praesent libero velit, tincidunt sed hendrerit vel, dapibus eu turpis. Etiam ut enim ornare orci maximus pretium.
        </div><!--       
    --></div>

Mais je te le déconseille. Le jour où tu voudras faire une modificiation de couleurs par exemple, il faudra repasser sur chacune des pages et le faire à la main. Alors qu'en appelant le style dans la CSS, il suffira de le modifier une seule fois

Ah oui le principe de la CSS tu me diras ! Faire une seule mise en forume à appeler sur chaque fiche pour ne changer qu'une fois et pas sur toutes les fiches.

Bon je vais réfléchir alors, autant mettre sans la CSS en effet xD Je ne pensais plus que c'était une CSS globale à toutes les fiches là.

Merci encore, je file faire une course et je regarde ce que ça donne en condition réelle pis je reviendrai te dire

ça marche

je te repondrai demain du coup ^^

Oki

Bon alors je viens de regarder, pourrais-tu baisser l'avatar sous le sous titre s'il te plaît ? et en fin de compte, mon titre, il manque de fonctionnalité (s'il y a trop de texte, ça coupe) et puis je viens de penser qu'au pire, ça dépasserait... alors je vais le retirer pour ne garder qu'un titre classique comme le sous titre


EDIT : Bon j'ai trouvé pour l'avatar ^^ restera plus qu'à voir ce qu'on peut faire au titre principal. Peut-être permettre un retour à la ligne, et que j'élargisse un peu le séparateur ?

Coucou

Pour le séparateur, ce que tu peux faire c'est le découper
- 1 image pour la déco du haut
- 1 image pour la déco du bas
- 1 image centrale qui peut se répéter en hauteur sans faire dégueu

De cette façon, on pourra coder un truc qui s'adaptera à la longueur du texte

Super, je finis mon bidouillage sur les fiches (promis j'essaie de pas tout massacrer xD) et je reviens te donner ça

ça roule, je patiente du coup ^^

Voilà voilà,
tu me diras si c'est bon comme ça. Désolée de t'avoir fait attendre, je me sens pas trop bien aujourd'hui....
Merci beaucoup pour le temps que tu me consacres.



Partie du haut (première) qui fait aussi office de partie du bas (troisième)




Et la deuxième, celle du milieu.

Coucou

Voilà :
http://miettes.lebonforum.com/h35-temp

est-ce que ça irait comme ça ?