Sujets similaires

Sujet: Une question d'Infobulle [résolu] Sam 12 Oct 2013, 11:10

Bonjour ! Je viens réclamer un peu d'aide car j'ai un petit doute sur la possibilité du positionnement d'une infobulle. Je vous explique en image.

Spoiler:

J'aimerais lorsque la souris passe sur un point jaune, qu'une infobulle apparaisse en plein milieu de ma planète et soit correctement fixé, toujours à la même place (quelque soit le point ou l'on passe la souris) .

J'avais pensé a faire infobulle par infobulle, mais sachant que certains points apparaîtrons surement au fil du temps (je compte les positionner un par un par des petites Div, pour éviter le principe d'une page réactive, et risque d'en avoir un peu plus qu'une dizaine), j'ai peur que le nombre deviennent trop élevé et fasse ramer la page (sachant qu'il y aura dans la page que je souhaite instauré, d'autre code type javascript, jquerry , et j'en passe, du bon truc qui amène au rame).

J'avais aussi penser à un système d'onglet dans le pire des cas (la question est : est ce que ça peux marcher en positionnant les onglets n'importe où ?). Si vous avez une solution plus simple, plus accessible et qui pourrait marcher, bah faites moi savoir (si vous avez des exemples de petits codes aussi, ça peux le faire) =) Je suis assez bonne en codage donc je devrais m'en sortir, mais il me faut juste une base sure et certaine pour décoller !

Merci à vous !
Marinc !

Sujet: Re: Une question d'Infobulle [résolu] Sam 12 Oct 2013, 11:16

Bonjour Pony62,

C'est effectivement possible avec des infobulles, et je ne pense pas que cela fera ramer ta page.

Pour que l'infobulle soit toujours positionnée au même endroit, il s'agira d'un positionnement avec les propriétés CSS position : absolute (pour les infobulles) et position : relative (pour le contenant par rapport à où tu souhaites mettre ton infobulle). Tu peux te renseigner dessus sur Google si tu veux, tu trouveras surement des explications bien plus claires Razz

.

Si tu me montres la structure du code HTML et CSS que tu comptes faire, je peux peut être t'aiguiller davantage. Wink

Sujet: Re: Une question d'Infobulle [résolu] Sam 12 Oct 2013, 11:25

Bonjour ,
Justement je connaissais les positions mais j'étais pas sur que pour le coup cela marche. N'y a t'il pas de risque de sac de nœuds avec d'autre navigateur Smile

? (enfin j'entends par là, de décalage)
Je ne l'ai pas encore commencé vu que j'attendais d'avoir plus d'informations pour le commencer, ça devrait aller maintenant!

Merci beaucoup de ton aide! Je reviens dans un autre sujet si le problème se pose ou je reste sur celui ci ? =)

Sujet: Re: Une question d'Infobulle [résolu] Sam 12 Oct 2013, 11:36

Si je ne me trompe pas, position absolute et position relative sont supportés très bien sur tous les navigateurs et depuis un bout de temps, donc normalement pas de problème.

Si tu as un problème pour le faire, n'hésite pas à poster dans ce même sujet Wink

Sujet: Re: Une question d'Infobulle [résolu] Sam 12 Oct 2013, 19:38

Après avoir bossé tout l'après midi dessus, avoir galéré tellement fort pour réussir à tout aligné, sous chrome, me voilà passant sous test sous firefox, et ... Boum du bug. DOOOONC je reviens vous embêtez parce que ce n'est pas terminé. Alors je vous montre.

Sous chrome, parfait :

Spoiler:

Sous firefox, décalé :

Spoiler:

le lien vers le CSS est celui ci ( j'héberge souvent sous archive-host, ça me parait de faire des réglages rapides sans prise de tête et ça m'évite de me perdre dans les balises 'style') : Lien vers le CSS

Et le HTML est le suivant :

Code:: <link rel="stylesheet" href="http://sd-1.archive-host.com/membres/up/87130565361877161/css_perso.css" />

<div class="principale">

<div class="infobullea">

<img src="http://img543.imageshack.us/img543/2196/xrh9.png" alt="personnage" />


<div>
<div class="bouh"><table><tr><td><img src="http://31.media.tumblr.com/e74b07255e0a20dba8f7c774697826d3/tumblr_mukp737Pby1sktpb8o1_500.jpg" class="icone_journal"/></td><td>Nom & prénom
Description</td></tr></table>
</div>
</div>
</div>

<div class="infobulleb">

<img src="http://img543.imageshack.us/img543/2196/xrh9.png" alt="personnage" />


<div>
<div class="bouh"><table><tr><td><img src="http://31.media.tumblr.com/e74b07255e0a20dba8f7c774697826d3/tumblr_mukp737Pby1sktpb8o1_500.jpg" class="icone_journal"/></td><td>Nom & prénom
Description</td></tr></table>
</div>
</div>
</div>

<div class="infobullec">

<img src="http://img543.imageshack.us/img543/2196/xrh9.png" alt="personnage" />


<div>
<div class="bouh"><table><tr><td><img src="http://31.media.tumblr.com/e74b07255e0a20dba8f7c774697826d3/tumblr_mukp737Pby1sktpb8o1_500.jpg" class="icone_journal"/></td><td>Nom & prénom
Description</td></tr></table>
</div>
</div>
</div>

<div class="infobulled">

<img src="http://img543.imageshack.us/img543/2196/xrh9.png" alt="personnage" />


<div>
<div class="bouh"><table><tr><td><img src="http://31.media.tumblr.com/e74b07255e0a20dba8f7c774697826d3/tumblr_mukp737Pby1sktpb8o1_500.jpg" class="icone_journal"/></td><td>Nom & prénom
Description</td></tr></table>
</div>
</div>
</div>

<div class="infobullee">

<img src="http://img543.imageshack.us/img543/2196/xrh9.png" alt="personnage" />


<div>
<div class="bouh"><table><tr><td><img src="http://31.media.tumblr.com/e74b07255e0a20dba8f7c774697826d3/tumblr_mukp737Pby1sktpb8o1_500.jpg" class="icone_journal"/></td><td>Nom & prénom
Description</td></tr></table>
</div>
</div>
</div>

<div class="infobullef">

<img src="http://img543.imageshack.us/img543/2196/xrh9.png" alt="personnage" />


<div>
<div class="bouh"><table><tr><td><img src="http://31.media.tumblr.com/e74b07255e0a20dba8f7c774697826d3/tumblr_mukp737Pby1sktpb8o1_500.jpg" class="icone_journal"/></td><td>Nom & prénom
Description</td></tr></table>
</div>
</div>
</div>

<div class="infobulleg">

<img src="http://img543.imageshack.us/img543/2196/xrh9.png" alt="personnage" />


<div>
<div class="bouh"><table><tr><td><img src="http://31.media.tumblr.com/e74b07255e0a20dba8f7c774697826d3/tumblr_mukp737Pby1sktpb8o1_500.jpg" class="icone_journal"/></td><td>Nom & prénom
Description</td></tr></table>
</div>
</div>
</div>

</div>

Merci de votre aide ♥

Sujet: Re: Une question d'Infobulle [résolu] Dim 13 Oct 2013, 06:22

Est ce que pourrais me donner le lien direct vers la page HTML s'il te plait Smile

?

En effet, que ce soit sur Chrome ou Firefox j'ai pas du tout le même rendu que ta screen Sad

(par exemple aucunes des infobulles ne se placent à chaque fois au bon endroit). Je comprends pas trop pourquoi xD, donc je pense voir le code "en direct" serait plus simple Razz

Spoiler:

Sujet: Re: Une question d'Infobulle [résolu] Dim 13 Oct 2013, 06:36

Alors le résultat est ici : Ici Ce n'est pas mon forum test (c'est vrai que j'ai pas pensé à y passer ;_; ) mais voilà !

J'avais jamais pensé à ça ! :0 J'épurerais le code par la suite , pour le coup tu m'étonne que ça ferait économiser des lignes ! :0

Sujet: Re: Une question d'Infobulle [résolu] Dim 13 Oct 2013, 07:07

Je crois que je comprends d'où vient le décalage entre le rendu dans le forum, et en dehors du forum... Dans ForumActif quand on fait un retour à la ligne dans un poste, cela crée un une balise br, donc un retour à la ligne... Forcément, cela change le rendu de si on lance dans une simple page HTML ^^

Il y a une raison pour laquelle tu as utilisé "margin-left" et "margin-top" plutôt que "left" et "top" ? Par ce que le truc c'est que "margin-top", si tu changes l'un des "margin-top", ça fait bugger tous ceux en dessous...

En fait, moi je pensais à une technique totalement différente de placement x).

Sujet: Re: Une question d'Infobulle [résolu] Dim 13 Oct 2013, 08:06

He bien chez moi, ça marche pas du tout :/ Les points se mettent bien au bon endroit, mais l'infobulle ne s'affiche pas, et j'ai copié coller ton code en brut :/ (en rajoutant les images pour le "point") ... Donc je sais pas ce qui se passe ><

EDIT: ça marche sur page html mais sur forum ça à du mal, je vais tenter différent chiffre pour trouver le bon =) c'est la position qui m'a mise mal à l'aise! Merciii ♥

Sujet: Re: Une question d'Infobulle [résolu] Dim 13 Oct 2013, 08:29

Je pense que c'est mieux d'utiliser des position, plutôt que des margin, c'est plus "prévisible" comme rendu. Après directement dans un post de forum, y a toujours des fois où ça bug un peu, des trucs imprévisibles :/

Sujet: Re: Une question d'Infobulle [résolu] Dim 13 Oct 2013, 10:43

Ouaip, ça bug sur forum directement =) Donc je pense que je vais faire une i-frame x) ça va être particulièrement agaçant quand faudra changer quelque chose mais au moins ça marchera =) Merci beaucoup de ton aide =)

Une question d'Infobulle [résolu]

Une question d'Infobulle [résolu]

Sujets similaires

Sujets similaires

Partenaires Or