Sujets similaires

Bonjour bonsoir !

Voilà quelques jours que je me prends la tête sur une infobulle (grande première pour moi et je me suis lancée un peu trop vite dedans).
Tout d'abord, voici un lien vers le message avec l'infobulle en question : http://brotherhood.forumactif.fr/t1-votre-1er-sujet#4 (il s'agit d'infobulles apparaissant au niveau des personnages en lien, dans les petits cadres sur la droite)
Les problèmes :

je me repère correctement dans tout le code mais je pense qu'il y a moyen de le simplifier (seulement, je me suis lancée dans une infobulle créée par des mélanges de divers codes et donc, ça ne ressemble plus à grand chose).
l'infobulle se plaque sur le côté gauche du message (je n'arrive pas à la déplacer avec des changements de position, des margin ou des padding...). Je voudrais qu'elle s'affiche à côté de la souris (donc du cadre du personnage survolé).
en parlant d'infobulle apparaissant à côté de ma souris, y a-t-il un code qui me permettrait qu'elle apparaisse toujours à côté de la souris (donc ne pas utiliser un code de position avec top:xx, left:xx etc.). En effet, vu que je vais avoir plusieurs personnages en lien et donc, plusieurs petites images sur le côté auxquelles associées une infobulle, ça serait sympa de se contenter d'un code de position global pour toutes ces infobulles (seules les images et le texte varieraient dedans)
l'infobulle se déforme également vers le haut, je ne sais pas pourquoi (j'avais fait un test en plaçant l'image avec infobulle en bas du message et alors, pas de déformation, ni de problème de positionnement)

En fait, je voudrais que mon infobulle ressemble vaguement à ça, niveau structure

Spoiler:

Alors, voici mon vilain code :

Code:: <a class="imginfo" style="position:absolute;"><img src="http://img4.hostingpics.net/pics/551780amberausten.png" style="position:absolute; margin-top:80px;width:70px;height:73px; left:450px;" /></font><span><table width="250" height="140" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="text-align: left;"><a class="imginfo"><img src="http://img4.hostingpics.net/pics/132691amberpng2.png" style="position:absolute;"/></a></td><td style="text-align: left; right:35px;position:absolute;"><font-size="1"><font-color="AC0D45">Amber Austen</font></font></td></tr>

<tr><td >
<br>
<div class="lienpv"><font size="1">Adison sait qu'Amber ne démérite pas au sein des Thêta. La jeune fille véhicule une image positive de la sororité, malgré ses anciennes frasques, grâce à ses belles aspirations (et surtout son statut de petite fille riche). Pourtant, Adison n'imagine en aucun cas lui céder la moindre parcelle d'influence auprès de leurs sœurs. On est Reine où on ne l'est pas...<br/></font></div></td></tr>

</tbody></table></span>

Et le CSS modifié/remodifié/reremodifié suite à ces problèmes mais qui n'ont pas bougé d'un poil

Code:: a.imginfo {
position: relative;
color: #7d7d7d;
text-decoration: none;
border-bottom: 0px #7d7d7d solid; /* on souligne le texte */

}

a.imginfo span {
display: none; /* on masque l'infobulle */

position: absolute;

}
a.imginfo:hover span, a.imginfo1:focus span{
transform:scale(1);
}
a.imginfo: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.imginfo:hover span {
display: block; /* on affiche l'infobulle */
position: absolute;
top: 100%;
margin-left:10px
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é */
background: white;
color: 7d7d7d;
padding: 3px;
border: 0px solid grey;
border-radius: 30px 30px 30px 30px;
-webkit-border-radius: 30px 30px 30px 30px;
-o-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px;
transform:scale(0) ;

}

.lienpv
{
width:230px;
white-space:normal;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
Line-Height: 8pt;
text-align:left;
margin-left:10px;

}

En espérant que mon message ne soit pas un casse-tête à comprendre (j'ai essayé de clarifier le plus possible mais vu que le problème se déclinait en un tas de petits problèmes...)

Merci d'avance Une infobulle capricieuse - position & déformation 577704309

Une infobulle capricieuse - position & déformation 577704309

Hello

Mon premier conseil serait que tu... laisses tomber le code que tu utilises, pour utiliser plutôt ce tutoriel. En effet, la méthode que tu utilises comporte une erreur sémantique assez grave qu'il convient de rectifier avant d'aller plus loin Wink

C'est plus ou moins expliqué dans le tutoriel vers lequel je t'envoie.

Pense également à remplacer tous tes attributs style par des classes, ça te facilitera toute mise à jour ultérieure.

De même, évite les balises de mise en forme du genre <font> qui sont obsolètes

Code:: <font-size="1"><font-color="AC0D45">Amber Austen</font></font>

Qui correspondrait plutôt à ça :

Code:: <span class="titre">Amber Austen</span>

Code:: .titre{
font-size:10px;
color:#AC0D45;
}

A titre personnel ma version de ton code serait ceci :

Code:: <div class="infobulle"><img src="URL_IMG" alt="" /><div><h1>Nom du personnage</h1><img src="URL_IMG_2" alt="" /><p>Description du personnage Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p></div></div>

(Les  sont des commentaires HTML, sachant que tout ce qui est ENTRE ces deux symboles n'est pas interprété, ça me permet de sauter de ligne (plus propre à la lecture) sans que ça soit pris en compte en "sortie", le forum lira ça :

Code:: <div class="infobulle"><img src="URL_IMG" alt="" /><div><h1>Nom du personnage</h1><img src="URL_IMG_2" alt="" /><p>Description du personnage Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p></div></div>

Bonjour,

Cela fait cinq jours que ce sujet reste sans réponse. Ce problème est-il toujours d'actualité ? As-tu trouvé l'explication de 'Christa satisfaisante? Une infobulle capricieuse - position & déformation 510527

Une infobulle capricieuse - position & déformation 510527

Rappel : si nous n'avons toujours pas de nouvelle d'ici quatre jours, ce sujet rejoindra les archives. Wink

Merci de ta compréhension. Une infobulle capricieuse - position & déformation 926145

Désolée de ne pas avoir répondu, j'avais bien vu ton message mais je n'avais pas pu répondre car j'étais à mon école (et puis après, j'ai eu trop de travail, impossible de me connecter). BREF ! Grand merci en tout cas d'avoir répondu aussi rapidement !

Alors ! J'ai tout changé ! Pour le code html, j'ai suivi ton code et pour le CSS, j'ai suivi le tuto que tu m'as recommandé ! (très bien d'ailleurs et que je n'avais pas vu avant!)

Problème ! Pas d'infobulle en soit (le texte s'affiche derrière mon image de fond de message, c'est un gros bazar) et en plus, les propriétés (telles que la couleur etc.) ne sont pas appliquées.

Spoiler:

Mais quand on passe la souris dessus, une infobulle apparait quand même avec les propriétés

Spoiler:

Je ne sais pas trop où ça coince... Je suis peut-être un peu trop fatiguée pour m'en rendre compte, je ne sais pas. Peut-être que cela vient du reste du code mon message, du coup, je vais le donner en entier ainsi que le CSS! Au cas où..

Code:: <div class="theta" >
<p class="pvlibre">Ce personnage est [b]LIBRE[/b]</p>

<img id="img_2" src="http://24.media.tumblr.com/tumblr_m8cc6fY9Zz1rasb9co1_500.gif" />
<img id="img_3" src="http://img15.hostingpics.net/pics/936535pompon.png" / >

<link href='http://fonts.googleapis.com/css?family=Engagement' rel='stylesheet' type='text/css'><p class="pvstat" style="font-family: 'Engagement', cursive;; font-size:45px;">[i]Adison Connor[/i]</p>
<link href='http://fonts.googleapis.com/css?family=Engagement' rel='stylesheet' type='text/css'><p class="pvstat" style="font-family: 'Engagement', cursive;; font-size:20px;">[color=black]6eme année[/color]</p>
<link href='http://fonts.googleapis.com/css?family=Engagement' rel='stylesheet' type='text/css'><p class="pvrang" style="font-family: 'Engagement', cursive;; font-size:20px;">Reine du Campus</p>

<img id="img_4" src="http://img15.hostingpics.net/pics/675345texte4.png" / >

<p class="histoire" style="font-size:10px; Line-Height: 8pt;">Si les Thêta ont toujours eu la réputation d'être des pestes prestigieuses, l'arrivée à leur tête d'Adison n'a sans doute pas aidé à faire mentir les ouï-dire...d'autant que les étudiants n'auraient pas pu rêver meilleure source de rumeurs qu'elle.

Tout à fait grandiose dans son genre, Adison est tyrannique et lunatique ; mais non contente d'avoir instauré une véritable monarchie de charme au sein d'Harvard, cette femme de pouvoir charismatique, que beaucoup surnomment (ironiquement ou non) « la Reine », ne craint pas de jouer de son autorité forcenée auprès des étudiants étrangers à sa sororité. On raconte même que certains professeurs en ont fait les frais...

Paradoxalement, ses courtisanes et ses amis ont appris à la craindre sans jamais se lasser de cette folie mystérieuse qui l'habite, et non pas seulement à cause du respect qu'elle leur inspire. Adison a en effet cela de fascinant qu'elle parvient à faire rire par sa brusquerie, voire à émouvoir.

Sa personnalité tout à fait atypique en fait un leader d'exception à Harvard, à qui la popularité des Thêta doit certainement beaucoup. Difficile dans ces conditions d'imaginer qu'elle puisse un jour être remplacée...Finement stratège, elle laisse d'ailleurs volontairement dans le flou ses deux suiveuses Amber et Tess quant à leur projet de succession, et se joue de leurs ambitions. Alors, est-ce que la Reine est indétrônable ?</p>

<div class="infobullepv1"><img src="http://img4.hostingpics.net/pics/551780amberausten.png" alt="" /><div><h1>Amber Austen</h1><img src="http://img4.hostingpics.net/pics/132691amberpng2.png" class="pvimage" /><p class="lienpv">Adison sait qu'Amber ne démérite pas au sein des Thêta. La jeune fille véhicule une image positive de la sororité, malgré ses anciennes frasques, grâce à ses belles aspirations (et surtout son statut de petite fille riche). Pourtant, Adison n'imagine en aucun cas lui céder la moindre parcelle d'influence auprès de leurs sœurs. On est Reine où on ne l'est pas...</p></div></div>

Code:: /* Postes vacants */
.theta {
position: relative;
background: #c2de8a url(http://img15.hostingpics.net/pics/822724theta1.png);
background-repeat: no-repeat;
   background-position: top left;
height:700px;
}
#img_2 {
height: 175px;
width: 330px;
position: absolute;
margin-top:15px;
margin-left:95px;
}
#img_3 {
position: absolute;
top:50px;
left: 30px;
height:102px;
width:126px;
}
#img_2,.pvlibre{
-webkit-transform: rotate(-9deg);
-moz-transform: rotate(-9deg);
-ms-transform: rotate(-9deg);
-o-transform: rotate(-9deg);
transform: rotate(-9deg);
font-family:Times New Roman,Georgia,Verdana,serif;
}
   #img_4 {
