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 à ne pas rater :
Xiaomi Mi Days sur eBay : 15% de réduction
Voir le deal

    [Xooit] Description - effet hover

    Hiro'
    Hiro'
    MasculinAge : 24Messages : 127

    Dim 8 Déc 2013 - 14:54

    Rappel du premier message :

    Sous ce nom très énigmatique se cache quelque chose de très simple que vous allez pouvoir apprécier sur mon forum de test Xooit. Cliquez ici, jeunes padawans.

    Vous avez compris le principe ? Cool. Maintenant, place aux codes. N'oubliez pas de créditer Never-Utopia si vous utilisez mon travail Wink


    Tout d'abord, il va falloir modifier un template, celle qui répond au doux nom de index_body. Dans ce template, vous allez chercher la  charmante balise

    Code:
    <style>
    et coller, juste en-dessous, le code suivant.

    Code:
    .description
    {
      display: block;
      width: 400px; /*Largeur de votre image*/
      margin: auto;
      height: 180px; /*Hauteur de votre image*/
      overflow: hidden;
    }
    .description_contenu
    {
      position: absolute;
      width: 400px; /*Largeur*/
      height: 180px;  /*Hauteur*/
      overflow: auto;
      background-color: #FFFFFF; /*Couleur de l'arrière-plan de la description*/
      font-size: 14px;
      font-family:'Georgia';
      color: #3E352E;
      text-align:center;
      padding:0px;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .description_contenu:hover
    {
      opacity: 0.8;
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      filter: alpha(opacity=80);
      transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    Vous l'avez remarqué, il s'agît du code CSS. Et dit qui dit Code CSS dit ennuis garantis balisage HTML :toto: !

    Il est assez simple malgré quelques subtilités. Vous vous rendrez bientôt compte que, sur Xooit, le plus compliqué, ce ne sont pas les codes, c'est de savoir où les mettre. Je vous souhaite donc beaucoup de courage pour trouver le menu "Sous Forums" si vous démarrez sur cette plateforme.
    La suite coule de source. Il faut modifier la description du sous-forum et y insérer ceci :

    Code:
    <div class="description"><div style="display: block; text-align: justify; width: 400px; height: 180px; background: url(http://i.imgur.com/minQVys.png) center center no-repeat;"><div class="description_contenu"><div style="OVERFLOW: auto; width: 380px; height: 160px; padding: 10px;">Insérez la description de votre catégorie ici, les coupaings !</div></div></div></div>
    Remplacez le lien par votre image, bien évidemment. J'attire votre attention sur les dimensions, et surtout sur cette petite chose qui, si vous ne la remarquez, pourrait vous faire vomir de toutes les couleurs.

    Code:
    padding: 10px;
    Ceci signifie que en haut, à droite, en bas et à gauche de votre cadre, il y aura une marge intérieure ! SO, dans les dimensions juste avant...
    Code:
    width: 380px; height: 160px;
    On enlève 20px à la hauteur, et 20px à la largeur. Faîtes bien attention à ça si vous changez les dimensions Wink.
    Enregistrez le tout et allez admirer votre boulow !

    Voilou, j'espère avoir été clair.
    Merci de ne pas copier ce tutoriel qui est mien, et n'oubliez pas le crédit à N-U en cas d'utilisation.

    Un petit merci ou commentaire est toujours le bienvenu ^^
    Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.



    Pas souvent là, mais je vous aime quand même très fort ! Étudiant en prépa littéraire, quand j'en ai marre de pas comprendre ce que je lis, je code pour ne plus comprendre non plus ce que j'écris.
    Emma-Iseult
    Emma-Iseult
    FémininAge : 24Messages : 44

    Sam 29 Mar 2014 - 15:57

    merci !
    Fallaha
    Fallaha
    FémininMessages : 80

    Lun 31 Mar 2014 - 21:18

    Merci beaucoup, c'est justement ce que je cherchais Very Happy
    avatar
    Licmac.
    FémininAge : 28Messages : 18

    Mer 2 Avr 2014 - 20:56

    Merci :3
    shala
    shala
    FémininAge : 29Messages : 213

    Ven 4 Avr 2014 - 1:55

    merci



    Kiowa
    Kiowa
    FémininAge : 32Messages : 220

    Mar 8 Avr 2014 - 3:16

    merci
    Kababs
    Kababs
    FémininAge : 41Messages : 34

    Ven 11 Avr 2014 - 16:50

    Vraiment bel effet, j'adore! Merci beaucoup!
    Linky
    Linky
    FémininAge : 31Messages : 30

    Dim 13 Avr 2014 - 15:15

    Merci coupaing! ^w^
    Sakira
    Sakira
    FémininAge : 28Messages : 89

    Mer 23 Avr 2014 - 18:58

    Merci o/



    Bientôt peut être o/
    Dépendra de ma motiv'
    Bleufi
    Bleufi
    FémininAge : 26Messages : 311

    Sam 3 Mai 2014 - 18:10

    merci



    [Xooit] Description - effet hover - Page 2 875686Asuna
    Scorpio No Sonia
    Scorpio No Sonia
    MasculinAge : 31Messages : 6

    Dim 4 Mai 2014 - 13:56

    merci 8D
    avatar
    Ge.
    FémininAge : 31Messages : 21

    Sam 24 Mai 2014 - 22:05

    merciii
    Araik
    Araik
    FémininAge : 25Messages : 250

    Ven 30 Mai 2014 - 13:45

    Merci beaucoup



    [Xooit] Description - effet hover - Page 2 Signat15
    Sumaki
    Sumaki
    FémininAge : 23Messages : 31

    Sam 31 Mai 2014 - 17:58

    Merci pour le partage.  Very Happy 
    Tsuki27
    Tsuki27
    FémininAge : 29Messages : 32

    Jeu 5 Juin 2014 - 15:40

    Merki ♥



    [Xooit] Description - effet hover - Page 2 Signat13

    - Joueuse RP sur MMORPG -
    avatar
    Horus
    FémininAge : 24Messages : 56

    Dim 8 Juin 2014 - 22:46

    arigato
    Dragma
    Dragma
    MasculinAge : 26Messages : 65

    Mar 10 Juin 2014 - 16:25

    Merci !!!

    Féhéla
    Féhéla
    FémininAge : 47Messages : 238

    Mer 11 Juin 2014 - 1:36

    merci
    benficagirl
    benficagirl
    FémininAge : 35Messages : 442

    Mar 17 Juin 2014 - 21:16

    C'est un code comme je le cherche =D.
    Mathou2
    Mathou2
    FémininAge : 30Messages : 15

    Dim 22 Juin 2014 - 11:03

    Pratique comme code ! Merci Very Happy
    Le Dévoreur de temps
    Le Dévoreur de temps
    MasculinAge : 41Messages : 92

    Jeu 17 Juil 2014 - 2:53

    Merci beaucoup !
    mikalus
    mikalus
    MasculinAge : 50Messages : 92

    Ven 18 Juil 2014 - 10:18

    Je crois que j'ai trouvé mon bonheur



    [Xooit] Description - effet hover - Page 2 766500banpub
    pika-cerise
    pika-cerise
    FémininAge : 29Messages : 92

    Ven 18 Juil 2014 - 12:43

    merci
    avatar
    TATACARO13
    FémininAge : 46Messages : 80

    Mer 23 Juil 2014 - 0:53

    MERCI



    [Xooit] Description - effet hover - Page 2 967953logodusite

    [Xooit] Description - effet hover - Page 2 381658signatureBAU
    Kora
    Kora
    FémininAge : 19Messages : 45

    Mer 23 Juil 2014 - 1:21

    merci
    Kau
    Kau
    FémininAge : 19Messages : 148

    Ven 25 Juil 2014 - 13:14

    Mici
    Contenu sponsorisé


      La date/heure actuelle est Jeu 5 Aoû 2021 - 19:02