Merci pour ta réponse, Phobos, mais j'ai respecté l'ordre des div et c'est bien le cadre du bas qui se charge en dernier.

Je ne vois vraiment pas d'ou l'erreur peut provenir.

t'est sur que ton cadre du bas est le div qui se charge en dernier ? je pense que la bordure se mettra sous le div qui est le dernier dans ton code

Le problème du JavaScript du menu est que si on met une méthode onmouseout, ton sous-menu ne restera pas affiché en quittant le "menu-titre", donc il faut soit cliquer sur un des liens du sous-menu soit passer la souris sur un des menus-titre n'ayant pas de sous-menu, [Accueil] par exemple.

Merci beaucoup pour tout ce que tu as fais, c'est vraiment sympa d'avoir passé autant de temps pour m'aider.

J'avais déjà reperé ce menu sur alsacréation mais le problème est qu'il bug parfois lorsqu'on sort la souris d'un sous-menu, celui-ci ne dispait pas tout le temps.

C'est pour cela que j'avais refais un menu sans Javascript qui à l'avantage d'être très réactif, en sachant qu'il ne marcherait pas sous IE.

Grace à ton code, je pense que je vais faire une détection de navigateur dans ma page d'index afin d'inclure l'un ou l'autre des menus, pour avoir une meilleure compatibilité.

Pour finir il reste cependant un dernier bug sur ma page index, que j'ai décris dans mon post ci-dessus.
Voila d'ailleurs la page en question, avec la correction du problème du menu qui déborde mais avec pour l'instant le menu qui ne fonctionnera que sous firefox : [url]http://cybertests.free.fr/index3.php[/url].

Oups j'ai posté sans avoir lu tous les derniers messages, je suis désolé, j'avais ouvert la page de réponse avant que les messages précédents soient arrivés.

J'ai un peu l'impression d'être seul sur ce topic, mais je poste quand même car ce qui suit pourrait être utile à d'autres personnes (et notamment au créateur du topic).

Pour résoudre mon problème j'ai donc donné à mon menu un attribut de position absolute, ce que je ne voulais pas faire au début, mais qui est la seule solution que j'ai trouvé.

Seulement j'ai de nouveau un problème -et c'est le dernier normalement- concernant la bordure de ma page index.

Voila un bout du CSS:
[code]body {
width: 965px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
background-color: #FFFFFF;
border: 8px solid #090060;
}[/code]

Dans ma page, le dernier div avant la balise </body> est celui comprenant le bas de la page (car j'ai appris qu'il fallait que les éléments div soient dans l'ordre de haut en bas car div est une balise de type block), seulement la bordure de la page semble s'arreter en dessous de l'élément de droite.

Si quelqu'un pouvait apporter la dernière pierre pour que ma page s'affiche correctement...

<div id="barremenu">
  <div id="menu">
  	<dl>
  		<dt onmouseover="javascript:montrer();"><a href="index.php" title="Retour à l'accueil">Accueil</a></dt>
  	</dl>
  	<dl>			
  		<dt onmouseover="javascript:montrer('smenu1');"><a href="forum/viewforum.php?f=10" title="Les news de Cybertests">News</a></dt>
  	</dl>
  	<dl>			
  		<dt onmouseover="javascript:montrer('smenu2');"><a href="#" title="Les tests de jeux">Jeux</a></dt>
  			<dd id="smenu2">
  				<ul>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil">Tous les jeux</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=FPS">FPS</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=RPG">RPG</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=RTS">RTS</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Action">Action</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Aventure">Aventure</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=MMORPG">MMORPG</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Arcade">Arcade</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Sport">Sport</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Simulation">Simulation</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Course">Course</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Shoot">Shoot</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Plate-Forme">Plate-Forme</a></li>
            <li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Autre">Autres</a></li>
            <li><a href="index.php?centre=jeux/ajouter_jeu&droite=fiche_tests_accueil">Ajouter un jeu</a></li>
  				</ul>
  			</dd>
  	</dl>
  	<dl>			
  		<dt onmouseover="javascript:montrer('smenu3');"><a href="#" title="Disponible prochainement">Films</a></dt>
  	</dl>
  	<dl>			
  		<dt onmouseover="javascript:montrer('smenu4');"><a href="#">Liens</a></dt>
  			<dd id="smenu4">
  				<ul>
            <li><a href="index.php?centre=liens/liens">Tous les liens</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=Jeux">Jeux Vidéos</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=cinema">Cinéma</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=BD">BD</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=Musique">Musique</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=Informatique">Informatique</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=Wallpapers">Wallpapers</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=Humour">Humour</a></li>
            <li><a href="index.php?centre=liens/liens&categorie=Autre">Autres</a></li>
            <li><a href="index.php?centre=liens/ajouter_lien">Ajouter un lien</a></li>
  				</ul>
  			</dd>
  	</dl>
  	<dl>			
  		<dt onmouseover="javascript:montrer('smenu5');"><a href="#">Communauté</a></dt>
  			<dd id="smenu5">
  				<ul>
            <li><a href="forum/index.php">Forum</a></li>
            <li><a href="index.php?centre=contact">Nous contacter</a></li>
  				</ul>
  			</dd>
  	</dl>
  </div>
</div>

<script type="text/javascript">
<!--
function montrer(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';
    }
}
//-->
</script>

