AccueilRechercherS'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.

Le Deal du moment : -41%
-41% sur l’excellent casque nomade filaire Sony ...
Voir le deal
129 €

    Description Catégorie Sympa

    Angel Ezekiel
    Angel Ezekiel
    MasculinAge : 28Messages : 1377

    Mer 21 Avr 2010 - 23:25

    Aperçu (avec quelques modifications apporté au code) :

    Description Catégorie Sympa 31037_image

    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;">Texte 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érarchies.

    Si vous avez des problèmes avec ce LS, venez poster ici.



    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    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... ?



    sign
    Angel Ezekiel
    Angel Ezekiel
    MasculinAge : 28Messages : 1377

    Jeu 22 Avr 2010 - 0:27

    Voila un exemple en image:
    Description Catégorie Sympa 31037_image
    Attention pour le titre de la catégorie c'est un autre code.[Voir petit code CSS sympa]



    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    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.



    sign
    Pti' Biscuit
    Pti' Biscuit
    MasculinAge : 26Messages : 1691

    Ven 21 Mai 2010 - 18:07

    il ce met ou ? dans la feuille css ?



    Description Catégorie Sympa 2k0uoy

    ~ Canonnier of Calypso ~
    Apophis
    Apophis
    FémininAge : 26Messages : 5556

    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. "
    Lunarfang Einzbern
    Lunarfang Einzbern
    MasculinAge : 28Messages : 30

    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.


    Anonymous
    Invité

    Mar 10 Jan 2012 - 20:24

    Merci pour le tutoriel !
    Irissia87
    Irissia87
    FémininAge : 33Messages : 124

    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 ^^
    harmony Lightnight
    harmony Lightnight
    FémininAge : 25Messages : 30

    Sam 31 Mar 2012 - 22:07

    Merci beaucoup =)
    avatar
    Yin
    FémininAge : 23Messages : 43

    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

    Description Catégorie Sympa Testeh10
    shala
    shala
    FémininAge : 29Messages : 213

    Dim 24 Juin 2012 - 20:00

    merci



    Valeriane
    Valeriane
    FémininAge : 36Messages : 29

    Mer 27 Juin 2012 - 4:34

    merci
    Erikoinen
    Erikoinen
    FémininAge : 25Messages : 17

    Lun 30 Juil 2012 - 20:16

    Petit +1 vers le vert ! ham3
    Très utile, c'est ce que je recherchais, merci !
    Ohani
    Ohani
    FémininAge : 34Messages : 43

    Lun 10 Sep 2012 - 2:48

    Merci ^^



    Description Catégorie Sympa Signizt
    karma71620
    karma71620
    MasculinAge : 29Messages : 19

    Mer 26 Sep 2012 - 20:18

    merci :)
    LeFimoteur
    LeFimoteur
    MasculinAge : 22Messages : 18

    Ven 23 Nov 2012 - 20:50

    Merci (= !
    shibari
    shibari
    MasculinAge : 25Messages : 281

    Sam 8 Déc 2012 - 7:42

    MERCI



    Description Catégorie Sympa 140117011601839279

    Merci Dakota pour ce kit.
    Joxtop
    Joxtop
    FémininAge : 29Messages : 47

    Dim 3 Fév 2013 - 21:42

    Merci :)
    EffloreSense'
    EffloreSense'
    MasculinAge : 26Messages : 3

    Sam 30 Mar 2013 - 10:39

    Merci
    Olympus
    Olympus
    FémininAge : 29Messages : 16

    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...
    Olympus
    Olympus
    FémininAge : 29Messages : 16

    Sam 30 Mar 2013 - 14:40

    oups, non c'est bon, je suis désolée ^^!
    .babydoll
    .babydoll
    FémininAge : 23Messages : 4

    Jeu 30 Mai 2013 - 2:50

    Merci
    ninouee
    ninouee
    FémininAge : 40Messages : 143

    Jeu 20 Juin 2013 - 20:34

    merci!



    Description Catégorie Sympa Robert12
    Esperanga
    Esperanga
    FémininAge : 32Messages : 105

    Mar 17 Sep 2013 - 11:38

    Merci du partage Very Happy 



    Description Catégorie Sympa Signa_10
    Contenu sponsorisé


      La date/heure actuelle est Sam 24 Juil 2021 - 14:14