Sujets similaires

Bonsoiiiiiir :DD

Je viens d'installer une info-bulle sur la p-a de mon forum et là, un léger soucis s'impose :/
Regarder la p-a de ce forum :

Code:: http://dragon-life.forumgratuit.org

Il y a un problème de décalage :

https://i.servimg.com/u/f74/15/04/09/66/sans_t10.png

Le "staaf doit se placer normalement en haud centrer de la colonne de droite, l'infobulle doit se placer en dessous du staff décalé un peu à gauche (pour pouvoir ensuite aligné toutes les infobulles et la partie encadrée verte ne doit pas être "accroché" à l'info bulle puisque lorsque je passe ma souris sur l'image avec le dragon l'infobullle vient avec...

Voilà mon html :

Code:: <br><div style="text-align: center;"> <br></div>
<table cellpadding="2">
<tbody>
<tr>
<td valign="top" width="22%"><div style="text-align: center;">
</div><p style="text-align: center;"><img src="http://i34.servimg.com/u/f34/15/04/09/66/dasale11.png"><marquee behavior="scroll" direction="up" scrollamount="7">
<p>Ouverture de la partie graphisme !</p>
<p>Joyeuses fêtes à tous !</p><p><span style="color: White;">- - - - - - - - - -</span> <br></p><p>Tous les chefs se sont maintenant répartis dans leur clan respectif !</p><p><span style="color: White;">- - - - - - - - - -</span> <br></p><p>Création du Forum le 27 novembre 2010.</p>
</marquee>
</p><p><span style="color: White;"><br></span>
</p><div style="text-align: center;"><img src="http://i34.servimg.com/u/f34/15/04/09/66/sans_t12.png" alt="" border="0"><br></div><div style="text-align: center;"><a class="postlink" href="http://www.casimages.com/" target="_blank"><img alt="" src="http://nsa19.casimages.com/img/2010/12/20/101220083527102045.gif" border="0"></a><br></div><br><p style="text-align: justify;"> La neige recouvre de plus en plus la surface du sol. L'automne commence à perdre de l'équilibre. L'hiver sera bientôt là. Les dragons se réfugient dans leur domaine pour reprendre des forces.</p></td>
<td style="text-align: justify;" valign="top" width="56%">
<center><div class="opacity"><img src="http://i64.servimg.com/u/f64/15/04/09/66/entred12.png"> </div><div class="opacity"></div><br><br><div style="text-align: justify;">Bienvenue dans le monde de Dragon Life, {USERNAME}. Si tu es ici, c'est certainement que tu te sens prêt(e) à vivre de fantastiques aventures ! Car Dragon Life n'est pas une communauté comme les autres : Ici, tu pourras profiter pleinement des joies du Graphisme et du Role Play, dans un monde peuplé de dragons ou il te faudra choisir un camp. Seras-tu chez dragons de Glace, Pacifiques et Solidaires, chez les dragons de Terre, Courageux et Forts, ou chez les dragons de Feu, Agressifs et Rusés ? A toi de choisir ton camp, le destin du monde est entre tes mains ! <br>
</div><center><div style="text-align: justify;"><br><br><br>En raison des fêtes, nous affichons un léger retard, veuillez nous excuser. le forum est ouvert, mais a encore quelques modifications a apportées. Merci de votre compréhension, Relangs.<br></div><br><br><embed type="application/x-shockwave-flash" src="http://www.archive-host.com/mediaplayer.swf" flashvars="height=20&width=230&file=http://sd-2.archive-host.com/membres/playlist/212792858530508074/YouTube________-_X-Ray_Dog_-_City_Of_Gold_Australia_-_Trailer_Music.mp3&volume=50&searchbar=false&autostart=true" allowfullscreen="true" allowscriptaccess="always" width="230" height="20"></center>
<p></p></center></td>
<td valign="top" width="22%"><div style="text-align: center;">
</div><p style="text-align: center;"><img src="http://i34.servimg.com/u/f34/15/04/09/66/dasale10.png" alt="" border="0"><br></p>
<p><br></p></td><td style="border: 1px hidden rgb(255, 255, 255);"></td><td width="102px"><div class="infobulle">
<center><img src="http://i74.servimg.com/u/f74/15/04/09/66/11012610.jpg">
<div>Relangs, fondatrice.
<br><img src="http://i74.servimg.com/u/f74/15/04/09/66/thepre11.jpg">
<br><center><a href="http://dragon-life.forumgratuit.org/u1">Profil</a></div><br><br><img alt="" src="http://i64.servimg.com/u/f64/15/04/09/66/parten10.png" border="0">
<p style="text-align: center;"><br></p>
<p style="text-align: center;"><font size="1">Forum optimisé pour Firefox ©</font></p>
<p style="text-align: center;"><font size="1">Design par Xandrya, </font><font size="1">Relangs et </font><font size="1">Holigan avec l'aide de Css actif. Toute reproduction partielle ou totale est strictement interdite.</font></p>
<br></center>

