AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


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

    Partagez
    avatar
    Morten
    FémininAge : 24Messages : 20

    le Dim 3 Mai 2015 - 19:34

    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 = )


    Quelques vus !
    La fiche - Les liens V1 - Les liens V2


    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 ~ ♥


    Dernière édition par Morten le Dim 30 Aoû 2015 - 21:02, édité 1 fois
    avatar
    Ehawee
    FémininAge : 25Messages : 4630

    le Dim 30 Aoû 2015 - 18:47

    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?


    Dernière édition par Ehawee le Dim 30 Aoû 2015 - 19:04, édité 1 fois



    Absence jusque début juillet pour cause de concours ; merci de vous adresser à d'autres membres du staff Wink


    avatar
    Kelalin
    FémininAge : 26Messages : 1948

    le Dim 30 Aoû 2015 - 19:00

    Merci \(T∇T)/
    avatar
    Morten
    FémininAge : 24Messages : 20

    le Dim 30 Aoû 2015 - 21:05

    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
    avatar
    Faramir
    FémininAge : 21Messages : 75

    le Mar 22 Nov 2016 - 23:25

    Merci :3
    avatar
    Luune
    FémininAge : 30Messages : 143

    le Dim 27 Nov 2016 - 17:19

    Merci.
    avatar
    g93
    MasculinAge : 31Messages : 67

    le Jeu 12 Jan 2017 - 13:59

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


      La date/heure actuelle est Mar 25 Sep 2018 - 12:51