Mise en forme d'une page

Bonjour, je debute avec les css et j'aimerais mettre en place differentes zones sur la page, le haut, le menu et le texte.

Je n'arrive pas a aligner 2 boites sur la meme ligne horizontale. Je voudrais aussi que le texte et les boites ne ce deforme pas lorsque la largeur de la page est faible. J'ai deja regardé des exemples de mise en forme et je constate qu'il y a des deformations.

Voici le code que j'ai pour le moment:

<style type="text/css">
#conteneur
	{
	width:750px;
	margin:0 auto ;
	background-color:#CCCCFF;
	border: solid 2px #990aa0;
	}

#haut
	{
	border: solid 2px #9a0aa0;
	width:auto;
	margin:10 10 5 10;
	background-color:#ff1100;
	}

#contenu
	{
	width:500px;
	border: solid 2px #9a0aa0;
	margin:10 10 5 10;
	background-color:#aaCCFF;
	}

#menu 
	{
	
	border: solid 2px #9a0aa0;
	width:200px;
	margin:5 10 5 10;
	background-color:#CCeC1F;
	}

</style>



<div id="conteneur">
	<div id="haut">
	haut <br>haut
	</div>


	<div id="menu">
	menu1 <p>menu2<p>menu3
	</div>


	<div id="contenu">
	contenu - contenu - contenu - contenu 
	</div>

</div>

Il semblerait que tu aies fait quelques ommissions, comme préciser l'unité pour tes marges, je ne suis pas sur qu'il y ait une unité par défaut.
En ce qui concerne ton xHTML, si tu veux respecter les standards xhtml, et tu ne dois donc pas mettre du texte sans le mettre dans un "block", de plus tu utilises le block <p></p> mais tu ne le fermes pas correctement.
Commence par corrgier ses erreurs, et ça devrait pas mal s'arranger

Bonjour, pour aligner plusieurs boites sur la même horizontale, les mettre les unes à côté des autres en gros, il faut se srevir de la propriété "float".

je n'arrive pas a aligner en utilisant float: right ; display: block ; Mais j'ai ajoute diplay:inline pour menu et contenu et maintenant c'est aligne mais le premier cadre ne s'agrandit pas tout seul lorsque j'ajoute du texte? Pouvez vous me detailler la façon que vous me proposiez au debut, ou mettre float: right ; display: block ; ?

<style type="text/css">
#conteneur
	{
	width:750px;
	margin:0 auto;
	background-color:#CCCCFF;
	border: solid 2px #990aa0;

	}

#haut
	{
	border: solid 2px #9a0aa0;
	width:auto;
	margin:10px 10px 5px 10px;
	background-color:#ff1100;
	}

#contenu
	{
	width:500px;
	border: solid 2px #9a0aa0;
	margin:10px 10px 5px 10px;
	background-color:#aaCCFF;
	display: inline;
	}

#menu 
	{
	
	border: solid 2px #9a0aa0;
	width:200px;
	margin:5px 10px 5px 10px;
	background-color:#CCeC1F;
	display: inline;
	}

#bas
	{
	border: solid 2px #9a0aa0;
	width:auto;
	margin:10px 10px 5px 10px;
	background-color:#ff1100;
	}




</style>



<div id="conteneur">
	<div id="haut">
	haut haut
	</div>


	<div id="menu">
	menu menu menu
	</div>


	<div id="contenu">
	contenu - contenu 
	</div>

	<div id="bas">
	bas bas
	</div>

</div>

#contenu {
width:500px;
border: solid 2px #9a0aa0;
margin:10px 10px 5px 10px;
background-color:#aaCCFF;
}

#menu {
float: left;                 /* Ou float: right; si tu veux qu'il soit à droite */
border: solid 2px #9a0aa0;
width:200px;
margin:5px 10px 5px 10px;
background-color:#CCeC1F;
}

Modifié par Jedi (20 Jun 2006 - 13:20)

Je vins de tester et lorsque je met du texte dans le menu et le contenu tout ce deforme ça ce chevauche , j'utilise mozilla firfox.

comment proceder pour forcer le cadre a s'agrandir en hauteur en fonction du texte et au contraire bloquer l'agransissement en largeur.

Sur mon exemple le cadre du bas ce met du coup aligne sur le bas du menu, comment faire pour avoir un retour a la ligne?

<style type="text/css">
#conteneur
	{
	width:750px;
	margin:0 auto;
	background-color:#CCCCFF;
	border: solid 2px #990aa0;

	}

#haut
	{
	border: solid 2px #9a0aa0;
	width:auto;
	margin:10px 10px 5px 10px;
	background-color:#ff1100;
	}

#contenu {
	width:600px;
	border: solid 2px #9a0aa0;
	margin:10px 10px 5px 10px;
	background-color:#aaCCFF;
	}



#menu {
	float: left;                 /* Ou float: right; si tu veux qu'il soit à droite */
	border: solid 2px #9a0aa0;
	width:200px;
	margin:5px 10px 5px 10px;
	background-color:#CCeC1F;
	}

#bas
	{
	float: left; 
	border: solid 2px #9a0aa0;
	width:auto;
	margin:10px 10px 5px 10px;
	background-color:#ff1100;
	}




</style>



<div id="conteneur">
	<div id="haut">
	haut haut
	</div>


	<div id="menu">
	menu menu menu menu menu menu menu menu menu menu 
	</div>


	<div id="contenu">
	contenu - contenu - contenu - contenu -contenu - contenu -contenu - contenu 
	</div>

	<div id="bas">
	bas bas
	</div>

</div>

Il faut déjà un conteneur plus grand que ce qu'il contient : Ton conteneur fait 750px, le menu et le contenu font 800px

Ensuite si tu veux que ton pied soit en bas et soit bien placé, ne le mets pas en flottant et rajoute :

clear: both;

Modifié par Jedi (20 Jun 2006 - 14:04)

C'est parfaitement le résultat que je voulais obtenir, mais j'ai pas tout compris il a fallut que j'enleve float: left; comme explique pour que le cadre du bas soit contenu par le cadre general. Pouvez vous me detailler le raisonement a avoir ?j'aimerais pouvoir modifier par moi meme la page plus tard.

Est ce qu'il faut utiliser les float uniquement pour positionner sur l'horizontale du texte ou une boite? Quel est l'effet de clear: both sur mon cadre?

En fait, le raisonnement est tout simple : Un flottant, flotte. A partir de là, il s'adapte à son environnement pour se mettre dans la place qu'il trouvera la plus adapté dans le flux de ta page.

Le clear quant à lui, a pour vocation de dire que ton bloc ne doit pas se mettre dans le même "alignement" (si je puis dire) qu'un flottant (en l'occurence ton menu), ce qui a pour but de le faire se mettre après.

Je ne sais pas si je suis très clair
Modifié par Jedi (21 Jun 2006 - 10:00)