Fiche de Liens et RP - Très simple, ultra personnalisable

Bonjour à tous ! Aujourd'hui, je vous propose ce petit code, que j'ai fais tout spécialement pour le LS de Never-Utopia ! J'ai fait quelque chose d'ultra simple, je vous le confirme... (mais je fait toujours simple ^^") C'est tout de même très très personnalisable (couleurs surtout). Vous allez voir, c'est très simple ! Il n'y a rien à toucher dans le html, tout se fait via le css = )



Commençons par la fiche ! = ) A part remplir les liens, les noms des rp et vos informations dans le cadre, il n'y a rien à toucher ici.

Code:

<div class="fondfifiche"><img src="http://i19.servimg.com/u/f19/18/90/50/20/200_3210.png" class="imageupleft"/><div class="blocktitreup"><div class="titrefifiche">My name is John</div><div class="soustitrefifiche">« Je suis un sous-titre »</div><div class="infosfifiche1"><div class="textesfifiche">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque erat purus, convallis non maximus quis, dictum quis libero. Praesent nec scelerisque velit, a facilisis erat. Maecenas quis magna ac risus auctor malesuada vel eu erat. Praesent congue dui risus, ut commodo ligula faucibus eget.

Ce cadre possède une scroll barre automatique. Je le dédie aux informations concernant le personnage. Voilà.</div></div><div class="cadrelienfifiche"><a href="..." class="linkfifiche">Profil</a> ► <a href="..." class="linkfifiche">Ma boite à MP</a> ► <a href="..." class="linkfifiche">Ma fiche</a></div></div><div class="titrefifiche2">Mes RPs en cours</div><div class="ongoingfifiche"><a href="..." class="linkfifiche">Titre du RP</a> → Avec....
<a href="..." class="linkfifiche">Titre du RP</a> → Avec....
<a href="..." class="linkfifiche">Titre du RP</a> → Avec....
<a href="..." class="linkfifiche">Titre du RP</a> → Avec....</div> <div class="titrefifiche2">Mes RPs terminer</div><div class="ongoingfifiche"><a href="..." class="linkfifiche">Titre du RP</a> → Avec....
<a href="..." class="linkfifiche">Titre du RP</a> → Avec....
<a href="..." class="linkfifiche">Titre du RP</a> → Avec....
<a href="..." class="linkfifiche">Titre du RP</a> → Avec....</div>
<div class="creditfifiche">Code by <a href="http://www.never-utopia.com">Morten</a></div></div>

Très bien, passons maintenant au CSS, c'est dans celui-ci que vous pourrez changer les couleurs, les borders et autre petits détails, si ça vous fait plaisir ! Attention, puisque c'est un CSS coller dans un message, il faut laisser les balises < style>.

Code:

