Sujets similaires

Bonsoir~

J'ai un petit problème avec un code pour ma PA...
J'ai passé la journée à essayer de comprendre ce qui se passait et comment résoudre le problème, mais je ne trouve toujours pas comment faire....
Je finis donc par abandonner et demander votre bienveillante aide ! [résolu]Images de l'infobulle l'une au dessus de l'autre au lieu de l'une à côté de l'autre 3517359236

[résolu]Images de l'infobulle l'une au dessus de l'autre au lieu de l'une à côté de l'autre 3517359236

Spoiler:

Comme on le voit sur la photo, mes deux images de la partie staff sont l'une au dessus de l'autre.
Seulement, je voudrais qu'elles soient côte à côté car elles prennent trop de place comme ça...

Voici mon code HTML global (si jamais il est nécessaire) :

Code:: <div style="font-size: 20px; font-variant: small-caps; padding: 10px; text-align:center; word-spacind: 2px; letter-spacing:1px; padding:10px; margin-bottom:10px;border-bottom: 3px dotted

#B65856; font-family:Georgia; font-weight: bolder; color:#B65856">Bienvenue sur Asian Dream, <i>{USERNAME}</i></div>

<center><span style="background-color:#F5B19C; -moz-border-radius: 5px ; -webkit-border-radius: 5px; padding:5px; padding-left:12px; padding-right:12px; margin:10px; text-align:center;"><a

href="http://asian-dream.asiat-world.com/t2-reglement">Règlement</a></span>

<span style="background-color:#F5B19C; -moz-border-radius: 5px ; -webkit-border-radius: 5px; padding:5px; padding-left:12px; padding-right:12px; margin:10px; text-align:center;"><a

href="http://asian-dream.asiat-world.com/f25-presentations">Présentations</a></span>

<span style="background-color:#F5B19C; -moz-border-radius: 5px ; -webkit-border-radius: 5px; padding:5px; padding-left:12px; padding-right:12px; margin:10px; text-align:center;"><a

href="http://asian-dream.asiat-world.com/f44-partenariat">Partenariat</a></span>

</center>
<br /><br />

<table width="100%" border="0" cellspacing="2" cellpadding="2" margin="0">
<tr><td style="vertical-align:top; width:35%;">
<fieldset style="padding: 10px; border: 3px solid #B65856; color:#B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px;"><legend style="font-variant: small-caps; padding: 5px;
border: 3px solid #B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px; font-family:Georgia; letter-spacing:1px; font-weight: bolder; font-size : 15px;">Présentation</legend><div

class="hauteur"><span style="float: left; font-size: 3em; font-weight: bold; font-family:Georgia; margin-right: 5px;">L</span><span style="color:#B65856;">orem ipsum dolor sit amet,

consectetur adipiscing elit. Mauris eu nibh urna. Nunc hendrerit magna nec dui dapibus sed placerat sem imperdiet. Vivamus sagittis augue in augue volutpat id malesuada massa imperdiet.

Phasellus in sapien leo, in euismod risus. Duis vitae dictum est. Donec ornare adipiscing erat, quis molestie enim varius id. Etiam faucibus, arcu non suscipit porta, dolor purus ultricies

leo, non fermentum lacus libero ut diam. Cras dictum eros rutrum nulla molestie tincidunt. Curabitur dignissim pharetra porta. Cras dapibus blandit massa sit amet ultricies. Morbi quis est

ligula, et facilisis diam. Sed non sem enim. In consequat gravida ipsum, sed rutrum magna adipiscing nec. Quisque vitae sem pharetra nunc molestie suscipit ut viverra

nunc.</span></div></fieldset>

</td><td style="vertical-align:top; width:35%;" >
<fieldset style="padding: 10px; border: 3px solid #B65856; color:#B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px;"><legend style="font-variant: small-caps; padding: 5px;

border: 3px solid #B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px; font-family:Georgia; letter-spacing:1px; font-weight: bolder; font-size : 15px;">Staff</legend><div

class="hauteur">
<span style="color:#B65856;">
<center>

<div class="infobulle">
<img src="http://www.zupmage.eu/up/1340902523.png" />

<div>
<b>Hikary</b>
<br />
Admin
<br />
<a href="http://asian-dream.asiat-world.com/u2">Profil</a>
<a href="http://asian-dream.asiat-world.com/privmsg?mode=post&u=2">MP</a>
</div>
</div><div class="infobulle">
<img src="http://www.zupmage.eu/up/1340902597.png" />
<div>
<b>Rikako</b>
<br />
Admin
<br />
<a href="http://asian-dream.asiat-world.com/u1">Profil</a>
<a href="http://asian-dream.asiat-world.com/privmsg?mode=post&u=1">MP</a>
</div>
</div>
</div>

</center>
</span></div></fieldset>

</td><td style="vertical-align:top; width:30%;">
<fieldset style="padding: 10px; border: 3px solid #B65856; color:#B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px;"><legend style="font-variant: small-caps; padding: 5px;

border: 3px solid #B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px; font-family:Georgia; letter-spacing:1px; font-weight: bolder; font-size : 15px;">Projet</legend> <div class="hauteur"><span style="color:#B65856;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu nibh urna. Nunc hendrerit magna nec dui dapibus sed placerat sem imperdiet. Vivamus sagittis augue in augue volutpat id malesuada massa imperdiet. Phasellus in sapien leo, in euismod risus. Duis vitae dictum est. Donec ornare adipiscing erat, quis molestie enim varius id. Etiam faucibus, arcu non suscipit porta, dolor purus ultricies leo, non fermentum lacus libero ut diam. Cras dictum eros rutrum nulla molestie tincidunt. Curabitur dignissim pharetra porta. Cras dapibus blandit massa sit amet ultricies. Morbi quis est ligula, et facilisis diam. Sed non sem enim. In consequat gravida ipsum, sed rutrum magna adipiscing nec. Quisque vitae sem pharetra nunc molestie suscipit ut viverra nunc.

</span></div></fieldset>

</td></tr>

<tr><td style="vertical-align:top;" class="hauteur">
<fieldset style="padding: 10px; border: 3px solid #B65856; color:#B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px;"><legend style="font-variant: small-caps; padding: 5px;

border: 3px solid #B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px; font-family:Georgia; letter-spacing:1px; font-weight: bolder; font-size : 15px;">Facebook</legend>
<div class="hauteur"><span style="color:#B65856;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu nibh urna. Nunc hendrerit magna nec dui dapibus sed placerat sem imperdiet. Vivamus sagittis augue in augue volutpat id malesuada massa imperdiet. Phasellus in sapien leo, in euismod risus. Duis vitae dictum est. Donec ornare adipiscing erat, quis molestie enim varius id. Etiam faucibus, arcu non suscipit porta, dolor purus ultricies leo, non fermentum lacus libero ut diam. Cras dictum eros rutrum nulla molestie tincidunt. Curabitur dignissim pharetra porta. Cras dapibus blandit massa sit amet ultricies. Morbi quis est ligula, et facilisis diam. Sed non sem enim. In consequat gravida ipsum, sed rutrum magna adipiscing nec. Quisque vitae sem pharetra nunc molestie suscipit ut viverra nunc.</span></div>
</fieldset>

</td><td style="vertical-align:top;">
<fieldset style="padding: 10px; border: 3px solid #B65856; color:#B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px;"><legend style="font-variant: small-caps; padding: 5px;

border: 3px solid #B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px; font-family:Georgia; letter-spacing:1px; font-weight: bolder; font-size : 15px;">Partenaires</legend> <div

class="hauteur"><span style="color:#B65856;"><b>• NOS PARTENAIRES :</b>

<marquee onmouseover="this.stop();" onmouseout="this.start();" scrollamount="4" scrolldelay="4"><a href="http://boyfriend.forumgratuit.org/" class="postlink" target="_blank"

rel="nofollow"><img src="http://i49.servimg.com/u/f49/16/69/27/93/logo1_12.gif" border="0" alt="" /></a>

<a href="http://mblaq-hole.forumactif.com/forum.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://img11.hostingpics.net/pics/543704bouton.gif" border="0" alt="" /></a>

<a href="http://ae-fansub.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://data.imagup.com/11/1131795330.jpg" border="0" alt="" /></a>

</marquee>

<b>• NOUS LIER :</b>

<center><a href="http://asian-dream.asiat-world.com" class="postlink" target="_blank" rel="nofollow"><img src="http://www.zupmage.eu/up/1332355144.gif" border="0" alt="" /></a></center>
</span></div></fieldset>

</td><td style="vertical-align:top;">
<fieldset style="padding: 10px; border: 3px solid #B65856; color:#B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px;"><legend style="font-variant: small-caps; padding: 5px;

border: 3px solid #B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px; font-family:Georgia; letter-spacing:1px; font-weight: bolder; font-size : 15px;">Crédits</legend><div

class="hauteur"> <span style="color:#B65856;"><b>Copyright :</b> Toute reproduction est interdite.
<br /><br />
<b>Codage Page d'accueil :</b> Sayuri sur CSSActif & Elegance Design.
<br />
<center><a href="http://www.css-actif.com/"><img src="http://files.cssactif.com/logos/css-actif-10035.gif" border="0"></a> <a href="http://elegance-design.forumactif.com"><img

