Mes divs passent les un au-dessous des autres

Salux à tous,
je suis en train de faire un site pour un copain et son entreprise.
Mon problème c'est que l'image de droite dans l'entête, ainsi que les liens et la partie de droite (sous l'entête) se mettent les unes sous les autres.
Et l'image (de la maison) passe sous l'entête, vers le bas donc.
J'aimerais savoir où j'ai fait les mauvais code et comment les résoudre.
Voici le lien pour voir le site : http://www.boisbievre.fr/Chalet_Nature/index_C.N.html
Merci de votre aide.

et mon fichier css :

body {
 width: 90%;
 margin-top: 2px;
 margin-bottom: 20px;
 margin-left: auto;
 margin-right: auto;
 max-width: 1440px; /*style maximum de largeur*/
 min-width: 700px;  /*styles minimum de largeur*/
 background: #FFE6CC/*#515151*/;

}

/* L'en-tête */
#en_tete {
 height: 275px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 10px;
 background: #515151/*#181A12*/;
 
}
/* positionnement logo et fuste */
.logo_chalet_nature {
 float: left;
 padding: 15px 15px 15px 33px;
}
.maison_de_raph {
 float: right;
 padding: 20px 33px 20px 15px;
}
 

/* Navigation couleur*/
#navigation {
 background: #181A12;
}
#navigation a { 
 color: #FF6533;
}
#navigation a:hover, #navigation a:focus {
 background: #737373;
}
#navigation a:visited {
 color: #F4DE66;
}

#navigation { 
 width: 100%;
 margin-left: auto;
 margin-right: auto;
}
/* navigation positionnement */
#navigation {
 height: 40px;
 padding-top: 15px;
 margin-top: 10px;	
 margin-bottom: 10px;
 padding: auto;
}
#navigation ul {
 margin-top: 0;
 padding: 0;
 text-align: center;
 list-style: none;
}
#navigation li {
 display: inline; 
}
#navigation a {
 padding: 6px;
 line-height: 1.5;
 font-size: .9em;
 text-decoration: none;
}

/* Le menu */
#menu_droit {
 float:right;
 margin-bottom:5px;
 width: 25%;          /* largueur du menu */
 border: 3px outset #FFFFC9
}

.element_menu {
 text-align: center;
 padding: 1px;
 background-color: #626262;
 color: #F4DE66;
 
}

/* Le corps de la page */
#corps {
 float:left;
 width: 72%;
 margin-left: 0px;
 padding: 10px;
 color: #F4DE66;
 background-color: #515151/*#626262*/;
}

#corps h1 {
 color: #F4DE66;
 text-align: center;
 font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 {
 height: 30px;
 padding-left: 30px;
 color: #F4DE66;
 text-align: left;
}


/* Le pied de page */
#pied_de_page {
 float:left;
 width: 100%;
 margin-top: 5px;
 padding: 5px;
 text-align: center;
 color: #B3B3B3;
}

/* class navigation */
/* positionnement */
.navigation {
 height: 40px;
 padding-top: 15px;
 margin-top: 0;	
 margin-bottom: 10px;
 padding: auto;
}
.navigation ul {
 margin-top: 0;
 padding: 0;
 
}
.navigation li {
 display: inline; 
}
.validateur {
 height: 18px;
 width: 68px;
}
.navigation a {
 padding: 6px;
 font-size: .9em;
 text-decoration: none;
}

/* couleur */
.navigation {
 background: #181A12;
}
.navigation a {
 color: #FF6533;
}
.navigation a:hover, #navigation a:focus {
 background: #737373;
}
.navigation a:visited {
 color: #F4DE66;
}

Modifié par Muad'Dib (26 Feb 2010 - 19:13)

salux,
personnes n'a d'idées ?

T'aurais pas une adresse pour visionner la page parce que la sans les images j'arrive pas a voir ce qui cloche.

le site n'est pas encore en ligne.
Mais je vais essayer de le faire pour voir l'ensemble.
Merci

Salux,
voilà, j'ai mis un lien en ligne : http://www.boisbievre.fr/Chalet_Nature/index_C.N.html
C'est vrai que c'est plus simple.
Merci de votre aide.
Modifié par Muad'Dib (26 Feb 2010 - 19:14)

salux,
si quelqu'un voulait bien me dire comment faire pour résoudre mon problème ça pourrait
beaucoup m'aider.
Merci

Bonjour,

Aucun problème en grande résolution ; par contre quand je réduis la fenêtre, les éléments n'ont plus assez de place et passent à la ligne.

La solution la plus simple est d'ajouter un min-width (en px) qui permettra de contenir tous les éléments aux conteneur principal. Pour IE6 il faudra ajouter via un commentaire conditionnel un width de la même valeur.

merci pour ta réponse.
Cependant, j'ai déjà mis cette balise dans body.
En fait, j'ai ça dans body :

body {
 width: 90%;
 margin-top: 2px;
 margin-bottom: 20px;
 margin-left: auto;
 margin-right: auto;
 max-width: 1440px; /*style maximum de largeur*/
 min-width: 650px;  /*styles minimum de largeur*/
 background: #FFE6CC/*#515151*/;
}

Et pour IE :

<!-- Styles pour IE largeur mini et maxi-->
<!--[if lt IE 7]>
<style type="text/css">
div {
width: 700px;
width: expression(document.body.clientWidth <= 682? "680px" : document.body.clientWidth >= 1442? "1440px" : "auto");
}
</style>
<![endif]-->

Est-ce bien dans body que je dois mettre cette balise ?
Ou dois-je créer une autre div ?
Si oui, où faut-il la placer ?
Merci pour ton aide.

Salut,

il faudrait supprimer le height de #en_tete et ajouter un overflow:hidden pour éviter le dépassement des flottants.

A noter que les images sont trop larges puisqu'il n'y a déjà pas assez de place en 1024 * 768 alors qu'il est préconisé de se baser sur une largeur moyenne de moins de 1000px (disons 980).

salux,
merci pour ton aide.

J'ai fait comme tu m'as dit.
C'est toujours pareil.

Cependant, le menu horizontale lui ne se met plus vers le bas.
J'ai réduis les image dans l'entête.
La div de droite passe toujours entre le menu et le corps.
Je ne comprends pas pourquoi, j'ai pourtant suivi ce qui est dit dans le dvd.

En tous les cas, merci pour votre aide.

Il faudrait également supprimer le float et le width de #corps et ajouter un margin-right (de 350px par exemple).

Le plus simple aurait été de partir de l'un des gabarits de mise en page puisque le tien y est proposé.

Bon,
j'ai fait une bannière pour l'entête --(comme je l'avais fait pour mon premier site :
www.boisbievre.fr, et la, quand je réduis la fenêtre du navigateur tout se réduit en même temps)--

Cependant, dans ma nouvelle création, quand je réduis la fenêtre, la bannière disparait par les cotés.
Je ne comprends pas pourquoi car avec l'autre site ça fonctionne.
J'ai remis le même CSS pour les deux concernant l'entête.
Voulez-vous m'expliquer et me dire quoi faire ?
Merci pour votre aide.
Modifié par Muad'Dib (21 Feb 2010 - 11:25)

Muad'Dib a écrit :
j'ai fait une bannière pour l'entête --(comme je l'avais fait pour mon premier site)

A la différence près que pour ton premier site tu avais bien du contenu texte dans le code html et que l'image était en background css alors que là tu n'as mis qu'une image centrée (ce qui explique qu'elle disparaisse par les côtés) en css. C'est une mauvaise idée puisque du coup "Chalet nature - constructeur de fustes sur mesure" est inaccessible (aux lecteurs d'écrans, aux moteurs de recherche, etc.)

Il faut donc mettre le texte dans le code html (Paragraphe P ou titre H1) et pour les images tu pourrais par exemple faire comme ça :

#entete {
	padding-left: 120px; /* 120px = width de l'image de gauche +20px */
	background: #515151 url(image_gauche.jpg) top left no-repeat;
	text-align: center;
}

#entete p {
	padding: 60px 220px 60px 0; /* 220px = width de l'image de droite +20px */
	margin: 0;
	background: url(image_droite.jpg) top right no-repeat;
	font-size: 2em;
}

<div id="entete">
	<p>Chalet nature - constructeur de fustes sur mesure</p>
</div>

Au passage ta hiérarchie de titres est incorrecte puisqu'elle débute par des H3. Cela peut vite se corriger puisque les H3 en question ne sont pas des titres de section.

Merci infiniment pour ton aide.
Le résultat est nettement mieux.
Comme tu pourras le constater.

Serait-il possible de faire en sorte que quand je réduis la fenêtre du navigateur, donc pour des écrans plus petits, un ascenseur horizontal apparaisse ?
Parce que là, ce n'est pas le cas.
Et quand on réduis beaucoup, l'entête se chevauche.

Si c'est possible ? Merci.

Dans le body j'ai pourtant :

width: 90%;
 margin-left: auto;
 margin-right: auto;
 max-width: 1440px; /*style maximum de largeur*/
 min-width: 650px;  /*styles minimum de largeur*/

Cela ne suffit pas pour régler le problème ?

Muad'Dib a écrit :
Le résultat est nettement mieux.

Sauf que tu n'as pas mis les bonnes valeurs de padding : comme ton image de gauche fait 256px de large tu devrais avoir un padding-left d'environ 266px et comme ton image de droite fait 430px de large tu devrais avoir un padding-right d'environ 440px.

Muad'Dib a écrit :
Serait-il possible de faire en sorte que quand je réduis la fenêtre du navigateur, donc pour des écrans plus petits, un ascenseur horizontal apparaisse ?
Parce que là, ce n'est pas le cas.
Et quand on réduis beaucoup, l'entête se chevauche.

Ben le min-width fonctionne mais 650px c'est trop peu puisque la largeur totale des 2 images fait déjà 686px ! Il faudrait mettre quelque chose comme 960px.

Quoi qu'il en soit le rendu n'est pas fameux. Personnellement j'aurais utilisé une photo de fuste bien plus large (supérieure ou égale à ton max-width) que j'aurais mis en background de #entete. Le logo serait alors en background left du H1 qui aurait une couleur permettant d'être lisible par dessus la photo.


PS : tes éléments H3 et H4 ne sont toujours pas des titres de section.

Quoi qu'il en soit le rendu n'est pas fameux. Personnellement j'aurais utilisé une photo de fuste bien plus large (supérieure ou égale à ton max-width) que j'aurais mis en background de #entete. Le logo serait alors en background left du H1 qui aurait une couleur permettant d'être lisible par dessus la photo.

Je crois que tu as raison.
Je vais faire ce que tu dis.
Cependant, une image de cette largeur, je n'en ai pas.
Je pense donc faire un panorama, puis mettre par dessus à gauche la logo et le titre écrit
sur le panorama.
Faut que je trouve de belles photos.
je reviendrais quand je l'aurai fait.
Merci pour tes conseils et ton aide.

Voilà ce que j'ai fait.
Dis-moi ce que tu en penses = http://www.boisbievre.fr/Chalet_Nature/index_C.N.html
Je pense que le titre h1 peut encore être amélioré, premier jet.
Merci pour ton aide.


PS: le fond orangé n'est la que pour voir les divs plus facilement.
Je pense que tout sera uni.
Modifié par Muad'Dib (26 Feb 2010 - 19:14)

Merci de me dire ce que tu en penses.