position: absolute;
top:310px;
left: 80px;
height:350px;
width:375px;
z-index:2;
}
.pvlibre {
position:absolute;
top:30px;
left:155px;
}
.pvlibre strong {
text-decoration:underline ;
color:green;
}

.pvstat {
   position:absolute;
top:277px;
left:175px;
font-family:Times New Roman,Georgia,Verdana,serif;
color:#af1e58;
z-index:3;
}
.pvrang
{
position:absolute;
top:330px;
left:300px;
font-family:Times New Roman,Georgia,Verdana,serif;
color:#8FBB35;
z-index:3;

}

.histoire {
position:absolute;
left:150px;
top:370px;
width:260px;
height:250px;
z-index:3;
scroll: auto, hidden;
overflow:auto;
}

div.infobullepv1 {
position: relative; /* on définit le bloc comme élément de référence */
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

.div.infobulle > div{
display: none; /* ceci masque l'infobulle */
}

div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on s'arrange pour que notre bloc soit au dessus des autres en cas de conflit */
}

/* Lorsqu'on survole le contenu du bloc */
div.infobulle:hover > div{
display: block; /* ceci affiche l'infobulle (on peut aussi utiliser inline au lieu de block) */

/* on positionne notre infobulle par rapport au bloc conteneur */
position: absolute;
top: 5px; /* 5px par rapport au haut du bloc .infobulle */
left: 15px; /* 15 px par rapport à la gauche du bloc .infobulle */

/* Et puis on rajoute tous les éléments de mise en forme de l'infobulle */
background: #ebebeb; /* arrière-plan de l'infobulle */
color: black; /* texte dans l'infobulle */
padding: 3px; /* marges internes par rapport aux bords */
}

