[résolu] 3 colonnes avec 2 qui prennent toute la hauteur

Bonjour,

Je souhaite faire un design avec un header, 3 colonnes et un footer, le tout centré au milieu de ma page.

J'ai trouvé une structure de thème 3 colonnes qui me convient bien : http://www.neuroticweb.com/recursos/3-columns-layout/

Seulement je voudrais utiliser les 2 colonnes externes pour mettre une image, afin de faire des "colonnes" (image). Je ne sais pas s'il existe un autre moyen que celui d'utiliser un thème en 3 colonnes ?

Si c'est bien un "3 colonnes" qu'il faut utiliser pour faire ceci j'ai un problème : lorsque j'insère une image en css "background" et bien l'image ne prend évidemment pas toute la hauteur de la colonne centrale mais font une dizaine de pixels seulement.

Pourriez-vous m'aider s'il vous plait ?
Modifié par thierry92 (20 Sep 2007 - 23:05)

Bonjour,
pourrais tu donner un liens pour qu'on puisse visualiser ton problème stp, merci?

Bonjour,

Pour commencer, je te conseille une petite lecture peut-être plus détaillée sur ce type de mise en page: Un design fluide avec trois «colonnes», grâce au positionnement flottant.

Ensuite, si tu veux utiliser la technique des colonnes factices (image de fond répétée en hauteur sur le conteneur des trois colonnes, pour simuler des colonnes de même hauteur), il faudra veiller à éviter le dépassement des flottants. Voir ici:
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Bonne continuation.

Florent V. a écrit :

Ensuite, si tu veux utiliser la technique des colonnes factices (image de fond répétée en hauteur sur le conteneur des trois colonnes, pour simuler des colonnes de même hauteur)

Je crois que c'est ce qu'il faut que je fasse, en tout cas c'est la seule solution que laisse entrevoir le tutorial pour faire 3 colonnes de même hauteur non :- ?.
Seulement si je mets une image en background des 3 colonnes je ne pourrais plus mettre d'image en background de mes 2 colonnes externes comme je le souhaitais, n'est-ce pas :- ?

A tout hasard existe-t-il une structure de site "pré-faite" qui permettent d'avoir tout simplement 2 images sur les côtés d'une zone :-?

Houla, j'avais pas vu: dans tes deux «colonnes» latérales, tu ne veux mettre qu'une image? Bref, de la déco? Ça facilite grandement les choses.

Mais à ce stade je crois que le plus simple serait que tu nous montres ce que tu veux faire, et on pourra te conseiller convenablement. Si on joue trop aux devinettes en se basant sur des descriptions incomplètes, on risque de perdre du temps pour rien.

Vi je veux simplement faire de la "décoration" dans les 2 colonnes latérales.



Voici un petit schéma (très moche j'en conviens ;-/) de ce que je veux faire. La structure est en noire et en bleu j'ai représenté la zone où je veux mettre "de l'image". La structure peut tout à fait être différente si le résultat est le même, c'est à dire une zone centrale pour mettre du contenu et latéralement à cette zone centrale des images. Par contre la zone du bas doit pouvoir contenir une ptite ligne de texte (pour le haut je peux faire une image pour le titre ça n'est pas bien important).

Dans mon idée les colonnes latérales s'allongent indéfiniment quelle que soit la hauteur de la zone centrale. La zone du haut et celle du bas servent ainsi à "chapeauter" et à "fonder" ces 2 "colonnes-images" latérales.

Je ne sais pas si c'est très clair maintenant :-?

En gros il te faut ce genre de structure:

[b]HTML:[/b]
<div id="global">
	<div id="entete">Ici ton en-tête/titre/bandeau</div>
	<div id="centre">Ici ton contenu central</div>
	<div id="pied">Ici du texte si besoin</div>
</div><!-- #global -->

[b]CSS:[/b]
div#global {
	width: 750px; /* Largeur choisie au pif... */
	margin: 0 auto; /* On centre horizontalement, tant qu'à faire */
	background: white url(images/fond-bords-colonnes.png) repeat-y center top;
		/* Hop, voilà l'image de fond répétée en hauteur qui dessine les «colonnes» décoratives des côtés */
}
div#entete {
	height: 100px;
}
div#centre {
	margin: 0 100px; /* Les marges laissent de l'espace sur les côtés pour l'affichage de l'image de fond des «colonnes» */
	padding: 1px 0; /* Un peu de padding en haut et en bas pour éviter la fusion des marges avec les éléments enfants */
	background: url(images/motif-centre.jpg) no-repeat center top;
}
div#pied {
	height: 100px;
	padding: 1px 0; /* pareil, on évite la fusion des marges */
}

Quelque chose du genre.

Comme l'image est pour le moins imprécise (pour déceler d'éventuelles difficultés d'intégration, il faut avoir le design lui-même, plutôt qu'un simple schéma...), j'ai un peu brodé selon l'inspiration du moment.

Avec le code que tu m'as donné j'avais un tout petit problème : les colonnes montaient dans l'entête et descendait dans le footer. J'ai donc très légèrement modifié en :

div#global {
	width: 750px; /* Largeur choisie au pif... */
	margin: 0 auto; /* On centre horizontalement, tant qu'à faire */
}

div#entete {
	height: 100px;
	background: white url(header.jpg);
}

div#centre {
	margin: 0 0px; /* Les marges laissent de l'espace sur les côtés pour l'affichage de l'image de fond des «colonnes» */
	padding: 1px 100px; /* Un peu de padding en haut et en bas pour éviter la fusion des marges avec les éléments enfants */
	background: white url(fond.jpg) repeat-y center top;
}

div#pied {
	height: 100px;
	padding: 1px 0; /* pareil, on évite la fusion des marges */
}

Et je crois que ça sera parfait pour ce que je veux faire . Merci beaucoup FLorent V. !!

thierry92 a écrit :
Avec le code que tu m'as donné j'avais un tout petit problème : les colonnes montaient dans l'entête et descendait dans le footer.

Ah oui, j'avais oublié le background: white pour l'en-tête et le pied de page.
Mais avec du padding latéral sur div#centre c'est tout à fait jouable également.
Modifié par Florent V. (20 Sep 2007 - 23:23)