Sujets similaires

Coucou tout le monde ^^

Je me permet de poser ma question ici puisque je ne trouve de question nulle part :/
Je suis entrain de travailler sur ma prochaine PA, et j'ai depuis quelques mois l'envie de réaliser une infobulle que je qualifirai de fixe pour la présentation du staff. Je ne sais pas vraiment l'appeler donc je m'excuse s'il existe un autre moyen de la dénommer ^^
Le but est qu'il y ait donc plusieurs membres du staff en infobulle mais que ce qui s'affiche lorsque l'on passe ou clique sur leur image, le contenu de l'infobulle ne s'affiche que dans un seul et même cadre, à une place définie.
Je vous passe en exemple ce forum: http://v-knight-rpg.forumgratuit.org/, dans l'onglet staff.

J'ai déjà essayé de modifier un code simple pour infobulle, mais je n'y suis pas arrivée, et j'ai du tut supprimer car ça avait tout déréglé sur mon forum ^^

Donc si quelqu'un connait un tuto pour faire ce système je vous serai très reconnaissante ^^

Bonne journée Razz

Bonjour Nyly !

Alors, pour répondre à ton besoin, j'ai 2 idées en tête à te proposer :

Soit partir sur un système d'infobulles que l'on positionnerai au même endroit sur la page (c'est ce qui me semble le plus simple a priori et découle directement de ta demande)
Soit créer un élément fixe qui s'affiche et se remplit avec les informations correspondant à l'élément survolé (c'est comme ça que je l'aurais fait instinctivement car ça me paraît plus propre, mais ça demande de mettre en pratique du javascript, ce qui est un peu plus technique).

Du coup, quelle scénario te conviendrait le mieux, à vue de nez ?

Et bien les deux ne me dérangent pas en fait ^^ ce que je souhaiterai aussi c'est faire l'apparition en fondue comme sur mon exemple, mais je n'ai jamais réussi à le faire sur une infobulle normale, du coup, la méthode qui permettrait de le faire ^^

Bon, on va partir sur le premier scénario parce-qu'a priori on devrait pouvoir réaliser le même effet avec le CSS en partant de ta structure d'infobulles. On devrait également pouvoir faire une transition pour l'apparition en fondu sans trop de problèmes.

Actuellement, quel code as-tu pour ton effet d'infobulle (ce que tu as mis en place, même si ça ne marche pas) ?

Et bien j'ai remis le code de base en fait pour travailler le reste de ma pa en attendant

Code:: /*INFOBULLE*/

.lock {
position: relative;
cursor: pointer;
border: 2px solid none;
}
.lock .lock-hidden {
/* center */
display: none;
position: absolute;
padding-left : 1px;
padding-right : 1px;
padding-top : 1px;
padding-bottom : 1px;
top: 0px;
left: 0px;
/* style du bloc qui apparait */
border: 1px solid #604B42;
background-color: #A3A1A1;
font-family: courrier new;
text-align: center;
visibility: visible;
width: 200px;
height: 90px;
}
.lock:hover .lock-hidden {
display: block;
}

Code:: <div class="lock"><img src="http://i46.servimg.com/u/f46/14/06/88/60/eri_co10.png" border="0" alt="" /><div class="lock-hidden"><font color="white"><strong>ERIKA JOHNSON</strong></font><div class="gradualfader"><img src="http://i46.servimg.com/u/f46/14/06/88/60/petite12.png" border="0" alt="" /></div>

<span style="font-size: 10px; line-height: normal">FONDATRICE</span>

<a href="http://menschenmenschen.forumgratuit.org/u1" class="postlink"> PROFIL? </a> <font color="white">║</font> <a href="http://menschenmenschen.forumgratuit.org/privmsg?mode=post&u=1"> MP? </a>
</div></div>
<div class="lock"><img src="http://i46.servimg.com/u/f46/14/06/88/60/eri_co10.png" border="0" alt="" /><div class="lock-hidden"><font color="white"><strong>ERIKA JOHNSON</strong></font><div class="gradualfader"><img src="http://i46.servimg.com/u/f46/14/06/88/60/petite12.png" border="0" alt="" /></div>

<span style="font-size: 10px; line-height: normal">FONDATRICE</span>

<a href="http://menschenmenschen.forumgratuit.org/u1" class="postlink"> PROFIL? </a> <font color="white">║</font> <a href="http://menschenmenschen.forumgratuit.org/privmsg?mode=post&u=1"> MP? </a>
</div></div>
<div class="lock"><img src="http://i46.servimg.com/u/f46/14/06/88/60/eri_co10.png" border="0" alt="" /><div class="lock-hidden"><font color="white"><strong>ERIKA JOHNSON</strong></font><div class="gradualfader"><img src="http://i46.servimg.com/u/f46/14/06/88/60/petite12.png" border="0" alt="" /></div>

<span style="font-size: 10px; line-height: normal">FONDATRICE</span>

<a href="http://menschenmenschen.forumgratuit.org/u1" class="postlink"> PROFIL? </a> <font color="white">║</font> <a href="http://menschenmenschen.forumgratuit.org/privmsg?mode=post&u=1"> MP? </a>
</div></div>

Bonjour,

Ton problème est-il toujours d'actualité ? Merci de donner des nouvelles dans les 4 jours qui suivent sinon ton problème se verra archivé.

Bonne journée. Smile

Oui oui il l'est ^^

Je n'ai pas voulu uper avant car je comprends qu'on puisse avoir une vie, si quelqu'un prend la peine de m'aider, je vais pas le harceler pour çà ^^

Plop !

Oui désolé c'est de ma faute, j'avais vu la réponse et m'étais dis que je la lirais plus attentivement plus tard puis finalement ça a trainé...

Alors, si je t'ai demandé le code de ton infobulle c'était effectivement pour vérifier ceci.
Actuellement on va avoir du mal à travailler efficacement sur ton code car il est un peu brouillon, pas très propre et donc difficile à retoucher sans risquer de faire pleins de bêtises.

Je pense que ce serait une bonne idée de recréer comme il faut ton infobulle dans un premier temps, puis de simplement rajouter la position fixe ensuite (ce qui sera très facile avec un code plus lisible).
Pour cela je te conseille de jeter un oeil sur ce tutoriel expliquant comment créer une infobulle de A à Z (avec un code propre et sans fioritures qui risquent de ne pas être valides).

Pour info donc, l'architecture de ton HTML devrait ressembler à quelque chose du genre (à terme) :

Code:: <div class="lock">
<img src="http://i46.servimg.com/u/f46/14/06/88/60/eri_co10.png" border="0" alt="" />
<div>
<strong>ERIKA JOHNSON</strong>
<div class="gradualfader">
<img src="http://i46.servimg.com/u/f46/14/06/88/60/petite12.png" border="0" alt="" />
</div>
<p class="lock-role">
FONDATRICE
<a href="http://menschenmenschen.forumgratuit.org/u1" class="postlink"> PROFIL? </a> ║
<a href="http://menschenmenschen.forumgratuit.org/privmsg?mode=post&u=1"> MP? </a>
</p>
</div>
</div>

A savoir que <font> n'est pas valide, qu'il ne faut pas mettre de CSS dans ton HTML (crée plutôt des classes dans ton CSS pour cela).

Si tu n'arrive pas à nettoyer ton HTML/CSS pour faire ça n'hésites pas à poser des questions. J'attends ton nouveau code HTML/CSS pour t'indiquer où placer ton positionnement absolu (et avoir une infobulle fixe sur la page) Wink

D'accord je vais travailler çà et je te tiens au courant ^^

Merci ^^

Alors du coup j'ai modifié mon infobulle pour n'avoir que des images et non du texte ^^
Je cherche encore comment faire pour que l'image qui s'affiche prenne tout le cadre et ne soit pas sur le bas, et pour que les petits personnages soient alignés de gauche à droite :/

Le troisième n'est pas encore défini du coup je lui ai mis les mêmes images que le deuxième, mais elle vont changer plus tard. Smile

Code:: <div class="infobulle">
<img src="http://i40.servimg.com/u/f40/16/70/35/94/chibi-10.png" alt="nom de l'image" />
<div>
<img src="http://i40.servimg.com/u/f40/16/70/35/94/staff_11.png" alt="nom de l'image" />
</div>
</div>
<div class="infobulle">
<img src="http://i40.servimg.com/u/f40/16/70/35/94/yuuuj10.png" alt="nom de l'image" />
<div>
<img src="http://i40.servimg.com/u/f40/16/70/35/94/staff211.png" alt="nom de l'image" />
</div>
</div>
<div class="infobulle">
<img src="http://i40.servimg.com/u/f40/16/70/35/94/yuuuj10.png" alt="nom de l'image" />
<div>
<img src="http://i40.servimg.com/u/f40/16/70/35/94/staff211.png" alt="nom de l'image" />
</div>
</div>

Code:: div.infobulle {
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*/
width: 100px;
height: 100px;
}

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: 0px; /* 5px par rapport au haut du bloc .infobulle */
left: 0px; /* 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: none; /* arrière-plan de l'infobulle */
color: black; /* texte dans l'infobulle */
padding: 0px; /* marges internes par rapport aux bords */
/* bordures de votre infobulle*/
border: 2px groove #339966;
}

Alors, rapidement par rapport à ce que tu viens de soulever :

Pour l'histoire de l'image qui est "sur le bas" je n'arrive pas à voir exactement de quoi tu parle...
Pour aligner tes personnages les uns à la suite des autres, rajoute la propriété display: inline-block; dans le sélecteur div.infobulle

Sinon c'est bien mieux ainsi Smile

Donc pour positionner de manière fixe ton infobulle, il faut modifier un peu le comportement actuel.

Actuellement, positionnement relatif

Pour le moment, ton CSS est élaboré afin que les infobulles se placent de manière relative à l'élément auquel ils se rattachent. Cela se passe en 2 temps :

Code:: div.infobulle {
position: relative; /* on définit le bloc comme élément de référence */
...
}

Cette partie du code permet de définir le bloc .infobulle comme cadre de référence à l'infobulle qui va s'afficher ensuite :

Code:: div.infobulle:hover > div{
...

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

...
}

Au survol (on aurait pu/du le définir à l'état normal d'ailleurs), l'infobulle se positionne de manière absolue par rapport à l'élément de référence.

Fixer la position de l'infobulle, par rapport à la page

Il s'agit donc simplement de ne pas définir chaque infobulle comme cadre de référence afin que toutes les infobulles se positionnent au même endroit par rapport à une référence commune : au même endroit sur la page.

Normalement, tu devrais pouvoir obtenir ton effet en retirant le position: relative; du premier code. Il faut ensuite jouer avec les positions top et left pour fixer l'apparition de l'infobulle sur la page.

Quelques optimisations

Voici quelques conseils qui n'ont pas forcément de rapport direct avec ton problème, mais qui me viennent à l'esprit en voyant ton code, qui empêcheront l'apparition de bugs et autres complications éventuelles :

Il pourrait être judicieux de ne pas trop spécifier le sélecteur de l'infobulle afin de permettre au code d'être réutilisable. C'est à dire qu'au lieu d'écrire div.infobulle (et ses dérivés), tu peux simplement le remplacer par .infobulle qui est tout aussi valable mais permettra au code d'être réutilisable sur un autre élément (moyennant quelques améliorations éventuelles) (on ne sait pas de quoi demain sera fait).
Tu peux déplacer les propriétés "générales" de l'infobulle dans l'état par défaut et ne laisser dans le :hover que les propriétés qui changent effectivement. C'est à dire remplacer ça :

Code:

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

/* Lorsqu'on survole le contenu du bloc */
.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: 0px; /* 5px par rapport au haut du bloc .infobulle */
left: 0px; /* 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: none; /* arrière-plan de l'infobulle */
color: black; /* texte dans l'infobulle */
padding: 0px; /* marges internes par rapport aux bords */
/* bordures de votre infobulle*/
border: 2px groove #339966;
}

Par ceci :

Code:

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

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

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

/* bordures de votre infobulle*/
border: 2px groove #339966;
}

/* Lorsqu'on survole le contenu du bloc */
.infobulle:hover > div{
display: block; /* ceci affiche l'infobulle (on peut aussi utiliser inline au lieu de block) */
}
Tu peux éventuellement définir explicitement le cadre de référence des infobulles en englobant l'ensemble de celles-ci dans un bloc :

Code:

<div class="infobulle-container">
<div class="infobulle">
<img src="http://i40.servimg.com/u/f40/16/70/35/94/chibi-10.png" alt="nom de l'image" />
<div>
<img src="http://i40.servimg.com/u/f40/16/70/35/94/staff_11.png" alt="nom de l'image" />
</div>
</div>
...
</div>

Puis en définissant :

Code:

.infobulle-container {
position: relative;
}
Petit détail : tu as laissé le texte par défaut de la démo dans les attributs alt de tes images

Je vais travailler çà merci ^^

Hello Nyly*,
Ton sujet est-il toujours d'actualité ?
Exceptionnellement, compte tenu de la période des fêtes : tu as encore 3 jours pour répondre, avant archivage.
N'oublie pas de nous dire si ton sujet est résolu !
Merci de ta compréhension. Very Happy

Bonjour,

Malgré la relance de Pamina, nous avons toujours aucunes nouvelles. J'en conclue que le problème est résolu ou abandonné et archive.
Si jamais ce n'était pas le cas, n'hésite pas à créer un nouveau sujet. Smile

Bonne journée,,

Infobulle fixe, aucun tuto

Actuellement, positionnement relatif

Fixer la position de l'infobulle, par rapport à la page

Quelques optimisations

Infobulle fixe, aucun tuto

Sujets similaires

Sujets similaires

Partenaires Or