[Aide Spécifique] Message d'en-tête : Infobulles

Date d'inscription: 05/12/2009

Bonjour,

Alors j'ai commencé à faire un message d'en-tête à partir d'aide mais ça coince au niveau des infobulles.

1)
Adresse de votre forum : http://tiasbook-test.go-board.net (C'est le fo' de test)
Justification de la demande d'aide spécifique : Problème avec les infobulles
Aide spécifique choisie : Aide pour message d'en-tête.

2)

Aide au message d'en-tête

¤ Donner le message d'en-tête actuel :

Code:

<div style="background: url('http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/tapis5.jpg')"> <center><img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Bienvenuesur1-1.png" /></center><div class="en_tete">
<table>
<tr>
<td id="tab1_col1">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/ClassificationDewey1bis.png" />
<font size=2><p id="en_tete_nav">* <a href="http://tiasbook.forumactif.com/dix-commandements-f47/" title="Lire les Dix commandements" style="color:#d6af94">Lire les Dix commandements</a></p>
<p id="en_tete_nav">* <a href="http://tiasbook.forumactif.com/biographies-f18/" title="Rédiger vos biographies" style="color:#d6af94">Rédiger votre biographie</a></p>
<p id="en_tete_nav">* <a href="http://tiasbook.forumactif.com/demandes-de-partenariats-f32/" title="Demande d'affiliations" style="color:#d6af94">Demande d'affiliations</a></p>
<p id="en_tete_nav">* <a href="http://tiasbook.forumactif.com/actualite-news-f27/" title="Tia's Book's News" style="color:#d6af94">Tia's Book's New</a></p></font>
</td>

<td id="tab1_col2">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/PersonneldeTiasBook.png" />
<p id="staff_en_tete"><a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=1" class="infobulle">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Avatartia.png" alt="Avatar"/>
<span>Tiadeets<br>
Chef des Bibliothécaires<div><a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=1" target="_blank">Profil</a></div><div><a href="http://tiasbook.forumactif.com/msg.forum?mode=post&u=1" target="_blank">Envoyer un MP</a></div></span></a></p>
</td>

</tr>
</table>

<table>
<tr>
<td id="tab2_col1">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Panneaudaffichage1.png" />
<p id="contenu_en_tete"></p>
</td>
<td id="tab2_col2">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Affilis1.png" />
<p id="logo_en_tete"> Blabla
</p>

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

& le CSS :

Code:

a.infobulle {
position: relative;
}

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

}
a.infobulle:hover span {
display: inline; /* 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: 5px; /* on positionne notre infobulle */
left: 15px;

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

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

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

¤ Pourquoi faut-il modifier le message d'en-tête ? : Car il y a un problème avec les infobulles.
¤ Proposer des idées, une ébauche du futur message d'en-tête souhaité. : Sachant que ce n'est qu'un prolème d'info-bulle, une fois le problème réglé je continuerais toute seule.

Merci d'avance,

Biiz.

_________________

Spoiler:
	Mes fan-clubs SAT !

bah suffit de lire les tutos mademoiselle. Tu apprendras ainsi que tu dois mettre le contenu de l'infobulle (ce qu'il y a dans le span) dans un tableau pour que les liens fonctionnent.

