Automatisation de la hauteur

Bonsoir,

Je ne sais pas si c'est possible par rapport à la structure de mon site mais je pose tout de même la question.

Voilà, j'ai installé une fonction supplémentaire sur le site de la marque pour laquelle je travaille qui permet de filtrer les produits selon des catégories.

Bref, lors de ce filtre, la hauteur se réduit...augmente mais le menu qui se trouve sur le côté bien évidemment reste fixe.

Je voulais savoir si c'était possible de lier les deux blocs pour qu'ils puissent évoluer ensemble..quand la hauteur du bloc central diminue de tant de pixel...le menu de gauche fait de même.

Je vous mets le lien pour que vous puissiez mieux visualiser la situation:

http://www.shilton.fr/vente-en-ligne-shilton/polos/

Merci d'avance.

Cordialement.

Oui c'est possible. Je te donne deux méthodes différentes pour y arriver.

Tu passes le parent de ton menu et du corps de ton site en display: table;

Et le menu et le corps de ton site en display:table-cell;

Un peu de lecture chez Alsacréations pour mieux comprendre le fonctionnement de ce que je t'ai marqué: Mise en page CSS avancée grâce a la propriété display
Problème: Ce n'est pas compatible partout.

Ce que je te conseille donc de faire est de fusionner le fond de ton menu et du corps de ton site en une seul image. La placer en background de leur parent direct.

Et ainsi même si les boites n'ont pas la même taille ça te donnera l'illusion qu'elles le sont.

Si je n'ai pas été clair demande moi des précisions

Merci pour la rapidité de ta réponse.

Cependant, j'avais déjà eu l'idée de ce que tu m'as suggéré en ce qui concerne de mettre une image de fond dans le DIV qui contient les deux blocs...mais c'est pas ce que je veux car lors du filtre...la colonne est super grande..et c'est pas ce que je veux.

En ce qui concerne le display, je vais voir un peu tout ça!

J'te remercie encore!

J'ai un soucis, en effet, dès lors que j'applique display: table; dans le div parent, le bloc de gauche, entre autres le menu...va au dessous du bloc de droite.

En non du tout.. je vais d'avantage étayer qu'on ne peut m'aider avec si peu d'informations:


Mon code HTML:

<!-- content -->
					<div id="content">
						
						
						
						<!-- Posts -->
						<div id="posts" class="single">
						
							<!-- post -->
							<div class="post">
								<!-- filter -->
						<ul id="portfolio-filter" class="filter">
							<li>Filtre</li>
							<li><a href="#" data-filter="*" > Toutes catégories confondues </a></li>
				    		<li><a href="#" data-filter=".pink" >Polos Rugby</a></li>
				    		<li><a href="#" data-filter=".blue" >Polos Racing </a></li>
				    		<li><a href="#" data-filter=".slim" >Polos Slim </a></li>
				    		<li><a href="#" data-filter=".expe" >Polos Expédition </a></li>
				    		
				    	</ul>
						<!-- ENDS filter -->
								
								
							<h1>Polos Shilton</h1>
                            <div id="bar">
							</div>
									<!-- post-thumb -->
									<!-- gallery-->
						<ul id="portfolio-list" class="gallery three-cols">
							<li class="pink"><a href="#" title="Bientôt Disponible"><img src="../../images/polos/polo-rugby-gentleman.jpg" title="Polo Rugby Gentleman Shilton" alt="Polo Rugby Gentleman Shilton"></a></li>
							<li class="pink"><a href="polo-rugby-nations.php" title="Polo Rugby Nations Little Blue"><img src="../../images/polos/polo-rugby-nations.jpg"  title="Polo Rugby Nations Shilton" alt="Polo Rugby Nations Shilton"></a></li>
							<li class="pink"><a href="polo-rugby-nations-tomato.php" title="Polo Rugby Nations Tomato"><img src="../../images/polos/polo-rugby-nations-tomato.jpg"  title="Polo Rugby Nations Shilton" alt="Polo Rugby Nations Shilton"></a></li>
							<li class="pink"><a href="polo-rugby-nations-vert-d-eau.php" title="Polo Rugby Nations Vert d'Eau"><img src="../../images/polos/polo-rugby-nations-vert-d-eau.jpg"  title="Polo Rugby Nations Shilton" alt="Polo Rugby Nations Shilton"></a></li>
							<li class="blue"><a href="polo-racing-team.php" title="Polo Racing Team Banana"><img src="../../images/polos/polo-racing-team.jpg" title="Polo Racing Team Shilton" alt="Polo Racing Team Shilton"></a></li>
							<li class="blue"><a href="polo-racing-team-noir.php" title="Polo Racing Team Noir"><img src="../../images/polos/polo-racing-team-noir.jpg" title="Polo Racing Team Shilton" alt="Polo Racing Team Shilton"></a></li>
							<li class="blue"><a href="polo-racing-team-tomato.php" title="Polo Racing Team Tomato"><img src="../../images/polos/polo-racing-team-tomato.jpg" title="Polo Racing Team Shilton" alt="Polo Racing Team Shilton"></a></li>
							<li class="blue"><a href="polo-racing-team-surf-blue.php" title="Polo Racing Team Surf Blue"><img src="../../images/polos/polo-racing-team-surf-blue.jpg" title="Polo Racing Team Shilton" alt="Polo Racing Team Shilton"></a></li>
							<li class="pink"><a href="polo-rugby-tri-nations-banana.php" title="Polo Rugby Tri Nations Banana"><img src="../../images/polos/polo-rugby-tri-nations-banana.jpg"  title="Polo Rugby Tri Nations Shilton" alt="Polo Rugby Tri Nations Shilton"></a></li>
							<li class="pink"><a href="polo-rugby-tri-nations.php" title="Polo Rugby Tri Nations Navy"><img src="../../images/polos/polo-rugby-tri-nations.jpg"  title="Polo Rugby Tri Nations Shilton" alt="Polo Rugby Tri Nations Shilton"></a></li>
							<li class="pink"><a href="polo-rugby-tri-nations-blanc.php" title="Polo Rugby Tri Nations Banana Blanc"><img src="../../images/polos/polo-rugby-tri-nations-blanc.jpg"  title="Polo Rugby Tri Nations Shilton" alt="Polo Rugby Tri Nations Shilton"></a></li>
							<li class="slim"><a href="polo-slim-lycra-surf-blue.php" title="Polo Slim Lycra Surf Blue"><img src="../../images/polos/polo-slim-lycra-surf-blue.jpg"  title="Polo Slim Lycra Shilton" alt="Polo Slim Lycra Shilton"></a></li>
							<li class="slim"><a href="polo-slim-lycra.php" title="Polo Slim Lycra Blanc"><img src="../../images/polos/polo-slim-lycra.jpg"  title="Polo Slim Lycra Shilton" alt="Polo Slim Lycra Shilton"></a></li>
							<li class="slim"><a href="polo-slim-lycra-noir.php" title="Polo Slim Lycra Noir"><img src="../../images/polos/polo-slim-lycra-noir.jpg"  title="Polo Slim Lycra Shilton" alt="Polo Slim Lycra Shilton"></a></li>
							<li class="pink"><a href="polo-shilton-college.php" title="Polo Shilton College Little Blue"><img src="../../images/polos/polo-shilton-college.jpg" title="Polo Shilton College" alt="Polo Shilton College"></a></li>
						    <li class="pink"><a href="polo-shilton-college-navy.php" title="Polo Shilton College Navy"><img src="../../images/polos/polo-shilton-college-navy.jpg" title="Polo Shilton College" alt="Polo Shilton College"></a></li>
						    <li class="pink"><a href="polo-rugby-haka.php" title="Polo Rugby Haka Noir"><img src="../../images/polos/polo-rugby-haka.jpg" title="Polo Rugby Haka Shilton" alt="Polo Rugby Haka Shilton"></a></li>
						    <li class="pink"><a href="polo-rugby-haka-blanc.php" title="Polo Rugby Haka Blanc"><img src="../../images/polos/polo-rugby-haka-blanc.jpg" title="Polo Rugby Haka Shilton" alt="Polo Rugby Haka Shilton"></a></li>
						    <li class="pink"><a href="polo-rugby-all-black.php" title="Polo Rugby All Black Blanc"><img src="../../images/polos/polo-rugby-all-black.jpg" title="Polo Rugby All Black Shilton" alt="Polo Rugby All Black Shilton"></a></li>
						    <li class="pink"><a href="polo-rugby-all-black-noir.php" title="Polo Rugby All Black Noir"><img src="../../images/polos/polo-rugby-all-black-noir.jpg" title="Polo Rugby All Black Shilton" alt="Polo Rugby All Black Shilton"></a></li>
						    <li class="blue"><a href="polo-racing-story.php" title="Polo Racing Story Blanc"><img src="../../images/polos/polo-racing-story.jpg" title="Polo Racing Story Shilton" alt="Polo Racing Story"></a></li>
						    <li class="blue"><a href="polo-racing-story-navy.php" title="Polo Racing Story Navy"><img src="../../images/polos/polo-racing-story-navy.jpg" title="Polo Racing Story Shilton" alt="Polo Racing Story"></a></li>
						    <li class="expe"><a href="polo-expedition.php" title="Polo Expédition Ecru"><img src="../../images/polos/polo-expedition.jpg" title="Polo Expédition Shilton" alt="Polo Expédition Shilton"></a></li>
						    <li class="expe"><a href="polo-expedition-little-blue.php" title="Polo Expédition Little Blue"><img src="../../images/polos/polo-expedition-little-blue.jpg" title="Polo Expédition Shilton" alt="Polo Expédition Shilton"></a></li>
						    <li class="expe"><a href="polo-expedition-navy.php" title="Polo Expédition Navy"><img src="../../images/polos/polo-expedition-navy.jpg" title="Polo Expédition Shilton" alt="Polo Expédition Shilton"></a></li>
						    <li class="pink"><a href="polo-rugby-oxford.php" title="Polo Rugby Oxford Orange"><img src="../../images/polos/polo-rugby-oxford.jpg" title="Polo Rugby Oxford Shilton" alt="Polo Rugby Oxford Shilton"></a></li>
						    <li class="pink"><a href="polo-rugby-oxford-blanc.php" title="Polo Rugby Oxford Blanc"><img src="../../images/polos/polo-rugby-oxford-blanc.jpg" title="Polo Rugby Oxford Shilton" alt="Polo Rugby Oxford Shilton"></a></li>
						    <li class="pink"><a href="polo-rugby-oxford-noir.php" title="Polo Rugby Oxford Noir"><img src="../../images/polos/polo-rugby-oxford-noir.jpg" title="Polo Rugby Oxford Shilton" alt="Polo Rugby Oxford Shilton"></a></li>
						    
						</ul>
						<!-- ENDS gallery -->	
						<!-- pagination -->	
						<div class="clear"></div>
						
						<!-- ENDS pagination -->
									<!-- ENDS post-thumb -->
									
							
													
								
								
							</div>
							<!-- ENDS post -->
							
							
							
						</div>
						<!-- ENDS Posts -->	
						
						
						<!-- sidebar -->
						
						<ul id="sidebar">
							<!-- init sidebar -->
							<li>
								<h2>Collection Shilton</h2>	
									<h3>Printemps-été 2012</h3>		
																
								<ul>
									<li class="cat-item"><a href="http://www.shilton.fr/vente-en-ligne-shilton/t-shirts/" title="T-shirts Shilton" alt="T-shirts Shilton">T-shirts</a></li>
									<li class="cat-item"><a href="http://www.shilton.fr/vente-en-ligne-shilton/polos/" title="Polos Shilton" alt="Polos Shilton">Polos</a></li>
									<li class="cat-item"><a href="http://www.shilton.fr/vente-en-ligne-shilton/chemises/" title="Chemises Shilton" alt="Chemises Shilton">Chemises</a></li>
									<li class="cat-item"><a href="http://www.shilton.fr/vente-en-ligne-shilton/pulls/" title="Pulls Shilton" alt="Pulls Shilton">Pulls</a></li>
									<li class="cat-item"><a href="http://www.shilton.fr/vente-en-ligne-shilton/pantalons-jeans/" title="Pantalons et Jeans Shilton" alt="Pantalons et Jeans Shilton">Pantalons - Jeans</a></li>
									<li class="cat-item"><a href="http://www.shilton.fr/vente-en-ligne-shilton/pantacourts-bermudas/" title="Pantacourts et Bermudas Shilton" alt="Pantacourts et Bermudas Shilton">Pantacourts - Bermudas</a></li>
									<li class="cat-item"><a href="http://www.shilton.fr/vente-en-ligne-shilton/vestes/" title="Vestes Shilton" alt="Vestes Shilton">Vestes</a></li>
									<li class="cat-item"><a href="http://www.shilton.fr/vente-en-ligne-shilton/accessoires/" title="Accessoires Shilton casquettes ceintures" alt="Accessoires Shilton casquettes ceintures">Accessoires</a></li>
								    <li class="cat-item"><a href="http://www.shilton.fr/vente-en-ligne-bonnes-affaires-shilton/" title="Promotions vêtements shilton, t-shirts, chemises, polos, pulls,..." alt="Promotions vêtements shilton, t-shirts, chemises, polos, pulls,..."><img src="/img/logo-bonnes-affaires-menu-vert.gif"/></a></li>
								    <li class="cat-item" style="margin-top:20px;margin-left:25px;border:none;"><? include("chistera_panier.php"); ?></li>
								</ul>
							</li>	
							
							
							<!-- ENDS init sidebar -->
						</ul>
						
						<!-- ENDS sidebar -->
												
		
					</div>
					<!-- ENDS content -->

J'ai décidé de l'appliquer sur un Div parent..j'ai tout d'abord hésité sur celui de #content ou celui de #posts.

J'ai appliqué dans un premier temps celui de #posts pour le parent:

#posts{
display: table;
background: url(img/fond-produit.png) repeat;
padding-top:20px;
float: right;
width: 746px;
}

Puis enfin j'ai appliqué display:table-cell; dans les deux enfants:

#content .gallery{
display:table-cell;
padding-top:20px;
display: block;
overflow: hidden;
width:746px;

}

J'ai bien entendu enlevé le display:block; pendant l'essai, c'est juste pour montrer le code qui était présent.

puis le deuxième enfant:

#sidebar{display:table-cell;
    z-index:10;
	float: left;
	width: 200px;
	margin-left: 0px;
	background: url(../../../img/fond-menu.png) top center repeat;
	padding-left:20px;

	margin-bottom:19px;
}

Tout se place correctement sauf que la hauteur du menu reste fixe...

Merci d'avance.

Cordialement.

Je me suis trompé, c'est à cause de la fatigue ça!:p

J'ai appliqué le display: table; sur #content et non #posts étant donné que le parent et #content:

#content{
display: table;
z-index:1;
margin-top:40px;

overflow: hidden;
margin-bottom: -20px;
font-size: 14px;
line-height: 1.5em;
}

Personne a une petite idée?