Infobulles qui posent soucis Bouton_activeInfobulles qui posent soucis Bouton_hoverInfobulles qui posent soucis Fb-hoverInfobulles qui posent soucis Fb-active
AccueilForumÉquipe 
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
Infobulles qui posent soucis EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Infobulles qui posent soucis EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Infobulles qui posent soucis EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Infobulles qui posent soucis EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Infobulles qui posent soucis EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Infobulles qui posent soucis EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Infobulles qui posent soucis EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Infobulles qui posent soucis EmptySam 11 Fév 2023, 06:04 par Krager

-28%
Le deal à ne pas rater :
-28% Machine à café avec broyeur à grain MELITTA Purista
229.99 € 318.99 €
Voir le deal

CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

Infobulles qui posent soucis

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://devil-tears.forumactif.org/
OceanSoul
OceanSoul
{ Membre }
{ Membre }

Féminin Messages : 137



Infobulles qui posent soucis Empty
Bonjour, bonjour ^^

Je suis en train de faire la mise en page de mon référencement des avatars pris sur mon forum, et j'utilise un système d'onglets. Tout fonctionne très bien, mais dès que je veux mettre des infobulles sur une partie du texte, elles ne s'affichent pas. Si je les poste directement dans le message il n'y a pas de soucis, mais dès que je colle le code dans ma page HTML j'ai toutes les informations qui apparaissent, sans voir une seule infobulle.

Voici ma page HTML:
Code:
<style type="text/css">
.onglet {
display:inline-block;
margin-left:5px;
padding:2px;
border:1px solid #000000;
cursor:pointer;
background-color: #000000;
 color : #5C524C;
font-family: Georgia;
font-size: 13px;;
}
.onglet_0 {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;}
.onglet_1 {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
background: #111111;
padding-bottom:3px;
}
.contenu_onglet {
-moz-border-radius: 20px;
background-color: #000000;
 color : #5C524C;
font-family: Georgia;
margin-top:-1px;
padding-left:15px;
padding-right:5px;
display:none;
width: 450px;
-moz-box-shadow:#262626 2px 1px 6px ;
text-align: justify;
}

</style>
<script language="javascript" src="http://twilight-rpg.forumotion.com/script-onglet-h4.htm">
</script>

        <div class="onglets">
            <span class="onglet_0 onglet" id="onglet_accueil" onmouseover="javascript:change_onglet('accueil');" style="margin-left: 5px">A. B. C</span>
            <span class="onglet_0 onglet" id="onglet_contexte" onmouseover="javascript:change_onglet('contexte');">D. E. F</span>
            <span class="onglet_0 onglet" id="onglet_pv" onmouseover="javascript:change_onglet('pv');">G. H. I </span>
<span class="onglet_0 onglet" id="onglet_jk" onmouseover="javascript:change_onglet('jk');">J. K. L </span>
<span class="onglet_0 onglet" id="onglet_pq" onmouseover="javascript:change_onglet('mn');">M. N. O </span>
<span class="onglet_0 onglet" id="onglet_pq" onmouseover="javascript:change_onglet('pq');">P. Q. R </span>
<span class="onglet_0 onglet" id="onglet_st" onmouseover="javascript:change_onglet('st');">S. T. U </span>
<span class="onglet_0 onglet" id="onglet_vw" onmouseover="javascript:change_onglet('vw');">V. W. X. Y. Z </span>
        </div>

        <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_accueil">
              <br>
<table><tr><td><font color="#5C524C";>
♀ PERSONNALITES  FEMININES ♀<br><br><font color="#557C50";>♣️</font> Abbey Lee Kershaw — <a href="#" class="info">Texte ou Image SUR laquelle vous voulez passer votre souris pour faire apparaitre l'InfoBulle<span>votre texte ou image que vous souhaitez afficher DANS l'InfoBulle</span></a><br /><color=#6C2424";>♣️</color> Amber Heard — Selene L. Turner<br /><font color="#557C50";>♣️</font> Annalyne McCord — Jewell Burminster<br /><font color="#6C2424";>♣️</font> Ashley Greene — Robin S. Harvey<br /></td>
<br><br></font>
<td><font color="#5C524C";>♂  PERSONNALITES  MASCULINES  ♂<br><br><font color="#557C50";>♣️</font> Alex Pettyfer — Sohan Moore<br /><font color="#6C2424";>♣️</font> Ashton Kutcher — Démétri Graham<br /><font color=#557C50>♣️</font> Alexander Skarsgård — Gabriel Hawk<br /></font><br/></font>
</td></tr></table>
<br><br><br>
            </div>

            <div class="contenu_onglet" id="contenu_onglet_contexte">
