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

    Partagez
    avatar
    Zuiichi
    MasculinAge : 25Messages : 119

    le Dim 3 Jan 2016 - 15:02



    Bonjour, bonsoir Wink

    Alors voilà un code que j'ai fais il n'y as pas si longtemps !
    Donc voilà, image et couleurs changeable a volonté Wink

    Aperçu
    Spoiler:
    En tête


    Lien



    Code d'en tête (avec le nom, prénom et les deux images)
    Code:
    <link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css' /><div style="width: 400px; font-family: 'Sacramento', cursive; font-size: 50px; text-transform: lowercase; line-height: 100%; text-align: center; margin: auto; margin-top: -20px; margin-bottom: -10px; color: #fff; text-shadow: -1px 0 #96be36, 0 1px #96be36, 1px 0 #96be36, 0 -1px #96be36;">NOM & PRENOM</div><div style="margin: auto; width: 400px; height: 5px; background-color: #96be36"></div><div style="margin: auto; height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><table cellpadding="0" cellspacing="0" style="margin: auto; width: 400px;"><tr><td><div style="width: 249px; height: 250px; background-image: url(IMAGE 249*250)" /></div></td><td><div style="width: 1px"></div></td><td><div style="width: 150px; height: 250px; background-image: url(IMAGE 150*250)" /></div></td></tr></table><div style="margin: auto; height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="margin: auto; width: 400px; height: 5px; background-color: #96be36"></div><div style="margin: auto; height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="margin: auto; width: 400px; height: 60px; text-align: center; background-image: url(http://www.shizoo-design.de/stuff/patterns/335.jpg)" />
    <a href="http://www.never-utopia.com/" style="font-size: 10px;">Zuiichi (c) Never Utopia</a></div>

    Code de fiche de lien
    Code:
    <link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css' />
    <div style="text-align: center;"><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style=" height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
    <img src="GIF OU IMAGE 500*200" style="border: 1px solid #96be36" />
    <div style="margin: auto; width: 400px; font-family: 'Sacramento', cursive; font-size: 50px; text-transform: lowercase; line-height: 100%; text-align: center; margin-top: -20px; margin-bottom: -10px; color: #fff; text-shadow: -1px 0 #96be36, 0 1px #96be36, 1px 0 #96be36, 0 -1px #96be36; text-align: center;">TITRE</div><div style="margin: auto; width: 400px; height: 5px; background-color: #96be36"></div>


    <div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px; text-align: left;"><span style="font-family: 'times new roman'; color: black;">NOM PRENOM</span>
    <div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
    citation ou titre de lien
    Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
    </div></td></tr></table></div>

    <div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px; text-align: left;"><span style="font-family: 'times new roman'; color: black;">NOM PRENOM</span>
    <div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
    citation ou titre de lien
    Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
    </div></td></tr></table></div>

    <div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
    </div>

    Code du cadre du lien
    Code:
    <div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px; text-align: left;"><span style="font-family: 'times new roman'; color: black;">NOM PRENOM</span>
    <div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
    citation ou titre de lien
    Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
    </div></td></tr></table></div>

    Prenez le temps de regarder le contenu du codage, des fois, ce n'est pas très évident de voir ou il faut placer les textes et les images.

    Le fond du codage est transparent (sur le screen le fond du forum est noir)
    Pour changer la couleur "verte" chercher le code couleur "#96be36"
    Pour rajouter des cadres de liens, rajoutez le code avant ce code là
    Code:
    <div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
    </div>


    Dernière édition par Zuiichi le Dim 3 Avr 2016 - 21:00, édité 1 fois



    avatar
    Kelalin
    FémininAge : 26Messages : 1948

    le Dim 3 Jan 2016 - 15:13

    Merci pour le partage ! (*^ω^)
    avatar
    NyoTheNeko
    FémininAge : 24Messages : 5018

    le Mar 1 Mar 2016 - 19:55

    Hello! ^^
    Il y a quelques soucis avec ton code: pourrais-tu le modifier? ^^

    Le premier est que tu mélanges le bbcode et le HTML: il faudrait donc remplacer toutes tes balises bbcode par des balises HTML.
    Tu utilises également la balise center qui est une balise dépréciée. Pourrais-tu le remplacer par une largeur donnée à ton bloc et un margin: auto?

    Il manque aussi les tr dans tes tables pour qu'elles soient correct. Ne pas les mettre peut causer des soucis.

    Ton code de lien a aussi quelques balises ouvertes et fermées de trop. N'oublie aps non plus de mettre le / de fin aux image pour signifier que ce sont des balises uniques.

    si tu as besoin d'aide n'hésite pas!



    avatar
    Zuiichi
    MasculinAge : 25Messages : 119

    le Mer 9 Mar 2016 - 11:59

    Voilà, j'espère que c'est bon ^^"

    Cadre d'en tête
    Code:
    <link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css'><div style="width: 400px; font-family: 'Sacramento', cursive; font-size: 50px; text-transform: lowercase; line-height: 100%; text-align: center; margin-top: -20px; margin-bottom: -10px; color: #fff; text-shadow: -1px 0 #96be36, 0 1px #96be36, 1px 0 #96be36, 0 -1px #96be36;">NOM & PRENOM</div><div style="width: 400px; height: 5px; background-color: #96be36"></div><div style="height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><table cellpadding="0" cellspacing="0"><td><div style="width: 249px; height: 250px; background-image: url(IMAGE 249*250)" /></div></td><td><div style="width: 1px"></div></td><td><div style="width: 150px; height: 250px; background-image: url(IMAGE 150*250)" /></div></td></table><div style="height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="width: 400px; height: 5px; background-color: #96be36"></div><div style="height: 1px; width: 400px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style="width: 400px; height: 60px; background-image: url(http://www.shizoo-design.de/stuff/patterns/335.jpg)" />
    [url=http://www.never-utopia.com/][size=10]Zuiichi (c) Never Utopia[/size][/url]</div>

    Code fiche de lien
    Code:
    <link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'>
    <div align=center><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style=" height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
    <img src="GIF OU IMAGE 500*200" style=" border: 1px solid #96be36" />
    <link href='http://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css'><center><div style="width: 400px; font-family: 'Sacramento', cursive; font-size: 50px; text-transform: lowercase; line-height: 100%; text-align: center; margin-top: -20px; margin-bottom: -10px; color: #fff; text-shadow: -1px 0 #96be36, 0 1px #96be36, 1px 0 #96be36, 0 -1px #96be36;">TITRE</div><div style="width: 400px; height: 5px; background-color: #96be36"></div>


    <div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px;"><span style="font-family: times new roman; color: black;">NOM PRENOM</span>
    <div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
    citation ou titre de lien
    Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
    </div></td></tr></table></div>

    <div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px;"><span style="font-family: times new roman; color: black;">NOM PRENOM</span>
    <div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
    citation ou titre de lien
    Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
    </div></td></tr></table></div>

    </div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style=" height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
    </div></div>

    Cadre du lien
    Code:
    <div style="margin:auto;border-left: 5px solid #96be36; border-right: 5px solid #96be36; background-color: white; width: 440px;"><table width="100%"><tr><td align="middle" width="120px" style="padding: 3px;"><img src="IMAGE 100*100" /></td><td valign="top"style="border-left: 1px dotted #96be36; padding: 3px;"><span style="font-family: times new roman; color: black;">NOM PRENOM</span>
    <div style="overflow: auto; height: 100px; padding-right: 5px; padding-left: 3px; color:grey; size: 11px;">
    citation ou titre de lien
    Description du lien, description du lien, description du lien description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien, description du lien.
    </div></td></tr></table></div>

    Explication :
    Prenez le temps de regarder le contenu du codage, des fois, ce n'est pas très évident de voir ou il faut placer les textes et les images.

    Le fond du codage est transparent (sur le screen le fond du forum est noir)
    Pour changer la couleur "verte" chercher le code couleur "#96be36"
    Pour rajouter des cadres de liens, rajoutez le code avant ce code là
    Code:
    </div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div><div style=" height: 5px; background-color: #96be36"></div><div style="height: 1px; border-bottom: 1px dotted #96be36;"></div><div style="height: 1px"></div>
    </div></div>

    Ps: Il a juste le premier code que je n'arrive pas a centrer u_u'



    avatar
    Onyx
    FémininAge : 24Messages : 3133

    le Ven 14 Oct 2016 - 2:43

    Salut!

    J'ai centré le premier code et corrigé quelques balises mal-fermées, tout devrais être bon.

    Merci du partage, je valide !



    Contenu sponsorisé


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