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
    En ligne
    avatar
    Onyx
    FémininAge : 23Messages : 2757

    le Sam 11 Jan 2014 - 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
    M.O
    MasculinAge : 27Messages : 48

    le Mar 24 Mai 2016 - 3:47

    Merci!
    avatar
    Hancok
    FémininAge : 32Messages : 923

    le Ven 17 Juin 2016 - 16:02

    Merci pour ce tuto :)





    avatar
    Loretta
    FémininAge : 25Messages : 51

    le Mar 28 Juin 2016 - 21:32

    Merci pour le partage !
    avatar
    andie_xcv
    FémininAge : 21Messages : 34

    le Dim 3 Juil 2016 - 0:01

    Merci :)
    avatar
    Wasabii
    FémininAge : 17Messages : 16

    le Mer 13 Juil 2016 - 16:57

    Merci beaucoup ! *3*



    avatar
    Heine
    MasculinAge : 22Messages : 147

    le Mar 19 Juil 2016 - 1:45

    Merci !o/



    avatar
    .Lucifer.
    MasculinAge : 43Messages : 150

    le Jeu 11 Aoû 2016 - 20:28

    Merci beaucoup! Wink



    avatar
    Invité

    le Mer 24 Aoû 2016 - 22:19

    Merci pour ce LS ! :)
    avatar
    Piratress
    FémininAge : 19Messages : 190

    le Jeu 13 Oct 2016 - 9:54

    Merci pour ce tuto!
    avatar
    Kokoro Korou
    MasculinAge : 21Messages : 61

    le Ven 9 Déc 2016 - 14:45

    Merci !
    avatar
    Scandalucia
    FémininAge : 26Messages : 115

    le Sam 7 Jan 2017 - 18:29

    merci =)




    Historia Pactum Ouvre ses portes
    I really need a new gun...that shoots other guns.



    avatar
    Mistake
    FémininAge : 16Messages : 15

    le Lun 13 Mar 2017 - 0:14

    thanks you
    avatar
    Cornélius
    MasculinAge : 18Messages : 12

    le Ven 17 Mar 2017 - 0:44

    Thanks Bro, les infobulles c'est la vie
    avatar
    Daph
    FémininAge : 23Messages : 66

    le Sam 18 Mar 2017 - 23:28

    Merci Very Happy



    Contenu sponsorisé


      La date/heure actuelle est Sam 25 Mar 2017 - 0:51