>> [C'est par ici]

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 05/12/2009

Je dois faire quelque chose qui ne va pas ou je dois être vraiment nulle parce que ça ne marche pas.

Code:

<div style="background: url('http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/tapis5.jpg')"> <center><img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Bienvenuesur1-1.png" /></center><div class="en_tete">
<table>
<tr>
<td id="tab1_col1">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/ClassificationDewey1bis.png" />
<font size=2><p id="en_tete_nav">* <a href="http://tiasbook.forumactif.com/dix-commandements-f47/" title="Lire les Dix commandements" style="color:#d6af94">Lire les Dix commandements</a></p>
<p id="en_tete_nav">* <a href="http://tiasbook.forumactif.com/biographies-f18/" title="Rédiger vos biographies" style="color:#d6af94">Rédiger votre biographie</a></p>
<p id="en_tete_nav">* <a href="http://tiasbook.forumactif.com/demandes-de-partenariats-f32/" title="Demande d'affiliations" style="color:#d6af94">Demande d'affiliations</a></p>
<p id="en_tete_nav">* <a href="http://tiasbook.forumactif.com/actualite-news-f27/" title="Tia's Book's News" style="color:#d6af94">Tia's Book's New</a></p></font>
</td>

<td id="tab1_col2">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/PersonneldeTiasBook.png" />
<p id="staff_en_tete"><a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=1" class="infobulle">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Avatartia.png" alt="Avatar"/>
<span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;">Tiadeets<br>
Chef des Bibliothécaires<div><a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=1" target="_blank">Profil</a></div><div><a href="http://tiasbook.forumactif.com/msg.forum?mode=post&u=1" target="_blank">Envoyer un MP</a></div></tr></td></tr></tbody></table></span></a></p>
</td>

</tr>
</table>

<table>
<tr>
<td id="tab2_col1">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Panneaudaffichage1.png" />
<p id="contenu_en_tete"></p>
</td>
<td id="tab2_col2">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Affilis1.png" />
<p id="logo_en_tete"> Blabla
</p>

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

_________________

Spoiler:
	Mes fan-clubs SAT !

Essaie d'enlever les "div" que tu as dans tes infobulles. Si c'est pour placer le texte, utilise plutôt des "p" Wink

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 05/12/2009

Code:

<div style="background: url('http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/tapis5.jpg')"> <center><img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Bienvenuesur1-1.png" /></center><div class="en_tete">
<table>
<tr>
<td id="tab1_col1">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/ClassificationDewey1bis.png" />
<font size=2><p id="en_tete_nav">* <a href="http://tiasbook.forumactif.com/dix-commandements-f47/" title="Lire les Dix commandements" style="color:#d6af94">Lire les Dix commandements</a></p>
<p id="en_tete_nav">* <a href="http://tiasbook.forumactif.com/biographies-f18/" title="Rédiger vos biographies" style="color:#d6af94">Rédiger votre biographie</a></p>
<p id="en_tete_nav">* <a href="http://tiasbook.forumactif.com/demandes-de-partenariats-f32/" title="Demande d'affiliations" style="color:#d6af94">Demande d'affiliations</a></p>
<p id="en_tete_nav">* <a href="http://tiasbook.forumactif.com/actualite-news-f27/" title="Tia's Book's News" style="color:#d6af94">Tia's Book's New</a></p></font>
</td>

<td id="tab1_col2">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/PersonneldeTiasBook.png" />
<p id="staff_en_tete"><a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=1" class="infobulle">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Avatartia.png" alt="Avatar"/>
<span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;">Tiadeets<br>
Chef des Bibliothécaires<p id="staff_en_tete"><a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=1" target="_blank">Profil</a><a href="http://tiasbook.forumactif.com/msg.forum?mode=post&u=1" target="_blank">Envoyer un MP</a></p></tr></td></tr></tbody></table></span></a></p>
</td>

</tr>
</table>

<table>
<tr>
<td id="tab2_col1">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Panneaudaffichage1.png" />
<p id="contenu_en_tete"></p>
</td>
<td id="tab2_col2">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Affilis1.png" />
<p id="logo_en_tete"> Blabla
</p>

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

Au niveau de l'alignement ça va mais c'est en dehors de l'infobulle.

_________________

Spoiler:
	Mes fan-clubs SAT !

Essaie en enlevant cette partie dans le CSS :

Code:

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é */

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 05/12/2009

Toujours pas.

Dois y avoir un problème!

_________________

Spoiler:
	Mes fan-clubs SAT !

Tu es sous quel navigateur ? Je regarde sous chrome et le texte de l'infobulle retourne bien à la ligne Smile

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 05/12/2009

Chrome.

_________________

Spoiler:
	Mes fan-clubs SAT !

Ok j'ai trouvé le soucis Smile

Ne mets pas l'image de l'infobulle entre balise p.

Donc remplace ça :

Code:

<p id="staff_en_tete"><a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=1" class="infobulle">
<img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Avatartia.png" alt="Avatar"/>
<span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;">Tiadeets<br>
Chef des Bibliothécaires<p id="staff_en_tete"><a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=1" target="_blank">Profil</a><a href="http://tiasbook.forumactif.com/msg.forum?mode=post&u=1" target="_blank">Envoyer un MP</a></p></tr></td></tr></tbody></table></span></a></p>

par ça :

Code:

<a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=1" class="infobulle"> <img src="http://i822.photobucket.com/albums/zz147/tiadeets/Forum%207/Avatartia.png" alt="Avatar"/><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tr><td style="text-align: center;">Tiadeets<br>Chef des Bibliothécaires<br /><p><a href="http://tiasbook.forumactif.com/profile.forum?mode=viewprofile&u=1" target="_blank">Profil</a></p><p><a href="http://tiasbook.forumactif.com/msg.forum?mode=post&u=1" target="_blank">Envoyer un MP</a></p></td></tr></table></span></a>

Ensuite, tu feras attention, il y a un "/tr" en trop Wink

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 05/12/2009

Merci!!!!

Dis tu saurais comment faire un "demi-espace"?
(Un saut de ligne moins haut).
& une barre de soulignement plus claire?

_________________

Spoiler:
	Mes fan-clubs SAT !

un saut de ligne moins haut ? change le margin-top de tes balises p

pour la barre de soulignement, tu mets une bordure bottom et tu choisis la couleur que tu veux

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 05/12/2009

J'ai trouvé le code pour la bordure, je la met dans mon CSS mais ça ne marche pas.

_________________

Spoiler:
	Mes fan-clubs SAT !

Date d'inscription: 24/06/2010

Coucou Tia'

as tu finalement réussi ta bordure?
tiens nous informer Smile

bonne journée

_________________

J’ai toujours rêvé que mon ordinateur soit aussi simple à utiliser que mon téléphone.
Ce rêve est devenu réalité : je ne comprends plus comment utiliser mon téléphone [ by Bjarne Stroustrup ]

Mes cadeaux de Noel : Merci Clo

Merci Volt

Date d'inscription: 05/12/2009

Oui, c'est bon merci!

_________________

Spoiler:
	Mes fan-clubs SAT !