Cacher-afficher par effleurement

[calimo]

Ok, au temps pour moi, il faut effectivement conserver un positionnement absolu, mais ôter les top et left qui placent le bloc à un endroit spécifique. À la place, il faut probablement « jouer » avec les marges (margin, margin-top, etc.)…

[Bernard de Go Mars]

Je ne suis pas sûr qu'un positionnement absolu soit l'idéal...

En fait "absolu" signifie absolu par rapport à quoi ? Par rapport au haut de la page ou du moins le haut du bloc de texte ?

Si c'est le cas, les infos-bulles peuvent aller se perdre en dehors de la partie affichée de la page.

À la place, il faut probablement « jouer » avec les marges (margin, margin-top, etc.)…

Le problème c'est que c'est justement là que je suis incompétent ! Mais je vais essayer de me soigner...

Amicalement,

Bernard

[calimo]

Selon http://www.yoyodesign.org/doc/w3c/css2/ ... ing-scheme c'est par rapport au bloc conteneur (donc logiquement le paragraphe contenant le lien).
Y'a pas de mirâcle, il faut tester pour y arriver

[Bernard de Go Mars]

Hum,

j'ai fait des expériences avec la position définie comme "absolute" : Les info-bulles s'ouvraient alors toujours à la même hauteur de la page (par rapport au texte, donc, et non par rapport au haut de la fenêtre, réduite ou non).

Il y a donc un problème avec cette notion de position absolue. Apparemment la position est absolue par rapport au haut de la page (ou du bloc conteneur, comme tu le dis), même si uniquement une petite partie de la page ou de ce bloc est affichée dans la fenêtre par le navigateur(en fenêtre réduite ou même en pleine si la page est plus haute que l'écran)...

Quant à la position "relative", elle permet bien l'affichage des info-bulles relativement au texte à effleurer (par dessus ce texte, si on le désire, ce qui est assez intéressant) : C'est beaucoup mieux.
Cependant, si l'infobulle est trop longue, elle s'affiche trop bas, sous la barre des tâches en dehors de l'écran. C'est là que le système devient inefficace (non accès au bas du texte de l'info-bulle par le connecteur)...

C'est le seul problème qui reste à résoudre, en fait.

Une façon de s'en sortir, dans ce dernier cas, est d'utiliser la flèche directionnelle "vers le bas", qui déroule le bas de l'info-bulle (sur FF)... Mais ce truc n'est pas instinctif et il serait lourd d'avoir à le préciser au connecteur à chaque fois...

Autre solution (en cas de longue info-bulle en bas du texte : donner à cette dernière info-bulle un autre style qui l'ouvrira au-dessus du mot à effleurer. Mais si la position du cadre de l'info-bulle est définie par la position du haut de la bulle, il faudra ajuster manuellement la hauteur de la bulle pour tout caler. Il en serait autrement s'il était possible de caler en premier le bas du cadre de la bulle, le haut du cadre se plaçant automatiquement pour que ledit cadre puisse contenir la totalité du texte...

Amicalement,
et merci pour ton aide,

Bernard

[helenic]

sinon... tu peux aussi aller voir là ...
http://trentrichardson.com/examples/csstooltips/

ou plus simple

Code : Tout sélectionner

<style type="text/css">
#info p {margin-left:15px; margin-right:20px;}
#info img {margin:15px; float:left;}
#info h1 {margin-left:15px;}
/* the style starts here */
a.tooltip {color:#c00;}
a.tooltip b {display:none;}
a.tooltip:hover {border:0; position:relative; z-index:500; text-decoration:none;}
a.tooltip:hover b {display:block; position:absolute; top:20px; left:-25px; padding:5px; font-weight:normal; color:#000; border:1px solid #888; background:#ffc; width:150px;}
a.tooltip:hover b em {position:absolute; left:20px; top:-6px; width:11px; height:6px; background:#fff url(tooltip.gif) 0 0; display:block; font-size:1px;}

/* version 2 */
#tt {background:url(brown.jpg); width:740px; margin-bottom:100px;}
a.tooltip2 {color:#c00;}
a.tooltip2 b {display:none;}
a.tooltip2:hover {border:0; position:relative; z-index:500; text-decoration:none;}
a.tooltip2:hover b {display:block; position:absolute; top:20px; left:-25px; padding:5px; font-weight:normal; color:#000; border:1px solid #ff0; background:#8cc; width:150px;}
a.tooltip2:hover b em.outer {position:absolute; left:20px; top:-8px; width:0; height:0; display:block; background:transparent; border-left:7px dashed transparent; border-right:7px dashed transparent; border-bottom:7px solid #ff0; overflow:hidden; z-index:100;}
a.tooltip2:hover b em.inner {position:absolute; left:20px; top:-7px; width:0; height:0; display:block; background:transparent; border-left:7px dashed transparent; border-right:7px dashed transparent; border-bottom:7px solid #8cc; overflow:hidden;; z-index:100;}

.clear {clear:both;}

</style>

où tooltip.gif = http://www.cssplay.co.uk/menu/tooltip.gif imagik.fr

de : http://www.cssplay.co.uk/menu/tooltips ...
toujours en css et simplement à recopier ... c'est fait pour..

[Bernard de Go Mars]

Merci, Helenic, pour ton aide.

Sur deux des liens que tu donnes, le problème des dépassements de fenêtre par les bulles n'ont pas été résolu. À vrai dire, ça peut laisser penser que, peut-être, j'ai été trop exigeant puisque les autres se satisfont de ces dépassements...

Le pire est d'ailleurs que la bulle apparaisse trop bas pour être vue par le visiteur du site (tout à fait en dehors de la fenêtre) : elle est alors complètement inutile...

Le lien en .gif ne fonctionne pas pour mon navigateur...

Quant à ton code, il va falloir que je l'étudie pour comprendre où il faut le mettre (tu vas trop vite pour ma nullitude !). Il semble qu'il y ait deux versions ?

À plus tard, donc...

Amicalement,

Bernard

[helenic]

deux versions en effet ..
à insérer entre les balises head . et a rappeller en corps de texte par un span. crois moi stu nichols est un maître.. copie colle et ne te pose pas de questions.
regarde juste le source et admire...

[Bernard de Go Mars]

Merci, cher helenic,

je serais prêt à ne pas me poser de questions, mais je n'arrive pas à décoller (j'échoue "à rappeler en corps de texte par un span").

C'est là qu'on mesure la différence entre un bidouilleur comme moi et ceux qui savent y faire, comme vous-autres.

Souvenons-nous que dans la pratique (et à mon niveau), la simplicité d'usage reste un facteur important (du moins tant qu'un additif ne sera pas implanté sur Kompozer).
Finalement, selon ce critère de simplicité, le code de Bubudubois me paraît produire des résultats corrects, ses défauts (info-bulles s'affichant hors-fenêtre) n'ayant pas été éliminés par les autres auteurs de codes...

En te remerciant,

Bernard

[Re]

Salut,

je ne comprend rien , je croyais trouver ici une solution a mon probleme mais meme apres avoir tout lu la discussion en faite je suis juste bien plus découragé qu'au debut de ma recherche.

Je voudrais seulement que mon menu de gauche; quand on clic sur la categorie qui nous interesse, s'affiche directe sous celle ci les sous categorie (rubrique)déroulant.

Pourriez vous maider ou me redirigé dans un endroit ou les debutant si retrouverais mieux svp

[Bernard de Go Mars]

Quant à moi, cher "Re", je ne pourrai sans doute pas t'aider...

Mais tu gagneras à rédiger plus clairement ta demande si tu veux que quelqu'un t'aide.

Il arrive souvent, dans ce domaine de l'HTML, que l'on soit découragé, tout simplement parce que personne n'a encore mis en place des solutions simples à nos problèmes.

C'est le cas, par exemple pour les infobulles qui étaient le sujet de cet échange : l'utilisation des telles infobulles serait quelque chose d'assez intuitif et n'aurait rien d'extraordinaire, mais il n'y a pas, apparemment, de système ordinaire pour les mettre en œuvre...

Amicalement,

Bernard

[Asumbaa]

Salut,

je ne comprend rien , je croyais trouver ici une solution a mon probleme mais meme apres avoir tout lu la discussion en faite je suis juste bien plus découragé qu'au debut de ma recherche.

Je voudrais seulement que mon menu de gauche; quand on clic sur la categorie qui nous interesse, s'affiche directe sous celle ci les sous categorie (rubrique)déroulant.

Pourriez vous maider ou me redirigé dans un endroit ou les debutant si retrouverais mieux svp

Salut Re,

Je t'invite à ouvrir un nouveau sujet en expliquant bien ce que tu cherches à faire et ce que tu as essayé, en indiquant un peu de code sur lequel on pourra s'appuyer pour t'aider.