Boite qui apparait au survol

Cyrille, le lundi 12 décembre 2005 à 16:54:58

Bonjour, je suis en train de faire un site internet,et j'ai creé un menu sous forme de tableau (<table><tr><td>mon lien</td>...).
Et je voudrais que a chaque survol d'un lien de mon menu il apparaisse une petite fenetre ou je mettrais du texte.Cette fenetre je voudrais qu'elle apparaisse juste en fasse de mon lien,donc en fasse de la cellule <td> du lien. Or aprés quelques essais,le mieux que je puisse faire c'est faire apparaitre cette fenetre en haut a droite de mon <table>.je vous joint mon code simplifié:

le css que j'utilise pour faire cette boite est en dessous de : /*Définitions des boites explicatives des menus*/

merci pour ceux qui pourront m'aider.
Code:

<html><head><style>
table tr td a{text-decoration: none;color:black;display:block;font-weight:normal;width:100%}

table tr td a:hover{text-decoration: none;color:navy;display:block;font-weight:bold;width:100%;background-image: url(Photos/rolloverfond.jpg);}

.menugauche {border-style:solid; border-width:0px; border-color:black; width:180px; height:100%;float:left;}

.boiteg {width:170px;height:250px;background-image:url(Photos/contenuboite.jpg);border: solid 2px black;position:relative;top:-3px;left:-3px;}

.ombreg {width:170px;height:250px;color:black;background-color:black;}

/*Définitions des boites explicatives des menus*/
a:hover {border-bottom: 0px}/* indispensable pour IE seulement */
a span {display:none ; /* cache les <span> placés dans un lien <a> */
text-decoration:none ; /* supprime le soulignement du texte <span> */
color:black} /* met le texte <span> en noir */
a:hover span {
display: block; /* Montre le texte <span> lors du survol */
position: absolute; /* envoi le texte <span> dans 1 zone précise de l'écran */
top: 0px; /* cette zone se situe à 0 pixels du haut */
left: 180px ; /* cette zone se situe à 180 pixels de la gauche*/
width: 100px;
height:auto;
background-image:url(Photos/contenuboite.jpg);
border:inset; /* Style de bordure */
padding: 4px; /* Marge intérieure à la bordure */
text-align:center} /* Centrage du nom de l'image */
</style></head>

<body background="Photos/fondsite.jpg">
<div class="menugauche">
<div class="ombreg" >

<div class="boiteg">
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td><img src="Photos/Une_recette_secrete.gif" alt="coucou"></td></tr>
<tr><td><a href="liens/menu1_1.html">La crêpe dentelle<span>1er texte</span></a></td></tr>
<tr><td><a href="liens/menu1_2.html">Le secret de son origine<span>2éme texte</span></a></td></tr>
<tr> <td><a href="liens/menu1_3.html">Technique de fabrication<span>3éme texte</span></a></td></tr>
<tr><td><img src="Photos/lamour%20du%20produit.gif" alt=""></td></tr>
<tr><td><a href="liens/menu2_1.html">Naissance<span>4éme texte</span></a></td></tr>
<tr><td><a href="liens/menu2_2.html">Evolution<span>5éme texte</span></a></td></tr>
<tr><td><img src="Photos/nos%20references.gif" alt=""></td></tr>
<tr><td><a href="liens/menu3_1.html">Les médias en parlent!<span>6éme texte</span></a></td></tr>
<tr><td><a href="liens/menu3_2.html">Les distinctions<span>7éme texte</span></a></td></tr>
<tr><td><a href="liens/menu3_3.html">Livre d´or des célébrités<span>8éme texte</span></a></td></tr>
<tr><td><a href="liens/menu3_4.html">Livre d´or du site<span 9éme texte></span></a></td></tr>
</table>
</div>
</div>
</div>
</body></html>

Répondre à Cyrille Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Cyrille, le lundi 12 décembre 2005 à 16:58:41

Allez j'allége un peu le code pour que ce soit plus clair....

<html><head><style>

.menugauche {border-style:solid; border-width:0px; border-color:black; width:180px; height:100%;float:left;}

