MävenRâleuse (Admin)- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4099 
Fiche bestaire à 2 colonnes
Sam 20 Avr 2019 - 13:08
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
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).
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 :
Ne pas retirer les commentaires - Code:
<!-- -->
- 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.
Ne pas retirer les commentaires - Code:
<!-- -->
- 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
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum