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 : 2772

    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
    picka234
    Age : 52Messages : 433

    le Mer 15 Juil 2015 - 19:18

    merci c'est ce que je cherche !!



    avatar
    Elegna
    FémininAge : 21Messages : 16

    le Jeu 16 Juil 2015 - 13:32

    Super merci!
    avatar
    Nextalius
    MasculinAge : 16Messages : 22

    le Jeu 30 Juil 2015 - 16:06

    merci
    avatar
    Yuki Kaga
    FémininAge : 16Messages : 255

    le Ven 14 Aoû 2015 - 22:16

    Merci ! Wink
    avatar
    Anon
    MasculinAge : 18Messages : 92

    le Sam 15 Aoû 2015 - 14:26

    Yé cours essayer ça, merci à toi ! ^-^




    ~
    avatar
    Kelalin
    FémininAge : 24Messages : 1461

    le Dim 16 Aoû 2015 - 22:53

    Merci beaucoup du partage ! (*^▽^*)
    avatar
    Solitude
    FémininAge : 41Messages : 265

    le Dim 30 Aoû 2015 - 20:13

    merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    pinkwinee
    FémininAge : 22Messages : 44

    le Mer 2 Sep 2015 - 15:00

    mirchiii <3
    avatar
    Goupixette
    FémininAge : 25Messages : 28

    le Jeu 3 Sep 2015 - 14:12

    Merci Onyx, décidément, tu m'es d'une grande aide <3



    avatar
    Neko Mimi
    FémininAge : 26Messages : 158

    le Jeu 10 Sep 2015 - 8:49

    Merci ♥



    avatar
    Zeloo
    FémininAge : 20Messages : 64

    le Ven 18 Sep 2015 - 21:18

    Nice !



    avatar
    Ju' de fruits
    FémininAge : 23Messages : 82

    le Sam 19 Sep 2015 - 11:51

    Mercii



    Løve
    MasculinAge : 21Messages : 189

    le Mer 30 Sep 2015 - 14:52

    Merci
    avatar
    Junior.
    FémininAge : 19Messages : 76

    le Ven 2 Oct 2015 - 20:40

    Merci je cherchais ça depuis longtemps ! Very Happy
    avatar
    Sighild
    FémininAge : 30Messages : 147

    le Ven 16 Oct 2015 - 19:43

    Super! Je comprenais pas pourquoi cela déconnait. Merci pour le tuto.
    avatar
    Broken Lullaby
    FémininAge : 21Messages : 12

    le Jeu 22 Oct 2015 - 18:32

    Merci ! Very Happy
    avatar
    zbou
    FémininAge : 22Messages : 83

    le Jeu 12 Nov 2015 - 10:01

    Merci !!
    avatar
    Gaeriel
    FémininAge : 25Messages : 44

    le Ven 20 Nov 2015 - 17:22

    Merciii ! o/
    avatar
    Zuz'
    FémininAge : 21Messages : 53

    le Dim 27 Déc 2015 - 14:56

    Merci pour ce partage !
    avatar
    LouetRinkin
    MasculinAge : 26Messages : 62

    le Mer 30 Déc 2015 - 10:03

    Merci.
    avatar
    Azzuen
    FémininAge : 18Messages : 61

    le Ven 1 Jan 2016 - 0:14

    Merci ^w^
    avatar
    Colyn
    FémininAge : 23Messages : 9

    le Lun 18 Jan 2016 - 0:31

    Je ne demande qu'à voir ! Merci beaucoup~
    avatar
    Celuna
    FémininAge : 26Messages : 120

    le Dim 21 Fév 2016 - 15:31

    Bonjour,

    Merci pour ce partage
    avatar
    Stiou
    FémininAge : 23Messages : 42

    le Sam 27 Fév 2016 - 13:28

    Merci !



    avatar
    Kamesora
    FémininAge : 24Messages : 90

    le Lun 7 Mar 2016 - 17:15

    merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 30 Mar 2017 - 4:47