Problèmes de mise en page proportionnalité/ largeur mini

Bonjour,
Nouveau sur ce forum, je suis comme beaucoup de gens confronté à des problèmes de mise en page avec CSS. J'ai acheté le bouquin CSS2 de R. Goetter que je vais potasser mais ce n'est vraiment pas simple !
MON DOUBLE-PROBLEME :
1) J'ai créé ma mise en page sous Dreamweaver 8 à partir d'un modèle. J'ai un conteneur, avec à gauche un bandeau de menu, plus des images de 200pix de large, et à droite le "corps" (textes, images..) qui est en proportionnel à 75%.
Le problème c'est que quand je réduis la fenêtre, le corps et le bandeau gauche se réduisent et qu'à un moment avec les images, le bandeau est trop petit et il vient se mettre sous le corps. J'ai essayé avec min-width et autres trucs mais je ne m'en suis pas sorti.
2) par ailleurs, je voudrais que quand je réduis la fenêtre à moins de 800 pixels de large, la réduction proportionnelle s'arrête, quitte à avoir une partie à droite du corps caché et accessible uniquement par le scroll horizontal.
Quelqu'un pourrait'il m'aider ? merci.

Le problème que tu as, c'est que tu mélanges des unités fixes (en pixels) et des unités relatives à la largeur de la fenêtre du navigateur (en pourcentages). Si la fenêtre est trop petite, ça se rentre dedans, et si elle est trop grande on a un espacement parfois disgracieux.

Deux solutions :
- soit on passe tout en pourcentages (23% pour la colonne de gauche, 75% pour la partie de droite... par exemple) ;
- soit on utilise uniquement les pixels, et on cherchera alors à obtenir un bloc de droite ayant pour largeur 100% - 200px, en gros.

Je détaille la deuxième solution :

[b]HTML :[/b]
<div id="col-menu">...</div>
<div id="col-contenu">...</div>

[b]CSS :[/b]
div#col-menu {
	width: 200px;
	float: left;
}
div#col-contenu {
	margin-left: 210px;
}

Et voilà, on a un bloc div#col-contenu qui prendra 100% de la largeur disponible dans le conteneur (comportement normal des éléments de type bloc), moins la marge de gauche de 210px (200px + 10px d'espacement).

À noter que l'on peut aussi réaliser ce genre de chose -- sauf contre-indication comme la présence d'un menu long et d'un pied de page -- en utilisant le positionnement absolu pour le menu.

Pour Florent :
J'ai bien essayé d'utiliser les infos que vous m'avez transmises mais ça ne marche pas vraiment comme il faut. La partie droite c'est à peu près OK, mais le bandeau avec les menus se retrouve en bas de page sous la partie droite.
Voici mon code CSS :

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#masthead{
	margin: 0;
	padding: 10px 0px;
	border-bottom: 1px solid #cccccc;
	width: 100%;
}
#navBar{
/*	margin: 0 79% 0 0; LIGNE ENLEVEE */
	padding: 0px;
float: left;  /* LIGNE AJOUTEE */
width : 200px; /* LIGNE AJOUTEE */
	background-color: #eeeeee;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#content{
  float:right;
	width: 75%;
margin-left: 220px; /* LIGNE AJOUTEE */
/* margin: 0;  LIGNE ENLEVEE POUR PRENDRE LA MARGE GAUCHE */
	padding: 0 3% 0 0;
}
/***********************************************/

Modifié par zepo (23 Jan 2007 - 07:27)

Hello et bienvenue,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Comme dit dans mon précédent message, div#content ne doit pas être flottant, et ne doit pas avoir de largeur fixe.

Ce qui nous donnera plutôt :

#masthead {
	margin: 0;
	padding: 10px 0px;
	border-bottom: 1px solid #cccccc;
	width: 100%; /* Pour info, ceci devrait être inutile */
}
#navBar {
	padding: 0;
	float: left;
	width : 200px;
	background-color: #eeeeee;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
#content {
	margin-left: 220px;
	padding: 0 3% 0 0;
}

Rappel : div#navBar devra se trouver avant div#content dans le code HTML.