</div></td> </tr></tbody></table>

et mon css, je pense inutile :

Code:: a.forumlink {
text-decoration: none;
background-color: #9AB1C4;
border-bottom: 2px double #9AB1C4;
border-top: 2px double #9AB1C4;
-moz-border-radius: 20px ;
border-right: 5px solid #9AB1C4;
-moz-border-radius: 20px ;
border-left: 5px solid #9AB1C4;
display:block;

}
a.forumlink:hover {
text-decoration: none;
background-image: url('http://img502.imageshack.us/img502/7845/sanstitre1ix.png');
border-bottom:2px double #829AB6;
border-top: 2px double #829AB6;
-moz-border-radius: 10px ;
border-right: 5px solid #829AB6;
-moz-border-radius: 10px ;
border-left: 5px solid #829AB6;
display:block;
color: #ffffff;
}

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

a {
font-variant: small-caps;
}

u {
text-decoration: none;
border-bottom: 2px #506782 solid;
-moz-border-radius: 6px;
}

a { text-decoration: none; }

.vignettes
{-moz-border-radius:7px;
background-color: #9AB1C4;
padding-right:10px;
padding-left:10px;
padding-bottom: 3px;
padding-top:3px;}

.opacity img {
filter:alpha(opacity=50);
-moz-opacity:0.5;opacity: 0.5;
}

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

a.forumlink {
color : #698CB5;
text-shadow: #698CB5 1px 1px 3px; /*couleur décalage flou*/
}

a.forumlink:hover{ /*quand on passe la souris dessus, changement de couleur de l'ombre*/
text-shadow: #FFFFFF 1px 1px 3px;
color: #FFFFFF;
}

body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-6/cur544.cur), progress;}

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

.bodyline {
-moz-border-radius:10px;
}div, table {
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border: none;
}

.descriptiondesforums {
background-color : #9AB1C4; /*fond blanc*/
border : 2px solid #9AB1C4; /*bord de 2px plein*/
-moz-border-radius : 100px; /*arrondi mozilla*/
-webkit-border-radius : 100px; /*arrondi safari & chrome*/
border-radius : 100px; /*arrondi opéra, explorer*/
padding-left : 10px; /*Pour éviter les débordements de texte à gauche*/
padding-right : 10px; /*Pour éviter les débordements de texte à droite*/
padding-top : 3px; /*Pour aérer en haut*/
padding-bottom : 3px; /*Pour aérer en bas*/
margin : 3px; /*Pour que le truc blanc ne soit pas collé aux bordures de son contenant*/
}

.boite
{
height: 100px ;
overflow: auto ;
width: 200px ;
text-align: justify ;
}

tr.post td {padding-left: 20px;}

*::-moz-selection {
background:#C1CDDB none repeat scroll 0 0;
}

