A voir également:
- Boite qui apparait au survol
- Se connecter à ma boite hotmail - Guide
- Boite gmail saturée - Guide
- Ouvrir ma boîte mail ✓ - Forum Gmail
- Boîte mail française gratuite - Guide
- Ce message d'erreur apparaît sur l'ordinateur d'elena. que peut-on dire du programme gwxux ? - Forum logiciel systeme
6 réponses
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>
<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>
Salut !!!
Ajoutes, par exemple ceci dans ton css :
;-)
Ajoutes, par exemple ceci dans ton css :
a{display: block; width: 180px; height: 30px; text-decoration: none; border: 1px solid red; position: relative}
;-)
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
Je vais essayer de modifier ca,et si j'y arrive pas je t'appellerais a la rescousse!Maisca devrait le faire!merci beaucoup
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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
