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.


    [Xooit] Description - effet hover

    Partagez
    avatar
    Hiro'
    MasculinAge : 21Messages : 127

    le 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.
    avatar
    Emma-Iseult
    FémininAge : 22Messages : 44

    le Sam 29 Mar 2014 - 15:57

    merci !
    avatar
    Fallaha
    FémininMessages : 80

    le Lun 31 Mar 2014 - 21:18

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

    le Mer 2 Avr 2014 - 20:56

    Merci :3
    avatar
    shala
    FémininAge : 26Messages : 213

    le Ven 4 Avr 2014 - 1:55

    merci



    avatar
    Kiowa
    FémininAge : 29Messages : 220

    le Mar 8 Avr 2014 - 3:16

    merci
    avatar
    Kababs
    FémininAge : 38Messages : 33

    le Ven 11 Avr 2014 - 16:50

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

    le Dim 13 Avr 2014 - 15:15

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

    le Mer 23 Avr 2014 - 18:58

    Merci o/



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

    le Sam 3 Mai 2014 - 18:10

    merci



    avatar
    Scorpio No Sonia
    MasculinAge : 29Messages : 6

    le Dim 4 Mai 2014 - 13:56

    merci 8D
    Ge.
    FémininAge : 28Messages : 21

    le Sam 24 Mai 2014 - 22:05

    merciii
    avatar
    Araik
    FémininAge : 23Messages : 250

    le Ven 30 Mai 2014 - 13:45

    Merci beaucoup



    avatar
    Sumaki
    FémininAge : 20Messages : 31

    le Sam 31 Mai 2014 - 17:58

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

    le Jeu 5 Juin 2014 - 15:40

    Merki ♥




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

    le Dim 8 Juin 2014 - 22:46

    arigato
    avatar
    Dragma
    MasculinAge : 23Messages : 65

    le Mar 10 Juin 2014 - 16:25

    Merci !!!

    avatar
    Féhéla
    FémininAge : 45Messages : 238

    le Mer 11 Juin 2014 - 1:36

    merci
    avatar
    benficagirl
    FémininAge : 32Messages : 388

    le Mar 17 Juin 2014 - 21:16

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

    le Dim 22 Juin 2014 - 11:03

    Pratique comme code ! Merci Very Happy
    avatar
    Le Dévoreur de temps
    MasculinAge : 39Messages : 69

    le Jeu 17 Juil 2014 - 2:53

    Merci beaucoup !
    avatar
    mikalus
    MasculinAge : 47Messages : 92

    le Ven 18 Juil 2014 - 10:18

    Je crois que j'ai trouvé mon bonheur



    avatar
    pika-cerise
    FémininAge : 27Messages : 92

    le Ven 18 Juil 2014 - 12:43

    merci
    TATACARO13
    FémininAge : 43Messages : 80

    le Mer 23 Juil 2014 - 0:53

    MERCI





    avatar
    Kora
    FémininAge : 17Messages : 45

    le Mer 23 Juil 2014 - 1:21

    merci
    avatar
    Kau
    FémininAge : 16Messages : 148

    le Ven 25 Juil 2014 - 13:14

    Mici
    Contenu sponsorisé


      La date/heure actuelle est Dim 16 Déc 2018 - 19:26