.postbody {
display: block;
padding-left: 20px;
padding-right: 40px;
text-align:justify;
}

.lettrine {
float: left;
PROPRIÉTÉS CSS
}

#colortitle { display: none; }

.code {
background-color: #FFFFFF;
border: 1px #506782;
-border-radius: 15 px;
-moz-border-radius: 15 px;
-webkit-border-radius: 15px;
padding : 10px
color: #506782
}

.quote {
background-color: #FFFFFF;
border: 1px #506782;
-border-radius: 15 px;
-moz-border-radius: 15 px;
-webkit-border-radius: 15px;
padding : 10px
color: #506782
}

.spoiler_closed{
background-color: #FFFFFF;
border: 1px #506782;
-border-radius: 15 px;
-moz-border-radius: 15 px;
-webkit-border-radius: 15px;
padding : 10px
color: #506782
}

.spoiler_content{
background-color: #FFFFFF;
border: 1px #506782;
-border-radius: 15 px;
-moz-border-radius: 15 px;
-webkit-border-radius: 15px;
padding : 10px
color: #506782
}

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;

white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

top: 30px; /* on positionne notre infobulle */
left: 15px;

background: #829AB6; /* arrière-plan de l'infobulle */

color: white; /* texte dans l'infobulle */
padding: 3px;

/* bordures de votre infobulle*/
border: 1px dotted white;
border-left: 1px dotted white;
}

De l'aide ? =(

Bonjour,

Essaye comme ceci :

Code:: <br><div style="text-align: center;"> <br></div>
<table cellpadding="2">
<tbody>
<tr>
<td valign="top" width="22%"><div style="text-align: center;">
</div><p style="text-align: center;"><img src="http://i34.servimg.com/u/f34/15/04/09/66/dasale11.png"><marquee behavior="scroll" direction="up" scrollamount="7">
<p>Ouverture de la partie graphisme !</p>
<p>Joyeuses fêtes à tous !</p><p><span style="color: White;">- - - - - - - - - -</span> <br></p><p>Tous les chefs se sont maintenant répartis dans leur clan respectif !</p><p><span style="color: White;">- - - - - - - - - -</span> <br></p><p>Création du Forum le 27 novembre 2010.</p>
</marquee>
</p><p><span style="color: White;"><br></span>
</p><div style="text-align: center;"><img src="http://i34.servimg.com/u/f34/15/04/09/66/sans_t12.png" alt="" border="0"><br></div><div style="text-align: center;"><a class="postlink" href="http://www.casimages.com/" target="_blank"><img alt="" src="http://nsa19.casimages.com/img/2010/12/20/101220083527102045.gif" border="0"></a><br></div><br><p style="text-align: justify;"> La neige recouvre de plus en plus la surface du sol. L'automne commence à perdre de l'équilibre. L'hiver sera bientôt là. Les dragons se réfugient dans leur domaine pour reprendre des forces.</p></td>
<td style="text-align: justify;" valign="top" width="56%">
<center><div class="opacity"><img src="http://i64.servimg.com/u/f64/15/04/09/66/entred12.png"> </div><div class="opacity"></div><br><br><div style="text-align: justify;">Bienvenue dans le monde de Dragon Life, {USERNAME}. Si tu es ici, c'est certainement que tu te sens prêt(e) à vivre de fantastiques aventures ! Car Dragon Life n'est pas une communauté comme les autres : Ici, tu pourras profiter pleinement des joies du Graphisme et du Role Play, dans un monde peuplé de dragons ou il te faudra choisir un camp. Seras-tu chez dragons de Glace, Pacifiques et Solidaires, chez les dragons de Terre, Courageux et Forts, ou chez les dragons de Feu, Agressifs et Rusés ? A toi de choisir ton camp, le destin du monde est entre tes mains ! <br>
</div><center><div style="text-align: justify;"><br><br><br>En raison des fêtes, nous affichons un léger retard, veuillez nous excuser. le forum est ouvert, mais a encore quelques modifications a apportées. Merci de votre compréhension, Relangs.<br></div><br><br><embed type="application/x-shockwave-flash" src="http://www.archive-host.com/mediaplayer.swf" flashvars="height=20&width=230&file=http://sd-2.archive-host.com/membres/playlist/212792858530508074/YouTube________-_X-Ray_Dog_-_City_Of_Gold_Australia_-_Trailer_Music.mp3&volume=50&searchbar=false&autostart=true" allowfullscreen="true" allowscriptaccess="always" width="230" height="20"></center>
<p></p></center></td>
<td valign="top" width="22%"><div style="text-align: center;">
</div><p style="text-align: center;"><img src="http://i34.servimg.com/u/f34/15/04/09/66/dasale10.png" alt="" border="0"><br></p>
<p><div class="infobulle">
<center><img src="http://i74.servimg.com/u/f74/15/04/09/66/11012610.jpg">
<div>Relangs, fondatrice.
<br><img src="http://i74.servimg.com/u/f74/15/04/09/66/thepre11.jpg">
<br><center><a href="http://dragon-life.forumgratuit.org/u1">Profil</a></div><br></p></td><td style="border: 1px hidden rgb(255, 255, 255);"></td><td width="102px"><br><br><img alt="" src="http://i64.servimg.com/u/f64/15/04/09/66/parten10.png" border="0">
<p style="text-align: center;"><br></p>
<p style="text-align: center;"><font size="1">Forum optimisé pour Firefox </font></p>
<p style="text-align: center;"><font size="1">Design par Xandrya, </font><font size="1">Relangs et </font><font size="1">Holigan avec l'aide de Css actif. Toute reproduction partielle ou totale est strictement interdite.</font></p>
<br></center>

