CSS & positionnement des div dans la page ... Merci bcp et.. [Réso

Merci Raphael pour tes remarques et 1000excuses pour le l'édition du code , j'avais bien vu et cherché à utiliser la balise mais je l'ai pas fermée; j'espères que c'est bon cette fois. Merci ! et j'aun peu (...) afinné le titre de mon msg...

Bonjour,

Depuis quelques temps je me remets à la création de sites WEB et j'ai lu avec grand profit les tutoriaux, conseils etc sur ce site pour lequel j'adresse mes félicitations et remerciements les plus reconnaissants à R. Goetter !
Donc... Je suis en train de travailler sur les CSS et j'avoue ne pas encor être tout à fait au point :
J'ai notament un problème avec une serie de "boites" qui ne se comportent pas comme je souhaiterais : un(e) premier(e) (...?) div "conteneur" doit contenir tout les autres élémenst de ma page et notament 2 menus, droite et gauche et la partie du contenu véritable de la page, la / le div "centre" à l'interieur duquel j'ai placé un autre div contenant des vignettes de photos...

Las ...!
les 4 élements menus gauche et droite, la zone de contenu et les div des vignettes se placent bien, remativement les unes par rapport aux autres, mais la div 'supérieure', le conteneur de toute les autres, 'ne contient' et se finit bien avant les autres qu'elle est censée contenir, comme l'illustre cette page exemple :

http://essais.jmbdev.com/

j'ai mis le CSS en entête de mon fichier index.html, mais en voici une copie :

<style>
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	
	background-image: url(images/cactxtr.gif);
	background-repeat: repeat;
}

#conteneur {
	width:750px;
	margin:0;
	background-color:#eee;
	padding:10px;
	background-position: center;
}

#gauche {
	float:left;
	width: 180px;
	padding:10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom:10px;
	background-color: #CCCCCC;
	border: 2px outset #3399FF;
}
.centre {
	
	float:left;
	background-color:#9999CC;
	border:1px solid black;
	padding: 10px;
	margin-right:10px;
}
#droite {
	float:right;
	width: 90px;
	padding:10px;
	margin-bottom:10px;
	background-color: #CCCCCC;
	border: 2px outset #3399FF;
}
	
.thumbnail
{
	float: left;
	width: 150px;
	border: 1px solid #999;
	margin: 0 20px 15px 0;
	padding: 5px;
	background-color:#FFCCFF
	

}
div.thumbnail img { border: 1px solid #000; }

#pied {
clear:both;
height: 30px;
background-color: #99CC99;
}
.clearboth { clear: both; }

</style>

Je ne vois pas où çà cloche !
Merci beaucoup pour votre aide !
Cdt,
Jean Marc
Modifié par JMB (31 Mar 2006 - 12:35)

Pour commencer, une remarque :
1/ Si tu comptes réutiliser ta feuille de style pour d'autres pages, mieux vaut la mettre dans un fichier externe et l'appeler avec une balise link dans ton head.
2/ Si tu veux la garder en interne, saches que la syntaxe exacte de la balise style est <style type="text/css">...</style>. Je ne me rappelle plus si cela pose des problèmes à certains navigateurs, ou pas. Mais mieux vaut le préciser de toute manière.

Au fait, le titre « CSS et positionnement : bloc conteneur qui ne contient pas tout son contenu » serait plus adapté.
Tant que j'y suis, avec une recherche utilisant les mots clefs du titre ci-dessus, tu aurais sans doute trouvé ton bonheur.

Le problème
C'est dû au comportement standard de tes blocs flottant.
Plus de précisions ici :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

(et là franchement, si tu n'y trouves pas toutes les réponses, je me tire une balle )

Bon courage pour la suite

merci mpop
1/ pour la feuille de style externe, c'est ce que je fait tjrs, j'avais juste intégré mon code CSS dan la page pour être plus 'pratique' et directement lisible...Du coup mon copié/ collé dans la balise style est erronné ...

2/ Pour le titre , ta remarque est également juste, évidement, je débute sur ce forum et je cherche un peu 'mes mots' (...)

3/ merci pour le lien, je vais potasser, ça m'a l'air super clair et didactique.

j'espères ne pas avoir à vous reposer les mêmes questions...
Cdt,
JM

J'ai consulté tes liens mpop, super! et la lumière fut !
pour info, j'ai donc modifié le code comme suit et mon conteneur 'contient' enfin ! Testé sur opéra 8.5..., IE6, et FF.

#conteneur {
	[#orange]/*width:750px; code d'origine NON !*/

	             /*overflow:auto; option possible...*/

	             float:left; /*autre option, adoptée...*/[/#]
	margin:0;
	background-color:#eee;
	padding:10px;
	background-position: center;
}

Modifié par JMB (31 Mar 2006 - 13:43)