Besoin de conseils...

Bonjour à vous !

Je fais actuellement un site qui me pose énormément de problèmes car j'ai beaucoup de contraintes dû au design...

En fait j'ai un header qui contient un flash.

Le design du site m'oblige à mettre mon contenu en superposition du header.

Cette div contenu contient trois colonnes.
Celle de gauche contient une image en Background, les deux autres divs ont la même couleur de fond...
Mon problème viens du fait que lorsqu'il y a beaucoup de contenu dans la div du milieu, j'aimerais que celle de gauche adapte sa hauteur à celle du milieu.
Je ne peux pas utiliser de couleur de fond (car superposition du header) pour cette div gauche mais une grande image png en background(1500 px de hauteur) pour garder la transparence sur les parties qui sont superposées...
J'ai cherché plusieurs solutions dont le display : table-cell, mais je n'arrive à rien...

Voici le site en question : http://www.domainebenedetti.fr/

Merci pour votre aide !

J.

Bonjour,

Il doit être possible de mettre l'image de fond représentant les colonnes (celle qui doit aller jusqu'en bas) dans le conteneur général de ton site (qui englobe le header et le contenu.

Puis de mettre l'image de liaison header-conteneur au niveau du conteneur.




ps. : pourrais-tu éditer ton site et lui donner un titre plus explicite ?
Modifié par Laurie-Anne (20 Apr 2012 - 08:31)

Merci pour cette réponse, je vais essayer d'aller dans ce sens pour trouver une solution.

++

Tu peux regarder du côté des colonnes factices :
http://www.pompage.net/traduction/colonnesfactices

Un exemple ici

mob > stardy décrivait déjà avoir essayé de les utiliser... Le problème est dans la liaison avec le header.

Tout à fait ça va passer au dessus du header...

Bonjour,

Bon... voici une solution avec mise en forme tabulaire :

HTML :

<div id="conteneur">
	<div id="en-tete">En-tête</div>
	<div id="contenu_principal">
		<div id="menu">
			<div>
				<ul>
					<li>Lien 1</li>
					<li>Lien 2</li>
					<li>Lien 3</li>
				</ul>
			</div>
		</div>
		<div id="contenu">Contenu</div>
		<div id="plus">Plus</div>
	</div>
</div>

CSS :

body, ul {
	margin: 0;
	padding: 0;
}

#conteneur {
	width: 960px;
	margin: 0 auto;
}

#en-tete {
	height: 268px;
	background-color: #f00;
}

#contenu_principal {
	display: table;
	margin-top: -53px;
	background-color: #0f0;
	opacity: .5;
}

#contenu_principal > div {
	display: table-cell;
	vertical-align: top;
}

#contenu_principal > div + div {
	padding-left: 1px;
}

#menu		{width: 174px; background-color: #00f;}
#contenu	{width: 540px; background-color: #ff0;}
#plus		{width: 244px; background-color: #0ff;}

#menu > div {
	position: relative;
	height: 100%;
	min-height: 500px;
	background: #fff url(fond.png) no-repeat;
}

#menu ul {
	position: absolute;
	top: 55px;
	right: 0;
	bottom: 0;
	left: 0;
	list-style-type: none;
	background: #000 url(fond.png) no-repeat 0 -55px;
}

Explications :

- On décale verticalement l'élément d'ID "contenu_principal" pour qu'il recouvre la bannière, comme souhaité. On confère également à cet élément le comportement d'un tableau pour ensuite être en mesure d'ajouter la déclaration display: table-cell; aux trois colonnes enfants. De part le comportement naturel du tableau, les trois cellules bénéficieront toujours d'une hauteur équivalente.

- À ce stade, impossible donc d'attribuer un background-color à la colonne d'ID "menu" puisqu'elle recouvre la bannière, comme vous l'aviez fait remarquer. Du coup on applique cette couleur de fond à un élément enfant de la colonne, en l’occurrence la liste non ordonnée <ul>, en la décalant vers le bas pour ne pas recouvrir la bannière et tout en faisant en sorte qu'elle occupe toujours la hauteur totale de la cellule.
On pourrait choisir d'appliquer un padding-top à "menu" et d'appliquer une hauteur de 100% à la liste, mais cette dernière n'interprète pas cette déclaration (Sûrement parce que la hauteur du référent n'est pas explicitement donnée ? J'avoue que je ne sais pas...).
C'est pourquoi il va falloir recourir à un positionnement absolu et à une précision des valeurs de positionnement nulles pour right, bottom et left. Seul top possèdera le fameux décalage permettant de ne pas recouvrir d'une couleur opaque la bannière.

- Mais pour ce faire il faut que la liste, positionnée de façon absolue, bénéficie d'un référent. On aurait tendance alors à ajouter la déclaration position: relative; à l'élément d'ID "menu", sauf que dans la pratique c'est impossible puisque le W3C indique que les éléments en display: table-cell; ne peuvent recevoir de propriétés de positionnement (voir ce sujet pour plus d'informations). Solution : une <div> intermédiaire, dans le flux courant, avec une hauteur de 100% pour recouvrir toute la cellule, sera positionnée pour servir de référent.

- Pour finir, on applique une même image de fond à l'élément d'ID "menu" et à la liste non ordonnée enfant selon la technique des sprites.

Deux inconvénients avec cette méthode :

- Le premier, et pas des moindres : il faut dire adieu aux utilisateurs de lte IE7 (non support par ces versions du positionnement tabulaire).

- On doit appliquer une hauteur minimale (min-height) à la <div> intermédiaire puisque la liste non ordonnée est retirée du flux, ce qui implique que si le contenu des deux colonnes adjacentes au menu est inférieur (en terme de hauteur) à celui du menu, a pu menu...

Voici l'image pour tester le bout de code ci-dessus :

Modifié par jeremy-p (20 Apr 2012 - 14:38)

Laurie-Anne a écrit :
mob &gt; stardy décrivait déjà avoir essayé de les utiliser... Le problème est dans la liaison avec le header.

En effet, j'ai répondu un peu vite