</div></td> </tr></tbody></table>

L'infobulle était placée dans la mauvaise colonne Wink

Voilà

Merci Haribot Calins

, L'info-bulle est bien placée maintenant (: Mais est-ce-que t'arriverais à mettre le staff seulement au centre et le bouton avec le texte espacé (en passant des lignes) pour qu'il soit un peu plus écarté et centré ? Smile

Tu pourrais me faire un schéma ou autre vite-fait parce que j'ai pas tout compris :/ *sors*

Ok xD {fait à l'arrahce mais bon, le principal c'est que tu comprenne xD}

https://i.servimg.com/u/f74/15/04/09/66/sans_t11.png

Le 'staff' doit être centré dans la colonne de droite et seulement le 'staff' pas l'infobulle;
Le bouton et le texte (encadré en violet), j'aimerais qu'ils soient séparés de 2 lignes par rapport à l'infobulle et qu'ils soient aussi centré Smile

> Je devine qu'il fat mettre

Code:: <center> </center>

mais je ne sais pas du tout où les mettres :3

Pardon du double post, c'était pour que tu ne recherche pas pour rien :

regarde sur le forum : j'ai réussi à centrer le 'staff' et le bouton et le texte, j'aurais juste besoin que tu m'aide comme avant, à mettre l'infobulle à gauche de la colonne de droite ? Français ? xD

Voici l'Html :