<style>.fondfifiche {margin: auto; width: 550px; background-color: #66cc99; border-radius: 20px;} .titrefifiche {text-align: right; font-family: Georgia; font-size: 25px; color: #339966; text-shadow: 0px 1px 2px #151515; top: -2em;} .soustitrefifiche {text-align: right; text-shadow: 0px 1px 2px #151515; font-size: 15px; font-family: serif; padding-bottom: 9px;} .imageupleft {height: 320px; width: 200px; display: inline-block; padding: 18px;} .blocktitreup {display: inline-block; height: 320px; top: -10px;} .infosfifiche1 { background-color: #336666; border-radius: 17px; height: 230px; width: 285px; overflow: auto; margin: 9px;} .textesfifiche {margin: 8px; text-align: justify;} .linkfifiche {font-family: georgia; font-size: 12px; text-shadow: 0px 1px 2px #151515; color: #33cc99; padding: 9px; text-align: center;} .linkfifiche:hover {font-variant: uppercase; color: #cccccc;} .cadrelienfifiche {background-color: #336666; border-radius: 17px; height: 22px; width: 285px; margin: 9px;} .ongoingfifiche {background-color: #336666; border-radius: 17px; width: 510px; margin: auto; margin-top: 8px; margin-bottom: 8px; padding: 3px;} .titrefifiche2 {text-align: left; text-shadow: 0px 1px 2px #151515; font-size: 15px; font-family: serif; padding: 2px;} .creditfifiche {font-size: 9px; text-align: center;}</style>

Ça à l'air d'être un peu le bazar, c' est normal, puisque tout est coller. Pour faire les modifications que vous souhaitez, il suffit de bien regarder dans la partie html, se que vous voulez changer, retenir le nom de la div, et regarder les lignes concernés dans le CSS.

Ensuite, nous pouvons passer aux liens ! Comme vous avez vu, j'ai fait "deux versions". Elles ont le même CSS, il y a juste un détail qui change dans la partie html. Vous allez voir ! Ca peut vous permettre d'utiliser les deux, ou de pendre celle que vous voulez.

Code:

<div class="fondfifiche"><div class="titrelilien">Nom & Prénom</div><div class="soustitrelilien">« Il est mon...»</div><img src="http://i19.servimg.com/u/f19/18/90/50/20/centce11.png" class="imagelilien" /><div class="texlien">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque erat purus, convallis non maximus quis, dictum quis libero. Praesent nec scelerisque velit, a facilisis erat. Maecenas quis magna ac risus auctor malesuada vel eu erat. Praesent congue dui risus, ut commodo ligula faucibus eget.</div></div>
<div class="fondfifiche"><div class="titrelilien">Nom & Prénom</div><div class="soustitrelilien">« Il est mon...»</div><img src="http://i19.servimg.com/u/f19/18/90/50/20/centce11.png" class="imagelilien" /><div class="texlien">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque erat purus, convallis non maximus quis, dictum quis libero. Praesent nec scelerisque velit, a facilisis erat. Maecenas quis magna ac risus auctor malesuada vel eu erat. Praesent congue dui risus, ut commodo ligula faucibus eget.</div><div class="creditfifiche">Code by <a href="http://www.never-utopia.com">Morten</a></div></div>

Pour en ajouter un autre à la suite, il vous suffit d'ajouter le code suivant à la suite. Une fois, de fois trois fois...

Code:


<div class="fondfifiche"><div class="titrelilien">Nom & Prénom</div><div class="soustitrelilien">« Il est mon...»</div><img src="http://i19.servimg.com/u/f19/18/90/50/20/centce11.png" class="imagelilien" /><div class="texlien">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque erat purus, convallis non maximus quis, dictum quis libero. Praesent nec scelerisque velit, a facilisis erat. Maecenas quis magna ac risus auctor malesuada vel eu erat. Praesent congue dui risus, ut commodo ligula faucibus eget.</div></div>

Pour la Version deux :

Code:

<div class="fondfifiche"><div class="titrelilien">Nom & Prénom</div><div class="soustitrelilien">« Il est mon...»</div><img src="http://i19.servimg.com/u/f19/18/90/50/20/centce11.png" class="imagelilien" /><div class="texlien">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque erat purus, convallis non maximus quis, dictum quis libero. Praesent nec scelerisque velit, a facilisis erat. Maecenas quis magna ac risus auctor malesuada vel eu erat. Praesent congue dui risus, ut commodo ligula faucibus eget.</div><div class="titrelilien">Nom & Prénom</div><div class="soustitrelilien">« Il est mon...»</div><img src="http://i19.servimg.com/u/f19/18/90/50/20/centce11.png" class="imagelilien" /><div class="texlien">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque erat purus, convallis non maximus quis, dictum quis libero. Praesent nec scelerisque velit, a facilisis erat. Maecenas quis magna ac risus auctor malesuada vel eu erat. Praesent congue dui risus, ut commodo ligula faucibus eget.</div><div class="creditfifiche">Code by <a href="http://www.never-utopia.com">Morten</a></div></div>

Et pour ajouter un lien, (ou plusieurs), il faut ajouter le code suivant, avant la < /div> de crédit : "creditfifiche". Tout bêtement !

Code:


<div class="titrelilien">Nom & Prénom</div><div class="soustitrelilien">« Il est mon...»</div><img src="http://i19.servimg.com/u/f19/18/90/50/20/centce11.png" class="imagelilien" /><div class="texlien">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque erat purus, convallis non maximus quis, dictum quis libero. Praesent nec scelerisque velit, a facilisis erat. Maecenas quis magna ac risus auctor malesuada vel eu erat. Praesent congue dui risus, ut commodo ligula faucibus eget.</div>

Et voici pour finir, le CSS commun à ces deux versions ! (lui aussi à laisser entre balises < style>) Il se modifi de la même façon que l'autre css.

Code:

<style>.fondfifiche{margin: auto; width: 550px; padding-bottom: 20px; background-color: #66cc99; border-radius: 20px;} .titrelilien{text-align: left; font-family: Georgia; font-size: 18px; color: #339966; text-shadow: 0px 1px 2px #151515; padding-left: 20px;} .soustitrelilien{text-align: left; text-shadow: 0px 1px 2px #151515; font-size: 15px; font-family: serif; padding-bottom: 2px; padding-left: 16px;} .imagelilien{height: 100px; width: 100px; display: inline-block; padding-left: 5px;} .texlien{padding: 5px; text-align: justify; display: inline-block; width: 400px; height: 100px; overflow:auto; background-color: #336666; border-radius: 10px; margin-left: 10px;} .creditfifiche{font-size: 9px; text-align: center;}</style>

Voilà, j'espère que ça vous sera utile, je ne met pas de hide, parce que c'est du LS quand même n.n Pour NU, merci de ne pas retirer le crédit n.n
Enjoy ~ ♥

Hello =)

En premier lieu, navrée de cette longue attente, et merci de ta participation au LS de N-U =)

Tout fonctionne parfaitement, j'ai cependant une remarque à faire à propos de ton CSS : Certains éléments sont redondants ou sans effet; par exemple:

Code:

.linklilien{font-family: georgia; font-size: 12px; text-shadow: 0px 1px 2px #151515; color: #33cc99; padding: 9px; text-align: center;} .linklilien:hover{font-variant: uppercase; color: #cccccc;}

le "font-variant" du hover est sans effet parce que la propriété "uppercase" n'existe pas pour font-variant : c'est pour text-transform ^^"

Code:

a {blablabla ; transition: 1s;} a:hover {blabla ; transition 1s;}

Les transitions permettent de gérer la durée de la transition de l'effet, et évitent des changement trop abruptes.

Puis-je te laisser modifier ces infimes choses avant de déplacer ton LS dans la section appropriée?

Merci ＼（Ｔ∇Ｔ）／

Bonjour & bonsoir ! Pas de quoi Kelalin n.n

Merci Ehawee de t'être penchée sur mon code n.n
Pour la partie concernée, ".linklilien" elle était carrément inutile !! Je l'ai donc retirée. J'avais dû vouloir faire un truc avec, mais je ne l'ai pas fait, car ça ne correspondais à rien dans le html. (Mais j'ai oublier depuis le temps désoler ><) En tout cas, merci pour ces indications : ) (j'utilise peu ces variantes en faite x.x)

Du coup, je crois que c'est bon ! Merci beaucoup /o

Merci :3

Merci.

Merci, je l'ai utilisé pour ma fiche de rp et liens

Merci beaucoup pour le code.