[Résolu] Petit probleme d'alignement

Bonjour à tous.

Je suis débutant en site web et j'ai un probleme d'alignement.

Je m'explique.
J'ai fait un site en plusieurs partie. En haut j'ai une banniere, ensuite j'ai un menu sur la gauche (en flottant), j'ai le corps au centre et le footer en bas.

J'ai juste un petit probleme car le corps ne s'aligne pas bien avec le header et le footer sur la droite !!

Voici mon code css:

body {
	background-image: url("../Images/Degrade.jpg");
	background-attachment: fixed;
	background-color: #05a817;
	background-repeat: repeat-x;
	width: 100%;
	height: 100%;
}

/* Whole */
#Whole
{
	background-color: #eecaa0;
	padding: 10px;
	width: 780px;
	height: 100%;
	margin: auto; /* To center in the page */
	margin-top: 0px;
}

/* Header */
#header
{
   width: 100%;
   height: 100px;
   background-image: url("../Images/Banner.jpg");
   background-repeat: no-repeat;
   background-position: center;
   margin-top: 10px;
   margin-bottom: 10px;
}

/* Menu */
#menu
{
   float: left;
   width: 120px;
}

.element_menu
{
   background-color: #626262;
   border: 2px solid black;
   margin-bottom: 20px;
}

/* Corps*/
#corps
{
	/*width: 100%;*/
	margin-left: 140px;
	margin-bottom: 20px;
	padding: 10px; 
	color: #B3B3B3;
	background-color: #626262;   
	border: 2px solid black;
}

/* Footer */
#footer
{
	width: 100%;
	padding: 0px;
	color: #B3B3B3;
	background-color: #626262;
	border: 2px solid black;
}

En gros, mon body fait 100% de la page.
Ensuite j'ai mi un div "whole" qui limite le tout a 780 de large.
Ensuite j'ai mi que le header et le footer utilise 100% de la largeur.
Jusque la tout va bien.

Mais quand je fais pareil pour le corps, il va trop loin !! Ca doit etre un probleme avec le menu mais je comprend pas. (Et quand je met pas width=100%, il n'est pas tout a fait aligné à quelques pixels pres !!)

Ce que je ne comprend pas c'est que mes div "header", "corps", "menu" et "footer" sont tous imbriqué dans le div "whole", donc quand je dis au corps de faire 100%, il devrait pas sortir de "whole" ??

Je vous met une petite photo pour que vous compreniez mieux:
Sur cette photo, le div "whole" est en rose ou pastel (faites pas attention aux couleurs j'en suis pas encore la lol)



Est-ce que vous pourriez me dire comment je peux faire ?
J'ai essayé un overflow mais ca a rien changé ?

Au passage, si vous voulez critiquer mon code css n'hésitez pas

Merci d'avance
Modifié par nonolerobot (26 Jan 2008 - 17:58)

nonolerobot a écrit :

En gros, mon body fait 100% de la page.
Ensuite j'ai mi un div "whole" qui limite le tout a 780 de large.
Ensuite j'ai mi que le header et le footer utilise 100% de la largeur.

Fournir le code HTML eût été plus simple que de passer par sa description.

Tu utilises la propriété width d'une mauvaise façon. Un élément de type block occupera par défaut la totalité de la largeur de son parent. Gardons ce comportement par défaut rudement pratique pour concevoir notre gabarit:

[#black][b]HTML[/b][/#]

<div id="Whole">
	<div id="header"></div>
	<div id="menu"></div>	
	<div id="corps"></div>	
	<div id="footer"></div>
</div>


[#black][b]CSS[/b][/#]

#Whole {width:780px; margin:0 auto;}
#menu {float:left; width:120px;}		
#corps {margin-left:140px;}

Salut !!

Merci beaucoup pour ta réponse.

J'ai enlevé le width=100% partout et c'est bin aligné !!

Mais je ne compends pas pourquoi quand je le met ca ne marche pas ??
Ok, par défaut il occupe toute la largeur mais si je le force à le faire il se trompe ?? Enfin pour moi ca ne devrait rien changer si ??

Quelqu'un peut-il m'expliquer ?

De plus, quand je laisse le width a 100% pour le footer, je vois encore un petit décalage:



Comment cela se fait-il ?

Le comportement par défaut d'un élément de type block n'est pas équivalent à figer une largeur de 100%. Dans le flux, un élément de type bock occupera le maximum d'espace qu'il peut utiliser. À l'inverse, un width:100% forcera l'objet à prendre toute la largeur de son parent.
Dans ce dernier cas, tu obtiendrais donc ta division #corps occupant 100% de la largeur de son conteneur #Whole (c'est à dire 780px) + la marge de gauche de 140px.

Ok !!

Merci beaucoup pour ton aide !!

nonolerobot a écrit :
Ok !!

Merci beaucoup pour ton aide !!

Tu considères que ce sujet est [Résolu] ?

Oui, justement je cherchais comment fallait faire lol