<br><br><br>
                Bla bla bla bla bla bla bla<br><br><br>
</div>
            </div>

            <div class="contenu_onglet" id="contenu_onglet_pv">
<br><br><br>
Bla bla bla bla bla bla bla
<br><br><br>
            </div>

      <div class="contenu_onglet" id="contenu_onglet_jk">
<br><br><br>
Bla bla bla bla bla bla bla
<br><br><br>
            </div>

<div class="contenu_onglet" id="contenu_onglet_mn">
<br><br><br>
Bla bla bla bla bla bla bla
<br><br><br>
            </div> 

<div class="contenu_onglet" id="contenu_onglet_pq">
<br><br><br>
Bla bla bla bla bla bla bla
<br><br><br>
            </div> 

<div class="contenu_onglet" id="contenu_onglet_st">
<br><br><br>
Bla bla bla bla bla bla bla
<br><br><br>
            </div>   

<div class="contenu_onglet" id="contenu_onglet_vw">
<br><br><br>
Bla bla bla bla bla bla bla
<br><br><br>
            </div> 

        </div>
    </div>
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'accueil';
                change_onglet(anc_onglet);
        //-->
        </script>

Je bidouille depuis hier soir pour que ça fonctionne, je me suis servit de plusieurs tuto, mais rien n'y fait, ça ne veut pas marcher =S Est-ce que quelqu'un pourrait m'aider Smack Smack?
Merci d'avance pour votre aide <3
MessageSujet: Infobulles qui posent soucis   Infobulles qui posent soucis EmptyMar 31 Aoû 2010, 04:31
Revenir en haut Aller en bas
http://vampirediaries.forum-actif.net/index.htm
Chucky
{ Membre }
{ Membre }

Masculin Messages : 47



Infobulles qui posent soucis Empty
Bonjour^^ euh une question, puis-je voir le code css de tes infobulles ainsi que l'adresse du forum pour voir le rendu?
MessageSujet: Re: Infobulles qui posent soucis   Infobulles qui posent soucis EmptyMar 31 Aoû 2010, 04:42
Revenir en haut Aller en bas
http://devil-tears.forumactif.org/
OceanSoul
OceanSoul
{ Membre }
{ Membre }

Féminin Messages : 137



Infobulles qui posent soucis Empty
Bien sûr, le voici:
Code:
/* infobulles by BestRPG */
a.info {
  position:relative;
}
a.info:hover {
  background: none;
  z-index: 999;
}
a.info span {display: none;}
a.info:hover span {
display: inline; /* on affiche l'infobulle */
  position: absolute;
  top: 15px; /* on positionne notre infobulle */
left: -25px;
width: 350px;
background-color: #242222;
  padding: 3px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: #000000 3px 8px 6px;
font-family: Verdana;
color: #5C524C;
text-shadow: #000000 2px 2px 3px; 
}
MessageSujet: Re: Infobulles qui posent soucis   Infobulles qui posent soucis EmptyMar 31 Aoû 2010, 04:43
Revenir en haut Aller en bas
http://vampirediaries.forum-actif.net/index.htm
Chucky
{ Membre }
{ Membre }

Masculin Messages : 47



Infobulles qui posent soucis Empty
Mais tu veux le mettre ou ton code?
MessageSujet: Re: Infobulles qui posent soucis   Infobulles qui posent soucis EmptyMar 31 Aoû 2010, 04:56
Revenir en haut Aller en bas
http://devil-tears.forumactif.org/
OceanSoul
OceanSoul
{ Membre }
{ Membre }

Féminin Messages : 137



Infobulles qui posent soucis Empty
Ben le code il serait dans un message en fait.
J'aimerais que lorsque l'on passe la souris sur un nom, une infobulle apparaisse en dessous, avec un lien pour aller voir le prédéfini.
MessageSujet: Re: Infobulles qui posent soucis   Infobulles qui posent soucis EmptyMar 31 Aoû 2010, 04:58
Revenir en haut Aller en bas
http://vampirediaries.forum-actif.net/index.htm
Chucky
{ Membre }
{ Membre }

