Partage
  • Partager sur Facebook
  • Partager sur Twitter

Info bulle

les superposer

Scaraber
    15 juin 2006 à 11:38:06

    Salut
    J'ai suivis le tuto sur les info bulle mais, je n'est pas réussi a faire comme dans les example qui se trouve a la fin, a mettre plusieur case :(
    ____________
    |titre infobulle |
    |____________|
    ____________
    | blablablablab |
    |____________|
    ____________
    | blablablablab |
    | blablablablab |
    |____________|

    mais je n'y suis pas arriver.
    quelqu'un pourait t'il m'éclairer ? :p
    a+
    Scaraber
    • Partager sur Facebook
    • Partager sur Twitter
    Anonyme
      15 juin 2006 à 11:59:04

      montre ton code ^^
      • Partager sur Facebook
      • Partager sur Twitter
      Scaraber
        15 juin 2006 à 12:59:57

        Salut
        c'est le code du tuto, j'ai essayer des modif mais je n'ets pas reussi
        http://www.siteduzero.com/tuto-3-5272-1-modifier-l-apparence-d-une-infobulle.html

        <!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

        <head>
        <title></title>
        <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />

        <style type="text/css">
        * {
           font–size: 11px; /* on définit les propriétés de texte pour toutes les balises */
           font–family: Tahoma‚ Verdana‚ Arial‚ serif;
        }
        a.info {
           position: relative;
           color: black;
           text–decoration: none;
           border–bottom: 1px gray dotted; /* on souligne le texte */
        }
        a.info span {
           display: none; /* on masque l'infobulle */
        }
        a.info:hover {
           background: none; /* correction d'un bug IE */
           z–index: 500; /* on définit une valeur pour l'ordre d'affichage */

           cursor: help; /* on change le curseur par défaut en curseur d'aide */
        }
        a.info:hover span {
           display: inline; /* on affiche l'infobulle */
           position: absolute;

           white–space: nowrap; /* on change la valeur de la propriété white–space pour qu'il n'y ait pas de retour à la ligne non–désiré */

           top: 30px; /* on positionne notre infobulle */
           left: 20px;

           background: white;

           color: green;
           padding: 3px;

           border: 1px solid green;
           border–left: 4px solid green;
        }
        </style>
        </head>

        <body>
        <p>Grâce au <a href="#" class="info">Wi–Fi<span>contraction de Wireless Fidelity</span></a> il est possible de créer des réseaux locaux sans fils à haut débit pour peu que la station à connecter ne soit pas trop distante par rapport au point d'accès. Dans la pratique le <a href="#" class="info">Wi–Fi<span>contraction de Wireless Fidelity</span></a> permet de relier des ordinateurs portables‚ des machines de bureau‚ des assistants personnels (<a href="#" class="info">PDA<span>Personal Digital Assistant</span></a>) ou tout type de périphérique à une liaison haut débit (11 Mbps ou supérieur) sur un rayon de plusieurs dizaines de mètres en intérieur (généralement entre une vingtaine et une cinquantaine de mètres) à plusieurs centaines de mètres en environnement ouvert.</p>
        </body>

        </html>


        A+
        scaraber
        • Partager sur Facebook
        • Partager sur Twitter
        Anonyme
          15 juin 2006 à 13:55:30

          qu'est-ce que ça t'affiche?
          • Partager sur Facebook
          • Partager sur Twitter
          Scaraber
            15 juin 2006 à 14:00:38

            Je n'arrive pas a faire un truc comme dans les deux derniers exemple j'ai essayer de mettre deux <span> mais sa me met les deux bulles au meme endroit.
            apres jai essayer de copier deux fois le code

            a.info:hover span {
               display: inline; /* on affiche l'infobulle */
               position: absolute;

               white–space: nowrap; /* on change la valeur de la propriété white–space pour qu'il n'y ait pas de retour à la ligne non–désiré */

               top: 30px; /* on positionne notre infobulle */
               left: 20px;

               background: white;

               color: green;
               padding:3 px;

               border: 1px solid green;
               border–left: 4px solid green;
            }


            mais sas n'a rien donnée...
            voila tout

            EDIT:
            oura j'ai enfin réussi... je chercher maintenant comment choisir une taille pour les infobulle (largeur fixe) pour le moment sa me les aligne les unes en dessous des autres mais la taille est diferente....



            a+
            scaraber
            • Partager sur Facebook
            • Partager sur Twitter

            Info bulle

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur ●
            • Markdown