Problème avec Infobulle Bouton_activeProblème avec Infobulle Bouton_hoverProblème avec Infobulle Fb-hoverProblème avec Infobulle Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Problème avec Infobulle EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Problème avec Infobulle EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Problème avec Infobulle EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Problème avec Infobulle EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Problème avec Infobulle EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Problème avec Infobulle EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Problème avec Infobulle EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Problème avec Infobulle EmptySam 11 Fév 2023, 06:04 par Krager

-17%
Le deal à ne pas rater :
(Black Friday) Apple watch Apple SE GPS + Cellular 44mm (plusieurs ...
249 € 299 €
Voir le deal

Partagez
 

Problème avec Infobulle

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://www.peoplewolf.com
Skwatt'
Skwatt'
{ Membre }
{ Membre }

Féminin Messages : 23



Problème avec Infobulle Empty
    Bonjour,

    Pour un forum où je suis co-admin, je dois réaliser une fiche de présentation où la présence d'infobulle est requise pour plus de clarté. Seulement, un petit problème se pose. Et comme des images valent mieux que des mots ... ^^


    Spoiler:

    De plus, j'aimerai que les icones se place l'une à côté de l'autre mais je pense que pour ça, c'est un autre problème ... ^^"


    Voici le CSS :

    Code:
    /* INFOBUL */





    p
    {
      font-size      : 1.1em; /* Définition de la taille de la police de nos paragraphes */
    }

    /* Rend invisible tout notre bloc span */
    a.info_bulle span
    {                       
        position      :  absolute;
        top            :  -2000em;
        left          :  -2000em;
        width          :  1px;
        height        :  1px;
        overflow      :  hidden;
        background    :  #ffffff;  /* Définition du fond, sinon on a le même que notre lien */
        border        :  background-color: #D9D1B2;
    -moz-border-radius: 5px 5px 14px 14px ;
    border-bottom: 6px #060361 solid;
    border-top: 2px #060361 dotted;
    border-right: 2px #060361 dotted;
    border-left: 2px #060361 dotted; /* Définition des bordures */
    }

    a.info_bulle
    {           
      color          : #2F368A;
     
      text-decoration : none;
     
      padding        : 2px 16px 2px 2px; /*Définition des marges intérieures de notre lien */
     
      /* Définition de l'arrière plan de notre lien */
      background      : transparent url('comment.gif') no-repeat right center;
     
      position        : relative; /* Indispensable pour le bon positionnement de l'info-bulle */
    }
     
    a.info_bulle:hover
    {
      border          : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
    }

    /* Rend visible tout notre bloc span et lui attribue une taille */
    a.info_bulle:hover span, a.info_bulle:focus span, a.info_bulle:active span
    {
        top        :  auto;
        left      :  auto;
        width      :  auto;
        height    :  auto;
        overflow  :  visible;
    }           


    Et le code du message :

    Code:

    [list][table border="0"][tr][td][color=black]
    [table][tr][td style="background-color: #000000" span class="arrondi"][b]Ascendance :[/b]
      <a id="info_bulle" class="info_bulle" href="UNE URL SI IL FAUT"><img src="http://i33.servimg.com/u/f33/09/03/76/30/taille11.png">
              <span>
                <center>
    <img src="URL IMAGE">

    <b>NOM DU CHEVAL </b>

     BLABLA</center>

              </span>
            </a>  <a id="info_bulle" class="info_bulle" href="UNE URL SI IL FAUT"><img src="http://i33.servimg.com/u/f33/09/03/76/30/taille11.png">
              <span>
                <center>
    <img src="URL IMAGE">

    <b>NOM DU CHEVAL </b>

     BLABLA</center>

              </span>
            </a>
    [/td][/tr][/table]
    [/color][/td][td][list]
    [color=black][font=Georgia]
    [table][tr][td style="background-color: #000000" span class="arrondi"]
    [b]Descendance :[/b]
      <a id="info_bulle" class="info_bulle" href="UNE URL SI IL FAUT"><img src="http://i33.servimg.com/u/f33/09/03/76/30/taille11.png">
              <span>
                <center>
    <img src="URL IMAGE">

    <b>NOM DU CHEVAL </b>

     BLABLA</center>

              </span>
            </a>  <a id="info_bulle" class="info_bulle" href="UNE URL SI IL FAUT"><img src="http://i33.servimg.com/u/f33/09/03/76/30/taille11.png">
              <span>
                <center>
    <img src="URL IMAGE">

    <b>NOM DU CHEVAL </b>

     BLABLA</center>

              </span>
            </a>[/td][/tr][/table]
    [/list][/font][/color][/td][/tr][/table][/list]



    L'adresse du forum est http://ranch-nom.forum-actif.net et j'utilise Firefox Smile

    Cordialement,
    Ŧrusŧ


Dernière édition par Ŧrusŧ le Mer 28 Juil 2010, 18:56, édité 1 fois
MessageSujet: Problème avec Infobulle   Problème avec Infobulle EmptyMar 20 Juil 2010, 17:55
Revenir en haut Aller en bas
http://mondanimal.forumactif.biz/forum.htm
Edelweiss
Edelweiss
{ Membre }
{ Membre }

Féminin Messages : 105



Problème avec Infobulle Empty
Coucou,

Dans ta class "a.info_bulle span" rajoute
Code:
z-index:999;
Wink.
MessageSujet: Re: Problème avec Infobulle   Problème avec Infobulle EmptySam 24 Juil 2010, 10:56
Revenir en haut Aller en bas
http://www.peoplewolf.com
Skwatt'
Skwatt'
{ Membre }
{ Membre }

Féminin Messages : 23



Problème avec Infobulle Empty
    Merci beaucoup, ça fonctionne Very Happy

    Problème résolus ^^
MessageSujet: Re: Problème avec Infobulle   Problème avec Infobulle EmptyMer 28 Juil 2010, 18:56
Revenir en haut Aller en bas
Contenu sponsorisé




Problème avec Infobulle Empty
MessageSujet: Re: Problème avec Infobulle   Problème avec Infobulle Empty
Revenir en haut Aller en bas
 

Problème avec Infobulle

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» problème avec infobulle.
» Probleme avec infobulle de mon QEEL
» Problème avec PA à onglet - Infobulle et transparence.
» Problème avec l'iframe (signature) avec les codes couleurs. (non résolu)
» Problème avec la Fiche PV avec bannière latérale d'Orange

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit