Infobulles et code HTML (voir même CSS)

[Azylis]

Bonsoir à tous,

Mon problème se divise en fait en 2 parties :

I] Première infobulle se retrouve "éclatée"

Tout d'abord, pour créer ces infobulles je me suis inspirée de CE topic.
A l'origine, mes infobulles apparaissent lorsqu'on passe son curseur sur l'image correspondante, donnant alors des explication sur les personnages.

Le problème en image :

Spoiler:

Les autres infobulles sont "presque" nikel, exeptée la première de la partie "modérateur" (similaire à celle de la capture d'écran, donc je ne l'ai pas mise ici). En gros seules les premières infobulles se retrouvent "éclatée".
Je suppose qu'il doit y avoir un espace quelque part qui a ou n'a pas lieu d'être, mais comme j'ai fonctionné au copié collé pour chaque infobulle, je ne comprends pas pourquoi il n'y a que la première infobulle qui pose problème et pas les autres...


II] Alignement des infobulles

Plus haut, j'ai dis que les autres infobulles étaient "presque" nikel, voici la raison du "presque" :

Spoiler:

En effet, à chaque fois l'infobulle apparait sur la droite, exactement au même emplacement, quel que soit l'image que je survole. J'ai essayé de changer mon CSS en modifiant "position : relative" en "position : absolute", mais ça a fait un truc bizarre (les images se sont superposées...).
Je tâtonne encore au niveau des codes, je commence à comprendre la logique de certains éléments mais pas encore tous ^^"


Voici mon HTML :

Code:


 [center] [b][u]Les Hauts Membres du Conseil :[/u][/b]

[img]http://i43.servimg.com/u/f43/13/93/32/39/re11.jpg[/img]


[b]Reia[/b][/center]
[b]
[u]Role :[/u][i]Administratrice[/i]
[u]Présence :[/u] [i]A toujours un œil sur l’École[/i][/b]

        [img]http://i43.servimg.com/u/f43/13/93/32/39/fa11.jpg[/img]
      [b][center]Farfaya[/center]

[u]Role :[/u] [i]Administratrice[/i]
[u]Présence :[/u] [i]Se balade de temps à autre dans les couloirs[/i][/b]
 
        [img]http://i43.servimg.com/u/f43/13/93/32/39/ani11.jpg[/img]

      [b][center]Anikei[/center]

[u]Role :[/u] [i]Administrateur[/i]
[u]Présence :[/u] [i]Indétectable[/i][/b]
 
        [img]http://i43.servimg.com/u/f43/13/93/32/39/kaine_11.jpg[/img]

      [b][center]Azylis[/center]

[u]Role :[/u] [i]Administratrice[/i]
[u]Présence :[/u] [i]Toujours à son poste ![/i][/b]
 

 


Et mon CSS :

Code:

.infobulle{
          position: relative;}
       
        .infobulle .infobulle-hidden {
          display: none;  position: absolute;    visibility: visible;  z-index: 999;
          background-color:#000;
          border:3px solid #fff;
          padding:3px;
          color:#fff;
          font-size:1em;
          font-weight:bold;
          -moz-border-radius: 10px;
          -webkit-border-radius: 10px;
          border-radius: 10px;
          }
       
        .infobulle:hover .infobulle-hidden {
          display: block;}

J'espère avoir été suffisamment claire dans mes explications.

Merci d'avance pour votre aide ! ^^

[Azylis]

up ^^"

[Azylis]

up !

[Azylis]

up!

[Invité]

Bonjour,

En "enfermant" chaque image dans une cellule de tableau et en retirant les balise <p> des bulles ça semble fonctionner:

Code:

<tr>
<td colspan="4"> <p align="center"> <Strong><u>Les Hauts Membres du Conseil :</u></strong><br /><br />
<table><tr><td></td><td>
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/re11.jpg" />
<span class="infobulle-hidden">
<strong><center>Reia</center><br /><u>Role :</u><em>Administratrice</em><br /><u>Présence :</u> <em>A toujours un œil sur l’École</em></strong>
</span>
</span>
</td><td></td></tr>
<tr>
<td>
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/fa11.jpg" />
<span class="infobulle-hidden">
      <strong><center>Farfaya</center><br /><u>Role :</u> <em>Administratrice</em><br><u>Présence :</u> <em>Se balade de temps à autre dans les couloirs</em></strong>
 </span>
</span></td>
<td>
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/ani11.jpg" />
<span class="infobulle-hidden">
      <strong><center>Anikei</center><br /><u>Role :</u> <em>Administrateur</em><br><u>Présence :</u> <em>Indétectable</em></strong>
  </span>
</span></td><td><span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/kaine_11.jpg" />
<span class="infobulle-hidden">
      <strong><center>Azylis</center><br /><u>Role :</u> <em>Administratrice</em><br><u>Présence :</u> <em>Toujours à son poste !</em></strong>
  </span>
</span></td></tr></table></p> </td>
</tr>

Bien sincèrement.

[Azylis]

Bonjour !

Merci de m'avoir répondu, le soucis c'est que je n'aime pas du tout le rendu tableaux des images ><

Avec votre solution ça donne ceci :

Spoiler:

Alors que moi je préfèrerais cette disposition :

Spoiler:

Néanmoins, grâce à vous j'ai appris que c'était la balise <p> qui posait bel et bien problème, mais je en comprends pas pourquoi.Après leur suppression et quelques arrangements, mes bulles sont entières et le texte est à l'intérieur.

Encore merci !


Du coup, maintenant mon soucis est seulement la partie II : l'alignement des infobulles par rapport aux images, sans avoir à créer un tableaux dans mon tableau ^^ (j'espère que c'est possible...)

[Invité]

Bonjour,

Ne medemandez pas pourquoi, parce que je n'en sais rien, mais en supprimant les retour à la ligne dans le code des infobulles, il semblerait que tout fonctionne bien.
Comme ceci:

Code:

<tr>
<td colspan="4"> <center> <Strong><u>Les Hauts Membres du Conseil :</u></strong></center><br /><br />
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/re11.jpg" /><span class="infobulle-hidden"><strong><center>Reia</center><br /><u>Role :</u><em>Administratrice</em><br /><u>Présence :</u> <em>A toujours un œil sur l’École</em></strong></span></span>
 &nbsp &nbsp &nbsp &nbsp
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/fa11.jpg" /><span class="infobulle-hidden"><strong><center>Farfaya</center><br /><u>Role :</u> <em>Administratrice</em><br /><u>Présence :</u> <em>Se balade de temps à autre dans les couloirs</em></strong> </span></span>
 &nbsp &nbsp &nbsp &nbsp
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/ani11.jpg" /><span class="infobulle-hidden"><strong><center>Anikei</center><br /><u>Role :</u> <em>Administrateur</em><br /><u>Présence :</u> <em>Indétectable</em></strong>  </span></span>
 &nbsp &nbsp &nbsp &nbsp
<span class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/kaine_11.jpg" /><span class="infobulle-hidden"><strong><center>Azylis</center><br /><u>Role :</u> <em>Administratrice</em><br /><u>Présence :</u> <em>Toujours à son poste !</em></strong></span></span>
 </td>
</tr>

Bien sincèrement.

[Azylis]

Bonsoir,

J'ai copié puis collé le code exacte que vous m'avez donné, pourtant les infobulles n'apparaissent que sous l'image de la femme brune, quelque soit le personnage au dessus duquel passe mon curseur ><

[Azylis]

up ><

[Scoubifitz]

bonjour,

en essayant comme ça ?

Code:

<tr>
<td colspan="4">
<div style="margin:auto;text-align:center;width:630px;"><strong><u>Les Hauts Membres du Conseil :</u></strong><br><br>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/re11.jpg" />  
<div class="infobulle-hidden"><strong><p align="center">Reia</p><br>
<u>Role :</u><em>Administratrice</em><br>
<u>Présence :</u> <em>A toujours un œil sur l’École</em></strong></div></div>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/fa11.jpg" />  
<div class="infobulle-hidden"><strong><p align="center">Farfaya</p><br>
<u>Role :</u> <em>Administratrice</em><br>
<u>Présence :</u> <em>Se balade de temps à autre dans les couloirs</em></strong></div></div>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/ani11.jpg" />  
<div class="infobulle-hidden"><strong><p align="center">Anikei</p><br>
<u>Role :</u> <em>Administrateur</em><br>
<u>Présence :</u> <em>Indétectable</em></strong></div></div>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/kaine_11.jpg" />
<div class="infobulle-hidden"><strong><p align="center">Azylis</p><br>
<u>Role :</u> <em>Administratrice</em><br>
<u>Présence :</u> <em>Toujours à son poste !</em></strong></div></div>
</div></td>
</tr>

Remplacez le CSS :

Code:

.infobulle{
position: relative;
float:left;
}
.infobulle .infobulle-hidden {
background-color:#000;
position: absolute;
visibility: visible; 
z-index: 999;
padding:3px;
color:#fff;
font-size:1em;
font-weight:bold;
border:3px solid #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
display: none; 
}
.infobulle:hover .infobulle-hidden {
display: block;
width:210px;
left:-30px;
}

[Azylis]

Bonsoir !

Ah ! Là ça prends forme, merci beaucoup !

Du coup j'ai quelques petites questions, afin de mieux comprendre la manip' :
1) J'ai vu dans le CSS que ce qui est différent c'est float:left et width:210px left:-30px
J'ai bien compris à quoi correspondait width et left, mais float ça a permis quoi ?

2) Est-ce qu'il y a une différence entre la balise <center>...</center> et la balise <p align="center">...</p> ? laquelle ?

3) Pourquoi avoir utiliser la balise <div style="margin:auto;text-align:center;width:660px;">...</div> et pas une ci-dessus ?

4) Je n'ai pas très bien saisis la différence entre les balises <span>...</span> et <div>...</div>. Un coup je lis que <span> est plus utilisé pour mettre un style au texte (gras italique etc...) alors que <div> c'est plus de la mise en page ; un autre coup je lis que <span> permet de modifier un morceaux de paragraphe tandis que <div> est utilisé pour un regroupement de plusieurs paragraphes... je suis un peu perdue, car j'ai remarqué que le HTML pour l'infobulle est une <div> et non pas un <span> comme j'avais trouvé à la base.


Désolée, ça fait beaucoup de pourquoi, mais j'aimerais comprendre afin de ne pas refaire les mêmes erreurs plus tard ><

Bonne soirée et encore merci !

[Scoubifitz]

bon ... la balise "span" englobe le texte , et uniquement le texte ... comme quand on surligne du texte ...

la balise "div" est un cadre de 4 cotés ...

j'ai placé les images dans des cadres "div" , qui ont la propriété de se mettre l'un sous l'autre ...

float:left leur demande de s'aligner un à coté de l'autre ...

width:210px : le cadre qui s'ouvre au survol aura la même largeur que le cadre qui l'héberge , sauf si on lui donne une autre largeur ...

left:-30px : le cadre qui s'ouvre est aligné à gauche sur le cadre qui l'héberge , on va donc équilibré l'affichage

30	150	30
210

la balise <center> est une balise en cours d'abandon , concernant les navigateurs modernes , tout comme <p align="center"> ...

le CSS correct est <div style="margin:auto;text-align:center;">

la marge est automatiquement centrée autour du cadre , le texte est centré dans le cadre ...

j'ai rien oublié ?

[Azylis]

Merci ! L'image que vous avez utilisée pour m'expliquer la différence entre <span> et <div> était à la fois très simple et très facile à comprendre : j'y vois plus clair à présent ^^

Fière d'avoir à peu près saisi le principe, j'ai voulu l'appliquer seule à ma partie dédiée aux modérateurs. J'ai presque réussi, le soucis est juste que mes images ne sont pas centrée :

Spoiler:

Pourtant, j'ai repris le code que vous m'aviez donné plus haut, en essayant de l'adapter à la nouvelle situation : fusion de 2 cellules au lieu de 4, zone plus petite. Mais il refuse quand même de centrer mes images... Est-ce parce que les deux colonnes qui entourent cette partie n'ont pas encore de taille fixe ?

Code:

<td colspan="2">
        <div style="margin:auto;text-align:center;width:450px;"><strong><u>Les Assistants :</u></strong><br><br>
        <div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/aki11.jpg" />
        <div class="infobulle-hidden"><strong><p align="center">Akira</p><br>
        <u>Role :</u><em>Modérateur</em><br>
        <u>Présence :</u> <em>Vient régulièrement s'entrainer</em></strong></div></div>
        <div class="infobulle"> &nbsp &nbsp &nbsp<img src="http://i43.servimg.com/u/f43/13/93/32/39/split_11.jpg" />
        <div class="infobulle-hidden"><strong><p align="center">Splitter</p><br>
        <u>Role :</u> <em>Modérateur</em><br>
        <u>Présence :</u> <em>Heu... Porté disparu ?</em></strong></div></div>
        <div class="infobulle"><br><img src="http://i43.servimg.com/u/f43/13/93/32/39/ed11.jpg" />
        <div class="infobulle-hidden"><strong><p align="center">Edward</p><br>
        <u>Role :</u> <em>Modérateur</em><br>
        <u>Présence :</u> <em>Aléatoire... comme son humour !</em></strong>
        </div></td>


(Si besoin, voici le code avec en plus les deux colonnes :

Code:

<tr>
<td><Strong><u>Météo :</u></strong></p></td>
                <td colspan="2">
        <div style="margin:auto;text-align:center;width:450px;"><strong><u>Les Assistants :</u></strong><br><br>
        <div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/aki11.jpg" />
        <div class="infobulle-hidden"><strong><p align="center">Akira</p><br>
        <u>Role :</u><em>Modérateur</em><br>
        <u>Présence :</u> <em>Vient régulièrement s'entrainer</em></strong></div></div>
        <div class="infobulle"> &nbsp &nbsp &nbsp<img src="http://i43.servimg.com/u/f43/13/93/32/39/split_11.jpg" />
        <div class="infobulle-hidden"><strong><p align="center">Splitter</p><br>
        <u>Role :</u> <em>Modérateur</em><br>
        <u>Présence :</u> <em>Heu... Porté disparu ?</em></strong></div></div>
        <div class="infobulle"><br><img src="http://i43.servimg.com/u/f43/13/93/32/39/ed11.jpg" />
        <div class="infobulle-hidden"><strong><p align="center">Edward</p><br>
        <u>Role :</u> <em>Modérateur</em><br>
        <u>Présence :</u> <em>Aléatoire... comme son humour !</em></strong>
        </div></td>


<td> <center><Strong><u>Topics Histoire :</u></strong><br>
<em>Pour suivre l’histoire de Valhalla...</em></div></td>

</tr>

)

D'autre part, la dernière infobulle n'est pas entière, mais je suppose que c'est parce que j'arrive à la limite de la P.A. Je pense que je peux résoudre le problème en sautant des lignes sous les images afin de gagner de la place, mais s'il y a une autre solution je suis preneuse.

Désolée, j'avais espéré pouvoir me débrouiller seule pour la suite, mais c'est loupé ... ><

[Scoubifitz]

hmmm...

le premier code est trop large ...

à tester (il manque 2 "div" de fermeture en fin de code , pas besoin d'un retour à la ligne) :

Code:

<td colspan="2">
<div style="margin:auto;text-align:center;width:310px;"><strong><u>Les Assistants :</u></strong><br><br>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/aki11.jpg" /> 
<div class="infobulle-hidden"><strong><p align="center">Akira</p><br>
<u>Role :</u><em>Modérateur</em><br>
<u>Présence :</u> <em>Vient régulièrement s'entrainer</em></strong></div></div>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/split_11.jpg" /> 
<div class="infobulle-hidden"><strong><p align="center">Splitter</p><br>
<u>Role :</u> <em>Modérateur</em><br>
<u>Présence :</u> <em>Heu... Porté disparu ?</em></strong></div></div>
<div class="infobulle"><img src="http://i43.servimg.com/u/f43/13/93/32/39/ed11.jpg" />
<div class="infobulle-hidden"><strong><p align="center">Edward</p><br>
<u>Role :</u> <em>Modérateur</em><br>
<u>Présence :</u> <em>Aléatoire... comme son humour !</em></strong></div></div>
</div></td>

pour que l'affichage se mette par dessus , il faudrait mettre z-index: 999; pour la class :hover ...

[Azylis]

Yes, j'en vois le bout ! XD

Le code que vous m'avez fournit, après quelques ajustements (rajout d'espaces entre autre), fonctionne très bien !

Pour avoir l'infobulle au dessus, si vous parlez de cette partie de code :

Code:

.infobulle:hover .infobulle-hidden {
        z-index: 999;
        display: block;
        width:240px;
        left:-25px;
        }

Ça ne fonctionne pas par contre... ><

[Scoubifitz]

pouvez vous mettre le lien vers le forum test ? (sous hide s'il le faut)

[Azylis]

http://valhalla-test.lebonforum.com/

Mais vous ne pourrez pas y accéder sans les identifiants, si ?

[Scoubifitz]

Ben , il faudrait au moins que je vois la page d'accueil , non ?

[Azylis]

Je suis tout à fait d'accord XD
Sauf que c'est ma "coéquipière" qui l'a créé et me l'a donné "comme ça", tout ce que je fais dessus c'est modifier l'apparence, je n'ai touché à aucune option jusque là. Ma question sous entendue c'était "dois-je vous fournir les ID ou est-ce qu'il faut que je modifie une permission dans le panneaux d'admin pour que vous puissiez voir l’accueil en temps qu'invité ?" ^^

[Scoubifitz]

non , pas besoin ...

on va essayer comme ça :

Code:

.infobulle{
position: relative;
float:left;
}
.infobulle .infobulle-hidden {
background-color:rgba(0,0,0,0.5);
position: absolute;
visibility: visible;
z-index: 999;
padding:3px;
color:#fff;
font-size:1em;
font-weight:bold;
border:3px solid #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
display: none;
}
.infobulle:hover .infobulle-hidden {
display: block;
width:210px;
left:-30px;
top:80px;
}

... en déplaçant la bulle et en la rendant semi-transparente , ça devrait aller ...

[Azylis]

Je n'avais absolument pas pensé à la solution de la semi transparence
(et de toute façon j'aurais pas su comment faire...) et ça me plait
beaucoup ! Au moins, ça change de de l'ordinaire.

Merci énormément pour votre patience et vos explications, même à 3h du matin !

Je pense que tout est bon cette fois ^^

Encore merci pour votre aide et bonne fin de nuit !

[Scoubifitz]

Problème ?