Test Mäven
Message pop up connexion

Rejoignez le forum, c’est rapide et facile

Test Mäven
Message pop up connexion
Test Mäven
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Test Mäven

je suis la description du forum

-14%
Le deal à ne pas rater :
Apple MacBook Air (2020) 13,3″ Puce Apple M1 – RAM 8Go/SSD 256Go
799 € 930 €
Voir le deal

Fiche bestaire à 2 colonnes

Test Mäven :: Catégorie #1 - La Tambouille :: Forum #1 - Rendus de LS
Aller en bas
Mäven
Mäven
Admin
Admin
Messages : 236
Points : 106313
Sexe : Masculin
Date d'inscription : 24/11/2009
Age Age : 30
Localisation : chez moi

Feuille de personnage
plouf mon champ RPG: plouf mon champ
https://maven.forumactif.org
+

Fiche bestaire à 2 colonnes Empty Fiche bestaire à 2 colonnes

Mar 4 Juin 2019 - 21:54

Fiche bestaire à 2 colonnes


Bonjour bonjour !

Aujourd'hui je te propose une fiche bestiaire en 2 colonnes. Voilà l'aperçu :

Nom de l'animal

Caractéristique * Caractéristique * Caractéristique * Caractéristique

image animal

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.

Nunc ut hendrerit nisi, a rhoncus mauris. Aliquam erat volutpat. Maecenas semper ut ex id rhoncus. Curabitur non eros augue.

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.

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.

Nunc ut hendrerit nisi, a rhoncus mauris. Aliquam erat volutpat. Maecenas semper ut ex id rhoncus. Curabitur non eros augue.

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.

Fiche codée par Mäven


Pour utiliser sur ton propre forum

Si tu souhaite utiliser ce code pour ton propre forum, tu peux mettre la CSS directement dans ta feuille de style CSS (PA > Affichage > Couleurs > Feuille de style CSS).
Exclamation La CSS n'est pas commentée. Si tu as la moindre question pour la compréhension ou la personnalisation je serai ravie de te répondre.

Code:
/*******************Debut fiche bestiaire*************************/
.Maven_fiche_bestaire{
width:500px;
height:auto;
background:#9bc18c url('https://2img.net/i/fa/pbucket.gif') no-repeat;
border:2px solid #000;
margin:auto;padding:5px;
font-family:verdana;
}
.Maven_div_image{
margin:auto;
width:450px;
height:150px;
}
.Maven_div_image img{
border:2px solid #000;
}

.Maven_fiche_bestaire .titre_fiche{
text-align:center;
margin:auto;
padding:10px;
font-size:35px;
color:#000;
border:2px solid #000;
}

.Maven_fiche_bestaire .d-flex{
display:flex;
align-items:center;
}
.Maven_fiche_bestaire .image_bestiaire{
margin:15px 10px;

}
.Maven_fiche_bestaire .image_bestiaire img{
border:2px solid #000;
}
.Maven_fiche_bestaire .contenu_bestaire{
width:250px;
margin:15px auto;
font-size:12px;
color:#000;
text-align:justify;
height:320px;
overflow:auto;
}

.Maven_fiche_bestaire .cp_bestaire{
font-size:9px;
font-family:verdana;
margin:auto;
text-align:center;
}
.Maven_fiche_bestaire .caracteristiques{
font-size:12px;
font-family:verdana;
margin:auto 0;
text-align:center;
font-weight:bold;
}

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

/*******************Fin fiche bestiaire*************************/

Et la partie HTML pour tes sujets :
Arrow Ne pas retirer les commentaires
Code:
<!-- -->
ils permettent d'aérer le code sans créer d'espaces non voulus dans la fiche. Pour plus d'informations, [ rendez-vous ici]
Code:
<div class="Maven_fiche_bestaire"><!--

    -->    <div class="titre_fiche">Nom de l'animal</div><!--

    --><p class="caracteristiques">Caractéristique * Caractéristique * Caractéristique * Caractéristique</p><!--

    --><div class="d-flex"><!--

    --><div class="image_bestiaire"><img src="https://i.servimg.com/u/f68/15/82/71/87/loup10.png" alt="image animal" /></div><!--

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

    --><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>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><!--
    --></div><!--

    --></div><!--

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

Pour utiliser sur un forum qui n'est pas le tien

Si tu veux créer ta propre fiche sur un forum qui n'est pas le tien tu n'as pas accès au PA. Tu peux tout de même utiliser cette fiche avec le code qui suit.
Arrow Ne pas retirer les commentaires
Code:
<!-- -->
ils permettent d'aérer le code sans créer d'espaces non voulus dans la fiche. Pour plus d'informations, [ rendez-vous ici]
Code:

<style>.Maven_fiche_bestaire{width:500px;height:auto;background:#9bc18c url(https://2img.net/i/fa/pbucket.gif) no-repeat;border:2px solid #000;margin:auto;padding:5px;font-family:verdana}.Maven_div_image{margin:auto;width:450px;height:150px}.Maven_div_image img{border:2px solid #000}.Maven_fiche_bestaire .titre_fiche{text-align:center;margin:auto;padding:10px;font-size:35px;color:#000;border:2px solid #000;font-weight:700}.Maven_fiche_bestaire .d-flex{display:flex;align-items:center;}.Maven_fiche_bestaire .image_bestiaire{margin:15px 10px}.Maven_fiche_bestaire .image_bestiaire img{border:2px solid #000}.Maven_fiche_bestaire .contenu_bestaire{width:250px;margin:15px auto;font-size:12px;color:#000;text-align:justify;height:320px;overflow:auto}.Maven_fiche_bestaire .cp_bestaire{font-size:9px;font-family:verdana;margin:auto;text-align:center}.Maven_fiche_bestaire .caracteristiques{font-size:12px;font-family:verdana;margin:auto 0;text-align:center;font-weight:700}.Maven_fiche_bestaire a{color:#000;text-decoration:none;font-weight:700}</style><!--

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

    -->    <div class="titre_fiche">Nom de l'animal</div><!--


    --><p class="caracteristiques">Caractéristique * Caractéristique * Caractéristique * Caractéristique</p><!--

    --><div class="d-flex"><!--

    --><div class="image_bestiaire"><img src="https://i.servimg.com/u/f68/15/82/71/87/loup10.png" alt="image animal" /></div><!--

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

    --><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>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><!--
    --></div><!--

    --></div><!--

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


Si tu as la moindre question ou si tu n'arrives pas à personnaliser cette fiche, n'hésites pas à demander Smile


Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum