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 : -14%
Manette PS5 blanche et noire à moins de ...
Voir le deal
59.99 €

    [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.
    reshiram44
    reshiram44
    MasculinAge : 22Messages : 380

    Dim 11 Juin 2017 - 14:01

    merci



    Narachi
    Narachi
    MasculinAge : 27Messages : 77

    Sam 17 Juin 2017 - 9:59

    merci



    [Xooit] Description - effet hover - Page 5 Natsu_11
    Isilian
    Isilian
    FémininAge : 39Messages : 8

    Mer 2 Aoû 2017 - 0:02

    Merci :)
    Loo
    Loo
    FémininAge : 26Messages : 22

    Lun 28 Aoû 2017 - 2:04

    Merci beaucoup pour le partage ! Very Happy
    Camomille
    Camomille
    FémininAge : 17Messages : 62

    Dim 26 Nov 2017 - 1:11

    Merci :3
    Cez
    Cez
    FémininAge : 25Messages : 17

    Mer 27 Déc 2017 - 2:51

    merci!
    Kovu
    Kovu
    FémininAge : 20Messages : 256

    Sam 3 Fév 2018 - 12:15

    mercii !
    Lone wanderer
    Lone wanderer
    MasculinAge : 29Messages : 176

    Mar 6 Fév 2018 - 22:34

    merci ! =)
    Doriand
    Doriand
    MasculinAge : 30Messages : 91

    Lun 19 Fév 2018 - 17:01

    merci
    Mirage1995
    Mirage1995
    FémininAge : 26Messages : 16

    Dim 11 Mar 2018 - 0:03

    Merci :)
    Yuee
    Yuee
    FémininAge : 27Messages : 77

    Mar 3 Avr 2018 - 4:45

    Mercii !
    Contenu sponsorisé


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