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 : 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
    Waize
    FémininAge : 19Messages : 34

    le Dim 6 Avr 2014 - 0:41

    Merci 8D
    Jamy
    FémininAge : 27Messages : 37

    le Ven 18 Avr 2014 - 17:50

    merci beaucoup ! :)
    avatar
    Holnesse
    FémininAge : 20Messages : 35

    le Lun 21 Avr 2014 - 14:36

    Parfait **
    avatar
    Aaw.
    FémininAge : 20Messages : 25

    le Sam 26 Avr 2014 - 8:19

    Merciiiii ♥
    avatar
    Tchi
    FémininAge : 24Messages : 40

    le Dim 4 Mai 2014 - 14:30

    omg merci !
    avatar
    louha
    FémininAge : 29Messages : 212

    le Ven 9 Mai 2014 - 1:01

    merci
    avatar
    Amasis
    FémininAge : 44Messages : 302

    le Mar 3 Juin 2014 - 20:41

    Le tuto que je cherchais! Merci beaucoup!
    avatar
    Malice1329
    FémininAge : 28Messages : 79

    le Mer 4 Juin 2014 - 2:28

    Merci beaucoup j'ai bien hâte de m'en servir



    avatar
    Malf Claymore
    FémininAge : 22Messages : 125

    le Jeu 5 Juin 2014 - 20:39

    merci
    avatar
    Invité

    le Sam 14 Juin 2014 - 13:26

    Merci !
    avatar
    Risa
    FémininAge : 28Messages : 233

    le Mar 17 Juin 2014 - 19:37

    Merciiii !
    avatar
    Yumi-chan
    FémininAge : 23Messages : 67

    le Dim 22 Juin 2014 - 15:26

    Thanks ♥ **
    avatar
    misssrubi
    FémininAge : 25Messages : 66

    le Sam 28 Juin 2014 - 5:10

    Haaaan, merci ♥



    avatar
    Luna_Rakuen
    FémininAge : 24Messages : 79

    le Ven 18 Juil 2014 - 19:48

    merci =3
    avatar
    Kurokaze
    FémininAge : 25Messages : 35

    le Sam 19 Juil 2014 - 16:12

    Merci beaucoup =)
    Nal Souclade
    MasculinAge : 18Messages : 163

    le Lun 11 Aoû 2014 - 16:30

    Super ! Merci beaucoup !
    avatar
    John Parker
    MasculinAge : 34Messages : 57

    le Lun 11 Aoû 2014 - 16:55

    Merci beaucoup pour ce tutoriel ^^



    avatar
    shala
    FémininAge : 25Messages : 213

    le Mar 12 Aoû 2014 - 20:39

    merci



    avatar
    Merwyn Arehdel
    FémininAge : 17Messages : 298

    le Mer 13 Aoû 2014 - 10:04

    Merci o/



    Just want to be yours.
    avatar
    Arpège
    FémininAge : 18Messages : 103

    le Sam 16 Aoû 2014 - 15:49

    marchi :3




    Writers World commence à ouvrir !
    avatar
    Narcisse
    FémininAge : 102Messages : 21

    le Dim 17 Aoû 2014 - 18:08

    Merci du partage :)
    avatar
    Diabolik
    FémininAge : 20Messages : 18

    le Lun 18 Aoû 2014 - 16:33

    Merci :3
    avatar
    Nanachu ♥
    FémininAge : 20Messages : 108

    le Mer 27 Aoû 2014 - 22:26

    Merci !
    avatar
    Kraken
    FémininAge : 24Messages : 130

    le Jeu 4 Sep 2014 - 21:23

    Merci ! 8D
    avatar
    Mangédéfruiélégumeuh
    MasculinAge : 19Messages : 82

    le Lun 8 Sep 2014 - 22:53

    Merci :) !
    Contenu sponsorisé


      La date/heure actuelle est Ven 24 Mar 2017 - 14:56