Sujets similaires

Sujet: Beug info-bull Sam 20 Mar 2010, 23:24

Bonjour,

alors voilà, ca va faire deux jours que je "râle/chiale" contre mes info-bull.

Avec firefox tout roule, mais avec chrome ou explorer.... c'est tout le contraire.

Voici mon CSS :

Spoiler:

ET voici mon code info-bull sur ma page d'accueil :

Spoiler:

Alors voilà, si quelqu'un peut m'aider à régler le problème de sorte qu'il n'y ait aucun beug sur les trois navigateur internet (firefox, chrome, explorer). Car moi, j'arrive pas à mettre la main sur le "bobo" et ma patience n'y est plus....

Merccciiiiiiiiiiiiiiiiiiiiiiiiiiii d'avance !

voici le lien de mon forum pour ceux étant un peu plus visuel : City of Las Vegas

Sujet: Re: Beug info-bull Sam 20 Mar 2010, 23:56

Essaie ceci:
CSS

Code:: div.info{
position:relative;
z-index: 24;
background-color:#; /*pas de couleur pour eviter une "zone" sur l image"*/
color:#; /*pas de couleur pour éviter une "zone" sur l image"*/
text-decoration:none
}

div.info:hover{
z-index:25;
background-color:#ffffff; /*effet de surbrillance au passage de la souris*/
}

div.info span{
display: none;
}

div.info:hover span{
/*le contenu de la balise span ne sera visible que pour l'état a:hover */
display:block;
position:absolute;

top:0px; left:0px; width:100px; /*position et taille de l info bulle*/
border:1px solid #849096; /*epaisseur et couleur de cadre de l info bulle*/
background-color:#121E26; /*couleur de fond de l info bulle*/
color:#000000; /*couleur de la police de l info bulle*/
text-align: justify;
font-weight:none;
padding:5px; /*espace entre le texte et le cadre de l info bulle*/
}

HTML

Code:: <div href="#" class="infobulle"><img src="http://i48.tinypic.com/xc83o3.jpg"><span><center><b>Audray Stevens</b> <i>Fondatrice</i><br><img src="http://nsa10.casimages.com/img/2010/01/28/100128070926817631.gif"><div><a href="http://city-of-las-vegas.forum-canada.net/profile.forum?mode=viewprofile&u=26" class="postlink" target="_blank">Profil</a></div></center></span></div>

<div href="#" class="infobulle"><img src="http://i50.tinypic.com/29ynmly.jpg"><span><center><b>Logan Cayne</b> <i>Administrateur</i><br><img src="http://img35.imageshack.us/img35/3218/kellan24.gif"><div><a href="http://city-of-las-vegas.forum-canada.net/profile.forum?mode=viewprofile&u=7" class="postlink" target="_blank">Profil</a></div></center></span></div>

<div href="#" class="infobulle"><img src="http://i45.tinypic.com/vol5km.jpg"><span><center><b>Alexei Oxford</b> <i>Co-Administrateur</i><br><img src="http://i47.tinypic.com/msyv79.jpg"><div><a href="http://city-of-las-vegas.forum-canada.net/profile.forum?mode=viewprofile&u=3" class="postlink" target="_blank">Profil</a></div></center></span></div>

<div href="#" class="infobulle"><img src="http://i50.tinypic.com/rm2t83.jpg"><span><center><b>Chelsea Smith</b> <i>Modératrice</i><br><img src="http://i30.tinypic.com/oaxj0o.gif"><div><a href="http://city-of-las-vegas.forum-canada.net/profile.forum?mode=viewprofile&u=63" class="postlink" target="_blank">Profil</a></div></center></span></a> <a href="#" class="infobulle"><span></span></div>

<div href="#" class="infobulle"><img src="http://i49.tinypic.com/5eifqe.jpg"><span><center><b>Milla V. Campbell</b> <i>Modératrice</i><br><img src="http://i30.tinypic.com/u10md.gif"><div><a href="http://city-of-las-vegas.forum-canada.net/profile.forum?mode=viewprofile&u=23" class="postlink" target="_blank">Profil</a></div></center></span></div>

Maintenant je vais t'expliquer ce qui s'est passé =D
La balise "a" est une balise inline. La balise span aussi. Or, une balise inline n'est pas faite pour être à l'intérieure d'une autre balise inline. Il faut la mettre dans une balise block, comme div.
J'ai donc changé les a correspondants pour des div~

Sujet: Re: Beug info-bull Dim 21 Mar 2010, 02:24

cela ne fonctionne pas Sad

j'ai maintenant tout à la vertical et ce même avec firefox

je crois avoir copier la bonne partie du CSS pour la remplacer o.O

Spoiler:

Code:: /*QUI EST EN LIGNE */

.statistiques{
border:0px;
background-image: url("http://i47.tinypic.com/23ab9w.jpg");
background-repeat: no-repeat;
background-position: center;
height:300px;}

.groupes a{
text-decoration:none;
border-left: 3px solid #F0E9D8;
border-right: 3px solid #F0E9D8;
border-bottom: 1px solid #F0E9D8;
background-color:#C7BC99;
padding-left:3px;
padding-right:3px;
font-variant:small-caps;
}

.groupes a:hover{
text-decoration:none;
background-color:#cfc4a2;
}

/*RETRAIT ÉDITER X FOIS DANS LES MESSAGES*/

textarea, .textarea.post, input.post {
-moz-border-radius:10px;
}

/*LIEN EN MAJUSCULE*/

a {
font-variant: small-caps;
}

/*FOND DU FORUM CENTRER & NON RÉPÉTÉ*/

body {
background-repeat: no-repeat;
}

body {
background-position: top center;
}

/*ITALIQUE*/

i {
color: #733750;
font-style: italic;}

/*SOULIGNEMENT*/

u {
text-decoration: none;
border-bottom: 1.2px #BB4D7B dashed;
}

/*NOMS OMBRÉ */

.name {
text-transform: UPPERCASE;
text-align: center;
font-size: 12px;
text-shadow: #000000 1px 1px 1px;}

/* BORDURE FORUM */

.forumline{
background-color: #a18d6a;
-moz-border-radius-bottomleft:11px;
-moz-border-radius-bottomright:11px;
-moz-border-radius-topleft:11px;
-moz-border-radius-topright:11px;
border: 1px #a18d6asolid;
}

/* CITATIONS SPOILER CODE ARRONDI */

.code {
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
background-image:url(URL du Image de Fond CODE-préf. taille 200x200px en jpg);
padding:10px;
}
.spoiler {
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
background-image:url(URL du Image de Fond CODE-préf. taille 200x200px en jpg);
padding:10px;
}
.quote {
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
background-image:url(URL du Image de Fond CODE-préf. taille 200x200px en jpg);
padding:10px;
}

/* ARRONDISSEMENT DU CADRE DU FORUM */

.bodyline {
-moz-border-radius:16px;
}

/* PAS DE SOULIGNEMENT DES LIENS */

a
{
text-decoration: none !important;
}

/*LES DEUX TRAITS LA EN DESSOUS DU NOM DE CATÉGORIE*/

a.forumlink {
border-bottom:5px double #002242;
display:block;
}

a.forumlink:hover {
border-bottom:5px double #4d4131;
display:block;
}

/*SIGNATURE*/

.limitation-signature img {
max-width: 500px;
max-height: 200px;

_width: expression((this.offsetWidth>=this.offsetHeight) ? Math.min(parseInt(this.offsetWidth), 500 ) : true);
_height: expression((this.offsetHeight>this.offsetWidth) ? Math.min(parseInt(this.offsetHeight), 200 ) : true);
}

/*NAVIGATION*/

a.mainmenu {
-moz-border-radius:2px;
background-color:#e6e2d4;
border-left:2px solid #FFFFFF;
border-right:2px solid #FFFFFF;
color:#000000;
font-variant:small-caps;
padding-right:2px;
text-align:center;}

/*IMAGE TRANSPARENTE */

.opacity img {
filter:alpha(opacity=7);
-moz-opacity:0.8;opacity: 0.7;
}

.opacity img:hover {
filter:alpha(opacity=100);
-moz-opacity:1;opacity: 1;
}

a img{
opacity: 0.7;
}

a img:hover {
opacity: 1;
}

/*MESSAGE DACCUEIL*/

.celluletitre {
background-color: #dbd2bc;
color: #853635;
text-align: center;
font-size: 16px;
font-weight: bolder;
}

.cellulecontenu {
background-color: #cfc4a2;
}

.cellulecontenunav {
background-color: #cfc4a2;
}

/*INFO BULLE*/

div.info{
position:relative;
z-index: 24;
background-color:#; /*pas de couleur pour eviter une "zone" sur l image"*/
color:#; /*pas de couleur pour éviter une "zone" sur l image"*/
text-decoration:none
}

div.info:hover{
z-index:25;
background-color:#ffffff; /*effet de surbrillance au passage de la souris*/
}

div.info span{
display: none;
}

div.info:hover span{
/*le contenu de la balise span ne sera visible que pour l'état a:hover */
display:block;
position:absolute;

top:0px; left:0px; width:100px; /*position et taille de l info bulle*/
border:1px solid #849096; /*epaisseur et couleur de cadre de l info bulle*/
background-color:#121E26; /*couleur de fond de l info bulle*/
color:#000000; /*couleur de la police de l info bulle*/
text-align: justify;
font-weight:none;
padding:5px; /*espace entre le texte et le cadre de l info bulle*/
}

#menu a:link, #menu a:visited{
-moz-border-radius-bottomleft:11px;
-moz-border-radius-bottomright:11px;
-moz-border-radius-topleft:11px;
-moz-border-radius-topright:11px;
margin-left : 9px;
margin-right : 9px;
display: block;

#menu a:hover, #menu a:hover:visited{
color: #bfb2a0;
font-size: 12px;
color: #000000;
letter-spacing: 1px;
background-color: #EDEBE6;
border-left: 9px solid #d9d2c3;
border-right: 9px solid #d9d2c3;
border-top: 1px solid #d9d2c3;
border-bottom: 2px solid #d9d2c3;
margin-left: 2px;
margin-right: 2px;
letter-spacing: 1px
}

color: #333333;
background-color: #C7BC99;
text-align: center;
border-left: 9px solid #dbd2bc;
border-right: 9px solid #dbd2bc;
border-top: 1px solid #dbd2bc;
border-bottom: 2px solid #dbd2bc;
font-size: 12px;
margin-top: 4px;
margin-bottom: 4px
}

je colle a nouveau ce que tu m'as dit de mettre comme html :

Spoiler:

Sujet: Re: Beug info-bull Dim 21 Mar 2010, 06:10

Peut tu faire une impression écran please (je me permet de t'aider meme si je suis pas bon je peut aider quand je le veut) Si ca te donne tout a la vertical joue avec ton code, change un peux tout pour voir le probleme, tu dit que cela vient de Chrome et IE et parfait avec forefox, c'est vrai que Mozillia et développer mais pas au point de réparer les codes CSS/HTML donc je pensse que ca vient de ton naviguateur mais comme tu dit c'est avec les deux naviguateurs que ca beug (IE et GC) donc ca vient de ton code obligatoirement!

Sujet: Re: Beug info-bull Dim 21 Mar 2010, 11:03

Alors ce que tu peux faire c'est mettre un tableau autour de tes infobulles~

Code:: <table>
<tr>
<td><div href="#" class="infobulle"><img src="http://i48.tinypic.com/xc83o3.jpg"><span><center><b>Audray Stevens</b> <i>Fondatrice</i><br><img src="http://nsa10.casimages.com/img/2010/01/28/100128070926817631.gif"><div><a href="http://city-of-las-vegas.forum-canada.net/profile.forum?mode=viewprofile&u=26" class="postlink" target="_blank">Profil</a></div></center></span></div></td>

<td><div href="#" class="infobulle"><img src="http://i50.tinypic.com/29ynmly.jpg"><span><center><b>Logan Cayne</b> <i>Administrateur</i><br><img src="http://img35.imageshack.us/img35/3218/kellan24.gif"><div><a href="http://city-of-las-vegas.forum-canada.net/profile.forum?mode=viewprofile&u=7" class="postlink" target="_blank">Profil</a></div></center></span></div></td>

<td><div href="#" class="infobulle"><img src="http://i45.tinypic.com/vol5km.jpg"><span><center><b>Alexei Oxford</b> <i>Co-Administrateur</i><br><img src="http://i47.tinypic.com/msyv79.jpg"><div><a href="http://city-of-las-vegas.forum-canada.net/profile.forum?mode=viewprofile&u=3" class="postlink" target="_blank">Profil</a></div></center></span></div></td>

<td><div href="#" class="infobulle"><img src="http://i50.tinypic.com/rm2t83.jpg"><span><center><b>Chelsea Smith</b> <i>Modératrice</i><br><img src="http://i30.tinypic.com/oaxj0o.gif"><div><a href="http://city-of-las-vegas.forum-canada.net/profile.forum?mode=viewprofile&u=63" class="postlink" target="_blank">Profil</a></div></center></span></div> </td>

<td><div href="#" class="infobulle"><span></span></div></td>

<td><div href="#" class="infobulle"><img src="http://i49.tinypic.com/5eifqe.jpg"><span><center><b>Milla V. Campbell</b> <i>Modératrice</i><br><img src="http://i30.tinypic.com/u10md.gif"><div><a href="http://city-of-las-vegas.forum-canada.net/profile.forum?mode=viewprofile&u=23" class="postlink" target="_blank">Profil</a></div></center></span></div></td>
</tr>
</table>

Après si la largeur plante, il faut simplement changer la valeur du width="100%"

Mais ça, ça règle seulement le truc à la verticale qui arrive souvent sur IE quand c'est correct avec Firefox ou vice-versa bref ô_o

Bon moi = en train de vérifier ton code
Moi vient de voir que je avais oublié un div dans une infobulle
Mais infobulle = vide = WTF oo

Donc voilà je m'amuse x_x
Et je suis même pas sensé être sur le PC mdr

Sujet: Re: Beug info-bull Dim 21 Mar 2010, 12:06

Bonjour,

bon avec le tableau ca me donne : (avec les 3 navigateurs)

Spoiler:

qui est déjà beaucoup mieux Razz

o.O j'viens de remarquer que même les info-bull de mes partenaires sont bousillé >__<

@ Joris : merci de ton aide, mais Ikø' essai déjà de m'aider et en plus tu as parler juste de mon problème de base, alors que maintenant... il est avec les 3 navigateurs... il faut tout lire avant de s'incruster XD
Cela dit, le staff est la pour me répondre... merci tout de même Wink

Sujet: Re: Beug info-bull Dim 21 Mar 2010, 12:30

Ehm en attendant tu peux toujours remettre les a dans les codes~
Sinon ehm tu as utilisé le code du tutoriel d'Imari ou Lilypad *jsais plus XD*? Parce que vu que ce code marche parfaitement avec les div, il y a peut-être quielque chose qui diffère dans ton code qui fait que ça ne marche pas.

Enfin comme je disais je suis pas sensé être sur le PC *_* Alors je suis là à temps partiel mais toujours là et j'analyse tout ça x)

@ Joris: MDR Tu lui demandes de faire une impression d'écran alors que quand je t'en demande une tu m'écoutes pas u_u

EDIT Imari : c'est sûrement le tuto de Lilypad XD
EDIT Ikø': Oui je viens de voir XDD

Sujet: Re: Beug info-bull Dim 21 Mar 2010, 12:51

Bon,

avec le tuto de Lilypad le beug explorer est résolu (en tk chez moi xD)
mais avec chrome, il a toujours le même problème !

Edit : ah petit problème sous explorer finalement... je n'arrive pas à cliquer sur le profil de l'info-bull.... >_<

p.s. merci miss de prendre de ton temps pour m'aider

Sujet: Re: Beug info-bull Dim 21 Mar 2010, 13:02

Effectivement ô_o
Je me souviens que Joris notamment avait des problèmes majeurs avec Chrome pour ses infobulles, et on a eu beaucoup de difficulté à les régler. Je ne sais même pas si on a juste réussi à le faire u_u

Bref moi je dois m'absenter pour 15 petites minutes ou peut-être 20, si jamais Joris sait comment faire pour Chrome il peut venir aider en attendant x)
Mais s'il te plait met de la ponctuation Joris je comprends difficilement personnellement ._.

Sujet: Re: Beug info-bull Ven 26 Mar 2010, 17:04

Bonjour ^^

Le problème est-il résolu ?

Sujet: Re: Beug info-bull Sam 27 Mar 2010, 14:04

non, mais j'Ai décidé de laisser tomber...

merci quand même Smile

Beug info-bull

Beug info-bull

Sujets similaires

Sujets similaires

Partenaires Or