Excuse koala64, je me suis mal exprimé.
quand je dis "l'intégrer dans le flux", c'était pour dire que je voulais essayer de mettre mon menu horizontal positionné par rapport aux autres éléments de ma page, et non par rapport au "body". Ce que je veux, c'est que mon menu sortent du flux, mais qu'il suive ma page.
J'ai d'ailleurs trouvé: Il suffit de placer les fonctions "left" et "top" en "auto", pour que le menu suivent les autres éléments de la page. Il prend la première balise qui l'entoure comme point de repère.
Malheureusement, j'ai maintenant un autre problème: Pour Firefox et opéra, mon menu fait la même taille, et il est bien placé.
En, revanche, avec internet explorer 6.0, Mon menu est plus gros, et je ne vois pas comment le régler.
Voici le code HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="generator" content=""><title>S</title>
<script language="JavaScript" src="mmfunct1.js"></script>
<link href="menus1.css" rel="stylesheet" type="text/css">
</head>
<!--Image de tete-->
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td width="800" valign="top" align="center"><img src="ban01.gif"></td>
</tr>
</table>
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<td width="150" valign="top"><img src="ban02.gif" width="150" height="18" ></td>
<td width="650" valign="top"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">
<div id="menu">
<dl>
<dt onMouseOver= "javascript:montre('smenu1');"><a href="#">TDP 3000</a></dt>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu2');"><a href="#">Les solutions</a></dt>
<dd id="smenu2" onMouseOver="javascript:montre('smenu2');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Indépendants</a></li>
<li><a href="#">Associations</a></li>
<li><a href="#">Réseaux</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu3');"><a href="#">Les services</a></dt>
<dd id="smenu3" onMouseOver="javascript:montre('smenu3');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Suivi permanent</a></li>
<li><a href="#">Services de gestion</a></li>
<li><a href="#">Hotline et formation</a></li>
<li><a href="#">Surveillance logiciel</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu4');"><a href="../cartefid.html">La carte de fidélité</a></dt>
</dl>
<dl>
<dt onMouseOver="javascript:montre('smenu5');"><a href="#">Le matériel</a></dt>
<dd id="smenu5" onMouseOver="javascript:montre('smenu5');" onMouseOut="javascript:montre('');">
<ul>
<li><a href="#">Terminaux et PC</a></li>
<li><a href="#">Bornes</a></li>
</ul>
</dd>
</dl>
</div>
</font>
</td>
<!--Fin du menu horizontal-->
</table>
</body></html>
Le code css:
body { /* Le corps de la page */
margin: 0;
padding: 0;
background: #99CCFF; /* couleur de l'arrière plan */
font: 80% verdana, arial, sans-serif; /* type de police utilisé */
}
/* Début fonction menu horizontal */
dl, dt, dd, ul, li {
margin: 0; /* définit la marge entre les éléments dl, dt, dd, ul et li */
padding: 0; /* définit l'espace intérieur de dl, dt, dd, ul et li, entre les bords et le contenu */
list-style-type: none; /* définit l'apparence de la puce : ici aucune (correctif opéra) */
}
#menu { /* définition de la fonction menu horizontal */
position: absolute; /* placement du menu, ici en position absolue (n'est pas lié au reste de la page html) */
left: auto;
top:auto; /* placement horizontal du menu */
width: 100%; /* correction pour Opera */
z-index: 100;
}
#menu dl { /* création d'une nouvelle case dans le menu à chaque appel de la fonction dans le html */
float: left; /* spécifie de quel coté l'élément doit s'aligner */
width: 13em; /* taille de chaque case de la barre menu horizontal */
}
#menu dt { /* définition de chaque case du menu */
cursor: pointer; /* type de curseur */
text-align: center; /* alignement du texte */
background-color: #78B3CA; /* couleur de fond de chaque case :ici BLEU-VERT */
border-style: solid; /* type de bordure */
border-bottom-color: #3496AB;
border-right-color: #3496AB; /* définition de la couleur de chaque bord */
border-left-color: #77C6D7;
border-top-color: #77C6D7;
}
#menu dd { /* dd : fonction qui englobe les sous-menus */
display: none; /* L'élément est masqué (firefox et opéra) */
border: 1px solid gray; /* couleur du cadre qui entoure les sous-menu */
}
#menu li { /* liste des sous-menus */
text-align: center; /* alignement du texte */
background: #78B3CA; /* couleur de fond */
list-style-type: none; /* définit l'apparence de la puce : ici aucune */
height: 15px; /* hauteur de chaque case des sous-menus */
width: 129px; /* largeur de chaque case des sous-menus */
margin: 0px; /* Espacement entre chaque case */
}
#menu li a, #menu dt a {
text-decoration: none;
display: block; /* transforme la boite en block */
height: 100%; /* pour opéra et firefox */
border: 0 none;
width: 100%; /* pour opéra et firefox */
background-color: #78B3CA; /* BLEU-VERT */
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
color: #003399;
background-color: #78B3CA; /*bleu-clair*/
}
/* fin fonction menu horizontal */
/* Dèbut du code couleur sur les liens */
a:link {text-decoration: none;color: #FFFFFF;} /* Propriétés par défaut au chargement de votre page */
a:hover {color: #0066CC;text-decoration: none;} /* Définit l'affichage du lien lorsque il est survolé */
a:visited {text-decoration: none;color: #FFFFFF;} /* Définit l'affichage des liens qui ont déjà été visités */
a:active {text-decoration: none;} /* Définit l'affichage des liens actifs */
/* fin code couleur sur les liens */
Le Java script:
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
Une des différences avec le menu d'Alsacréations, c'est que j'ai rajouté des bords sur mes menus.
Si quelqu'un voit quelque chose d'anormal, Merci pour son aide.
s'il te plait.