Bonjour,
J'ai un forum test, pour essayer ma "page d'accueil" mais j'ai un problème de codage, vis-à-vis de l'infobule des images. J'ai pu la mettre à la même hauteur que l'autre, mais c'est l'infobulle qui se barre à l'autre bout, maintenant. Je ne sais vraiment pas comment faire. J'ai déjà essayer mais, je ne veux pas tester de nouveau, ça risquerait de mettre trop de code, et d'empêcher les autres d'arriver. Je compte mettre trois ou deux images à côté donc voilà. http://academy.meilleurforum.com/

pour les codes que j'utilise les voici :

Spoiler:

Spoiler:

merci de votre patience, et de votre temps que vous m'accordez (:

Salut (: ,

Est ce que tu pourrai éventuellement ajouter des screenshot à ta demande d'aide (: ? En effet, j'ai un peu de mal à comprendre ton problème ^^'

Petite remarque, dans ton HTML, il y a un petit bout de code qui ne semble pas du tout à sa place... O0

Code:

</td></tr></table>

Ton petit bout de code est plutôt compliqué pour ce que tu cherches à mettre en place, il existe plus optimisé. As tu jeté un coup d'oeil aux tuto de CSS Actif d'abord ?

ah bon ? je vais y jeter un oeil alors.
non à vrai dire, mais dans quel partie, devrais-je regarder ?

Je te conseille d'utiliser la fonction Recherche (:
Il y a plusieurs topic sur les infobulles, n'hésites pas à tous les parcourir

oui, mais c'est dans le même principe, simplement je l'ai personnalisé !

Pour t'éclairer un peu , pense à bien retirer la partie de code qui n'a rien à faire là ^^

Code:

</td></tr></table>

Tu peux retirer le br, en effet, tu as avant et après des div (donc des balises dites block, qui n'ont pas du tout besoin du br). Si tu souhaites espacer les 2 blocs, il est toujours mieux de passer par la class, rajouter des margin).

Une fois ceci réglé, dans ton code, tu as choisi de gérer le couple image + texte par ce système là :

Code:

<h1>
      <img src="http://i.imgur.com/4RraCVt.png" class="staff" style="position: relative; right:15px;">
      <span>edwin pignon fondateur torturé<br>pseudo : triskell <a style="color:green">présent</a>
      </span>
   
   </h1>

Pourquoi ce choix des h1 ? H1 c'est pour des titres, là j'ai vraiment du mal à comprendre. Surtout que là tes H1 se décalent vers la droite... Puis tu choisis de décaler l'image vers la gauche (style="position: relative; right:15px;")

Ensuite, tu dis

Citation :

J'ai du rajouter style="position:relative; bottom:58px; left:45px à la deuxième image, pour pouvoir la mettre à côté de la première, vu que les div empêcher de la mettre à côté.

Dans l'un des tutos CSS Actif sur les infobulles, j'ai pu voir que l'auteur utilisait display inline-block pour régler son problème. Tu peux faire de même, ou bien utiliser les float.... Mais surtout pas utiliser du code comme ça O0.

Je te souligne que quelques points... Si tu veux vraiment je peux tout t'expliquer en détail, ou bien tu peux prendre le choix de prendre un code déjà bien propre (ça nous épargnera du temps xDDDD). Après je peux comprendre que tu souhaites avoir un détail complet ^___^

display inline-block je le positionne à quel endroit ? Je suis complétement perdu désolé.
br à l'intérieur, c'est pour sauter une ligne pour chaque texte dans l'infobulle.
h1 c'est que j'ai essayé de changer, en remplacant le div par h1 voir si ca changeait quelque chose.

Alors, le display: inline-block il faut que tu le mettes au niveau de ce qui va contenir ton image + ton texte. Dans l'exemple ici, il faut le mettre dans le css sur la class infobulle :

Code:

<div class="infobulle">
    <!-- Illustration de l'infobulle -->
    <img src="http://upload.cssactif.com/image/7nyan-cat.png" alt="Damudo pour CSSActif" />

    <!-- Contenu de l'infobulle -->
    <span>Coucou</span>
</div>

Pour le br, je te parlais de celui entre les 2 div

Pour le H1, il vaut mieux ne pas changer et laisser une div ^____^

As tu besoin d'aide pour le CSS (: ?

donc je dois le mettre à la place de display: block c'est ça ? oô
okey je comprends après, je vais le remettre dans ce cas (:
oui si possible, parce que je commence à m'y perdre.