BOn, voilà de quoi t'occuper quelques minutes: On remplace quelques éléments, on en rajoute un aussi:

Ton menu doit devenir ça :
[php]<div id="barremenu">
<div id="menu">
<dl>
<dt onmouseover="javascript:montrer();"><a href="index.php" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montrer('smenu1');"><a href="forum/viewforum.php?f=10" title="Les news de Cybertests">News</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montrer('smenu2');"><a href="#" title="Les tests de jeux">Jeux</a></dt>
<dd id="smenu2">
<ul>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil">Tous les jeux</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=FPS">FPS</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=RPG">RPG</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=RTS">RTS</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Action">Action</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Aventure">Aventure</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=MMORPG">MMORPG</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Arcade">Arcade</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Sport">Sport</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Simulation">Simulation</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Course">Course</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Shoot">Shoot</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Plate-Forme">Plate-Forme</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Autre">Autres</a></li>
<li><a href="index.php?centre=jeux/ajouter_jeu&droite=fiche_tests_accueil">Ajouter un jeu</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montrer('smenu3');"><a href="#" title="Disponible prochainement">Films</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montrer('smenu4');"><a href="#">Liens</a></dt>
<dd id="smenu4">
<ul>
<li><a href="index.php?centre=liens/liens">Tous les liens</a></li>
<li><a href="index.php?centre=liens/liens&categorie=Jeux">Jeux Vidéos</a></li>
<li><a href="index.php?centre=liens/liens&categorie=cinema">Cinéma</a></li>
<li><a href="index.php?centre=liens/liens&categorie=BD">BD</a></li>
<li><a href="index.php?centre=liens/liens&categorie=Musique">Musique</a></li>
<li><a href="index.php?centre=liens/liens&categorie=Informatique">Informatique</a></li>
<li><a href="index.php?centre=liens/liens&categorie=Wallpapers">Wallpapers</a></li>
<li><a href="index.php?centre=liens/liens&categorie=Humour">Humour</a></li>
<li><a href="index.php?centre=liens/liens&categorie=Autre">Autres</a></li>
<li><a href="index.php?centre=liens/ajouter_lien">Ajouter un lien</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montrer('smenu5');"><a href="#">Communauté</a></dt>
<dd id="smenu5">
<ul>
<li><a href="forum/index.php">Forum</a></li>
<li><a href="index.php?centre=contact">Nous contacter</a></li>
</ul>
</dd>
</dl>
</div>
</div>
[/php]
Pour le JavaScript, mets ceci dans l'en-tête de ta page:
[php]<script type="text/javascript">
<!--
function montrer(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';
}
}
//-->
</script>
[/php]
Et enfin remplace toute la partie qui concerne le menu/sous-menu dans la feuille de style par ça :
[code]#barremenu {
position: relative;
top: -20px;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%; /* précision pour Opera */
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
float: left;
width: 8em;
}
#menu dt {
cursor: pointer;
text-align: center;
background: #ccc;
border: 1px solid gray;
margin: 1px;
color: #090060;
background-image: url(echantillon.jpg);
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-decoration: none;
padding-top: 2px;
padding-bottom: 2px;
}
#menu dd {
display: none;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
border: 0;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: none;
padding: 0;
margin: 0;
}
#menu li a {
color: #090060;
background-image: none;
background-color: #BBBBBB;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
padding-top: 2px;
padding-bottom: 2px;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
margin: 0;
}[/code]
Avec ça, tu auras le bon affichage tant sous Firefox que sous IE.

Bon code.

Bon, j'ai un peu de mal avec ton code, avec ou sans tableau, il y a déjà pas mal d'erreurs dans le html.

Si tu veux avancer aussi en attendant, regarde [url=http://css.alsacreations.com/modelesmenus/hd1.htm][b]ici[/b][/url], ça correspond assez à ce que tu veux faire.

Ok, dans un cas comme dans l'autre, si tu ne passes pas par un JavaScript, tu ne pourras pas faire ce que tu veux, ça ne fonctionnera pas sous tous les navigateurs sinon, IE en particulier.

Pour le z-index, c'est parfois capricieux. Je vais ramasser les deux codes et voir ce que j'arrive à faire avec, je ne peux pas te répondre en quelques minutes.

Oui je revenais justement mettre en ligne les deux pages sur lesquelles je travaille. Merci de m'aider, car je crois que je ne pourrais plus me débloquer tout seul, après tout ce que j'ai essayé.

Voila la première page, avec des tableaux et uniquement le problème du menu qui déborde (ne pas tenir compte des couleurs).
[url]http://cybertests.free.fr/index2.php[/url]

Voila la nouvelle page, cette fois ci avec des balises div, et de nombreux problèmes (les couleurs sont les meme, mais le css est différent!).
[url]http://cybertests.free.fr/index3.php[/url]

Merci encore pour votre aide.

Tu as quelque chose en ligne qu'on puisse inspecter ?

Après deux jours de galère, j'ai décidé de tout refaire sans tableau, uniquement avec des balises div. Et la, ça commence sérieusement à me prendre la tête. J'ai deux fois plus de problèmes qu'avant, rien ne se met a la bonne place, et le problème du menu qui déborde persiste, meme en utilisant l'attribut z-index.

Je crois que je vais laisser en plan mon travail car j'ai vraiment l'impression de perdre mon temps. Mais j'aimerais tout de meme mettre en ligne une version fonctionnelle de ma page avec le système de tableau.

L'attribut manquant est-il si difficile à trouver? Car comme je l'ai déjà dis, la page s'est déjà affichée correctement. La solution existe donc bel et bien!

Je n'ai pas pu résoudre mon problème à l'aide de ton lien. J'ai surement du rater quelquechose. Quelqu'un aurait une idée de l'attribut CSS qui manque ?

Après m'être renseigné je me suis effectivement apercu que les div étaient plus pratiques. Mais je n'ai pas trop le temps de refaire à nouveau une page seulement avec des div, sachant qu'il doit simplement manquer une petite corection pour que mon système fonctionne.

Voila donc pourquoi je fais appel à votre aide, d'autant plus que j'ai fait énormément d'essais pendant deux jours sans succès.

Tu aurais grand avantage à faire une visite [url=http://css.alsacreations.com/Galeries-de-menus-en-CSS][b]ICI[/b][/url], tu trouveras pas mal de réponses à tes questions et même plus.

Je préfère ne pas recréer de topic, je préfèrerais qu'un modo le déplace, car il me semble inutile de multiplier les posts.

Voila donc le code (avec surement de grosses énormités mais je débute, alors soyez indulgent :-D ) :

dans la page en question :
[code]<td align="center" class="tableau"><?php include ("menu2.php"); ?>[/code]

le menu :
[code]
<ul class="menu">
<li>
<a>blabla</a>
<ul class="sousmenu">
<li><a>blabla</a></li>
</ul>
</li>
</ul>
[/code]

et le plus important, le css (avec surement beaucoup de choses redondantes, mais je veux que tout soit personnalisable par la suite):
[code]
.menu {
position: absolute;
display: block;
top: 110px;
float: left;
width: 955px;
height: 22px
list-style-type: none;
line-height: 22px;
text-align: center;
margin: 0;
padding: 0;
border: 0;
}
.menu li {
width: 120px;
float: left;
text-align: center;
list-style-type: none;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
margin: 0;
padding: 0;
}
.sousmenu {
display: none;
float: left;
text-align: center;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
.sousmenu li {
float: none;
text-align: center;
margin: 0;
padding: 0;
border: 0;
}
.menu li a:link, .menu li a:visited {
display: block;
color: #090060;
background-image: url(echantillon.jpg);
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-decoration: none;
padding-top: 2;
padding-bottom: 2;
margin: 0;
border: 0;
}
.menu li a:hover {
background-image: none;
background-color: #CCCCCC;
}
.menu li a:active {
background-image: none;
background-color: #BBBBBB;
}
.sousmenu li a:link, .sousmenu li a:visited {
display: block;
color: #090060;
background-image: none;
background-color: #BBBBBB;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
padding-top: 2;
padding-bottom: 2;
margin: 0;
border: 0;
}
.sousmenu li a:hover {
background-image: none;
background-color: #CCCCCC;
}
.sousmenu li a:active {
background-image: none;
background-color: #BBBBBB;
}
.menu li:hover > .sousmenu {
display: block;
}

.tableau {
width: 955px;
background-image: url(echantillon.jpg);
}
[/code]

Je sais aussi que ce menu ne marche pas sous IE, mais j'en ai un autre de secours.

Merci pour votre aide.