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
    Madras
    FémininAge : 33Messages : 281

    le Ven 25 Juil 2014 - 13:20

    Merci
    avatar
    EAVENN
    FémininAge : 22Messages : 162

    le Jeu 7 Aoû 2014 - 22:18

    Thank you very much for that !
    avatar
    MissMali
    FémininAge : 30Messages : 12

    le Mar 30 Sep 2014 - 21:12

    merci :)
    NamPearl
    FémininAge : 21Messages : 40

    le Mer 8 Oct 2014 - 20:40

    Merci
    Hop80
    MasculinAge : 29Messages : 138

    le Jeu 16 Oct 2014 - 2:36

    utile merci
    avatar
    Nevr0z
    FémininAge : 29Messages : 74

    le Lun 20 Oct 2014 - 15:36

    Merci beaucoup !
    Løve
    MasculinAge : 23Messages : 189

    le Jeu 23 Oct 2014 - 9:50

    Ca va être serviable o/ Merci *^*
    avatar
    Hiai
    MasculinAge : 28Messages : 31

    le Mar 4 Nov 2014 - 10:58

    Merci :)
    avatar
    patriciadpt30
    FémininAge : 55Messages : 240

    le Dim 9 Nov 2014 - 10:22

    merci il fonctionne avec toutes les différences ? PHPBB2 , PHPBB3 , etc.....?



    Patricia :)
    avatar
    0smose
    FémininAge : 22Messages : 165

    le Dim 9 Nov 2014 - 17:53

    Herueusement que tu es là, je suis un cas désespéré ! Merci !!!





    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    avatar
    Oror
    FémininAge : 28Messages : 95

    le Mar 2 Déc 2014 - 20:43

    Merci ! =)



    avatar
    Ptite-Ly
    FémininAge : 23Messages : 859

    le Sam 6 Déc 2014 - 12:20

    C'est exactement ce que je cherchais, merci beaucoup !
    avatar
    Saphire
    FémininAge : 20Messages : 146

    le Dim 7 Déc 2014 - 10:56

    Juste que ce que je cherchais
    merci beaucoup
    avatar
    Callisto
    FémininAge : 22Messages : 44

    le Jeu 11 Déc 2014 - 17:22

    Merci pour ce tutoriel !
    avatar
    skyfighter
    MasculinAge : 35Messages : 352

    le Ven 23 Jan 2015 - 21:33

    merci





    avatar
    Mini BN
    FémininAge : 23Messages : 41

    le Sam 21 Fév 2015 - 7:32

    Vraiment sympa o/ *est vraiment fan des hover* xD
    avatar
    Laluna
    FémininAge : 24Messages : 74

    le Sam 30 Mai 2015 - 4:42

    Mercii ! °u°
    Sépia
    FémininAge : 22Messages : 70

    le Mar 9 Juin 2015 - 20:10

    Merci, c'est ce que je cherchai x)
    avatar
    Dacota.
    FémininAge : 24Messages : 39

    le Lun 13 Juil 2015 - 13:38

    Thanks :)
    avatar
    Luunalight
    FémininAge : 28Messages : 97

    le Dim 19 Juil 2015 - 20:06

    Merci. je vais essayer de tout comprendre x.x
    avatar
    Kraiyz
    MasculinAge : 21Messages : 29

    le Dim 13 Sep 2015 - 11:07

    Jolie
    avatar
    Kelalin
    FémininAge : 26Messages : 1957

    le Dim 13 Sep 2015 - 11:54

    Merci ( ´ ▽ ` )ノ
    avatar
    Zealanders
    MasculinAge : 22Messages : 42

    le Jeu 17 Sep 2015 - 21:47

    Petit regard ^^
    avatar
    Kingdom.
    FémininAge : 18Messages : 54

    le Sam 28 Nov 2015 - 12:04

    Micii
    Peeves Leviosa
    MasculinAge : 17Messages : 15

    le Jeu 31 Déc 2015 - 15:44

    Pile ce que je cherche! Merci c:
    Contenu sponsorisé


      La date/heure actuelle est Mer 17 Oct 2018 - 18:54