infobulle

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu infobulle

Message par pierre du 31 Dim 4 Nov 2012 - 22:28

Bonjours, j'ai une page html qui est contenu dans une frame sur la page d'accueil, et dans cet html je n'arrive pas a mettre d'infobulle avec lien du profil, lien de contact et un image.

J'ai testé plusieurs sortes mais jamais de succes.

voici le code en entier de la page html :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thèmes F.A, la pub</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none; }

body {
font-family: Times New Roman, Arial, sans-serif;
  font-size: 12px;
  margin:10px;
border: 50px
}

a{
text-decoration: none;
outline: none;
}

img{
border: none;
outline: none;
}
#fond_principal{           
padding:5px;
width:580px;                 
position:absolute;
z-index:2;
margin: 10px;
background-color: #fff;
background-image: url('http://i32.servimg.com/u/f32/13/72/93/95/df10.jpg');
border: 2px dotted #4a4a4a;
-moz-border-radius: 10px;
-webkit-border-radius: 10px ;
border-radius:10px;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow:  0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
background-color: #808080;
border: 1px solid #7f7f7f;
background: #f5f6f6;
background: -moz-linear-gradient(top, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(21%,#dbdce2), color-stop(49%,#b8bac6), color-stop(80%,#dddfe3), color-stop(100%,#f5f6f6));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 );
}

.bouton{ 
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/r210.jpg');
background-position: top left;                       
color:#fff;
cursor:pointer;
font-weight:bold;
font-size: 14px;
padding:5px;
margin : 3px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.bouton:hover{ 
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/r310.jpg');
background-position: top left;         
}

.bouton_actif{
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/r310.jpg');
background-position: top left;
}
.bouton_actif:hover{
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/r110.jpg');
background-position: top left;
}
.bouton_container{   
width: 120px;
float: left;
}

.contenu_accordeon{   
padding:8px;
background:#fff;
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/d14.jpg');
border : 1px dotted #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px ;
border-radius:10px;
background: #959595;
background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 );
}

.tout_accordeon{             
width: 456px;
float: right;
}

.titre_haut{
color: #000;
text-align: center;
font-family: Century Gothic, Georgia, "sans-serif";
font-size: 16px;
font-style: italic;
text-shadow: 0px 0px 2px #ffffff;
}

.titre_haut:hover {
font-style: normal;
text-shadow: 0px 0px  2px #CC0000;
}

.fond_1{
vertical-align: top;
padding: 5px;
border: 1px solid #7f7f7f;
background-color: #fff7f7;
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/t110.png');
-moz-box-shadow: 1px 2px 3px #000;
-webkit-box-shadow: 1px 2px 3px #000;
box-shadow: 1px 2px 3px #000;
background: #e2e2e2;
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 );
-moz-border-radius: 10px;
-webkit-border-radius: 10px ;
border-radius:10px;
}
.text_1{
font-size: 10px;
}
.im_bout{
float: left;
}
.im_bout:hover{
margin-left: 3px;
}


</style><center>
<script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/accordeon_effet.js"></script>
</head>
<body onload="new Accordian('fond_principal',5,'bouton_actif');"><div id="fond_principal" ><div class="bouton_container"><div id="ouvrir1-selection" class="bouton bouton_actif"><div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" /></div> BOUTON 1</div><div id="ouvrir2-selection" class="bouton" ><div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" /></div> BOUTON 2
</div><div id="ouvrir3-selection" class="bouton" ><div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" /></div> BOUTON 3</div><div id="ouvrir4-selection" class="bouton" ><div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" /></div> BOUTON 4</div><div id="ouvrir5-selection" class="bouton" ><div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" /></div> BOUTON 5</div>
</div><div class="tout_accordeon"><div id="ouvrir1-content"><div class="contenu_accordeon"><div class="fond_1"><div class="titre_haut">♣ <B>Sed ut perspiciatis unde omnis iste natus</B>  ♣</div>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>

