Voila j’ai un petit probléme. Je réalise un petit site internet html/css pour un projet.
Ma page comprend 4 div: une entête (bandeau), un menu à gauche, le corp principale de la page et le pied de page.
Mon problème vient du fait que quand je réduit la fenétre de navigation, le div qui contient mon corp principal passe sous le menu.
J’aimerais savoir comment figer mes div pour qu’il n’y ai pas de déplacement dû au redimensionnement de la fenêtre.
Sans code, ça va être dur de t’aider :s
Oui c’est pas faux:
Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml?#34; xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href= "design_mecanique.css" />
<style type="text/css">
<!--
.Style1 {font-family: Arial, Helvetica, sans-serif}
.Style2 {color: #FFFF33}
-->
</style>
</head>
<body>
<div id="en_tete"></div>
<div id="menu_deroulant">
<object type="application/x-shockwave-flash" data="menu.swf" width="760" height="40">
<param name="movie" value="menu.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<p>Installez le plugin Flash pour voir l'animation : <a href="http://www.adobe.com/go/gntray_dl_getflashplayer_fr" title="LienPlugin">Cliquez ici pour le télécharger</a></p>
</object>
</div>
<div id="menu">
<div class="element_menu">
<h3>Menu</h3>
<ul class="Style1">
<li><span class="Style2"><a href="../page1.html?#34;>Photos</a></span></li>
<li class="Style2"><a href="../page2.html?#34;>CV</a></li>
<li><span class="Style2"><a href="../page3.html?#34;>Anim</a></span></li>
</ul>
</div>
<br />
<div class="element_menu">
<h3>Lecteur MP3</h3>
<p>
<object type="application/x-shockwave-flash" data="lecteur_mp3.swf" width="120" height="50">
<param name="movie" value="lecteur_mp3.swf" />
<param name="quality" value="high" />
<p>Installez le plugin Flash pour voir l'animation : <a href="http://www.adobe.com/go/gntray_dl_getflashplayer_fr" title="LienPlugin">Cliquez ici pour le télécharger</a></p>
</object>
</p>
</div>
</div>
<div class="Style1" id="corps">
<h1>Infographie</h1>
<p>Creation d'un site internet pour le cours d'infographie</p>
<h2>A qui s'adresse ce site ?</h2>
<p>
Ce site s'adresse à </p>
<h2>L'auteur</h2>
<p>Je me présente</p>
</div>
<div id="pied_de_page">
<p>Copyright "MAxCreaT" 2007, tous droits réservés <img src="valid-xhtml10.png" alt="" width="88" height="31" /></p>
</div>
</body>
</html?#62;
CSS:
body
{
margin: 0; /* pour éviter les marges */
text-align: center;
width:expression(document.body.clientWidth > 800 , "800px" : "600px" );
background-image: url(fond.png);
scrollbar-face-color: #2c95c5; scrollbar-arrow-color: #ffffff; scrollbar-track-color: #2c95c5; scrollbar-3dlight-color: #2c95c5; scrollbar-darkshadow-color: #202020; scrollbar-shadow-color : #0b6097;
scrollbar-highlight-color: #83c3df;
}
/* L'en-tête */
#en_tete
{
position: relative;
margin-left: auto;
margin-right: auto;
width:/*expression(document.body.clientWidth > 950 ? "950px" : "740px" )*/760px;
height: 100px;
background-image: url(baniere.png);
background-repeat: no-repeat;
margin-bottom: 5px;
text-align: center;
}
#menu_deroulant
{
position: relative;
margin-left: auto;
margin-right: auto;
width: 760px;
height: 40px;
/*background-image: url(menu_deroul.png);*/
background-repeat: no-repeat;
margin-bottom: 10px;
text-align: center;
}
#menu
{
float: left;
margin-left:20px;
margin-right:auto;
width: 130px;
}
.element_menu
{
background-color: #FFFFCC;
/*background-image: url(bouton.png);
background-repeat: repeat-x;*/
border: 2px solid #FF9900;
margin-bottom: 20px;
}
/* Quelques effets sur les menus */
.element_menu h3
{
color: #0099FF;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}
.element_menu ul
{
list-style-image: url(bouton.png);
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
text-align: left;
}
.element_menu a
{
color: #0099FF;
}
.element_menu a:hover
{
background-color: #FFFFCC;
color: black;
}
/* Le corps de la page */
#corps
{
overflow:auto;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding: 5px;
width: 660px;
height: 400px;
color: #0099FF;
background-color: #FFFFCC;
/*background-image: url(fonddiv.png);*/
background-repeat: repeat-x;
text-align: left;
border: 2px solid #FF9900;
}
#corps h1
{
color: #0099FF;
text-align: left;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
#corps h2
{
height: 30px;
background-image: url(images/titre.png);
background-repeat: no-repeat;
padding-left: 30px;
color: #66CCFF;
text-align: left;
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
#pied_de_page
{
padding: 5px;
text-align: center;
width:expression(document.body.clientWidth > 950 "950px" : "740px" );
color: #B3B3B3;
background-color: #FFFFCC;
background-image: url(images/motif.png);
background-repeat: repeat-x;
border: 1px solid #FF9900;
}
ça aurait été plus facile de t’aider avec juste le passage défaillant…
InSiderZ ta remarque n’aide pas vraiment 
!
Je dirais déjà de commencer par passer le corps en float lui aussi, comme ceci :
Après il te faudra "casser" ce flottement pour éviter que fon footer remonte sur le corps, pour cela rajoute une classe dans ton css :
Et rajoute cette ligne dans ton fichier html :
Ps : Tu n’as a modifié que ce qui est en gras, je te conseil de faire des sauvegardes de tes fichiers originaux avant de tester cette solution.
Non, j’attendais qu’il modifie tout ça. Il sait où ça merdouille mais nous donne la totalité, alors bon… autant faire simple et éviter les pages de 40 mètres de long 
Et pour plus de propreté, on vire cette classe qui sert à rien et on met le clear dans le pied de page.
L’avantage de cette classe est d’être facilement exportable et reste là ou elle se doit d’être même si on modifie plus tard la structure (genre un autre cadre avant le foot).
Mais dans l’absolue tu as raison, autant mettre un clear dans le cadre d’en dessous. (Moi je le justifie avec un affichage par block qui change suivant les requetes)
Disons que le grand désavantage, c’est que ce div tout seul veut rien dire sémantiquement. Donc si tu peux vraiment pas faire autrement ok, mais quand tu peux éviter… autant faire les choses proprement. 
J’avoue, et puis pour clore le débat (oui le sujet n’est pas résolu donc on peux pas polluer) je dirais que ça permet un gain de quelques octets qui sont pas négligeables sur un BP limitée si on tourne à de gros traffic…
Merci pour ta réponse DarKChAm mais ça ne fonctionne toujours pas. J’ai mis en ligne le début du site pour avoir une idée du probléme (il manque de nombreux contenus et il y a encore un tas de bug).
Site Internet
Lorsque que vous êtes sur la page d’accueil, réduisez la fénêtre horizontalement.
Vous vous aperceverez que la div principale de la page se retrouve en bas, coincée entre le menu et le pied de page.
Si quelqu’un a une idée que ma structure reste fixe…
(Désolé d’avoir balancé le code en entier mais hier soir j’étais un peu speed et ne sachant pas d’où vient le problème, j’ai préféré tous mettre)
Ok je dirais que c’est normal, c’est du au faite que tu veuilles center le cadre du milieu et que tu utilises la propriété margin-left:auto; . Enfin c’est ce que je pense, pour en être sur essaies de modifier l’id suivant ainsi (en utilisant toujours le code que je t’ai donné auparavant :