Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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.


    Description Catégorie Sympa

    Partagez
    MasculinAge : 24Message(s) : 1349
    Angel Ezekiel
    le Mer 21 Avr 2010 - 23:25
    Aperçu (avec quelques modifications apporté au code):



    Voila un tout petit code afin de vous permettre l'affichage des descriptions des catégories d'une façon originale:
    Code:
    <table><tr><td><span style="color: #couleur; font-size: 1;">Test descriptif</span></td><td width="25%"><div style="margin:auto;text-align:center;width:100%"><a href="liens sous forums" class="postlink">nom du sous forum</a></div><div style="margin:auto;text-align:center;width:100%"><a href="Liens sous forum 2" class="postlink">nom sous forum 2</a></div></td></tr></table>

    Pour ajouter un lien ,il vous suffit de coller :
    Code:
    <div style="margin:auto;text-align:center;width:100%;"><a href="Liens sous forum 2" class="postlink">nom sous forum 2</a></div>
    entre le dernier lien se finissant par la balise
    Code:
    </div>
    et la fin de la balise colonne
    Code:
    </td>

    Il vous faudra aussi retirer l'affichage des sous catégories dans structures & hiéarchies.


    MasculinAge : 31Message(s) : 31657

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Jeu 22 Avr 2010 - 0:16
    C'est certainement un tuto intéressant... mais je ne met un peu à la place d'une personne qui ne lit pas les codes très facilement et j'y vois pas grand chose^^" Un screen pour montrer le résultat aurait été nécessaire je pense, si tu peux en ajouter un... ?


    MasculinAge : 24Message(s) : 1349
    Angel Ezekiel
    le Jeu 22 Avr 2010 - 0:27
    Voila un exemple en image:

    Attention pour le titre de la catégorie c'est un autre code.[Voir petit code CSS sympa]


    MasculinAge : 31Message(s) : 31657

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Jeu 22 Avr 2010 - 0:33
    C'est plus clair, merci. Je me suis permis d'ajouter l'image au début de ton message.


    MasculinAge : 21Message(s) : 1686

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pti' Biscuit
    le Ven 21 Mai 2010 - 18:07
    il ce met ou ? dans la feuille css ?




    ~ Canonnier of Calypso ~
    FémininAge : 21Message(s) : 5556
    Apophis
    le Ven 21 Mai 2010 - 19:10
    Non, il se met dans la description de la catégorie où tu veux appliquer cet effet. ^^

    Merci pour l'astuce Albator, je trouve le rendu très pratique !


    The Dark Knight Rises reprenant A Tale of two Cities : épique.

    "I see the lives for which I lay down my life, peaceful, useful, prosperous and happy.
    I see that I hold a sanctuary in their hearts, and in the hearts of their descendants, generations hence.
    It is a far, far better thing that I do, than I have ever done ; it is a far, far better rest that I go to than I have ever known. "
    MasculinAge : 24Message(s) : 30
    Lunarfang Einzbern
    le Jeu 7 Juil 2011 - 18:44
    Hum je me permets juste de rajouter quelques petits trucs, même si ça peut paraître évident pour tout le monde. Certains n'y penseront justement pas :

    Ca change pas le principe du code, juste sa... propreté.



    Voilà le rendu que j'ai obtenu sur mon propre forum.

    Là, le code de base :

    Code:

    <table>
    <tr>
    <td>
    <font color=couleur de la typo><font size=1>Test descriptif</font ></font>
    </td>
    <td width="25%">
    <div style="margin:auto;text-align:center;width:100%"><a href="liens sous forums" class="postlink">nom du sous forum</a></div><div style="margin:auto;text-align:center;width:100%"><a href="Liens sous forum 2" class="postlink">nom sous forum 2</a></div>
    </td>
    </tr>
    </table>

    Déjà, pour rendre ça plus propre, vous pouvez combiner les balises FONT. Pas forcément utile, mais vous prendrez moins de place, et c'est plus propre.

    Ca donne ça :
    Code:

    <font color="#votre_couleur" size="1">Votre texte descriptif</font>
    Au lieu de :
    Code:

    <font color="#votre_couleur"><font size="1">Votre texte descriptif</font></font>
    Ensuite :

    Vous pouvez attribuer des class à vos liens, c'est ainsi que j'ai pu obtenir le rendu affiché ci-dessus.

    Dans cette balise :
    Code:

    <div style="margin:auto;text-align:center;width:100%">

    Vous pouvez mettre :
    Code:

    <div style="margin:auto;text-align:center;width:100%" class="description_forum">

    Vous pourrez ainsi personnaliser vos liens comme vous le souhaitez. De plus, la classe étant attribuée dans un div, la taille des bordures, fonds, etc, ne changera pas en fonction du texte du lien, contrairement à un span (du moins est-ce le rendu que j'avais avec des bordures et fonds de toutes les tailles, un truc bien laid comme il faut).

    Et pour finir, vous pouvez toujours rajouter une colonne après la description (ou avant, ça depend comment vous avez mis ça), si vous avez une masse de lien et que vous voulez rendre ça esthétique.

    Comme ceci :

    Code:

    <table>
    <tr>
    <td width="25%">
    <div style="margin:auto;text-align:center;width:100%" class="description_forum"><a href="premier_lien" class="postlink">premier lien</a>
    </div>
    <div style="margin:auto;text-align:center;width="100%" class="quatrième lien"><a href="http://derniere-prophetie.forumgratuit.org/f13-espace-dessin">Dessin</a>
    </div>
    </td>
    <td>
    <div align="justify" style="margin:20px;">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE
    </div>
    </td>
    <td width="25%">
    <div style="margin:auto;text-align:center;width="100%" class="description_forum"><a href="troisième lien">Troisième lien</a>
    </div>
    <div style="margin:auto;text-align:center;width="100%" class="description_forum><a href="quatrième_lien">Quatrième lien</a>
    </div>
    </td>
    </tr>
    </table>

    Bon, pour les classes, je pense pas avoir besoin de vous dire que ça se passe via la feuille de Style CSS de votre forum, et que vous pouvez faire ce que vous voulez de la classe .description_forum (ah mais du coup, je l'ai dit là).

    Bref, j'espère que ça en aidera certains et que ça en inspirera d'autres, et que ça sera pas trop inutile non plus. ^^

    L.E.


    Invité
    le Mar 10 Jan 2012 - 20:24
    Merci pour le tutoriel !
    FémininAge : 29Message(s) : 124
    Irissia87
    le Mar 10 Jan 2012 - 21:21
    Coucou, je comprend le principe,
    mais est ce qu'il serait possible davoir un code html et un CSS, pour bien voir ce qu'il faut mettre dans l'un ou l'autre, les balises correspondent etc merci ^^
    FémininAge : 20Message(s) : 30
    harmony Lightnight
    le Sam 31 Mar 2012 - 22:07
    Merci beaucoup =)
    FémininAge : 19Message(s) : 43
    Yin
    le Dim 15 Avr 2012 - 15:36
    Bonjour!

    J'ai tester le code sur mon forum teste pour voir comment sa rendais, sauf que j'ai un petit problème regarder

    FémininAge : 24Message(s) : 213
    shala
    le Dim 24 Juin 2012 - 20:00
    merci


    FémininAge : 31Message(s) : 20
    Valeriane
    le Mer 27 Juin 2012 - 4:34
    merci
    FémininAge : 20Message(s) : 17
    Erikoinen
    le Lun 30 Juil 2012 - 20:16
    Petit +1 vers le vert ! ham3
    Très utile, c'est ce que je recherchais, merci !
    FémininAge : 29Message(s) : 37
    Ohani
    le Lun 10 Sep 2012 - 2:48
    Merci ^^


    MasculinAge : 24Message(s) : 19
    karma71620
    le Mer 26 Sep 2012 - 20:18
    merci :)
    MasculinAge : 17Message(s) : 18
    LeFimoteur
    le Ven 23 Nov 2012 - 20:50
    Merci (= !
    MasculinAge : 21Message(s) : 253

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    shibari
    le Sam 8 Déc 2012 - 7:42
    MERCI




    Merci Dakota pour ce kit.
    FémininAge : 24Message(s) : 47
    Joxtop
    le Dim 3 Fév 2013 - 21:42
    Merci :)
    MasculinAge : 21Message(s) : 3
    EffloreSense'
    le Sam 30 Mar 2013 - 10:39
    Merci
    FémininAge : 24Message(s) : 16
    Olympus
    le Sam 30 Mar 2013 - 14:36
    Je viens de l'installer sur mon forum, mais j'ai toujours les anciens liens vers les sous forums qui sont affichés en dessous de ma description et je ne sais pas vraiment comment les enlever...
    FémininAge : 24Message(s) : 16
    Olympus
    le Sam 30 Mar 2013 - 14:40
    oups, non c'est bon, je suis désolée ^^!
    FémininAge : 18Message(s) : 4
    .babydoll
    le Jeu 30 Mai 2013 - 2:50
    Merci
    FémininAge : 35Message(s) : 113
    ninouee
    le Jeu 20 Juin 2013 - 20:34
    merci!


    FémininAge : 27Message(s) : 88
    Esperanga
    le Mar 17 Sep 2013 - 11:38
    Merci du partage Very Happy 


    Contenu sponsorisé
    Aujourd'hui à 6:54

      La date/heure actuelle est Sam 1 Oct 2016 - 6:54