Bonjour et bon courage.
alesson a écrit :
je sais plus quoi faire 
Alors c'est simple. Tu as écrit un code HTML faux, notamment en oubliant de refermer ton bloc div#menuh, ce qui fait que ton menu de gauche et ton contenu principal sont considérés comme faisant partie de ce bloc. Et lorsque tu as écrit ton CSS, tu l'as écrit pour une structure HTML fausse.
Si tu corriges ta structure HTML maintenant, ça va casser une partie de ta mise en page, c'est normal. La solution? Corriger la structure HTML, puis corriger ton code CSS pour tenir compte de cette structure.
Ta structure HTML est incohérente. Tu as un #footer placé avant le menu horizontal et le contenu, et un menu de gauche placé avant le menu horizontal qui pourtant est visuellement au dessus. Je ne sais pas si c'est volontaire ou si c'est le résultat d'erreurs d'imbrication de ton code HTML, mais c'est à corriger en priorité, et peu importe les résultats sur ta mise en page. Tu vas d'ailleurs pouvoir supprimer 90% du code CSS qui te sert à positionner tes éléments, et le refaire à neuf.
Une structure correcte serait celle-ci:
<div id="page">
<div id="banniere">
...
</div><!--#banniere-->
<div id="menuh">
...
</div><!--#menuh-->
<div id="menuv">
...
</div><!--#menuv-->
<div id="contenu">
...
</div><!--#contenu-->
</div><!--#page-->
Côté CSS, tu peux commencer par fixer la largeur de #page à 929px de large et pas 1200px comme actuellement (c'est idiot, tu n'as pas besoin de cette largeur excessive). Et éviter de figer la hauteur de ce conteneur: pour commencer, tu devrais essayer d'obtenir comme résultat que la hauteur s'adapte à celle du contenu, et tu verras plus tard s'il y a des raffinements à apporter (une hauteur minimale par exemple).
Bien sûr, ton image fond.png n'a aucune raison de faire 1200px de large.
En ce qui concerne le positionnement des éléments, la première chose à faire est de bloquer une demi-journée pour lire cet article et les ressources qui y sont indiquées, et faire quelques tests isolés pour bien assimiler le tout:
http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html. (Dans l'ordre conseillé: les ressources indiquées d'abord, puis l'article lui-même.)
Ensuite, tu vas pouvoir garder dans le flux (
position:static;float:none; -- pas la peine de le préciser, ce sont les valeurs par défaut) la plupart de tes éléments. La seule exception devrait être le menu de gauche, qui pourra être flottant (
float:left). Pas besoin de faire flotter le contenu à droite. Tu peux t'inspirer des
gabarits de mise en page proposés ici, et notamment:
-
http://www.alsacreations.com/static/gabarits/modele07.html
-
http://www.alsacreations.com/static/gabarits/modele08.html
Si tu veux tester ta mise en page et que tu n'as pas de contenu dans un bloc, tu peux utiliser une hauteur minimale pour ce bloc (
min-height). Sauf si c'est vraiment une demande du design, il faudra supprimer cette hauteur minimale en cours de route ou à la fin, mais au pire si tu l'oublies c'est moins gênant que si tu avais figé la hauteur avec un
height.
Bonne continuation.
