Bonsoir à tous !
un petit souci, j'ai utilisé le modèle CSS de menu horizontal présenté dans la galerie de menus
je l'ai adapté et tout fonctionne dans Netscape, Mozilla MAIS pas dans IE6
mon problème dès que je mets un tableau de mise en forme, je n'ai plus rien du tout dans IE6
alors que pour les deux autres navigateurs, j'obtiens le résultat demandé
Quelqu'un aurait il une petite idée sur ce que j'oublie de faire ?
======================= voici le code de la page ========================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MON TEST MENU HORIZONTAL</title>
<style type="text/css">
<!--
body,td,th {
color: #FFFFFF;
border-color: #FFFFFF;
margin-left: 395px;
}
body {
background-color: #660066;
}
-->
</style>
<style type="text/css">
<!--
/* CSS issu des tutoriels css.alsacreations.com */
body {
background: #660066;
}
ul, li { /* utilisation de liste pour le menu */
list-style-type: none; /* suppression des puces de liste */
margin:0;
padding:0;
}
ul#menu {
position: absolute; /* positionnement pour IE5 et IE5.5 */
top: 169px;
left: 433px;
background: url(images/fondmenu.png) top center no-repeat; /* arrière-plan général du menu */
height: -60px;
width: 720px;
text-align: center;
}
li {float:left;}
li a { /* dimensions et définitions des boutons */
display: block;/* mise en block de <a> pour lui donner des dimensions */
height: 30px;
width: 144px;
color: #FFF;
font-size: 14px;
line-height: 30px; /* hauteur de ligne pour éviter les paddings */
font-weight: bold;
font-family: arial, serif;
text-decoration: none;
}
li a:hover {
background: transparent url(images/fondmenu.png) top left no-repeat;
}
a#lien1:hover {
background-position: -578px -30px; /* décalage de l'arrière-plan pour chaque bouton */
}
a#lien2:hover {
background-position: -578px -30px;
}
a#lien3:hover {
background-position: -432px -30px;
}
a#lien4:hover {
background-position: -286px -30px;
}
a#lien5:hover {
background-position: -142px -30px;
}
</style>
</head>
<body>
<table width="800" height="600" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td width="796" height="150" valign="top"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="45" valign="top" align="center"><ul id="menu">
<li><a id="lien1" href="#">Accueil</a></li>
<li><a id="lien2" href="#">Catalogue</a></li>
<li><a id="lien3" href="#">Où Acheter</a></li>
<li><a id="lien4" href="#">Téléchargement</a></li>
<li><a id="lien5" href="#">Contact</a></li>
</ul></td>
</tr>
<tr>
<td height="405"> </td>
</tr>
</table>
</body>
</html>
================================================
d'avance merci pour votre guidage !
un petit souci, j'ai utilisé le modèle CSS de menu horizontal présenté dans la galerie de menus
je l'ai adapté et tout fonctionne dans Netscape, Mozilla MAIS pas dans IE6
mon problème dès que je mets un tableau de mise en forme, je n'ai plus rien du tout dans IE6
alors que pour les deux autres navigateurs, j'obtiens le résultat demandé
Quelqu'un aurait il une petite idée sur ce que j'oublie de faire ?
======================= voici le code de la page ========================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MON TEST MENU HORIZONTAL</title>
<style type="text/css">
<!--
body,td,th {
color: #FFFFFF;
border-color: #FFFFFF;
margin-left: 395px;
}
body {
background-color: #660066;
}
-->
</style>
<style type="text/css">
<!--
/* CSS issu des tutoriels css.alsacreations.com */
body {
background: #660066;
}
ul, li { /* utilisation de liste pour le menu */
list-style-type: none; /* suppression des puces de liste */
margin:0;
padding:0;
}
ul#menu {
position: absolute; /* positionnement pour IE5 et IE5.5 */
top: 169px;
left: 433px;
background: url(images/fondmenu.png) top center no-repeat; /* arrière-plan général du menu */
height: -60px;
width: 720px;
text-align: center;
}
li {float:left;}
li a { /* dimensions et définitions des boutons */
display: block;/* mise en block de <a> pour lui donner des dimensions */
height: 30px;
width: 144px;
color: #FFF;
font-size: 14px;
line-height: 30px; /* hauteur de ligne pour éviter les paddings */
font-weight: bold;
font-family: arial, serif;
text-decoration: none;
}
li a:hover {
background: transparent url(images/fondmenu.png) top left no-repeat;
}
a#lien1:hover {
background-position: -578px -30px; /* décalage de l'arrière-plan pour chaque bouton */
}
a#lien2:hover {
background-position: -578px -30px;
}
a#lien3:hover {
background-position: -432px -30px;
}
a#lien4:hover {
background-position: -286px -30px;
}
a#lien5:hover {
background-position: -142px -30px;
}
</style>
</head>
<body>
<table width="800" height="600" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td width="796" height="150" valign="top"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="45" valign="top" align="center"><ul id="menu">
<li><a id="lien1" href="#">Accueil</a></li>
<li><a id="lien2" href="#">Catalogue</a></li>
<li><a id="lien3" href="#">Où Acheter</a></li>
<li><a id="lien4" href="#">Téléchargement</a></li>
<li><a id="lien5" href="#">Contact</a></li>
</ul></td>
</tr>
<tr>
<td height="405"> </td>
</tr>
</table>
</body>
</html>
================================================
d'avance merci pour votre guidage !