Bonsoir,
J'aimerais savoir comment mettre un div scroll dans une inbulle pour pouvoir mettre du texte sans que l'infobulle s'agrandisse car quand j'introduit un div ca me met l'effet du div en dehors de l'infobulle o: et comment remonter l'infobulle sans bouger l'image qui est hors de l'infobulle ~

Spoiler:

CSS :

Spoiler:

Salut, je crois que ton html n'est pas complet, et la balise info n'existe pas

N'est pas complet, tu veux dire quoi ? o:
En faite c'était "a." à la base, mais j'ai remplacé par "info" et ça marche très bien.
Seulement je ne sais pas comment mettre un div à l'intérieur, ni comment approcher l'infobulle de l'image o/

Pour ce qui est de la balise info, c'est une nouvelle balise supportée en html5. Mais effectivement ton code est incomplet, déjà le fait que tu clôtures ton code par une balise /p et une balise /div imbriquée dedans est incorrect, retiens bien que div est une balise "globale", le reste doit être écrit dedans, pas à l'extérieur (il existe des exception évidemment mais tu les apprendra si tu t'y intéresse d'avantage^^).

Donc ton code devrait logiquement commencer par un div et finir par un /div (je ne connais pas la nature de la balise info parcontre mais ça ne devrait pas poser de souci), à l'intérieur de ça ta balise info si tu souhaites réellement l'utiliser. Sinon remplace la simplement par la balise div class="info", et ensuite viens seulement le reste.

Et concernant ton problème de scroll vient de ta balise css,

remplace

Code:

.descente {
  overflow:auto;

par

Code:

.descente {
  overflow:scroll;

tout bêtement ^^

Cela devrait déjà t'aider, sinon poste un screen de ce que ça donne, ça pourrait aider à voir la nature du problème. ^^

Citation :

Pour ce qui est de la balise info, c'est une nouvelle balise supportée en html5.

Qu'est ce que c'est que cette ânerie ? On n'invente pas des balises pour faire joli, d'une part, et d'autre part la balise <info> n'existe pas O.o

Donc non, utilisez un sélecteur valide, pas "info" !

Et sinon, GalgaeH, l'utilisation de auto pour overflow était valable.

Kyou, je te conseille de suivre le tutoriel de Kiwi, ICI pour coder proprement ton infobulle, là c'est un peu du n'importe quoi ce que tu nous as fait ^^' (on n'invente pas des balises juste parce que ça nous arrange !)

Je suis parfaitement d'accord sur le fait que la balise info n'existe pas officiellement, mais malgré tout j'ai vu qu'elle était utilisée à gauche et à droite sur le net, dans divers tutoriels et bon visiblement elle a l'aire de marcher pour eux. Ce qui fait que d'une certaine manière, elle existe sans exister, je ne me serais pas permis de raconter des "âneries" sans avoir fait un minimum de recherches voyons. xD

Pour l'overflow si j'ai conseillé l'utilisation de scroll plutôt qu'auto c'était pour forcer le scroll et ne pas laisser le choix au navigateur.
Vu qu'elle avait apparemment le problème ^^

Citation :

pour pouvoir mettre du texte sans que l'infobulle s'agrandisse

Ce n'est pas parce que tout le monde utilise un mot tarabiscoté (ou, ici, une balise inventée) qu'il existe. Le problème c'est que le HTML, le CSS et tous les langages informatiques sont prévus pour être lus et interprétés par des robots, lesquels ont accès à un "dictionnaire" de mots bien déterminé. Si nous autres humains pouvons nous permettre d'inventer des mots et de comprendre leur sens, ce n'est pas le cas des machines. La balise <info> n'existe pas, donc on ne s'en sert pas. Le fait que "on" l'utilise un peu partout et que "ça ait l'air de marcher" n'en fait pas une balise correcte, et encore moins "une nouvelle balise reconnue en HTML5" (parce que c'est bien ce que tu as affirmé, et que je qualifie d'ânerie )

Je pousse ma petite gueulante ici parce que ce n'est pas la première fois que je suis face à cette mentalité, un codeur qui se veut compétent ne se base pas sur des "ça a l'air de marcher" en guise de référence. Si tu codes en HTML et CSS, tu te bases sur de la documentation officielle, pas sur des tutoriels hasardeux pondus par des codeurs du dimanche. Voici un document qui contient la liste de toutes les balises HTML5 reconnues par le w3c.

Et par ailleurs, je rappelle que sur l'en-tête du code source des forums de ForumActif, il y a écrit ceci :

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

C'est à dire que les documents HTML utilisés par FA sont en XHTML transitionnel. Pas en HTML5. Donc, techniquement, l'utilisation de balises HTML5 est à éviter sur FA.

Son problème de div qui dépasse vient essentiellement du fait que le navigateur ne sait pas trop si la balise info - qui n'existe pas - est un élément en ligne ou un bloc (par défaut elle sera interprétée comme un élément inline) et forcément, comme on tente de mettre un bloc dans un élément inline (le truc à ne jamais faire) ça dépasse.

Une infobulle ça se code comme ça :

Code:

<div class="infobulle">
    CONTENU VISIBLE
    <div> CONTENU QUI APPARAIT AU SURVOL </div>
</div>

Code:

.infobulle {
  position:relative; /* on définit le bloc comme référent */
}

.infobulle > div {
  display: none; /* infobulle cachée par défaut */
}

.infobulle:hover {
  background: none; /* correction d'un bug IE */
}

/* au survol du bloc, on fait apparaitre la 'bulle' */
.infobulle:hover > div {
  display: block; /* on fait apparaitre l'infobulle (on peut mettre inline aussi si besoin) */

  position: absolute; /* on va la positionner */ 
  top:0px; /* de 0 pixels par rapport au haut de l'élément survolé */
  left: 50px; /* de 50px par rapport au côté gauche de l'élément survolé */
  z-index:25; /* on met l'élément au dessus du reste */

  /* et après on peut mettre les propriétés de taille, couleur, forme, etc de l'infobulle */
  width:200px;
  background:red;
  border-radius:25px;
  padding:10px;
}

En rajoutant un display:inline; ou même display:inline-block; dans la classe .infobulle si jamais on a besoin d'avoir des infobulles côte à côte.

Pas mieux que 'Christa. Un petit memento des balises html5 disponible ici : http://www.xhtml-lab.com/html5-poster/pdf/HTML5-Reference-Poster.pdf

De plus, il est vrai que FA n'est pas définit en HTML5, c'est donc une erreur que de l'utiliser.

Enfin, si "ça marche", c'est parce-qu'il s'agit juste d'une histoire de sélecteur. Rien ne vous empêche de faire une balise <tartampion>; et de la repérer en CSS, ça marchera. Mais ce ne sera pas correct, sale et pas accessible par les navigateurs, notamment pours les personnes malvoyantes et handicapées (c'est aussi et surtout pour elles que le W3C existe et que le web établit ces normes, rien ne vous oblige de les respecter mais un bon code est un code qui prend en compte les normes).

Ce qui est le cas de votre fameuse balise <info>, ça ne coûte pas plus cher (et c'est bien mieux) de passer par un identifiant #info. Peut-être que le W3C créera plus tard cette balise, l'établissant comme norme officielle, prise en compte par les navigateurs, tout comme ils l'ont fait avec footer, header & co. (qui étaient les noms les plus donnés aux identifiants des header et footer avant, qui se faisaient... avec des div, faute de balise !).

Voilou