Bonjour , j'ai un petit probleme avec mon code, 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.
merci de votre aide
Voici ce que ca donne avec internet exploer et netscape(en image j'ai mis la site complet,mais j'ai allégé le code que je vous ait donné ci dessus.
Modifié par averell22 (17 Dec 2005 - 13:22)
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
Voici ce que ca donne avec internet exploer et netscape(en image j'ai mis la site complet,mais j'ai allégé le code que je vous ait donné ci dessus.
Modifié par averell22 (17 Dec 2005 - 13:22)