Sujets similaires

Code:: /* ---- PA ----*/
.part_new
{
width:252px;
height:130px;
background-color: FFFFFF;
overflow:auto;
margin-left: 5px;
}

.part_acc
{
width: 252px;
height:130px;
background-color: FFFFFF;
overflow:auto;
margin-left: 5px;
}

.part_staff
{
width:252px;
height:130px;
background-color: FFFFFF;
overflow:auto;
text-align:center;
padding-left: 4px;
margin-left: 5px;
}

.part_amis
{
width:636px;
height:70px;
background-color: FFFFFF;
overflow:auto;
padding-left: 4px;
}

.part_link
{
width:140px;
height:70px;
background-color: FFFFFF;
overflow:auto;
}

.part_box
{
width: 480px;
height:174px;
background-color: FFFFFF;
overflow:auto;
margin-left: 5px;
}

.part_stat
{
width: 300px;
height:174px;
background-color: FFFFFF;
overflow:auto;
margin: 10px;
text-align: justify;
font-style: Tahoma;
font-size: 9px;
}

.titre1 {
height:16px;
color: #FFFFFF;
text-align: center;
margin-bottom: -10px;
background: #d7d7d7;
border-bottom: solid 2px #595959;
padding: -10px;
margin-left: 4px;
margin-right: 4px;
}

.text_justify {
font-size: 10px;
text-align: justify;
letter-spacing: -0,5px;
}

/* ---- Infobulles ---- */

span.infobulladmins{
position: absolute;
text-decoration: none;
}

span.infobulladmins span.bull {
display: none;
}

span.infobulladmins:hover {
background: none;
z-index: 999;
}

span.infobulladmins:hover span.bull {
display: inline;
white-space: normal;
top: 80px;
left: -20px;
position: absolute;
padding: 8px;
background: #D9DEB9; /*couleur fond infobulle admins*/
-moz-border-radius: 0px;
border-right: 5px solid #9FA19B;
border-left: 5px solid #9FA19B; /*couleur cadre infobulle admins*/
text-align: justify;
font-size: 13px;
width: 120px;
text-align: center;
}

Code:: <table><tbody><tr>
<td><p class="titre1"><span style="font-size: 22px; line-height: 12px; font-family: Courier New; text-shadow : 0px 0px 3px #000000;"><i>#Scoop!</i></span></p></td>
<td><p class="titre1"><span style="font-size: 22px; line-height: 12px; font-family: Courier New; text-shadow : 0px 0px 3px #000000;"><i>#Introduce</i></span> </p></td>
<td><p class="titre1"><span style="font-size: 22px; line-height: 12px; font-family: Courier New; text-shadow : 0px 0px 3px #000000;"><i>#MYteam</i></span></p></td></tr>

<tr><td><div class="part_new"> 
<br>
— <strong>XX.05.12</strong> Nouvelles saisons, nouvelles couleurs, nouveau design. Parlez-en !
</div></td>

<td><div class="part_acc">
<br><div class="text_justify">Bienvenu(e) sur "MYNAME FRANCE", forum dédié au boysband sud-coréen MYNAME, produit par la NHMedia. Leurs débuts se font le 29 Février sur la scène du M!Countdown, après avoir attisé la curiosité de nombreux fans. Composé de Lee GunWoo, Kang InSoo, Kim SeYong, Kang JunKyu et Chae JinSeok, le groupe sort leur premier single "Message" et le succès est immédiat. Il se démarque alors de la "boysband wave" qui déferle sur l'industrie musicale en automne 2011, avant de se retirer. Après avoir rencontré un franc succès au Japon — où ils ont fait leurs pré-débuts, les MYNAME prévoit un comeback coréen en milieu d'année, avec un mini-album.</div>
</div></td>

<td><div class="part_staff"> 
<br>
<div class="admin img">
<span class='infobulladmins'><img src="http://i40.servimg.com/u/f40/17/20/63/10/sans_t28.png"><span class='bull'>
<b>Hermione J. G.-Malefoy</b><br/>
Co-Fondatrice<br/>
<a href="http://apareciumhp.forumotion.com/u4">Voir le profil</a></span></span>

<span class='infobulladmins'><img src="http://img11.hostingpics.net/pics/151226phoeimage.png "><span class='bull'>
<b>Phoenix R. Huntington</b><br/>
Co-Fondatrice<br/>
<a href="http://apareciumhp.forumgratuit.org/u9">Voir le profil</a></span></span>

<span class='infobulladmins'><img src="http://img11.hostingpics.net/pics/294068mumusimage.png "><span class='bull'>
<b>Remus J. Lupin </b><br/>
Co-Fondateur<br/>
<a href="http://apareciumhp.forumgratuit.org/u2 ">Voir le profil</a></span></span>
</div>
</div></td>

</tr></tbody></table>

Salut !

Je n'arrive pas trop à savoir ce que tu veux. Ton problème n'est pas très clair, de quelles info-bulles parles tu ?
Quel résultat souhaites tu avoir et lequel obtiens tu actuellement ?

N'hésite pas à accompagner ton problème d'image si nécessaire (pour guider), c'est toujours mieux.

En espérant pouvoir t'aider !

Bonjour !

Je parle des info-bulles que j'aimerais installer pour mon staff, sur la PA
J'aimerais avoir un résultat comme celui de ce forum en gros : http://www.b1a4-france.com/, des photos icônes en opacité, on passe dessus l'icône est nette et l'info-bulle apparaît. Une info-bulle simple et sans image à l'intérieur, mais ça je sais modifier, il me faudrait juste les codes de bases, parce qu'actuellement ça bug.

Merci d'essayer de m'aider ^^

Donc si j'ai bien compris, pour ton problème n°1, tu souhaites avoir les 2 images de ton html tant dis qu’actuellement il y en a qu'une qui s'affiche ?

Après avoir regardé et testé plusieurs choses j'ai réussi à trouver la cause de ton problème, regardons le css :

Code:: /* ---- Infobulles ---- */

span.infobulladmins{
position: absolute;
text-decoration: none;
}

Tu as là un position : absolute; qui ne sert strictement à rien dans ce cas-ci, et en plus de cela il fait empiler chaque image (donc les images de ton staff ; chaque .infobulladmins) de ce fait tu en vois qu'une seule parmi les trois.

Il te suffit de le supprimer, tu verras tes 3 images, avec le hover qui marche correctement.
Tu peux même avoir un meilleur alignement entre chaque image en rajoutant un margin-left ou margin-right qui va décaler chaque image un nombre déterminé de pixels sur la gauche ou la droite Wink

Donc au final, avec mon exemple, voici les modifications :

Code:: /* ---- Infobulles ---- */

span.infobulladmins{
margin-left: 15px;
text-decoration: none;
}

Voilà ! Si tu as d'autres questions n'hésites pas.

Effectivement, je n'avais pas remarquer :s
Le position:absolute; permettait de faire le rapport entre l'image et son :hover et donc de bien afficher l'info-bulles.

J'ai testé pas mal de trucs mais j'ai rien trouvé pour l'instant. Je vais continuer mes recherches mais ça s'annonce bien plus difficile.

Jun a écrit:: il n'y a de raison que cela ne marche pas chez moi, mais chez les autres.

T’inquiète pas, ça ne fonctionne pas chez moi non plus :p
Au pire, oui, si on trouve aucune solutions on pourra reprendre le tout (même si c'est un peu lourd).
Personellement je ne suis pas très à l'aise avec les tableaux, mais le problème ne vient pas de là.

Heeey. J'ai regardé vite fait, et je crois avoir trouvé la source du problème. ^^

Tout d'abord, changer le positionnement des images concernées.

Code:: span.infobulladmins{
position: relative; /*nécessaire pour que l'infobulle se positionne par rapport à l'image*/
text-decoration: none;
}

A partir de là, l'infobulle est "piégée" dans la div "part_staff", ce qui fait qu'on ne la voit pas. C'est à cause de l'overflow, qui est réglé pour que si le contenu dépasse de la zone, on ajoute des barres de défilement pour voir le reste. Il suffit de supprimer la propriété dans le style de "part_staff".

Il ne reste plus qu'à adapter la position de l'infobulle. En passant, je ne vois pas à quoi servent les propriétés déterminées pour "span.infobulladmins:hover". Le z-index devrait s'appliquer à l'infobulle, et ce n'est pas le cas.

Code:: /*span.infobulladmins:hover {
background: none;
}*/

span.infobulladmins:hover span.bull {
z-index: 999;
display: inline;
white-space: normal;
top: 0;
left: 20px;
position: absolute;
padding: 8px;
background: #D9DEB9; /*couleur fond infobulle admins*/
-moz-border-radius: 0px;
border-right: 5px solid #9FA19B;
border-left: 5px solid #9FA19B; /*couleur cadre infobulle admins*/
text-align: justify;
font-size: 13px;
width: 120px;
text-align: center;
}

Autrement, une petite remarque pour toi : une grande partie des propriétés des différentes parties de ta PA se répètent, il serait plus productif de les rassembler. Et une id est plus appropriée si tu donnes des noms différents aux parties. ^^ (Donc tu aurais une class générale, puis les id pour cibler ce qui diffère, comme les tailles.)

Vouala, j'espère t'avoir aidé. o/

#DOARE

Je veux bien expliquer davantage. =)

Jetons un oeil à une partie de ton CSS.

Code:: /* ---- PA ----*/
.part_new
{
width:252px;
height:130px;
background-color: FFFFFF;
overflow:auto;
margin-left: 5px;
}

.part_acc
{
width: 252px;
height:130px;
background-color: FFFFFF;
overflow:auto;
margin-left: 5px;
}

.part_staff
{
width:252px;
height:130px;
background-color: FFFFFF;
overflow:auto;
text-align:center;
padding-left: 4px;
margin-left: 5px;
}

.part_amis
{
width:636px;
height:70px;
background-color: FFFFFF;
overflow:auto;
padding-left: 4px;
}

.part_link
{
width:140px;
height:70px;
background-color: FFFFFF;
overflow:auto;
}

.part_box
{
width: 480px;
height:174px;
background-color: FFFFFF;
overflow:auto;
margin-left: 5px;
}

.part_stat
{
width: 300px;
height:174px;
background-color: FFFFFF;
overflow:auto;
margin: 10px;
text-align: justify;
font-style: Tahoma;
font-size: 9px;
}

Là-dedans, tu as plusieurs propriétés en commun. L'avantage du CSS est qu'on peut déterminer des propriétés pour un groupe d'éléments, ce qui évite en l'occurrence de répéter des règles. Par exemple, "background-color: FFFFFF;" est commun à toutes les parties. En suivant cette logique, on peut arriver à la réorga suivante. Smile

Code:: /* ---- PA ----*/
.part_new, .part_acc, .part_staff, .part_amis, .part_link, .part_box, .part_staff, .part_stat {
background-color: FFFFFF;
}
.part_new, .part_acc, .part_amis, .part_link, .part_box, .part_stat {
overflow:auto;
}
.part_new, .part_acc, .part_staff, .part_box, .part_staff {
margin-left: 5px;
}
.part_staff, .part_amis, .part_staff {
padding-left: 4px;
}
.part_staff {
text-align:center;
}
.part_new, .part_acc, .part_staff {
width: 252px;
height:130px;
}
.part_amis, .part_link {
height:70px;
}
.part_amis {
width:636px;
}
.part_link {
width:140px;
}
.part_box, .part_stat {
height:174px;
}
.part_box {
width: 480px;
}
.part_stat {
width: 300px;
margin: 10px;
text-align: justify;
font-style: Tahoma;
font-size: 9px;
}

Tu remarques que ça peut faire beaucoup d'éléments différents à lister. Quand tu as plusieurs éléments avec une mise en forme identique, tu préféreras spécifier une class unique pour tous ces éléments. =)

C'est l'avantage et l'utilité première de la class. Tu peux même spécifier plus d'une class pour un élément. Tout dépend de comment cela peut simplifier ta feuille CSS.

Code:: <span class="part right">TEXTE</span>

Dans cet exemple, tu peux lui appliquer des styles à en utilisant ".part", ".right", et même ".part.right".

En revanche, si tu donnes un nom précis à une partie, il est plus logique de déterminer une id, qui elle ne peut référer qu'à un élément unique. Dans le cas de ton CSS, l'utilisation de class au lieu d'id n'est pas justifiée, car toutes les class sont uniques.

J'espère avoir été claire. =)

Bonjour,

Ce problème est-il toujours d'actualité ? Si ce sujet n'a toujours pas de reçu de réponse dans quatre jours, il sera archivé.

Merci d'avance. Problème info-bulle, idée(s) pour une barre de navigation? 510527

Problème info-bulle, idée(s) pour une barre de navigation? 510527

Hello !
N'ayant toujours pas obtenu de réponse depuis l'intervention de Murtagh, je considère ce sujet comme résolu !
Si le problème persiste, merci d'ouvrir un nouveau sujet (:
Merci de ta compréhension Problème info-bulle, idée(s) pour une barre de navigation? 926145

Problème info-bulle, idée(s) pour une barre de navigation? 926145

Problème info-bulle, idée(s) pour une barre de navigation?

Problème info-bulle, idée(s) pour une barre de navigation?

Sujets similaires

Sujets similaires

Partenaires Or