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

    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
    Depp
    FémininAge : 25Messages : 297

    le Lun 13 Jan 2014 - 16:44

    Merci =)



    avatar
    Swann Calder
    FémininAge : 23Messages : 27

    le Lun 13 Jan 2014 - 17:49

    Merci :)
    avatar
    Grenouille
    FémininAge : 21Messages : 49

    le Mar 14 Jan 2014 - 19:25

    merci
    avatar
    Little Ghost
    FémininAge : 26Messages : 80

    le Ven 17 Jan 2014 - 18:16

    merci =)
    avatar
    SugarBuse
    FémininAge : 19Messages : 42

    le Ven 17 Jan 2014 - 23:55

    Merci !
    avatar
    KosukeMurakawa
    MasculinAge : 21Messages : 8

    le Dim 19 Jan 2014 - 19:51

    merci.
    avatar
    Ab0utxMe
    FémininAge : 22Messages : 182

    le Mar 21 Jan 2014 - 14:52

    Merci beaucoup ! J'ai eu ce soucis récemment, c'était galère à le régler ... *déprimée*



    avatar
    Allison01
    FémininAge : 32Messages : 176

    le Mar 21 Jan 2014 - 15:36

    Merci beaucoup Very Happy
    avatar
    Harumi
    FémininAge : 18Messages : 21

    le Mer 29 Jan 2014 - 14:54

    Merci merci
    avatar
    melimêlo
    FémininAge : 24Messages : 25

    le Ven 31 Jan 2014 - 10:32

    Merci pour ce système ! Je vais tester de ce pas !
    avatar
    patriciadpt30
    FémininAge : 54Messages : 240

    le Sam 1 Fév 2014 - 11:34

    Merci bien à vous :) .



    Patricia :)
    avatar
    Gaki
    FémininAge : 21Messages : 21

    le Dim 23 Fév 2014 - 16:17

    Merci à toi !
    avatar
    Chione
    MasculinAge : 16Messages : 396

    le Jeu 27 Fév 2014 - 20:32

    Merki




    FEZ!FEZ!
    avatar
    Isalia
    FémininAge : 20Messages : 121

    le Sam 1 Mar 2014 - 14:13

    Merci ! ♥
    avatar
    Mzelle Quouwaa
    FémininAge : 21Messages : 27

    le Dim 2 Mar 2014 - 20:55

    Merci !
    avatar
    Noruenu
    FémininAge : 24Messages : 119

    le Lun 10 Mar 2014 - 22:43

      Merci ! :3
    avatar
    Oror
    FémininAge : 27Messages : 93

    le Mar 11 Mar 2014 - 22:40

    Merci ! J'avais justement besoin de ça =)



    avatar
    Chaussette
    FémininAge : 24Messages : 59

    le Mer 12 Mar 2014 - 15:13

    Merci beaucoup ! Les infobulles, rien de meilleur ! ^^
    avatar
    Liaminah
    FémininAge : 24Messages : 28

    le Jeu 13 Mar 2014 - 19:05

    Merci !
    avatar
    tamanegeek
    MasculinAge : 17Messages : 167

    le Sam 15 Mar 2014 - 15:10

    Merci !!
    avatar
    Win
    Age : 24Messages : 114

    le Lun 17 Mar 2014 - 16:28

    je savais pas, merci! =)



    PINK-APPLE
    FémininAge : 23Messages : 11

    le Mer 19 Mar 2014 - 1:22

    Woaw, merci tu m'aides beaucoup :)
    Issei-kun
    MasculinAge : 23Messages : 9

    le Ven 28 Mar 2014 - 10:26

    Merci à toi ^^
    avatar
    Tanchi
    Age : 25Messages : 365

    le Mar 1 Avr 2014 - 13:51

    Merci du partage =)



    Contenu sponsorisé


      La date/heure actuelle est Jeu 30 Mar 2017 - 8:43