Code:: <br><div style="text-align: center;"> <br></div>
<table cellpadding="2">
<tbody>
<tr>
<td valign="top" width="22%"><div style="text-align: center;">
</div><p style="text-align: center;"><img src="http://i34.servimg.com/u/f34/15/04/09/66/dasale11.png"><marquee behavior="scroll" direction="up" scrollamount="7">
<p>Ouverture de la partie graphisme !</p>
<p>Joyeuses fêtes à tous !</p><p><span style="color: White;">- - - - - - - - - -</span> <br></p><p>Tous les chefs se sont maintenant répartis dans leur clan respectif !</p><p><span style="color: White;">- - - - - - - - - -</span> <br></p><p>Création du Forum le 27 novembre 2010.</p>
</marquee>
</p><p><span style="color: White;"><br></span>
</p><div style="text-align: center;"><img src="http://i34.servimg.com/u/f34/15/04/09/66/sans_t12.png" alt="" border="0"><br></div><div style="text-align: center;"><a class="postlink" href="http://www.casimages.com/" target="_blank"><img alt="" src="http://nsa19.casimages.com/img/2010/12/20/101220083527102045.gif" border="0"></a><br></div><br><p style="text-align: justify;"> La neige recouvre de plus en plus la surface du sol. L'automne commence à perdre de l'équilibre. L'hiver sera bientôt là. Les dragons se réfugient dans leur domaine pour reprendre des forces.</p></td>
<td style="text-align: justify;" valign="top" width="56%">
<center><div class="opacity"><img src="http://i64.servimg.com/u/f64/15/04/09/66/entred12.png"> </div><div class="opacity"></div><br><br><div style="text-align: justify;">Bienvenue dans le monde de Dragon Life, {USERNAME}. Si tu es ici, c'est certainement que tu te sens prêt(e) à vivre de fantastiques aventures ! Car Dragon Life n'est pas une communauté comme les autres : Ici, tu pourras profiter pleinement des joies du Graphisme et du Role Play, dans un monde peuplé de dragons ou il te faudra choisir un camp. Seras-tu chez dragons de Glace, Pacifiques et Solidaires, chez les dragons de Terre, Courageux et Forts, ou chez les dragons de Feu, Agressifs et Rusés ? A toi de choisir ton camp, le destin du monde est entre tes mains ! <br>
</div><center><div style="text-align: justify;"><br><br><br>En raison des fêtes, nous affichons un léger retard, veuillez nous excuser. le forum est ouvert, mais a encore quelques modifications a apportées. Merci de votre compréhension, Relangs.<br></div><br><br><embed type="application/x-shockwave-flash" src="http://www.archive-host.com/mediaplayer.swf" flashvars="height=20&width=230&file=http://sd-2.archive-host.com/membres/playlist/212792858530508074/YouTube________-_X-Ray_Dog_-_City_Of_Gold_Australia_-_Trailer_Music.mp3&volume=50&searchbar=false&autostart=true" allowfullscreen="true" allowscriptaccess="always" width="230" height="20"></center>
<p></p></center></td>
<td valign="top" width="22%"><div style="text-align: center;">
</div><p style="text-align: center;"><img src="http://i34.servimg.com/u/f34/15/04/09/66/dasale10.png" alt="" border="0"></p><p style="text-align: center;"><br></p>
<p></p><div class="infobulle">
<center><img src="http://i74.servimg.com/u/f74/15/04/09/66/11012610.jpg">
<div>Relangs, fondatrice.
<br><img src="http://i74.servimg.com/u/f74/15/04/09/66/thepre11.jpg">
<br><center><a href="http://dragon-life.forumgratuit.org/u1">Profil</a></center></div><br><br><br><br><img alt="" src="http://i64.servimg.com/u/f64/15/04/09/66/parten10.png" border="0">
<p style="text-align: center;"><br></p>
<p style="text-align: center;"><font size="1">Forum optimisé pour Firefox </font></p>
<p style="text-align: center;"><font size="1">Design par Xandrya, </font><font size="1">Relangs et </font><font size="1">Holigan avec l'aide de Css actif. Toute reproduction partielle ou totale est strictement interdite.</font></p>
</center></div></td><td style="border: 1px hidden rgb(255, 255, 255);"><br></td><td width="102px"><br><br>

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

EDIT : J'ai réussi à régler tout a, merci Wink

Hello (:
L'icône résolu est cochée, par conséquent je classe =D

Problème Info-bulle :3

Problème Info-bulle :3

Sujets similaires

Sujets similaires

Partenaires Or