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.


    [HTML & CSS] Infobulles pour la PA

    Partagez
    avatar
    Onyx
    FémininAge : 23Messages : 2773

    le Sam 11 Jan - 21:06

    Rappel du premier message :

    Bouh!

    J'imagine que certains sont familiers avec ce tuto qui vous montre comment faire une infobulle, non? Seulement, certains ne l'utilisent pas de la bonne façon.
    On ne devrait jamais mettre un "div" à l'intérieur d'un span, ce que beaucoup ont fait sur leur PA et l'ont regretté depuis la nouvelle installation de l'éditeur pour PA de ForumActif.

    Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


    Du coup, ce tuto a pour but de vous montrer comment faire une infobulle dans laquelle vous pouvez mettre un "div" pour que cela fonctionne avec le nouvel éditeur de PA, comme ici.

    La première chose à faire est de mettre l'élément(une image dans ce cas-ci) qui fait apparaître l'infobulle quand on y passe la souris dans votre PA
    Code:
    <img src="http://img15.hostingpics.net/pics/960301arthurconnor.png" alt="">

    Ensuite, on doit mettre ce que l'on veut qui apparaisse quand on passe sur l'image:
    Code:
    <img src="http://img15.hostingpics.net/pics/960301arthurconnor.png" alt=""><div style="font-weight: bold;">Assassin' Creed</div>Un jeu époustouflant que j'adore beaucoup!

    Il nous faut maintenant encadrer ce qui apparaît en passant sur l'image d'un div avec une class:
    Code:
    <img src="http://img15.hostingpics.net/pics/960301arthurconnor.png" alt=""><div class="Infobulle_contenu"><div style="font-weight: bold;">Assassin' Creed</div>Un jeu époustouflant que j'adore beaucoup!</div>

    Et vient ensuite la division qui encadrera le tout pour que l'infobulle fonctionne correctement avec le css que nous verrons plus tard ^^
    Code:
    <div class="Infobulle"><img src="http://img15.hostingpics.net/pics/960301arthurconnor.png" alt=""><div class="Infobulle_contenu"><div style="font-weight: bold;">Assassin' Creed</div>Un jeu époustouflant que j'aime beaucoup!</div></div>

    Voilà pour ce qu'il y a à mettre dans la page d'accueil!
    Maintenant, passons au CSS:
    Code:
    /*Ce qui encadre l'infobulle*/
    .Infobulle {                        
      position : relative; /*Permet de positionner l'infobulle par rapport au coin en haut à gauche.*/
      width: 120px;
      height: 120px;
    }
    /*Contenu de l'infobulle quand on n'est pas sur l'image*/
    .Infobulle .Infobulle_contenu {                        
      position : absolute; /*Permet de positionner l'infobulle par rapport au coin en haut à gauche.*/
      top : 20px; /*Position par rapport au haut*/
      left : 110px; /*Position par rapport à gauche*/
      width : 120px;
      font-size: 12px;
      font-family: verdana;
      background-color: #1B2836;
      padding: 5px;
      color: #9BB9D9;
      text-align: center;
      border: 1px #6993BE solid;
      border-radius: 10px;
      -moz-border-radius: 10px;
      -o-border-radius: 10px;
      -htm-border-radius: 10px;
      -webkit-border-radius: 10px;
      display : none; /*Cache l'infobulle*/
    }

    /*Contenu de l'infobulle quand on passe sur l'image*/
    .Infobulle:hover .Infobulle_contenu {
      display : block; /*Fait apparaître l'infobulle*/
    }

    Une fois le CSS installé et le code dans la PA, vous voilà avec une belle infobulle qui fonctionnera même si vous mettez des "div" ou des "span" à l'intérieur!

    (et n'oubliez pas de créditer N-U è_é)
    avatar
    DarkEve
    FémininAge : 29Messages : 21

    le Mer 17 Sep - 23:22

    Merci beaucoup ! C'est très utile :)



    Ϫ JAYCE.
    FémininAge : 27Messages : 29

    le Ven 19 Sep - 16:49

    Merci Wink
    avatar
    Hana Evali
    FémininAge : 26Messages : 161

    le Dim 21 Sep - 12:30

    Merci ^^



    avatar
    Lenalee
    FémininAge : 27Messages : 36

    le Dim 21 Sep - 17:42

    merci beaucoup
    avatar
    Sorako
    FémininAge : 19Messages : 94

    le Mar 28 Oct - 10:38

    Merci beaucoup ♥
    avatar
    PANDA™
    FémininAge : 19Messages : 25

    le Dim 2 Nov - 23:09

    Merci :)
    avatar
    Amaluna
    FémininAge : 26Messages : 103

    le Ven 7 Nov - 21:51

    thanks !! :)
    avatar
    lelie25
    FémininAge : 24Messages : 89

    le Dim 23 Nov - 15:58

    mici
    avatar
    Dydy
    FémininAge : 26Messages : 490

    le Lun 24 Nov - 20:04

    Merci du partage!



    avatar
    hedgekey
    FémininAge : 20Messages : 5

    le Jeu 1 Jan - 15:39

    Merci !
    avatar
    Ryukaï
    MasculinAge : 18Messages : 596

    le Sam 24 Jan - 22:55

    Merci!!



    avatar
    Eleania Madena
    FémininAge : 19Messages : 85

    le Dim 25 Jan - 9:08

    Merci !



    avatar
    Valeriane
    FémininAge : 31Messages : 24

    le Sam 31 Jan - 14:10

    Ouiiiiii
    avatar
    Moon Heart
    FémininAge : 16Messages : 37

    le Dim 1 Fév - 18:22

    merci
    avatar
    Glow
    FémininAge : 17Messages : 93

    le Jeu 12 Fév - 16:12

    Merci bien C:
    avatar
    catinaphone
    FémininAge : 25Messages : 93

    le Dim 15 Fév - 18:35

    Ah, il faut que je m'instruise parce que les infobulles que j'ai installé ne fonctionnent pas !
    Merci de me montrer la voie ! :o xD
    avatar
    Myu-uu
    FémininAge : 24Messages : 115

    le Ven 20 Fév - 13:51

    Merci beaucoup ♥




    avatar
    Caine Lornan
    MasculinAge : 35Messages : 78

    le Mer 18 Mar - 21:07

    Merci
    avatar
    Pau
    FémininAge : 26Messages : 37

    le Jeu 7 Mai - 13:31

    merci pour l'astuce
    avatar
    Caliel
    MasculinAge : 28Messages : 98

    le Lun 18 Mai - 20:24

    Merci ! =)



    avatar
    kaido
    MasculinAge : 20Messages : 5

    le Lun 18 Mai - 23:24

    merci
    avatar
    Kendall
    FémininAge : 25Messages : 117

    le Mar 9 Juin - 17:27

    Merci!




    avatar
    Flower_*
    FémininAge : 22Messages : 571

    le Jeu 11 Juin - 15:30

    Merci :)
    avatar
    Minzy
    FémininAge : 21Messages : 184

    le Ven 12 Juin - 9:05

    Merci :)
    avatar
    Shaneliae
    FémininAge : 20Messages : 767

    le Sam 20 Juin - 18:55

    Merci Onyx ! Maintenant je ne ferais plus l'erreur >.<



    Contenu sponsorisé


      La date/heure actuelle est Jeu 30 Mar - 18:33