AccueilDernières imagesRechercherS'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 : -21%
PC portable gamer 15,6” Medion ERAZER Deputy P60 ...
Voir le deal
629.99 €

    [Xooit] Description - effet hover

    Hiro'
    Hiro'
    MasculinAge : 27Messages : 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.
    Madras
    Madras
    FémininAge : 39Messages : 285

    Ven 25 Juil 2014 - 13:20

    Merci
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Jeu 7 Aoû 2014 - 22:18

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

    Mar 30 Sep 2014 - 21:12

    merci :)
    avatar
    NamPearl
    FémininAge : 28Messages : 40

    Mer 8 Oct 2014 - 20:40

    Merci
    avatar
    Hop80
    MasculinAge : 35Messages : 138

    Jeu 16 Oct 2014 - 2:36

    utile merci
    Nevr0z
    Nevr0z
    FémininAge : 36Messages : 74

    Lun 20 Oct 2014 - 15:36

    Merci beaucoup !
    avatar
    Løve
    MasculinAge : 29Messages : 189

    Jeu 23 Oct 2014 - 9:50

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

    Mar 4 Nov 2014 - 10:58

    Merci :)
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Dim 9 Nov 2014 - 10:22

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



    Patricia :)
    0smose
    0smose
    FémininAge : 29Messages : 167

    Dim 9 Nov 2014 - 17:53

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



    [Xooit] Description - effet hover - Page 3 Bannie10

    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.
    Oror
    Oror
    FémininAge : 34Messages : 97

    Mar 2 Déc 2014 - 20:43

    Merci ! =)



    [Xooit] Description - effet hover - Page 3 351490minion
    Ptite-Ly
    Ptite-Ly
    FémininAge : 29Messages : 859

    Sam 6 Déc 2014 - 12:20

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

    Dim 7 Déc 2014 - 10:56

    Juste que ce que je cherchais
    merci beaucoup
    Callisto
    Callisto
    FémininAge : 28Messages : 45

    Jeu 11 Déc 2014 - 17:22

    Merci pour ce tutoriel !
    skyfighter
    skyfighter
    MasculinAge : 41Messages : 352

    Ven 23 Jan 2015 - 21:33

    merci




    [Xooit] Description - effet hover - Page 3 Signat10
    Mini BN
    Mini BN
    FémininAge : 29Messages : 44

    Sam 21 Fév 2015 - 7:32

    Vraiment sympa o/ *est vraiment fan des hover* xD
    Yuee
    Yuee
    FémininAge : 30Messages : 77

    Sam 30 Mai 2015 - 4:42

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

    Mar 9 Juin 2015 - 20:10

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

    Lun 13 Juil 2015 - 13:38

    Thanks :)
    Luunalight
    Luunalight
    FémininAge : 34Messages : 98

    Dim 19 Juil 2015 - 20:06

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

    Dim 13 Sep 2015 - 11:07

    Jolie
    Anonymous
    Invité

    Dim 13 Sep 2015 - 11:54

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

    Jeu 17 Sep 2015 - 21:47

    Petit regard ^^
    Kingdom.
    Kingdom.
    FémininAge : 25Messages : 54

    Sam 28 Nov 2015 - 12:04

    Micii
    avatar
    Peeves Leviosa
    MasculinAge : 23Messages : 15

    Jeu 31 Déc 2015 - 15:44

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


      La date/heure actuelle est Ven 13 Déc 2024 - 16:32