</div>
</div>
 <div id="ouvrir2-content"><div class="contenu_accordeon">
   
<table width="100%">
<tbody>
<tr>
<td width="33%"  class="fond_1"><div class="titre_haut" style="border-bottom: 1px solid #000;"><div align=center>Un titre</div></div>
  ♣ testestttttttttttttttttttttttttttttttttttttttttttttttt
tttttttttttttttttttttttttttttttttttt
ttttttttttttttttttttttttttttttttttttttttt
♣ 
</td>
<td width="33%" class="fond_1"><div class="titre_haut" style="border-bottom: 1px solid #000;"><div align=center>Un titre</div></div>
  ♥ Nemo enim ipsam voluptatem quia voluptas sit aspernatur  sed quia

♥ voluptatem sequi nesciunt. Neque porro

♥ adipisci velit, sed quia non numquam  aperiam,
</td>
<td width="33%" class="fond_1"><div class="titre_haut" style="border-bottom: 1px solid #000;"><div align=center>Un titre</div> </div>
♦  nihil molestiae consequatur, vel illum fugiat

♦ aspernatur aut odit aut fugit, quia . aperiam,

♦ Neque porro quisquamnterons pariatur?
</td>
</tr>
</tbody>
</table>
</div>
</div>
 <div id="ouvrir3-content"><div class="contenu_accordeon">


<table width="100%">
<tbody>
<tr>
<td width="40%" class="fond_1">
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue;



</td>

<td width="60%" class="fond_1">
Nullam lorem ipsum, convallis eleifend, congue placerat, dictu Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
Nullam lorem ipsum, convallis eleifend, congue placerat, dictu Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
</td>
</tr>
</tbody>
</table>

</div>
</div><div id="ouvrir4-content"><div class="contenu_accordeon"><div class="fond_1">


But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure,
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure,
 
</div>


</div>
</div>
<div id="ouvrir5-content"><div class="contenu_accordeon">
  <div class="fond_1">
BLA BLA POUR VOIR LE RESULTAT


laoreet nec, consequat quis, iaculis non, tortor. Nunc sed purus. Sed metus. Donec posuere. Pellentesque porttitor tortor non eros. Ut rutrum erat a nunc. Duis non erat et orci viverra mollis. Sed lacinia velit a magna. BLA BLA POUR VOIR LE RESULTAT


laoreet nec, consequat quis, iaculis non, tortor. Nunc sed purus. Sed metus. Donec posuere. Pellentesque porttitor tortor non eros. Ut rutrum erat a nunc. Duis non erat et orci viverra mollis. Sed lacinia velit a magna.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.

</div>

</div>
</div>

</div>

</div>

</body></center>


La partie ou ce devrai ce situés les infobulles :
Code:
 <div id="ouvrir2-content"><div class="contenu_accordeon">
   
<table width="100%">
<tbody>
<tr>
<td width="33%"  class="fond_1"><div class="titre_haut" style="border-bottom: 1px solid #000;"><div align=center>Un titre</div></div>
  ♣ testestttttttttttttttttttttttttttttttttttttttttttttttt
tttttttttttttttttttttttttttttttttttt
ttttttttttttttttttttttttttttttttttttttttt
♣ 
</td>
<td width="33%" class="fond_1"><div class="titre_haut" style="border-bottom: 1px solid #000;"><div align=center>Un titre</div></div>
  ♥ Nemo enim ipsam voluptatem quia voluptas sit aspernatur  sed quia

♥ voluptatem sequi nesciunt. Neque porro

♥ adipisci velit, sed quia non numquam  aperiam,
</td>
<td width="33%" class="fond_1"><div class="titre_haut" style="border-bottom: 1px solid #000;"><div align=center>Un titre</div> </div>
♦  nihil molestiae consequatur, vel illum fugiat

♦ aspernatur aut odit aut fugit, quia . aperiam,

