Sujets similaires

Sujet: Infobulles capricieuses >< Ven 12 Mar 2010, 10:15

Coucou !

Aloors, comme ça fait trois heures que je me prends la tête sur ce fichu code, je crois qu'il est temps de demander de l'aide ... Ca doit être un truc tout bête en plus Laughing

.

Doonc, j'ai voulu changer le code de mes infobulles qui ne passaient pas sous IE (aux chiottes IE xD) et j'ai donc - comme Basil l'a expliqué ailleurs Laughing

- modifié les "a" par des "div". Jusque là, no problem ça passe tout seul ... Mon seul hic, c'est que maintenant mes infobulles refusent de se mettre les unes à côté des autres O_o Et j'ai beau tout essayer, je ne vois pas où est le problème scratch

Help ><

Voilà ce que ça me donne : https://2img.net/r/ihimizer/img175/8816/sanstitre1ob.png
Et voilà les codes pour ces infobulles de malheurs ><

Code:: <td width="210px" align="center" valign="top" rowspan="2">
   <div align="left"><img src="http://i41.tinypic.com/mtrzg7.png"></div><br>

   <div href="http://skills-hysteria.forumactif.org" class="info">
   <img src="http://img38.imageshack.us/img38/1636/skylls.png" alt="Skills Hysteria">
   <span><img src="http://i47.tinypic.com/2hfv31l.jpg"><br><br>
   SKILLS HYSTERIA<br>
   Communauté Graphique<br><br>
   <div><a class="postlink" href="http://skills-hysteria.forumactif.org">VISITER ?</a></div>
   </span>
   </div>

   <div href="http://hp-fanfiction.forumpro.fr" class="info">
   <img src="http://img441.imageshack.us/img441/9366/47203222.png" alt="HP Fanfictions">
   <span><img src="http://i47.tinypic.com/2dsom4z.jpg">
   <br><br>HP FANFICTIONS<br>
   Forum de fanfictions<br><br>
   <div><a class="postlink" href="http://hp-fanfiction.forumpro.fr">VISITER ?</a></div>
   </span>
   </div>

   <div href="http://master-poke.xooit.com/" class="info">
   <img src="http://img706.imageshack.us/img706/7555/36310980.png" alt="Master Poké">
   <span><img src="http://i46.tinypic.com/5eakgn.png">
   <br><br>MASTER POKE<br>
   Forum rpg Pokémon<br><br>
   <div><a class="postlink" href="http://master-poke.xooit.com">VISITER ?</a></div>
   </span>
   </div>

   <div href="http://www.frole-pbf.net" class="info">
   <img src="http://img193.imageshack.us/img193/7792/froleq.png" alt="Frôle">
   <span><img src="http://www.frole-pbf.net/img/links/88x31b.jpg">
   <br><br>FROLE-PBF<br>
   Annuaire<br><br>
   <div><a class="postlink" href="http://www.frole-pbf.net">VISITER ?</a></div>
   </span>
   </div>

   <br>

   <div href="http://ryotopub.probb.fr" class="info">
   <img src="http://img196.imageshack.us/img196/2364/ryoto.png" alt="Ryoto Pub">
   <span><img src="http://i45.tinypic.com/291191w.png">
   <br><br>RYOTO PUB<br>
   Forum de Pub<br><br>
   <div><a class="postlink" href="http://ryotopub.probb.fr">VISITER ?</a></div>
   </span>
   </div>

   <div href="http://guerredesclansrpg.bb-fr.com" class="info">
   <img src="http://img196.imageshack.us/img196/5943/gdcs.png" alt="La guerre des clans">
   <span><img src="http://img10.imageshack.us/img10/6272/bouton5.jpg">
   <br><br>GUERRE DES CLANS<br>
   Forum rpg animaux<br><br>
   <div><a class="postlink" href="http://guerredesclansrpg.bb-fr.com">VISITER ?</a></div>
   </span>
   </div>

   <div href="http://css-actif.forumactif.org" class="info">
   <img src="http://img94.imageshack.us/img94/5747/cssh.png" alt="CSS Actif">
   <span><img src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif">
   <br><br>CSS ACTIF<br>
   Entraide CSS & HTML<br><br>
   <div><a class="postlink" href="http://css-actif.forumactif.org">VISITER ?</a></div>
   </span>
   </div>

   <div href="http://zestedecouleurs.forumactif.org" class="info">
   <img src="http://img12.imageshack.us/img12/9506/zdca.png" alt="Zeste de couleurs">
   <span><img src="http://images.imagehotel.net/s8xxkgw5ll.png">
   <br><br>ZESTE DE COULEURS<br>
   Forum graphique<br><br>
   <div><a class="postlink" href="http://zestedecouleurs.forumactif.org">VISITER ?</a></div>
   </span>
   </div>

   <br><br>

   <a class="postlink" href="http://sos-rpg.4rumer.com/Nos-partenaires-h7.htm"><font color="darkred">Les autres ?</font></a> | <a class="postlink" href="http://sos-rpg.4rumer.com/les-partenariats-f5/">Devenir un copain ?</a></font>
   <br>
   </td>

Code:: div.info
{position: relative;
color: #000000;
text-decoration: none;
font-size: 11px;
font-family:georgia;
border-bottom: none;
width:142px;}

div.info span
{display: none;}

div.info:hover
{background: none;
z-index: 999;
cursor: defaut;}

div.info:hover span
{display: inline;
position: absolute;
white-space: nowrap;
top: 2px;
left: 15px;
background-image:url(http://img411.imageshack.us/img411/4715/sanstitre3ex.png);
text-decoration: none;
color: #292929;
padding: 3px;
border: 4px double #FFFFFF;
font-size: 11px;
width:142px;}

Si quelqu'un pouvait m'aider; ce serait génial xD
Mercii

Liliana

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 12:02

Bonjour,
Si j'ai bien compris tu voudrais mettre des infobulles l'une à côté de l'autre en utilisant des div ?
La ça me parait un peut compliquer, car les div s'empile automatiquement, voilà donc pourquoi tu ne les as pas les une à côté des autres.
A mon avis tu pourait remplacer les div par des class, peut être faire un block.
Si tu ne trouve pas je regarde ça demain aprem (la j'ai un ordi qui patine ^^).

Valentin.

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 16:57

A tout hasard, si tu faisais un tableau par exemple d'une ligne et de X colonnes, chaque colonne correspondant à une de tes infobulles ?

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 17:00

Si je comprends bien (excuses, j'ai du mal à percuter Laughing

) tu veux donc dire faire dans ma colonne de partenaires; deux lignes avec 4 colonnes pour chaque infobulle ? (soit, deux tr, et 4 td par ligne ?)

*va réussir à embrouiller Kimy xD*

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 17:01

Oui c'est ça <3 En gros t'incruste un tableau dans ton tableau xD

*c'est moi qui vais t'embrouiller xD*

Au pire si tu n'arrives pas à le faire je pourrais te le faire je pense ^^"

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 17:11

J'ai essayé, mais j'ai juste réussi à déglinguer ma page encore plus qu'actuellement Laughing

. J'ai du me louper quelque part xD. Je veux bien que tu essayes, je pense que tu visualises mieux que moi ce que tu me proposes Laughing

.. Je peux donner le code entier si tu le souhaites, puisque les infobulles sont imbriquées dans une page entière à la base Wink

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 17:22

Comme ceci ça va ?

Code:: <td width="210px" align="center" valign="top" rowspan="2">
<div align="left"><img src="http://i41.tinypic.com/mtrzg7.png"></div><br>
<table><tr><td width="10%">

<div href="http://skills-hysteria.forumactif.org" class="info">
<img src="http://img38.imageshack.us/img38/1636/skylls.png" alt="Skills Hysteria">
<span><img src="http://i47.tinypic.com/2hfv31l.jpg"><br><br>
SKILLS HYSTERIA<br>
Communauté Graphique<br><br>
<div><a class="postlink" href="http://skills-hysteria.forumactif.org">VISITER ?</a></div>
</span>
</div></td>

<td width="10%"> <div href="http://hp-fanfiction.forumpro.fr" class="info">
<img src="http://img441.imageshack.us/img441/9366/47203222.png" alt="HP Fanfictions">
<span><img src="http://i47.tinypic.com/2dsom4z.jpg">
<br><br>HP FANFICTIONS<br>
Forum de fanfictions<br><br>
<div><a class="postlink" href="http://hp-fanfiction.forumpro.fr">VISITER ?</a></div>
</span>
</div></td>

<td width="10%"> <div href="http://master-poke.xooit.com/" class="info">
<img src="http://img706.imageshack.us/img706/7555/36310980.png" alt="Master Poké">
<span><img src="http://i46.tinypic.com/5eakgn.png">
<br><br>MASTER POKE<br>
Forum rpg Pokémon<br><br>
<div><a class="postlink" href="http://master-poke.xooit.com">VISITER ?</a></div>
</span>
</div></td>
<td width="10%">
<div href="http://www.frole-pbf.net" class="info">
<img src="http://img193.imageshack.us/img193/7792/froleq.png" alt="Frôle">
<span><img src="http://www.frole-pbf.net/img/links/88x31b.jpg">
<br><br>FROLE-PBF<br>
Annuaire<br><br>
<div><a class="postlink" href="http://www.frole-pbf.net">VISITER ?</a></div>
</span>
</div></td></tr>

<br>

<tr><td width="10%"><div href="http://ryotopub.probb.fr" class="info">
<img src="http://img196.imageshack.us/img196/2364/ryoto.png" alt="Ryoto Pub">
<span><img src="http://i45.tinypic.com/291191w.png">
<br><br>RYOTO PUB<br>
Forum de Pub<br><br>
<div><a class="postlink" href="http://ryotopub.probb.fr">VISITER ?</a></div>
</span>
</div></td>

<td width="10%"><div href="http://guerredesclansrpg.bb-fr.com" class="info">
<img src="http://img196.imageshack.us/img196/5943/gdcs.png" alt="La guerre des clans">
<span><img src="http://img10.imageshack.us/img10/6272/bouton5.jpg">
<br><br>GUERRE DES CLANS<br>
Forum rpg animaux<br><br>
<div><a class="postlink" href="http://guerredesclansrpg.bb-fr.com">VISITER ?</a></div>
</span>
</div></td>

<td width="10%"> <div href="http://css-actif.forumactif.org" class="info">
<img src="http://img94.imageshack.us/img94/5747/cssh.png" alt="CSS Actif">
<span><img src="http://files.o-side.com/upload/CSSActif/css-actif-8831.gif">
<br><br>CSS ACTIF<br>
Entraide CSS & HTML<br><br>
<div><a class="postlink" href="http://css-actif.forumactif.org">VISITER ?</a></div>
</span>
</div></td>

<td width="10%"> <div href="http://zestedecouleurs.forumactif.org" class="info">
<img src="http://img12.imageshack.us/img12/9506/zdca.png" alt="Zeste de couleurs">
<span><img src="http://images.imagehotel.net/s8xxkgw5ll.png">
<br><br>ZESTE DE COULEURS<br>
Forum graphique<br><br>
<div><a class="postlink" href="http://zestedecouleurs.forumactif.org">VISITER ?</a></div>
</span>
</div></td></tr></table>

<br><br>

<a class="postlink" href="http://sos-rpg.4rumer.com/Nos-partenaires-h7.htm"><font color="darkred">Les autres ?</font></a> | <a class="postlink" href="http://sos-rpg.4rumer.com/les-partenariats-f5/">Devenir un copain ?</a></font>
<br>
</td>

Code:: div.info
{position: relative;
color: #000000;
text-decoration: none;
font-size: 11px;
font-family:georgia;
border-bottom: none;
}

div.info span
{display: none;}

div.info:hover
{background: none;
z-index: 999;
cursor: defaut;}

div.info:hover span
{display: inline;
position: absolute;
white-space: nowrap;
top: 2px;
left: 15px;
background-image:url(http://img411.imageshack.us/img411/4715/sanstitre3ex.png);
text-decoration: none;
color: #292929;
padding: 3px;
border: 4px double #FFFFFF;
font-size: 11px;
width:142px;}

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 17:34

Ca marche paaas Euh..

Je vais finir par remettre mes a au lieu de mes div, et dire aux gens d'utiliser Firefox Laughing

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 17:38

Ça te donne toujours la même chose ? °°

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 17:42

Euh nan xD
Ca me donne ça avec le code entier Laughing

: https://2img.net/r/ihimizer/img189/5702/scr0074740.jpg
[Tiens, j'ai deux fois "Devenir partenaires" xD]

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 17:45

XD T'as mis le code CSS que je t'ai donné ou t'as laissé l'autre ?
Sinon donne moi ton code entier x)

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 18:06

La hoooonte Shocked

J'avais collé le CSS sans enregistrer la page xD

Ca marche mieux qu'avant déjà; j'ai juste à centrer mon texte dans mes infobulles & à réduire l'espace entre chaque icône et ce sera bon ^^ Je recode ça et je te dis ^^

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 18:12

D'accord <3 ^^"

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 18:30

https://2img.net/r/ihimizer/img94/4738/scr2745949.jpg

Yattaaaaaaaaaaaaa Bravo !

Ca maaarche. Bon, j'ai du coller le "Autre" et "Devenir partenaires" en haut parce que en bas ça me décalait tout; mais on s'en fout, c'est joli comme ça aussi xD

Merciiiii énormément Kimy; si je pouvais je t'embrasserais.
Tiens, un bisou virtuel Smack Smack

; c'est déjà ça ^^.

EDIT : Nan, finalement je vais pleurer Laughing

Je prends le code, je le mets sur le premier forum de test, ça marche, comme sur le screen.
Je prends le MEME code, je le colle sur le second forum ou j'ai le design qui va avec ... Ca marche pluuuus >< https://2img.net/r/ihimizer/img17/3721/scr3257145.jpg
Sous le choc

RE-EDIT : Okay, je vais me cacher xD
J'avais oublié de mettre ton code CSS sur l'autre forum de test ... Là c'est bon, ça marche Laughing

Merciiii

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 19:10

XDD
En fait dans le CSS j'ai juste enlevé le width dans la première partie sinon les cellules du tableau pouvaient pas être "rétrécies"

Sujet: Re: Infobulles capricieuses >< Ven 12 Mar 2010, 19:16

Ca fait un quart d'heure que j'observe les deux codes CSS en essayant de voir ce qui avait changé .. Je vais aller dormir je crois Laughing

En tout cas, merci de ton aide; je crois que j'y serais encore sinon xD
Je classe ^^

Infobulles capricieuses ><

Infobulles capricieuses ><

Sujets similaires

Sujets similaires

Partenaires Or