[Fiche] Simple avec image en haut

Hello !

voilà une petite fiche qui pourra te servir pour les réponses aux RPs, les descriptions de lieux, etc.
Elle est assez simple pour une jolie mise en page sans prise de tête.

> Ce LS est compatible avec toutes les versions.
> Merci de ne pas retire le cp en bas de la fiche.

> Vous n'avez pas nécessairement besoin de l'accès aux templates ni à la CSS, vous pouvez vous service de ce code sur n'importe quel forum.
> Quelques bases en HTML et CSS sont les bienvenues.







~ Si tu n'es pas administrateur du forum et que c'est pour un RP ponctuel :
Tous les

Code:

<!--

-->

sont à garder. Ils permettent d'aérer votre code sans faire n'importe quoi avec le BBCode. Pour comprendre le pourquoi, [url=#]je t'invite à lire ce tutoriel (à venir)[/url].

Code:

<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'><!--
--> <style>.Maven_fiche{width:500px;height:auto;background:#f7f6a2;border:2px solid #44361d;margin:auto;padding:5px;}.Maven_div_image{margin:auto;width:450px;height:150px;text-align:center;}.Maven_div_image img{border:2px solid #44361d;}.Maven_fiche .titre{font-family: 'Parisienne', cursive;text-align:center;margin:0 0 -10px;padding:0;font-size:40px;color:#432e08;}.Maven_fiche .sous-titre{font-family: 'Alegreya Sans SC', sans-serif;text-align:center;margin:0;padding:0;font-size:18px;color:#000;}.Maven_fiche .contenu{width:420px;margin:0 auto;padding:10px;font-size:12px;font-family:verdana;color:#000;}.Maven_fiche .cp{font-size:9px;font-family:verdana;margin:auto;text-align:center;}.Maven_fiche a{color:black;text-decoration:none;font-weight:bold;}</style><!--

--><div class="Maven_fiche"><!--

--><div class="Maven_div_image"><img src="https://i.servimg.com/u/f68/15/82/71/87/image10.png" alt="Image du RP" /></div><!--

-->
<div class="titre">Le titre du RP</div><!--

-->
<div class="sous-titre">Le sous-titre du RP</div><!--

--><div class="contenu"><!--

--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ante, vehicula vitae accumsan sed, faucibus vitae est. Phasellus placerat ligula nec orci rutrum varius. Sed imperdiet eros quis erat feugiat, at auctor sem aliquam. Aenean tempus accumsan ante non semper.  </p><!--

--><p>Nunc ut hendrerit nisi, a rhoncus mauris. Aliquam erat volutpat. Maecenas semper ut ex id rhoncus. Curabitur non eros augue. </p><!--

--><p>In hac habitasse platea dictumst. Aenean dapibus facilisis ipsum in dapibus. Mauris scelerisque placerat massa, a vehicula mi. Aliquam eget eros consequat, sollicitudin dui sit amet, pulvinar turpis.  </p><!--
--></p><!--
--></div><!--

--><p class="cp">Fiche codée par <a href="http://tambouille-raleuses.forumactif.com" target="_blank">Mäven</a></p><!--
--></div>

~ Si Tu es administrateur et que c'est une mise en page habituelle :
La CSS n'est pas commentée. Il est possible d'avoir une explication pour une personnalisation plus rapide au besoin
A mettre dans la CSS du forum (Affichage --> Couleurs --> Feuille de style CSS) :

Code:

/*******************Debut fiche RP*************************/
.Maven_fiche{
width:500px;
height:auto;
background:#f7f6a2;
border:2px solid #44361d;
margin:auto;padding:5px;
}
.Maven_div_image{
margin:auto;
width:450px;
height:150px;
text-align:center;
}
.Maven_div_image img{
border:2px solid #44361d;
}

.Maven_fiche .titre{
font-family: 'Parisienne', cursive;
text-align:center;
margin:0 0 -10px;
padding:0;
font-size:40px;
color:#432e08;
}

.Maven_fiche .sous-titre{
font-family: 'Alegreya Sans SC', sans-serif;
text-align:center;
margin:0;
padding:0;
font-size:18px;
color:#000;
}

.Maven_fiche .contenu{
width:420px;
margin:0 auto;
padding:10px;
font-size:12px;
font-family:verdana;
color:#000;
}

.Maven_fiche .cp{
font-size:9px;
font-family:verdana;
margin:auto;
text-align:center;
}

.Maven_fiche a{
color:black;
text-decoration:none;
font-weight:bold;
}

/*******************Fin fiche RP*************************/

Le HTML à poster :
Tous les

Code:

<!--

-->

sont à garder. Ils permettent d'aérer votre code sans faire n'importe quoi avec le BBCode.

Code:

<div class="Maven_fiche"><!--

--><div class="Maven_div_image"><img src="https://i.servimg.com/u/f68/15/82/71/87/image10.png" alt="Image du RP" /></div><!--

-->
<div class="titre">Le titre du RP</div><!--

-->
<div class="sous-titre">Le sous-titre du RP</div><!--

--><div class="contenu"><!--

--><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ante, vehicula vitae accumsan sed, faucibus vitae est. Phasellus placerat ligula nec orci rutrum varius. Sed imperdiet eros quis erat feugiat, at auctor sem aliquam. Aenean tempus accumsan ante non semper.  </p><!--

--><p>Nunc ut hendrerit nisi, a rhoncus mauris. Aliquam erat volutpat. Maecenas semper ut ex id rhoncus. Curabitur non eros augue. </p><!--

--><p>In hac habitasse platea dictumst. Aenean dapibus facilisis ipsum in dapibus. Mauris scelerisque placerat massa, a vehicula mi. Aliquam eget eros consequat, sollicitudin dui sit amet, pulvinar turpis.  </p><!--
--></p><!--
--></div><!--

--><p class="cp">Fiche codée par <a href="http://tambouille-raleuses.forumactif.com" target="_blank">Mäven</a></p><!--
--></div>

Et pour garder les mêmes polices, à mettre dans le Template Overall_header, après

Code:

<head>

Code:

<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'>

---

Si tu as la moindre question ou si tu souhaite que je t'aide à personnaliser le tout, n'hésites pas à demander.
A bientôt !