[résolu]Le bloc de gauche suit celui de droite

Bonjour à tous, je suis nouvelle et ravie d'aborder le CSS via votre site qui m'a l'air vraiment bien fait et convivial.
Je débute dans le CSS et je bute sur un point, pourriez vous m'orienter ? Le voici :
J'ai utilisé votre tutoriel : Réalisation d'un design complet (XHTML / CSS) en 5 étapes


J'ai conservé à peu près la mise en page de l'étape 5 sauf que mon menu n'est pas horizontal mais vertical dans un bloc à gauche du texte. Pour cela j'ai suivi vos conseils dans votre trousse à outils à la rubrique
Modèles de mise en page en CSS à partir de l'exemple "3- Largeur fixe (750px), header / menu gauche / contenu / footer"
Voici un aperçu de ce que ça donne :


Jusqu'ici tout va bien. Maintenant j'aimerai que mon menu se trouve hors du cadre blanc, à sa gauche comme j'ai essayé de le faire ici :


Pour l'instant le cadre blanc change de position en fonction de la taille de la fenêtre (si j'agrandi la fenêtre de l'explorateur, le cadre blanc reste au milieu de celle-ci) et j'aimerai que cela reste comme ca. Seulement je ne parvient pas à faire en sorte que le menu de gauche reste collé à ce cadre blanc. Est il possible de faire en sorte que ce menu de gauche y reste "agrippé" quand on étire la fenêtre (car pour l'instant il reste fixé à gauche)

Deuxième soucis, quand je rapetisse la taille de la fenêtre, le menu chevauche le cadre blanc et son texte. Je ne sais pas comment changer cela

Voilà, j'aimerai que vous m'aiguilliez sur la marche à suivre.
- Tout d'abord, au niveau de l'html, mon "cadre blanc" est un bloc div "conteneur". Je dois bien sortir le menu de gauche (qui est un div aussi) de "conteneur" ? ou dois-je faire un autre bloc qui contient les 2 (afin d'esquiver le probleme de chevauchement?) si je fais ça, mon bloc conteneur reste-t-il au centre?
- ou bien dois-je faire des blocs séparés et les positionner l'un à coté de l'autre? mais l'un peut-il "suivre" le bloc conteneur, (le cadre blanc) qui est en "margin: 0 auto"

Voilà j'espère que vous pourrez m'aider et que mon message n'est pas trop embrouillé.
J'ai déjç beaucoup cherché dans le forum et pour mon cas c'est difficile de trouver les bons mots clés. Si par mégarde la réponse m'avait échapée pourriez vous m'indiquer le message svp?
je vous remercie beaucoup
Modifié par shawarma (18 May 2008 - 08:41)

Bonjour et bienvenue,

shawarma a écrit :
- Tout d'abord, au niveau de l'html, mon "cadre blanc" est un bloc div "conteneur". Je dois bien sortir le menu de gauche (qui est un div aussi) de "conteneur" ? ou dois-je faire un autre bloc qui contient les 2 (afin d'esquiver le probleme de chevauchement?) si je fais ça, mon bloc conteneur reste-t-il au centre?

Avec "margin: 0 auto;" on peut centrer un conteneur. Tout ce qui est à centrer doit donC être dans ce conteneur. Dans ce conteneur, il peut y avoir plusieurs sous-conteneurs (ou pour prendre les choses dans l'autre sens, on peut placer plusieurs blocs dans un conteneur et centrer ce nouveau conteneur plutôt qu'un des blocs comme cela était fait précédemment).

shawarma a écrit :
- ou bien dois-je faire des blocs séparés et les positionner l'un à coté de l'autre? mais l'un peut-il "suivre" le bloc conteneur, (le cadre blanc) qui est en "margin: 0 auto"

Les positionner l'un à côté de l'autre oui, et centrer leur conteneur (quitte à créer ce conteneur)

Pour positionner le menu à gauche du contenu et du titre, pas besoin de le "sortir" ou autre chose compliquée: il faut plutôt imaginer mettre une marge à gauche du titre qui fera la largeur du menu (ou un logo pour occuper l'espace) et positionner les 2 colonnes menu et contenu l'une à côté de l'autre. Visuellement le résultat est le même.

On peut aussi reprendre un des gabarits de mise en page présent dans les Tutoriels, si la modification est trop complexe. On reprend toujours le contenu de chacun des blocs mais on a pas à s'embêter avec un positionnement fonctionnant sur tous les navigateurs (quelqu'un l'a déjà fait avant )

edit: ortho
Modifié par Felipe (17 May 2008 - 11:32)

Bonjour Felipe,

merci beaucoup pour ta réponse!
j'ai passé un bon moment pour suivre tes conseils (comme je suis débutante ça me prend du temps )
ta solution marche très bien, voilà ce que j'ai fait :
- j'ai créé comme je m'en doutait un gros bloc qui contient les blocs actuels, je l'ai appelé #tout
- j'ai placé les blocs à l'intérieur (#conteneur et #menuvertical) en mettant une mage en haut comme tu me l'as conseillé pour le menu tout marche très bien, seulement j'ai un soucis qui me semble illogique, je n'arrive pas à centrer le bloc #tout et je ne comprend pas pourquoi.

voici le détail du code html (j'ai complété par faux texte) :

<body>
	<div.id="tout">
		<div id="menuvertical"> <br>

			<h3>Expérience professionelle</h3>

			<ul class "menugauche">

			<li><a href="cvs.html" class="lienmenuvertical">C.V.(s)</a></li>
			<li><a href="graph.html" class="lienmenuvertical">Graphisme</a></li>
			<li><a href="divers.html" class="lienmenuvertical">Divers</a></li>
			</ul>

			<h3>Compétences</h3>

			<ul>
			  <li><a href="boulots.html" class="lienmenuvertical">Projets d'étude</a></li>
			<li><a href="infos.html" class="lienmenuvertical">Compétences<br>informatiques</a></li>
			<li><a href="langues" class="lienmenuvertical">Langues</a></li>
			<li><a href="loisirs" class="lienmenuvertical">Loisirs</a></li>
			<li><a href="etudes.html" class="lienmenuvertical">Formation</a></li>
			</ul>

			<h3>Réalisations</h3>

			<ul>
			<li><a href="index2.html" class="lienmenuvertical">Page dédiée</a></li>
			</ul>

		</div>
		
		<div id="conteneur">
		
			<div id="header"></div>
			
			<div id="centre">
				<h2>Bienvenue</h2>

				<p class="cont"> Bonjour et bienvenue sblablabla<br>
				<br>
				Vous pouvez trouver blabla<b>blabla</b> blabla
				<br>
				<br>blablabla : toto@zozo.fr<br>
				</p>

				<h2>Navigation</h2>

				<p class="cont"> Je vous invite blablabla.
				<br>
				<br>Les travaux blabla <b>blabla</b> blablablabla
				<br>
				<br> blablablablablba<br>
				</p>

				<h2>A propos de ce site</h2>

				<p class="cont"> c'est fait en css qui tue mais par une detubante blablablabla <br>
				</p>
				
			</div>

			<div id="piedepage">coordonnees adresse blablabla</div>
		
		</div>


	</div>
</body>

et le détail du début du css :

body {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;margin: 10px 0;
padding: 0; 

text-align: center ;

color : #999999; 

background-color : #626262; 
background: url(images/bg.gif)repeat;
background-attachment:fixed;

border-style:hidden; }


#tout {
width: 600px ;
margin: 0 auto ;
text-align: left ;
}

#menuvertical {
padding-top: 230px;
padding-left: 15px;
float: left;
text-align: center;
left:0;
width: 150px;
}

#conteneur
{
margin-left: 160px;
margin-right: 20px;
width: 600px ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}



#header {

height: 10px;
background : url(images/essaimenu.jpg) no-repeat left top;

width:600px;

height:300px;

}


#centre {
background-color:#white;
margin-left: 20px;
margin-right: 20px;
}

je sèche complètement, tout reste blocké à gauche, comme si mon bloc principal #tout ne voulait pas se mettre au centre

s'il vous plait?
personne pour m'aider? je sais que ma question est sûrement bête mais j'ai beau tester lignes par lignes je ne vois pas d'où vient le problème. J'imagine qu'une des lignes suivantes prend le pas sur la première mais je ne la trouve pas

c'est bon j'ai enfin trouvé ma faute : dans le code html j'ai mis div.id = "tout au lieu de div id = "tout".
Il y avait un "." en trop et dans mon logiciel "smultron" les espaces sont matérialisés par des points donc je n'y ai pas pris garde. Pareil pour le code couleur je n'ai pas vu

en tout cas merci pour tout!!!
à bientot!