.lienpv
{
width:230px;
white-space:normal;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
Line-Height: 8pt;
text-align:left;
margin-left:10px;

}

.pvimage
{
position:relative;
}

Tout ce qui concerne l'infobulle se trouve vers le bas des codes

Plop x)

Je pense que ça vient du fait que tu as renommé la classe de l'infobulle en "infobullepv1" et du coup toute la suite du CSS ne s'applique pas, évidemment.

Si tu souhaites faire un distingo d'apparence entre différents PV, je te conseille plutôt d'associer plusieurs classes, comme ça :

Code:: <div class="infobulle pv1">
blabla
</div>

Code:: .infobulle {
/* les différentes propriétés "générales" pour la classe infobulle */
}

.pv1 {
/* les propriétés spécifiques au pv1 */
}

Les classes infobulle et pv1 seront appliquées toutes les deux.

Ah mais je suis trop bête, j'ai oublié d'éditer mon message ! J'avais bien remodifié par la suite mon CSS en appliquant "infobullepv1" partout mais ça ne réglait pas du tout le problème !

Je vais appliquer ce que tu me recommandes mais je sais pas si du coup ça va être la solution. Mais j'essaye, j'essaye xD La magie du codage parfois

EDIT: je viens aussi de me rendre compte que ma co-admin utilise déjà la classe "infobulle" pour des infobulles dans la page d'accueil qui n'ont rien à voir avec les miennes.

Du coup, j'ai testé avec ta solution en mettant une class "infobulle descpv" mais bon, rien à faire, le problème n'est toujours pas réglé, ça ne change rien...

Si la classe infobulle est déjà utilisée, il va falloir en utiliser une autre ! Genre "InfoPV" ou quelque chose de ce genre.

En faisant bien attention à tout bien remplacer tant dans le HTML que dans le CSS Wink

Oui, c'est ce que j'avais fait. Pour le coup, j'ai également donné un autre nom aux infobulles de la PA, au cas où.
Je remets mon bout de CSS et mon message html en espérant que le problème soit juste que je sois bigleuse (un texte que j'aurai oublié de modifier ou quelque chose du genre) mais à priori non, c'est toujours pas ça...

Code:: <div class="theta" >
<p class="pvlibre">Ce personnage est [b]LIBRE[/b]</p>

<img id="img_2" src="http://24.media.tumblr.com/tumblr_m8cc6fY9Zz1rasb9co1_500.gif" />
<img id="img_3" src="http://img15.hostingpics.net/pics/936535pompon.png" / >

<link href='http://fonts.googleapis.com/css?family=Engagement' rel='stylesheet' type='text/css'><p class="pvstat" style="font-family: 'Engagement', cursive;; font-size:45px;">[i]Adison Connor[/i]</p>
<link href='http://fonts.googleapis.com/css?family=Engagement' rel='stylesheet' type='text/css'><p class="pvstat" style="font-family: 'Engagement', cursive;; font-size:20px;">[color=black]6eme année[/color]</p>
<link href='http://fonts.googleapis.com/css?family=Engagement' rel='stylesheet' type='text/css'><p class="pvrang" style="font-family: 'Engagement', cursive;; font-size:20px;">Reine du Campus</p>

<img id="img_4" src="http://img15.hostingpics.net/pics/675345texte4.png" / >

<p class="histoire" style="font-size:10px; Line-Height: 8pt;">Si les Thêta ont toujours eu la réputation d'être des pestes prestigieuses, l'arrivée à leur tête d'Adison n'a sans doute pas aidé à faire mentir les ouï-dire...d'autant que les étudiants n'auraient pas pu rêver meilleure source de rumeurs qu'elle.

Tout à fait grandiose dans son genre, Adison est tyrannique et lunatique ; mais non contente d'avoir instauré une véritable monarchie de charme au sein d'Harvard, cette femme de pouvoir charismatique, que beaucoup surnomment (ironiquement ou non) « la Reine », ne craint pas de jouer de son autorité forcenée auprès des étudiants étrangers à sa sororité. On raconte même que certains professeurs en ont fait les frais...

Paradoxalement, ses courtisanes et ses amis ont appris à la craindre sans jamais se lasser de cette folie mystérieuse qui l'habite, et non pas seulement à cause du respect qu'elle leur inspire. Adison a en effet cela de fascinant qu'elle parvient à faire rire par sa brusquerie, voire à émouvoir.

Sa personnalité tout à fait atypique en fait un leader d'exception à Harvard, à qui la popularité des Thêta doit certainement beaucoup. Difficile dans ces conditions d'imaginer qu'elle puisse un jour être remplacée...Finement stratège, elle laisse d'ailleurs volontairement dans le flou ses deux suiveuses Amber et Tess quant à leur projet de succession, et se joue de leurs ambitions. Alors, est-ce que la Reine est indétrônable ?</p>

<div class="infoPV"><img src="http://img4.hostingpics.net/pics/551780amberausten.png" class="pvimage1" /><div><h1>Amber Austen</h1><img src="http://img4.hostingpics.net/pics/132691amberpng2.png" class="pvimage2" /><p class="lienpv">Adison sait qu'Amber ne démérite pas au sein des Thêta. La jeune fille véhicule une image positive de la sororité, malgré ses anciennes frasques, grâce à ses belles aspirations (et surtout son statut de petite fille riche). Pourtant, Adison n'imagine en aucun cas lui céder la moindre parcelle d'influence auprès de leurs sœurs. On est Reine où on ne l'est pas...</p></div></div>

</div>

Code:: /* Postes vacants */
.theta {
position: relative;
background: #c2de8a url(http://img15.hostingpics.net/pics/822724theta1.png);
background-repeat: no-repeat;
   background-position: top left;
height:700px;
}
#img_2 {
height: 175px;
width: 330px;
position: absolute;
margin-top:15px;
margin-left:95px;
}
#img_3 {
position: absolute;
top:50px;
left: 30px;
height:102px;
width:126px;
}
#img_2,.pvlibre{
-webkit-transform: rotate(-9deg);
-moz-transform: rotate(-9deg);
-ms-transform: rotate(-9deg);
-o-transform: rotate(-9deg);
transform: rotate(-9deg);
font-family:Times New Roman,Georgia,Verdana,serif;
}
   #img_4 {
position: absolute;
top:310px;
left: 80px;
height:350px;
width:375px;
z-index:2;
}
.pvlibre {
position:absolute;
top:30px;
left:155px;
}
.pvlibre strong {
text-decoration:underline ;
color:green;
}

.pvstat {
   position:absolute;
top:277px;
left:175px;
font-family:Times New Roman,Georgia,Verdana,serif;
color:#af1e58;
z-index:3;
}
.pvrang
{
position:absolute;
top:330px;
left:300px;
font-family:Times New Roman,Georgia,Verdana,serif;
color:#8FBB35;
z-index:3;

}

.histoire {
position:absolute;
left:150px;
top:370px;
width:260px;
height:250px;
z-index:3;
scroll: auto, hidden;
overflow:auto;
}

div.infoPV {
position: absolute; /* on définit le bloc comme élément de référence */
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
z-index: 10
}

.div.infoPV > div{
display: none; /* ceci masque l'infobulle */
position: absolute;
}

div.infoPV:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on s'arrange pour que notre bloc soit au dessus des autres en cas de conflit */
}

/* Lorsqu'on survole le contenu du bloc */
div.infoPV:hover > div{
display: block; /* ceci affiche l'infobulle (on peut aussi utiliser inline au lieu de block) */

/* on positionne notre infobulle par rapport au bloc conteneur */
position: relative;
top: 5px; /* 5px par rapport au haut du bloc .infobulle */
left: 15px; /* 15 px par rapport à la gauche du bloc .infobulle */

/* Et puis on rajoute tous les éléments de mise en forme de l'infobulle */
background: #ebebeb; /* arrière-plan de l'infobulle */
color: black; /* texte dans l'infobulle */
padding: 3px; /* marges internes par rapport aux bords */
}

.lienpv
{
width:230px;
white-space:normal;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
Line-Height: 8pt;
text-align:left;
margin-left:10px;

}

.pvimage1
{
position:absolute;
margin-top:80px;
width:70px;
height:73px;
left:450px;
}

.pvimage2
{
position:relative;
}

Bonjour!

Peut-être parce que le nom de ton infobulle est "infobulle descPV" sur ton post que tu nous as donnés? ^^

EDIT: Ah oui, et aussi une erreur dans le CSS toute bête: tu as mis un . devant ton div. Donc tu es entrain de dire à ton navigateur de chercher la classe se nommant div.... et elle n'existe pas! ça m'a prit un moment de le voir, ton CSS est assez fouillis, alors je te l'ai remis en ordre:

Code:: /* Postes vacants */
.theta {
position: relative;
background: #c2de8a url(http://img15.hostingpics.net/pics/822724theta1.png);
background-repeat: no-repeat;
background-position: top left;
height:700px;
}

#img_2 {
height: 175px;
width: 330px;
position: absolute;
margin-top:15px;
margin-left:95px;
}

#img_3 {
position: absolute;
top:50px;
left: 30px;
height:102px;
width:126px;
}

#img_2,.pvlibre{
-webkit-transform: rotate(-9deg);
-moz-transform: rotate(-9deg);
-ms-transform: rotate(-9deg);
-o-transform: rotate(-9deg);
transform: rotate(-9deg);
font-family:Times New Roman,Georgia,Verdana,serif;
}

#img_4 {
position: absolute;
top:310px;
left: 80px;
height:350px;
width:375px;
z-index:2;
}

.pvlibre {
position:absolute;
top:30px;
left:155px;
}

.pvlibre strong {
text-decoration:underline ;
color:green;
}

.pvstat {
position:absolute;
top:277px;
left:175px;
font-family:Times New Roman,Georgia,Verdana,serif;
color:#af1e58;
z-index:3;
}

.pvrang {
position:absolute;
top:330px;
left:300px;
font-family:Times New Roman,Georgia,Verdana,serif;
color:#8FBB35;
z-index:3;
}

.histoire {
position:absolute;
left:150px;
top:370px;
width:260px;
height:250px;
z-index:3;
scroll: auto, hidden;
overflow:auto;
}

div.infoPV {
position: absolute; /* on définit le bloc comme élément de référence */
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
z-index: 10;
}

div.infoPV > div {
display: none; /* ceci masque l'infobulle */
position: absolute;
}

div.infoPV:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on s'arrange pour que notre bloc soit au dessus des autres en cas de conflit */
}

/* Lorsqu'on survole le contenu du bloc */
div.infoPV:hover > div {
display: block; /* ceci affiche l'infobulle (on peut aussi utiliser inline au lieu de block) */

/* on positionne notre infobulle par rapport au bloc conteneur */
position: relative;
top: 5px; /* 5px par rapport au haut du bloc .infobulle */
left: 15px; /* 15 px par rapport à la gauche du bloc .infobulle */

/* Et puis on rajoute tous les éléments de mise en forme de l'infobulle */
background: #ebebeb; /* arrière-plan de l'infobulle */
color: black; /* texte dans l'infobulle */
padding: 3px; /* marges internes par rapport aux bords */
}

.lienpv {
width:230px;
white-space:normal;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
Line-Height: 8pt;
text-align:left;
margin-left:10px;
}

.pvimage1 {
position:absolute;
margin-top:80px;
width:70px;
height:73px;
left:450px;
}

.pvimage2 {
position:relative;
}

Oui, voilà, tout ce que dit Nyo, j'suis partie faire des courses et quand je reviens je réalise que mon message avait pas été envoyé pas'qu'elle me double ToT

Par contre Nyo évite de faire le travail des autres, l'important ici est qu'ils aient le réflexe de faire la démarche par eux même Wink

J'ai juste enlevé le point et remit l'indentation correcte. C'est pas tellement faire le travail des autres que m'épargner les yeux, pour trouver d'autres éventuelles erreurs surtout =P

Merci d'avoir répondu quand même, haha ! Pour ce qui est du point devant le div, bien vu ! Je ne l'avais pas remarqué (on a beau relire...) ! Par contre, qu'est-ce que tu as remis en ordre dans mon CSS du coup ? Je n'arrive pas à trouver de différences avec mon actuel si ce n'est des sauts à la ligne de temps en temps.

Citation :: Peut-être parce que le nom de ton infobulle est "infobulle descPV" sur ton post que tu nous as donnés? ^^

Que voulais-tu dire par là ?

En tout cas, OUF ! Ca marche ! Punaise ! Fallait que ce soit forcément un truc bête et méchant ! Merci à toutes les deux en tout cas

Petite question encore. Pour créer la "mise en page" de mon infobulle comme celle que j'avais montré dans mon premier message, est-ce que je dois plutôt me lancer dans un tableau ou bien une autre solution ? (du genre l'image à gauche en position absolue mais le texte autremet...)

EDIT: ah mais maintenant que je remarque xD mon objectif principal était de coller la bulle à l'image où je passais la souris... J'abandonne cette idée ou y a quand même une solution ?

Ce que je voulais dire, c'est que je suis allée voir sur le sujet dont tu nous avais passé le lien, pour voir l'erreur, et que j'ai vu que le code HTML y était faux Wink

Pour ce qui est de ta question:
1) Pour la mise en forme de ta div, tu pourrais utiliser un tableau, mais je pense que 'Christa te le déconseillerais =P Le mieux est effectivement d'utiliser le positionnement. N'oublie pas cependant que div englobant tout le contenu de l'infobulle doit être en position: relative, pour que les div internes, en position: absolute se placent par rapport à l'infobulle, et non au haut de ta page. Ensuite, pour les coins arrondis, c'est le style de ta div même de l'infobulle.
2) Pour mettre ta div à la bonne position, il faudrait là encore avoir un div en position: relative qui englobe ton image de base et ton infobulle, qui serait en relative. ensuite, tu utilises la position: absolute de ton infobulle pour la placer. Elle se fera alors relativement à l'image précédente.

Ah, pour le 2, je biens de voir que "Theta" englobe tes deux div. Donc pas besoin de rajouter encore une classe, l'absolute suffirait =P

Ah, et n'oublie surtout pas de mettre le positionnement dans le :hover. Sinon.... ça ne sert pas à grand chose ^^

En fait, à partir du moment où l'infobulle est elle même en position absolue (forcément), tous les blocs absolus à l'intérieur se positionneront par rapport à l'infobulle. Et je "conseille" les tableaux aux débutants, vu que c'est trop prise de tête de leur expliquer le positionnement u_u' (et vu que 95% s'en fichent royalement de mes explications, marre de perdre mon temps là dessus)

Pour le positionnement de l'infobulle elle même, ça se passe dans cette partie des CSS :

Code:: /* on positionne notre infobulle par rapport au bloc conteneur */
position: relative;
top: 5px; /* 5px par rapport au haut du bloc .infobulle */
left: 15px; /* 15 px par rapport à la gauche du bloc .infobulle */

Le bloc "infobulle", c'est en principe celui qui contient l'image.

Tu m'apprends toujours des trucs 'Christa =D C'est pour ça que j'adore CSSActif, je crois ^^

Aaaaah ! Voilà, je crois bien que le problème est réglé ! L'infobulle est placée, j'ai réussi à mettre en place le contenu come je le souhaitais en position absolue et sa mise en forme est également celle attendue !
Merci beaucoup à vous deux Une infobulle capricieuse - position & déformation 577704309

je trouve même que c'était plus simple avec le positionnement manuel plutôt que de faire un tableau...

Normalement, je n'ai plus de problème (j'espère ><), je vais pouvoir continuer dans ma quête de finir ces maudites fiches Razz