Masculin Messages : 47



Infobulles qui posent soucis Empty
Essaye ça dans ta page HTML

Code:
<script language="javascript" src="http://twilight-rpg.forumotion.com/script-onglet-h4.htm">
</script>

        <div class="onglets">
            <span class="onglet_0 onglet" id="onglet_accueil" onmouseover="javascript:change_onglet('accueil');" style="margin-left: 5px">A. B. C</span>
            <span class="onglet_0 onglet" id="onglet_contexte" onmouseover="javascript:change_onglet('contexte');">D. E. F</span>
            <span class="onglet_0 onglet" id="onglet_pv" onmouseover="javascript:change_onglet('pv');">G. H. I </span>
<span class="onglet_0 onglet" id="onglet_jk" onmouseover="javascript:change_onglet('jk');">J. K. L </span>
<span class="onglet_0 onglet" id="onglet_pq" onmouseover="javascript:change_onglet('mn');">M. N. O </span>
<span class="onglet_0 onglet" id="onglet_pq" onmouseover="javascript:change_onglet('pq');">P. Q. R </span>
<span class="onglet_0 onglet" id="onglet_st" onmouseover="javascript:change_onglet('st');">S. T. U </span>
<span class="onglet_0 onglet" id="onglet_vw" onmouseover="javascript:change_onglet('vw');">V. W. X. Y. Z </span>
        </div>

        <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_accueil">
              <br>
<table><tr><td><font color="#5C524C";>
♀ PERSONNALITES  FEMININES ♀<br><br><font color="#557C50";>♣</font> Abbey Lee Kershaw — <a href="#" class="info">Texte ou Image SUR laquelle vous voulez passer votre souris pour faire apparaitre l'InfoBulle<span>votre texte ou image que vous souhaitez afficher DANS l'InfoBulle</span></a><br /><color=#6C2424";>♣</color> Amber Heard — Selene L. Turner<br /><font color="#557C50";>♣</font> Annalyne McCord — Jewell Burminster<br /><font color="#6C2424";>♣</font> Ashley Greene — Robin S. Harvey<br /></td>
<br><br></font>
<td><font color="#5C524C";>♂  PERSONNALITES  MASCULINES  ♂<br><br><font color="#557C50";>♣</font> Alex Pettyfer — Sohan Moore<br /><font color="#6C2424";>♣</font> Ashton Kutcher — Démétri Graham<br /><font color=#557C50>♣</font> Alexander Skarsgård — Gabriel Hawk<br /></font><br/></font>
</td></tr></table>
<br><br><br>
            </div>

            <div class="contenu_onglet" id="contenu_onglet_contexte">
<br><br><br>
                Bla bla bla bla bla bla bla<br><br><br>
</div>
            </div>

            <div class="contenu_onglet" id="contenu_onglet_pv">
<br><br><br>
Bla bla bla bla bla bla bla
<br><br><br>
            </div>

      <div class="contenu_onglet" id="contenu_onglet_jk">
<br><br><br>
Bla bla bla bla bla bla bla
<br><br><br>
            </div>

<div class="contenu_onglet" id="contenu_onglet_mn">
<br><br><br>
Bla bla bla bla bla bla bla
<br><br><br>
            </div>

<div class="contenu_onglet" id="contenu_onglet_pq">
<br><br><br>
Bla bla bla bla bla bla bla
<br><br><br>
            </div>

<div class="contenu_onglet" id="contenu_onglet_st">
<br><br><br>
Bla bla bla bla bla bla bla
<br><br><br>
            </div> 

<div class="contenu_onglet" id="contenu_onglet_vw">
<br><br><br>
Bla bla bla bla bla bla bla
<br><br><br>
            </div>

        </div>
    </div>
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'accueil';
                change_onglet(anc_onglet);
        //-->
        </script>


Et ça dans ton css