/*Définitions des boites explicatives des menus*/
a:hover {border-bottom: 0px}/* indispensable pour IE seulement */
a span {display:none ; /* cache les <span> placés dans un lien <a> */
text-decoration:none ; /* supprime le soulignement du texte <span> */
color:black} /* met le texte <span> en noir */
a:hover span {
display: block; /* Montre le texte <span> lors du survol */
position: absolute; /* envoi le texte <span> dans 1 zone précise de l'écran */
top: 0px; /* cette zone se situe à 0 pixels du haut */
left: 180px ; /* cette zone se situe à 180 pixels de la gauche*/
width: 100px;
height:auto;
background-image:url(Photos/contenuboite.jpg);
border:inset; /* Style de bordure */
padding: 4px; /* Marge intérieure à la bordure */
text-align:center} /* Centrage du nom de l'image */
</style></head>

<body background="Photos/fondsite.jpg">

<table width="100%" cellpadding="0" cellspacing="0">
<tr><td><img src="Photos/Une_recette_secrete.gif" alt="coucou"></td></tr>
<tr><td><a href="liens/menu1_1.html">La crêpe dentelle<span>1er texte</span></a></td></tr>
<tr><td><a href="liens/menu1_2.html">Le secret de son origine<span>2éme texte</span></a></td></tr>
<tr> <td><a href="liens/menu1_3.html">Technique de fabrication<span>3éme texte</span></a></td></tr>
<tr><td><img src="Photos/lamour%20du%20produit.gif" alt=""></td></tr>
<tr><td><a href="liens/menu2_1.html">Naissance<span>4éme texte</span></a></td></tr>
<tr><td><a href="liens/menu2_2.html">Evolution<span>5éme texte</span></a></td></tr>
<tr><td><img src="Photos/nos%20references.gif" alt=""></td></tr>
<tr><td><a href="liens/menu3_1.html">Les médias en parlent!<span>6éme texte</span></a></td></tr>
<tr><td><a href="liens/menu3_2.html">Les distinctions<span>7éme texte</span></a></td></tr>
<tr><td><a href="liens/menu3_3.html">Livre d´or des célébrités<span>8éme texte</span></a></td></tr>
<tr><td><a href="liens/menu3_4.html">Livre d´or du site<span 9éme texte></span></a></td></tr>
</table>

</body></html>

Répondre à Cyrille

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

aloneInTheDark, le lundi 12 décembre 2005 à 20:06:01

Salut !!!

Ajoutes, par exemple ceci dans ton css :

a{display: block; width: 180px; height: 30px; text-decoration: none; border: 1px solid red; position: relative}

;-)

Répondre à aloneInTheDark

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Cyrille, le lundi 12 décembre 2005 à 21:19:59

j'ai essayé ce que tu m'as dit, ca m'as l'air pas trop mal,maintenant ca donne pas tout a fait ce que je veux (bordure rouge et aggrandissement de mes cellules <td>.
Je vais essayer de modifier ca,et si j'y arrive pas je t'appellerais a la rescousse!Maisca devrait le faire!merci beaucoup

Répondre à Cyrille

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

cyrille, le lundi 12 décembre 2005 à 21:35:23

voila c reglé pour ce probleme,j'ai mis
a{display: block; position: relative}
je suppose que ca veut dire que <a> est defini en tant que block et du coup mon span s'affiche en fonction de la position de mon <a> et plus en fonction de la position de mon <table>
Maintenant j'aurais une autre question subsidiaire...
Pour faire ma petite boite explicative en simplifiant je fais:

a:hover [}
a span {}
a:hover span {}

de dans le a:hover span {} je definis la taille et l'emplacement de ma boite explicative.
Or j'ai un menu a gauche et un autre a droite. Et la pour le menu qui est a droite,j'aimerais que ma petite boite s'affiche a gauche et non a droite...Donc ce qu'il faudrait c'est que les 3 lignes du dessus je les regroupe dans une seule class pour le menu de gauche et je ferais une autre class pour le menu de droite.or comment puis je faire pour declarer ces classes?
puis-je faire:

CSS:
a{display: block; position: relative}
.boitegauche
a:hover [}
a span {}
a:hover span { "je determine la position de ma boite"}
.boitedroite
a:hover [}
a span {}
a:hover span { "et la je determine une nouvelle position de boite}

HTML:
<tr><td><a href="liens/menu1_1.html">La crêpe dentelle<span class="boitegauche">1er texte</span></a></td></tr>
<tr><td><a href="liens/menu1_1.html">La crêpe dentelle<span class="boitedroite">1er texte</span></a></td></tr>

j'ai deja essayé mais ca n'a pas l'air de fonctionner de cette maniére

Répondre à cyrille

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Cyrille, le jeudi 15 décembre 2005 à 22:51:58

Bonjour c'est encore moi, j'ai toujours un petit probleme avec mon code, pour rappel j'ai crée un menu avec des tableaux et des cellules, un roolover en CSS, et a chaque survol d'une cellule je fais apparaitre un petite boite de texte sur la droite en face de la cellule corespondante.
Mon code marche bien sur ie et firefox mais sur netscape j'ai un petit souci, lorsque mon texte dans la boite apparait a droite de mon menu, il agrandit automatiquement en hauteur la cellule du menu sur la gauche,ce que je voudrait eviter...
Je sens que le probleme doit etre dans les CSS avec les commandes:
position: relative ou absolute ou encore display:block qui doivent me foutre la merde. Mais j'arrive pas a comprendre les nuances entre ces instructions.Est ce que qq'un pourrait m'expliquer en gros ce que veut dire,a quoi ca sert et comment bien les utiliser??

Sinon, je vous laisse mon code source, si jamais vous pouvez me dire ou est ce que je me suis planté,je vous serez trés reconnaisant.

<html><head>
<style>
table tr td a{text-decoration: none;color:black;position: relative;display:block;font-weight:normal;width:100%}

table tr td a:hover{text-decoration: none;color:navy;display:block;font-weight:bold;width:100%;background-image: url(Photos/rolloverfond.jpg);}

.menugauche {border-style:solid; border-width:0px; border-color:black; width:180px; height:100%;float:left;}

.boiteg {width:170px;height:auto;background-image:url(Photos/contenuboite.jpg);border: solid 2px black;position:relative;top:-3px;left:-3px;}

/*Définitions des boites explicatives des menus*/
a{display: block;position: relative}
a:hover {border-bottom: 0px;}
a span {display:none ;text-decoration:none ;color:black}
a.class1:hover span {display: block; position: absolute;
top: 0px; left: 173px;width: 100px;height:auto;
background-image:url(Photos/contenuboite.jpg);
border:inset;padding: 4px;text-align:center}

</style>

</head>

<body background="Photos/fondsite.jpg">
<div class="menugauche">
<div class="boiteg">
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td><img src="Photos/Une_recette_secrete.gif" alt="coucou"></td></tr>
<tr><td><a href="liens/menu1_1.html" class="class1">La crêpe dentelle<span>Salut c'est moi</span></a></td></tr>
<tr><td><a href="liens/menu1_2.html" class="class1">Le secret de son origine<span>bon est ce que ca marche?</span></a></td></tr>
<tr><td><a href="liens/menu1_3.html"class="class1">Technique de fabrication<span>Ca serait cool</span></a></td></tr>
</table>
</div></div>
</body></html>

merci de votre aide

Répondre à Cyrille

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

cyrille, le vendredi 16 décembre 2005 à 22:41:09

Bonsoir, personne ne peut m'aider???
ps: c'est juste pour remettre mon post en haut de page des fois que ca aide a obtenir une réponse...

Répondre à cyrille

Posez votre question Répondre

[VBA] Boite à outils controle (Résolu)Bonjour à tous, je débute en VBA sous excel 2000 et j'ai un petit soucis. Quand je fais affichage barre d'outils boite à outils contrôle, ma boite apparaît mais je n'ai pas le bouton qui me permet de faire des cadres/frame??? Et si je... www.commentcamarche.net/forum/affich-1472198-vba-boite-a-outils-controle

Faire apparaitre "contacts"boite de rece (Résolu)bonsoir à tous!Voilà en voulant aider mon pére à faire apparaitre le fichier"contact"dans sa boite de réception(courrier electronique),j'ai fais disparaitre mon fichier contacts et je ne sais pas comment le faire réapparaitre. ca doit etre... www.commentcamarche.net/forum/affich-3883483-faire-apparaitre-contacts-boite-de-rece

Boite mail neuf inaccessible (Résolu)Bonjour, Je ne peux plus accéder à ma boite mail neuf cegetel. Une fenetre de dialogue apparait, celle du "controle de compte d'utisateur". Elle me dit: "un programme à besoin de votre autorisation pour continuer, si vous etes à l'origine de... www.commentcamarche.net/forum/affich-6406701-boite-mail-neuf-inaccessible

[Messagerie] Pirater une boite mail (msn, hotmail, yahoo...)Vous avez le stupide projet de pirater une boîte mail et vous cherchez la procédure à suivre pour le faire ? Vous êtes donc la cible idéale pour jouer le rôle de l'arroseur arrosé. NE TOMBEZ PAS DANS CE PIÈGE En effet, en ce moment circule sur les... www.commentcamarche.net/faq/sujet-1881-messagerie-pirater-une-boite-mail-msn-hotmail-yahoo

[Windows] Personnaliser la boîte de dialogue [Enregistrer]Personnaliser la boîte de dialogue "Enregistrer" ou "Enregistrer sous..." de Windows (XP ou 2000); Plus précisément, il s'agit de personnaliser la colonne de gauche, contenant par défaut les raccourcis (icônes) "Mes documents récents", "Bureau", "Mes... www.commentcamarche.net/faq/sujet-2947-windows-personnaliser-la-boite-de-dialogue-enregistrer

Archiver votre boite GMailGMail est un webmail très sympa, mais si vous perdiez votre compte GMail du jour au lendemain ? Il vaut mieux faire une copie de sauvegarde. Voici un programme capable de télécharger et archiver la totalité des emails de votre boite GMail... www.commentcamarche.net/faq/sujet-7915-archiver-votre-boite-gmail

Détection de Boite de Dialogue VISTA (Résolu)Bonjour, Depuis l'essaie d'instalation d'un programme don je ne me souvient plus du nom, j'ai une fenetre qui apparait ; - Détection de Boites de Dialogue de Service Interractifs- >Le programme nécécissite éventuelement des... www.commentcamarche.net/forum/affich-4328059-detection-de-boite-de-dialogue-vista

Pb ouverture automatique boite messagerie (Résolu)Bonjour, Parfois, quand je suis un site Internet à la rubrique par ex. "nous contacter", je clique sur un lien et cela ouvre automatiquement ma boite de messagerie "Outlook Express", avec une fenêtre de nouveau message qui apparaît et le mail du... www.commentcamarche.net/forum/affich-7732537-pb-ouverture-automatique-boite-messagerie

Boitier multimédia 2"1/2 (Résolu)Bonjour boitier multimédia ERA 2"1/2 type EFDA SSV-300 avec HDD Samsung 80GO Sur le PC tout fonctionne bien j'ai tranféré (video +photos) mais sur le téléviseur le contenu du HDD n'apparait pas. Merci de votre aide. www.commentcamarche.net/forum/affich-2202484-boitier-multimedia-2-1-2

Nikon invente le reflex qui filme(Paris - Relax news) - Nouvelle révolution dans les appareils reflex numériques. Après la visée à l'écran Live View, introduite l'année dernière par Olympus et Panasonic, voici apparaître la fonction d'enregistrement vidéo sur ces boîtiers. C'est le... www.commentcamarche.net/actualites/nikon-invente-le-reflex-qui-filme-5847241-actualite.php3

Magnétoscope numérique sur la Freebox HDA la sortie de la Freebox v5 HD (sortie de la freebox v5 hd 2200722 actualite), dont le boîtier TV est équipé d'un disque dur de 40Go, beaucoup s'attendaient à voir apparaître des fonctions d'enregistrement numérique (ou PVR: Personal Video... www.commentcamarche.net/actualites/magnetoscope-numerique-sur-la-freebox-hd-2359685-actualite.php3

[Brève] Nikon D90 : le reflex qui filmeAprès la visée à l'écran Live View, introduite l'année dernière par Olympus et Panasonic, voici apparaître la fonction d'enregistrement vidéo sur ces boîtiers avec le Nikon D90. Il s'agit du premier reflex pour amateurs équipé d'une fonction de... www.commentcamarche.net/actualites/breve-nikon-d90-le-reflex-qui-filme-5847400-actualite.php3

Toutes les réponses pour « boite qui apparait au survol »