♦ Neque porro quisquamnterons pariatur?
</td>
</tr>
</tbody>
</table>
</div>
</div>


J'ai essayer ceci :
Code:
<div id="tfa_legende5">
        <figure>                     
              <img src="http://i45.servimg.com/u/f45/11/95/30/70/lju5510.jpg" alt="" />
              <figcaption>
                    Ici les infos qui s'afficheront au survol de l'avatar<br />
                    <a href="#profil">Profil</a>    <a href="#mp">MP</a>
              </figcaption>
          </figure>
 </div>

Avec son css:
Code:
/* BLOC LÉGENDE */
#tfa_legende7 figure{
background: #49a7ff;
position: relative;
width: 100px;
overflow:hidden;
margin: 5px;
border: 3px solid #c30404;
display:inline-block;
}
/* LÉGENDE */
#tfa_legende7 figcaption{
position: absolute;
background: url('http://i45.servimg.com/u/f45/11/95/30/70/5017.png') transparent;
color: #000;
text-align: center;
width:90px;
height: 60px;
-webkit-transition: all 0.5s ease; /* pour navigateur webkit */
-moz-transition: all 0.5s ease; /* pour navigateur mozilla */
-o-transition: all 0.5s ease; /* pour navigateur opera */
transition: all 0.5s ease; /* pour les navigateurs récents */
left: 0;
bottom: -70px;
padding: 5px;
}
/* LÉGENDE AU SURVOL */
#tfa_legende7 figure:hover figcaption{
bottom: 0px;
}
/* AVATARS */
#tfa_legende7 figure img{
width: 90px;
margin: 5px auto;
}

Mais cela n'as eu aucun effet d'infobulle!


Dernière édition par pierre du 31 le Mer 7 Nov 2012 - 11:09, édité 1 fois
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par pierre du 31 Lun 5 Nov 2012 - 20:33

up
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par Invité Mar 6 Nov 2012 - 8:16

Salut pierre du 31,
pour les liens de contact, il suffit de passer le curseur
de ta souris pour voir le lien concerné et à insérer dans le code html.



Pour le profil:
Code:
<a class="info" href="Le lien du profil">Le profil du membre 1
<span>Le texte de l'infobulle pour le profil du membre 1</span></a>

Pour le premier membre enregistré (donc toi si tu es le fondateur);
ce sera ceci
Code:
/u1

à insérer après
Code:
 href="

Le code complet pour le profil:

Code:
<a class="info" href="/u1">Le profil du membre 1
<span>Le texte de l'infobulle pour le profil du membre 1</span></a>


Pour le MP:
Le code complet:

Code:
<a class="info" href="/privmsg?mode=post&u=1">Envoyer un MP au membre 1
<span>Le texte de l'infobulle pour le MP du membre 1</span></a>



Le code CSS:
Code:

/*Début de l infobulle*/

a.info
{
position:relative;
z-index:2;
color:#000;
text-decoration:none
}
 
a.info span
{
display: none

}
 