src="http://i54.tinypic.com/20fq6b7.jpg" alt="Elegance Design"></a></center>
<br />
<b>Modification du codage par Rikako</b>
</span></div></fieldset>

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

Et plus précisément, la partie qui me pose problème :

Code:: <td style="vertical-align:top; width:35%;" >
<fieldset style="padding: 10px; border: 3px solid #B65856; color:#B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px;"><legend style="font-variant: small-caps; padding: 5px;

border: 3px solid #B65856; -moz-border-radius: 10px ; -webkit-border-radius: 10px; font-family:Georgia; letter-spacing:1px; font-weight: bolder; font-size : 15px;">Staff</legend><div

class="hauteur">
<span style="color:#B65856;">
<center>

<div class="infobulle">
<img src="http://www.zupmage.eu/up/1340902523.png" />

<div>
<b>Hikary</b>
<br />
Admin
<br />
<a href="http://asian-dream.asiat-world.com/u2">Profil</a>
<a href="http://asian-dream.asiat-world.com/privmsg?mode=post&u=2">MP</a>
</div>
</div><div class="infobulle">
<img src="http://www.zupmage.eu/up/1340902597.png" />
<div>
<b>Rikako</b>
<br />
Admin
<br />
<a href="http://asian-dream.asiat-world.com/u1">Profil</a>
<a href="http://asian-dream.asiat-world.com/privmsg?mode=post&u=1">MP</a>
</div>
</div>
</div>

</center>
</span></div></fieldset>

</td>

Et enfin, le code CSS ajouté à celui par défaut :

Code:: a {
text-decoration:none;
}
a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a:active
{
text-decoration: none;
}

.hauteur {
height: 180px;
overflow: auto;
}

div.infobulle {
position: relative;
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

div.infobulle div{
display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
div.infobulle:hover div{
display: block; /* ceci affiche l'infobulle */
position: absolute;}

De plus, les infobulles ne sont pas centrées au milieu des photos comme je le souhaiterai. J'ai essayé d'ajouter 'top' et 'left' à la partie 'div.infobulle:hover div' du CSS mais ça n'a rien donné. Au contraire, mes infobulles avaient carrément disparues à ce moment là [résolu]Images de l'infobulle l'une au dessus de l'autre au lieu de l'une à côté de l'autre 3451650135

[résolu]Images de l'infobulle l'une au dessus de l'autre au lieu de l'une à côté de l'autre 3451650135

Merci d'avance pour votre aide !

Hey.
Peut-on avoir le lien du forum où tu testes la chose ? Smile

Mici !

J'ai pas de forum test, mais je peux le mettre sur mon fofo en attendant ^_^
http://asian-dream.asiat-world.com

Merci pour ta réponse Smile

Les images du staff ne font pas trop grande ? essaie de les réduire ^^

J'ai déjà essayé de les réduire jusqu'à du 100 x 100 px au cas où c'était ça qui bugait, mais malheureusement, même à cette taille ça reste l'une au dessus de l'autre Sad

Pourtant il y a suffisamment de place pour mettre 2 photo de 100x100 dans ce cadre.

Merci quand même pour ta proposition Smile

J'ai essayé tes codes dans mon forum test et il fonctionne, j'ai pas d'image l'un en dessous de l'autre, donc il y a un problème sur ton forum mais je ne le vois pas, je vais essayé de trouver ^^

Arf >.<

Ok merci Smile

Je suis pas très douée avec tout ça >.<

question : es ce que tu as toucher ta feuille css après l'avoir mis ici ? car moi j'ai une ombre sur les images et pas toi

Euh non, du tout. Je n'y ai plus touché depuis que j'ai posté hier soir >.<

regarde ce que j'obtiens https://i.servimg.com/u/f49/14/19/31/38/proble10.jpg

Tu as activé la feuille CSS ?

Bizarre que j'ai pas la même chose...

Oui j'ai bien activé la feuille CSS. Du moins si c'est bien dans Affichage => Couleur => Feuille de style CSS => Optimiser votre CSS

C'est peut-être le CSS de base qui pose problème alors...

Voici l'entier :

Code:: body { cursor: crosshair }
a:hover { cursor:ne-resize; }

u{border-bottom: 2px solid;border-color:#1f1f1f;text-decoration: none;
-moz-border-radius:10px;}

I{border-bottom:none; color:#1f1f1f;text-decoration: none
}

a:hover{text-transform:uppercase;}

.bodylinewidth {
width:70%}

a.forumlink:hover, a.forumlink:hover:visited{
background-color: #E3DFD6;
border-left: 9px solid #E3DFD6;
border-right: 9px solid #E3DFD6;
-moz-border-radius:6px;}
background-color: #1f1f1f;
a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }

.quote{
font-family: Tahoma;
font-size: 11px;
color: #616161;
line-height: 125%;
background-color: #deb9b7;}

.code{
font-family: Courier,Courier New,sans-serif;
font-size: 11px;
color: #616161;
background-color: #deb9b7;
border: #1f1f1f;}

input,textarea, select {
-moz-border-radius-bottomleft:9px;
-moz-border-radius-bottomright:9px;
-moz-border-radius-topleft:9px;
-moz-border-radius-topright:9px;
}

a {font-variant: small-caps;}
.forumline{-moz-border-radius:15px;}
.bodyline {-moz-border-radius:40px;}

.forumline{
background-color: #C58F82;
-moz-border-radius: 0px 0px 14px 14px ;
border-bottom: 6px #B65856 solid;
border-top: 1px #C58F82 dotted;
border-right: 1px #C58F82 dotted;
border-left: 1px #C58F82 dotted;}

body {
background-repeat: no-repeat;
background-position: none;
}
a.mainmenu{
text-decoration: none;
color : #FFFFFF;
}
a.mainmenu:hover{
text-decoration: none;
color : #B0ADA0;
}

.forumline{
border: 3px #B54335
double;
}

a.mainmenu:link, a.mainmenu:visited{
background-color: #B6685E;
border-left: 9px solid #B6685E;
border-right: 6px solid #B6685E;
-moz-border-radius:13px;
border: 1px #B54335
double;
}

.sharing-cl{
overflow:hidden;
margin:-20px 0 0 0;
padding:0;
list-style:none;
width:530px;
}
.sharing-cl a{
overflow:hidden;
width:75px;
height:20px;
float:left;
margin-right:5px;
text-indent:-200px;
background:url(http://sd-2.archive-host.com/membres/up/24071559914142709/tuto_partager/partager.png) no-repeat;
}
a.sh-su{background-position:-210px -40px;}
a.sh-feed{background-position:-70px -40px;}
a.sh-tweet{background-position:-140px -40px;}
a.sh-mail{background-position:0 -40px;}
a.sh-digg{background-position:-280px -40px;}
a.sh-face{
margin-right:0;
background-position:-350px -40px;
}
a.sh-mail:hover{background-position:0 1px;}
a.sh-feed:hover{background-position:-70px 1px;}
a.sh-tweet:hover{background-position:-140px 1px;}
a.sh-su:hover{background-position:-210px 1px;}
.sh-digg:hover{background-position:-280px 1px;}
a.sh-face:hover{
background-position:-350px 1px;
}
#text{
margin-top:5px;
font-weight:bold;
font-family:helvetica,arial,sans-serif;
}
#text a{
text-indent:0;
height:auto;
text-align:center;
font-size:11px;
padding-top:35px;
color:#999;
text-decoration:none;
}

/***********************CSS PA***********************\

a {
text-decoration:none;
}
a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a:active
{
text-decoration: none;
}

.hauteur {
height: 180px;
overflow: auto;
}

div.infobulle {
position: relative;
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

div.infobulle div{
display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
div.infobulle:hover div{
display: block; /* ceci affiche l'infobulle */
position: absolute;}

/***********************!FIN! CSS PA***********************\

Je ne l'avais pas donné avant parce que je pensais que c'était le même pour tous les forums de forumactif, mais comme j'ai pris un theme de hitskin, quelque chose change peut-être ? Je sais pas ^^'

Ici :

Code:: /***********************CSS PA***********************\

Tu dois finir par

Code:: */

Et non

Code:: *\

Même remarque pour le commentaire de fin. Smile

C'est cette faute qui invalide tout le code jusqu'à la fin du premier commentaire à suivre. ^^

Arf, idiote comme faute >.< C'est corrigé ! Merci !

Par contre, j'ai toujours mes images l'une au dessus de l'autre Sad

et la je viens à ta rescousse, tu n'as pas assez développer ta fiche css

Voici ta feuille CSS corriger

Génial ! Merci beaucoup~ !

Yop'
Je vois que le problème est résolu, alors je déplace !
Merci de l'avoir signalé [résolu]Images de l'infobulle l'une au dessus de l'autre au lieu de l'une à côté de l'autre 926145

[résolu]Images de l'infobulle l'une au dessus de l'autre au lieu de l'une à côté de l'autre 926145

[résolu]Images de l'infobulle l'une au dessus de l'autre au lieu de l'une à côté de l'autre

[résolu]Images de l'infobulle l'une au dessus de l'autre au lieu de l'une à côté de l'autre

Sujets similaires

Sujets similaires

Partenaires Or