Besoins conseils pour le gabarit de mon site

Bonjour à tous,

Voila j'avais créé il y a quelques années un site sans stylesheet, maintenant je voudrai le remettre un peu à jour avec une stylesheet.
Mais j'ai du mal à arriver au même résultat.

Mon site d'origine est : http://www.les-etoiles-du-destin.be/0903.php
Ma nouvelle version est : http://www.voyance-natacha.fr/gabarit.php (je me suis basé sur http://www.alsacreations.com/static/gabarits/modele10.html)

Je voudrai que les hauteurs de MENU - PRINCIPAL - SECONDAIRE soient de même hauteur. Cette hauteur doit être variable selon la longueur du contenu de l'un ou l'autre

Le code de ma page est :

<div id="conteneur">
	<div id="header"><div>
	<div id="centre">
		<div id="menu">...</div>
		<div id="principal">...</div>
		<div id="secondaire">...</div>
	</div>
	<div id="pied">...</div>
</div>

Le code de ma styles.css est :

body {
	color: #F0E39E;
	background: #9836F2;
	padding:0;
	margin:0;
}
#conteneur {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* En-tête */
#header {
	padding: 20px 0 5px 0;
}

/* CORPS */
#centre {
	background: #9836F2;
	width: 100%;
	overflow: hidden;
}

/* Menu */
#menu {
	background-image:url(image/fondetoile3.gif);
	background: #000;
	float: left;
	width: 190px;
}

/* Contenu principal */
#principal {
	float: left;
	width: 400px;
	padding: 10px 20px;
	color: #181A12;
	background: #fff;
	margin:0 5px 0 5px;
}

/* Contenu gauche */
#secondaire {
	top:0px
	background-image:url(image/fondetoile3.gif);
	background: #000;
	margin-left: 640px;
	margin-top:0px;
}

/* Pied de page */
#pied {
	background: #000;
	font-size: .85em;
}

/* Mention de copyright */
#copyright {
	margin: 8px 0 0 0;
	font-size: 1em;
	text-align: left;
}

Un GRAND GRAND merci d’avance pour vos conseils
Modifié par myauxc (14 Feb 2009 - 12:54)

Bonjour,

Option 1: utiliser la technique des colonnes factices (faire une recherche sur ce concept).
Option 2: utiliser display: table-cell (compatible tous navigateurs modernes sauf IE6-7).
Option 3: utiliser un tableau à trois cellules pour ces trois colonnes (et exploiter CSS pour leur donner des dimensions, et pour tout le reste).

Bonjour,

Merci pour ta réponse et tes 3 options

J'ai bien noté ton OPTION 1 que j'ai mis en place et tester mais l'inconvénient est évidement si l'utilisateur change la taille de la police pour un meilleur confort de lecture (public peut-être âge), cela donne des effets indésirables sur la mise en page du fait que les images elles, evidemment, ne s'adapte pas.

L'option 2 étant pas compatible sur tous les navigateur je ne la retiens pas

ET donc je reste sur mes tableaux déjà existant sur ma 1ere version ton OPTION 3 qui me donne la structure voulu. J'utilise quand même une styles.css pour le reste.

Merci de ton avis.
++

myauxc a écrit :
J'ai bien noté ton OPTION 1 que j'ai mis en place et tester mais l'inconvénient est évidement si l'utilisateur change la taille de la police pour un meilleur confort de lecture (public peut-être âge), cela donne des effets indésirables sur la mise en page du fait que les images elles, evidemment, ne s'adapte pas.

Euh... non. Je crois que tu as mal utilisé la technique des colonnes factices (voir pas utilisée du tout...). On peut bien entendu avoir un bloc extensible en hauteur et une image de fond qui se répète en hauteur.