Code:
.onglet {
display:inline-block;
margin-left:5px;
padding:2px;
border:1px solid #000000;
cursor:pointer;
background-color: #000000;
 color : #5C524C;
font-family: Georgia;
font-size: 13px;;
}
.onglet_0 {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;}
.onglet_1 {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
background: #111111;
padding-bottom:3px;
}
.contenu_onglet {
-moz-border-radius: 20px;
background-color: #000000;
 color : #5C524C;
font-family: Georgia;
margin-top:-1px;
padding-left:15px;
padding-right:5px;
display:none;
width: 450px;
-moz-box-shadow:#262626 2px 1px 6px ;
text-align: justify;
}
a.info {
  position:relative;
}
a.info:hover {
  background: none;
  z-index: 999;
}
a.info span {display: none;}
a.info:hover span {
display: inline;
  position: absolute;
  top: 15px;
left: -25px;
width: 350px;
background-color: #242222;
  padding: 3px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: #000000 3px 8px 6px;
font-family: Verdana;
color: #5C524C;
text-shadow: #000000 2px 2px 3px;
}
MessageSujet: Re: Infobulles qui posent soucis   Infobulles qui posent soucis EmptyMar 31 Aoû 2010, 05:13
Revenir en haut Aller en bas
http://devil-tears.forumactif.org/
OceanSoul
OceanSoul
{ Membre }
{ Membre }

Féminin Messages : 137



Infobulles qui posent soucis Empty
Ca ne fonctionne pas Oo
J'ai même perdu tout l'aspect de mon onglet y tout =S

EDIT; ah si ça marche en fait, merci merci merci <3 Smack Smack Smack Smack
Par contre ça me souligne le texte en orange, c'est normal?
MessageSujet: Re: Infobulles qui posent soucis   Infobulles qui posent soucis EmptyMar 31 Aoû 2010, 05:16
Revenir en haut Aller en bas
http://vampirediaries.forum-actif.net/index.htm
Chucky
{ Membre }
{ Membre }

Masculin Messages : 47



Infobulles qui posent soucis Empty
Est-ce que je peux voir le forum?^^
MessageSujet: Re: Infobulles qui posent soucis   Infobulles qui posent soucis EmptyMar 31 Aoû 2010, 05:20
Revenir en haut Aller en bas
http://devil-tears.forumactif.org/
OceanSoul
OceanSoul
{ Membre }
{ Membre }

Féminin Messages : 137



Infobulles qui posent soucis Empty
J'ai réussit à résoudre ce petit soucis en fait.
Par contre quand je veux mettre un lien dans l'infobulle, il se retrouve en dehors à la suite du texte de base Oo
MessageSujet: Re: Infobulles qui posent soucis   Infobulles qui posent soucis EmptyMar 31 Aoû 2010, 05:24
Revenir en haut Aller en bas
http://vampirediaries.forum-actif.net/index.htm
Chucky
{ Membre }
{ Membre }

Masculin Messages : 47



Infobulles qui posent soucis Empty
Est-ce que tu peux me donner un apperçu du problème ou bien le lien vers la page?
MessageSujet: Re: Infobulles qui posent soucis   Infobulles qui posent soucis EmptyMar 31 Aoû 2010, 05:32
Revenir en haut Aller en bas
http://devil-tears.forumactif.org/
OceanSoul
OceanSoul
{ Membre }
{ Membre }

Féminin Messages : 137



Infobulles qui posent soucis Empty
C'est bon en fait, j'ai réussit à résoudre mon soucis *pas taper*
Merci beaucoup pour ton aide en tout cas Calins
MessageSujet: Re: Infobulles qui posent soucis   Infobulles qui posent soucis EmptyMar 31 Aoû 2010, 05:33
Revenir en haut Aller en bas
http://vampirediaries.forum-actif.net/index.htm
Chucky
{ Membre }
{ Membre }

Masculin Messages : 47



Infobulles qui posent soucis Empty
Mdr pas de soucis^^

Bonne continuation^^
MessageSujet: Re: Infobulles qui posent soucis   Infobulles qui posent soucis EmptyMar 31 Aoû 2010, 05:38
Revenir en haut Aller en bas
Contenu sponsorisé




Infobulles qui posent soucis Empty
MessageSujet: Re: Infobulles qui posent soucis   Infobulles qui posent soucis Empty
Revenir en haut Aller en bas
 

Infobulles qui posent soucis

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

 Sujets similaires

-
» Infobulles qui se décalent
» Questions sur les infobulles
» Infobulles capricieuses ><
» Couleurs dans infobulles
» Infobulles & liens zarb'.

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-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

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