a.info:hover span
{
display:block;
position:absolute;
top:15px;
 left:2px;
width:150px;
border:1px solid #000;
background-color:#fff;
color:#000;
text-align: left;
padding:5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* Fin de l'infobulle */


Ta page html modifiée :

Spoiler:

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par pierre du 31 Mar 6 Nov 2012 - 12:28

Merci cela est parfais, par contre pour mettre tout cela sur une image exemple : infobulle 1-1

Avec le lien de profil et le lien de contact
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par Invité Mar 6 Nov 2012 - 14:46

Re , c'est la même chose pour le lien et avec une image,
c'est de cette façon:
Pour le profil:
Code:

<a class="info" href="/u1">
<img src="http://r28.imgfast.net/users/2812/11/77/21/avatars/1-1.jpg">
<span>Le texte de l'infobulle du membre 1</span>
</a>

Pour le MP:
Code:

<a class="info" href="/privmsg?mode=post&u=1">
<img src="http://r28.imgfast.net/users/2812/11/77/21/avatars/1-1.jpg">
<span>Le texte de l'infobulle du membre 1</span>
</a>


Ajoutes ceci dans ta feuille de style (CSS)
Code:
a.info img {display:block;margin:auto 0;}

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par pierre du 31 Mar 6 Nov 2012 - 15:41

Merci mais cela ne fonctionne toujours pas!

Mon code est sur un page html non sur a page d'accueil.
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par Invité Mar 6 Nov 2012 - 16:21

Re,
tu peux donner ta procédure pour déposer sur la page d'accueil stp Wink .

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par pierre du 31 Mar 6 Nov 2012 - 16:41

Alors j'ai le code sur la page html :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thèmes F.A, la pub</title>
<style type="text/css">
* { margin:0; padding:0; list-style:none; }

body {
font-family: Times New Roman, Arial, sans-serif;
  font-size: 12px;
  margin:10px;
border: 50px
}

a{
text-decoration: none;
outline: none;
}

img{
border: none;
outline: none;
}
#fond_principal{           
padding:5px;
width:580px;                 
position:absolute;
z-index:2;
margin: 10px;
background-color: #fff;
background-image: url('http://i32.servimg.com/u/f32/13/72/93/95/df10.jpg');
border: 2px dotted #4a4a4a;
-moz-border-radius: 10px;
-webkit-border-radius: 10px ;
border-radius:10px;
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow:  0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
background-color: #808080;
border: 1px solid #7f7f7f;
background: #f5f6f6;
background: -moz-linear-gradient(top, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f6), color-stop(21%,#dbdce2), color-stop(49%,#b8bac6), color-stop(80%,#dddfe3), color-stop(100%,#f5f6f6));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 );
}

.bouton{ 
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/r210.jpg');
background-position: top left;                       
color:#fff;
cursor:pointer;
font-weight:bold;
font-size: 14px;
padding:5px;
margin : 3px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.bouton:hover{ 
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/r310.jpg');
background-position: top left;         
}

.bouton_actif{
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/r310.jpg');
background-position: top left;
}
.bouton_actif:hover{
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/r110.jpg');
background-position: top left;
}
.bouton_container{   
width: 120px;
float: left;
}

.contenu_accordeon{   
padding:8px;
background:#fff;
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/d14.jpg');
border : 1px dotted #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px ;
border-radius:10px;
background: #959595;
background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#959595), color-stop(46%,#0d0d0d), color-stop(50%,#010101), color-stop(53%,#0a0a0a), color-stop(76%,#4e4e4e), color-stop(87%,#383838), color-stop(100%,#1b1b1b));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 );
}

.tout_accordeon{             
width: 456px;
float: right;
}

.titre_haut{
color: #000;
text-align: center;
font-family: Century Gothic, Georgia, "sans-serif";
font-size: 16px;
font-style: italic;
text-shadow: 0px 0px 2px #ffffff;
}

.titre_haut:hover {
font-style: normal;
text-shadow: 0px 0px  2px #CC0000;
}

.fond_1{
vertical-align: top;
padding: 5px;
border: 1px solid #7f7f7f;
background-color: #fff7f7;
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/t110.png');
-moz-box-shadow: 1px 2px 3px #000;
-webkit-box-shadow: 1px 2px 3px #000;
box-shadow: 1px 2px 3px #000;
background: #e2e2e2;
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 );
-moz-border-radius: 10px;
-webkit-border-radius: 10px ;
border-radius:10px;
}
.text_1{
font-size: 10px;
}
.im_bout{
float: left;
}
.im_bout:hover{
margin-left: 3px;
}


</style><center>
<script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/accordeon_effet.js"></script>
</head>
<body onload="new Accordian('fond_principal',5,'bouton_actif');"><div id="fond_principal" ><div class="bouton_container"><div id="ouvrir1-selection" class="bouton bouton_actif"><div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" /></div> BOUTON 1</div><div id="ouvrir2-selection" class="bouton" ><div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" /></div> BOUTON 2
</div><div id="ouvrir3-selection" class="bouton" ><div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" /></div> BOUTON 3</div><div id="ouvrir4-selection" class="bouton" ><div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" /></div> BOUTON 4</div><div id="ouvrir5-selection" class="bouton" ><div class="im_bout"><img src="http://i35.servimg.com/u/f35/11/95/30/70/t910.png" alt="" /></div> BOUTON 5</div>
</div><div class="tout_accordeon"><div id="ouvrir1-content"><div class="contenu_accordeon"><div class="fond_1"><div class="titre_haut">♣ <B>Sed ut perspiciatis unde omnis iste natus</B>  ♣</div>
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>

</div>
</div>
 <div id="ouvrir2-content"><div class="contenu_accordeon">
   
<table width="100%">
<tbody>
<tr>
<td width="33%"  class="fond_1"><div class="titre_haut" style="border-bottom: 1px solid #000;"><div align=center>Un titre</div></div>
  ♣ testestttttttttttttttttttttttttttttttttttttttttttttttt
tttttttttttttttttttttttttttttttttttt
ttttttttttttttttttttttttttttttttttttttttt
♣ 
</td>
<td width="33%" class="fond_1"><div class="titre_haut" style="border-bottom: 1px solid #000;"><div align=center>Un titre</div></div>
  ♥ Nemo enim ipsam voluptatem quia voluptas sit aspernatur  sed quia

♥ voluptatem sequi nesciunt. Neque porro

♥ adipisci velit, sed quia non numquam  aperiam,
</td>
<td width="33%" class="fond_1"><div class="titre_haut" style="border-bottom: 1px solid #000;"><div align=center>Un titre</div> </div>
♦  nihil molestiae consequatur, vel illum fugiat

♦ aspernatur aut odit aut fugit, quia . aperiam,

♦ Neque porro quisquamnterons pariatur?
</td>
</tr>
</tbody>
</table>
</div>
</div>
 <div id="ouvrir3-content"><div class="contenu_accordeon">


<table width="100%">
<tbody>
<tr>
<td width="40%" class="fond_1">
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue;



</td>

<td width="60%" class="fond_1">
Nullam lorem ipsum, convallis eleifend, congue placerat, dictu Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
Nullam lorem ipsum, convallis eleifend, congue placerat, dictu Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.
</td>
</tr>
</tbody>
</table>

</div>
</div><div id="ouvrir4-content"><div class="contenu_accordeon"><div class="fond_1">


But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure,
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure,
 
</div>


</div>
</div>
<div id="ouvrir5-content"><div class="contenu_accordeon">
  <div class="fond_1">
BLA BLA POUR VOIR LE RESULTAT


laoreet nec, consequat quis, iaculis non, tortor. Nunc sed purus. Sed metus. Donec posuere. Pellentesque porttitor tortor non eros. Ut rutrum erat a nunc. Duis non erat et orci viverra mollis. Sed lacinia velit a magna. BLA BLA POUR VOIR LE RESULTAT


laoreet nec, consequat quis, iaculis non, tortor. Nunc sed purus. Sed metus. Donec posuere. Pellentesque porttitor tortor non eros. Ut rutrum erat a nunc. Duis non erat et orci viverra mollis. Sed lacinia velit a magna.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc sapien nibh, ultrices vitae, convallis eu, semper ut, leo. Cras nec pede.

</div>

</div>
</div>

</div>

</div>

</body></center>

et après le code sur la page d'accueil :

Code:
</script><div align=center><iframe src="http://peche-lac-riviere.forumactif.fr/h12-pa" style="background-color: transparent; height: 250px; width:1000px; overflow: hidden !important;"  frameborder="no"; scrolling="no" allowtransparency="true"></iframe></div>
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par Invité Mar 6 Nov 2012 - 17:36

Re,
le code ne fonctionne pas car dans il est dans l'iframe donc on va tricher un peu en
déposant un target
Comme ceci:
Code:
target="_parent"

Code:
<a class="info" href="/u1"target="_parent"><img src="http://r28.imgfast.net/users/2812/11/77/21/avatars/1-1.jpg"><span>Le texte de l'infobulle du membre 1</span></a>

on va déjà corriger ta page HTML:
supprimes tout le contenu et insères ceci:
Spoiler:

J'ai volontairement diminué la largeur de 1000px a 630px et center ton menu ensuite Wink .

Ensuite dans ta page d'accueil, supprimes tout le contenu et insères ceci:
Code:
<center><iframe src="http://peche-lac-riviere.forumactif.fr/h12-pa" style="background-color: transparent; height: 280px; width:630px; overflow: hidden !important;"  frameborder="no"; scrolling="no" allowtransparency="true"></iframe></center>



a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par pierre du 31 Mar 6 Nov 2012 - 17:43

Merci, mais l'iframe ne s'affiche pas.
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par Invité Mar 6 Nov 2012 - 17:47

Re,

Tu as copié le code dans la même page créée ??

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par pierre du 31 Mar 6 Nov 2012 - 17:51

J'avais n code erroné dans ma page d'accueil, merci ça fonctionne mais l’infobulle n'as pas l’effet voulu!
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par Invité Mar 6 Nov 2012 - 17:52

pierre du 31 a écrit: mais l’infobulle n'as pas l’effet voulu!

Oui, c'est à dire ?
a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par pierre du 31 Mar 6 Nov 2012 - 17:55

J'aurai voulu que un effet comme sur les légendes animés vers le haut de cette page: http://galactikav2.forumactif.com/#axzz2BSjKilfM
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par Invité Mar 6 Nov 2012 - 18:01

Re,

il y a une différence entre les infobulles et les légendes mon ami Wink .

Donc on va essayait d'être concret afin d'avancer rapidement Wink .

Tu désires qu'au passage de la souris sur un lien quelconque qu'il y ait une infobulle
avec un effet de transition ??

a++

Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par pierre du 31 Mar 6 Nov 2012 - 18:09

oui, effet de transition sur une image avec lien profil et contact.

Bien cordialement.
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par Invité Mar 6 Nov 2012 - 19:19

Re,
voilà mon ami,
ton image est de couleur blanche donc j'ai déposé un survol de couleur rouge afin d'avoir un résultat
correcte Wink .
Supprimes tout le code de ta page HTML et insères ceci:
Spoiler:
a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par pierre du 31 Mar 6 Nov 2012 - 20:43

Merci, pour séparer légèrement les 2 bouton (mp et profil) ainsi que mettre un survol noir je fais comment?
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par Invité Mer 7 Nov 2012 - 6:12

Salut pierre du 31,
pour l'espace entre Profil et M.P , il faut insérer un code qui ne peut être lu sur les
messages ici.

Regarde chez moi pour les codes:
https://milouze14.error/Espace.html

Donc ajoute autant d'espace entre:
Code:

<a href="/u1"target="_parent">Profil</a>
METTRE LES CODES ESPACES ICI
<a href="/privmsg?mode=post&u=1"target="_parent">M.P</a>




Pour la couleur de fond en noir, j'ai changé la couleur et donné des explications dans la CSS Wink .
Adapte la couleur de police, de fond comme bon te semble.

Ta page HTML modifiée:
Spoiler:
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: infobulle

Message par pierre du 31 Mer 7 Nov 2012 - 11:09

Merci c'est parfais!
pierre du 31

pierre du 31
*****

Masculin
Messages : 990
Inscrit(e) le : 08/08/2011

http://peche-lac-riviere.forumactif.fr/
pierre du 31 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum