Redimensionnement ; Div à gauche qui doit rétrécir…

Bonjour à toutes et à tous

Premier message sur Alsacréations pour moi, bien que j'arpente les pages de ce site et de son forum depuis pas mal de temps, c'est assez utile pour les problèmes de développement courants.


Voici mon problème :

Je développe actuellement un site sur la Réflexologie Plantaire. Le site que je prépare a un schéma classique : header et menu en haut, puis 3 « colonnes ». Comme d'habitude, les colonnes sont à taille variables pour s'adapter à l'écran de chaque utilisateur, et le site que je prépare prenant approximativement tout l'écran, j'ai opté pour des valeurs en pourcentage.

http://img4.hostingpics.net/pics/177740schemasite.jpg

Le Div Gauche correspond en réalité à une image placée en backgound. Cette image a un width de 400px, par conséquent le div a un max-width: 400px;.

Lors du rétrécissement de la fenêtre, je m'attends à ce que ce Div Gauche rétrécisse, étant donné que le Div Centre et Div Droit sont les plus importants. Or, ce n'est pas vraiment ce qu'il arrive… (Notez au passage que ces deux Div sont regroupés dans un seul Div à la couleur jaune sur le schéma)

Pour le moment, j'ai calé "width: 28%" (environ 1/3) à Div Gauche et 70% à mon Div jaune, mais cela ne fonctionne pas vraiment ; le Div Gauche prend toujours trop de place et se fiche de la valeur de 28%.

Bref, si vous avez des questions, n'hésitez pas…


Extrait du code HTML :

		<?php include("header.php") ; ?>
		<?php include("menu.php") ; ?>
		
		<div id="img_pieds_colonne_gauche"></div>	// Ici mon DIV Gauche
		
		<div id="tableau">  // Le DIV Jaune. Attention, je n'ai pas un "display: table" pour ce div! C'est juste pour moi une façon de noter…
			
			<div id="tableau_colonne_gauche"> 	</div>  // Le DIV Centre
			
			<div id="tableau_colonne_droite">

				<?php include("coldroite.php") ?>
			
			</div> // Le DIV Droit

Extrait du code CSS :

#img_pieds_colonne_gauche
{
	width: 28%;
	max-width: 400px;
	height: 600px;
	background: url("img/img_pieds_gauche.png");
	background-position: top right;
	border: 1px solid blue;
	display: inline-block;
	margin-top: 145px;
	overflow: hidden;
}

#tableau
{
	border: 1px solid blue;
	vertical-align: top;
	display: inline-block;
	overflow: auto;
	min-width: 875px;
	width: 70%;
	margin-left: 5px;
	margin-top: 160px;
}

Salut,

Tu travailles en local ? Si non, ton schéma est bien mais un aperçu du site peut être utile pour checker avec Firebug, donc si je pouvais avoir un lien ça m'aiderait

Je ne comprends pas bien... Ton div gauche prend toujours trop de place ? C'est-à-dire précisément ? Ton image a quelle taille ?

PS : pour l'image, je te conseille de la mettre en tant que balise html dans ton code (et non en background css), afin de pouvoir la redimensionner si la fenêtre se retrécit via la règle css img { max-width: 100%; }.

Yop o/

Merci de ta réponse, et désolé du temps que j'ai passé à répondre. J'ai eu un changement de PC récemment, et vu que j'ai entre temps avancé sur d'autres aspects du site…

Alors, au moment de mon post, le site était effectivement en local, mais il a été envoyé sur un serveur hier, voici donc : www.reflexo08.fr

(Note : même si le plus gros du site est fait, il reste néanmoins des points à terminer )

Je vais tester ta solution en tous cas, mais il me semble qu'à la base, l'image était placée dans le code HTML en tant que balise <img>, j'ai du opter pour la mettre en background par la suite, sauf que je ne me souviens plus de la raison exacte. Quoiqu'il en soit, je vais tenter néanmoins ces changements, toujours en local, et avec le max-width

Le test a été effectué, et le problème reste le même : l'image à gauche ne bouge pas ^^"

Ce que je souhaite est la chose suivante : on a donc une disposition sous la forme de 3 « colonnes ». Celle de gauche est moins importante que celle du centre ou celle de droite.

Donc en cas d'un redimensionnement de la fenêtre, ou bien pour un petit écran (ex: 1280px de largeur), il faudrait que cette colonne à gauche se rétrécisse, afin que la colonne centrale et la colonne de droite soient visibles au maximum.

Et du coup, c'est là où je me rappelle du pourquoi ai-je mis l'image en background dans un div. Car le div avait un overflow:hidden et un background-position:top right.

Par conséquent, si ce div rétrécissait en largeur, l'image devenait trop grande par rapport au div, elle était cachée par l'overflow ; et le fait d'avoir un background-position en top-right fait qu'elle se "décale" vers la gauche, comme si elle sortait de l'écran. Du moins, dans un monde utopique tel que je souhaite, c'est ce qu'il se passe

Du coup, problème toujours en cours ^^"