Fixer les dimensions minimum d'une div (fonctionne pour le maximum aussi)

Commenter

Contenu du snippet

Voici comment empecher une div de se redimensionner en dessous d'une certaine valeur.

Cette astuce peut se reveler très utile lorsque vous publiez un swf à 100%, il arrive souvent que si l'utilisateur reduit trop la fenètre du navigateur, votre swf deviendra illisible.
Donc gràce à un peu de css et de javascript, on va fixer des dimensions minimum sur notre div, comme celà, lorsque l'utilisateur va reduire son navigateur au delà de la limite fixée, il verra apparaitre des barres de defilement !

Domaine d'utilisation
---------------------
-Eviter la deformation de vos swf redimensionnables (100%) au delà d'une largeur et hauteur minimum.
-Eviter le chevauchement de contenu de div.
-Garder une mise en page coherente, par exemple en evitant que vos images sautent à la ligne suivante par manque de place.

Pourquoi du javascript ?
------------------------
-Simplement pour palier au non support des propriétés min-height, min-width, max-height et max-width d'internet explorer.

Source / Exemple : 


<style type="text/css">
	#id_div {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		min-width: 800px;
		min-height: 600px;
	}
</style>
<!--[if lt IE 7]>
	<style type="text/css">
	#id_div {
	width:expression(document.body.clientWidth < 800? "800px": "100%" );
	height:expression(document.body.clientHeight < 600? "600px": "100%" );
	}
	</style>
<![endif]-->

Conclusion :


Voilà, tout d'abord, on intègre notre css dans notre page à l'aide d'un commentaire conditionnel. "if lt IE 7" signifie que le code suivant ne sera interprété uniquement pour les versions inferieurs à internet explorer 7.

Ensuite, on va utiliser une expression javascript pour poser une conditon de redimenssionnement. Cette expression dit:
--> Si la taille du navigateur et inferieur à 800 (pixels), alors width vaut 800px, et si la taille du navigateur et superieur ou egale à 800 (pixels), alors width vaut 100%.

Et pour finir, on termine le commentaire conditionnel avec "endif".

A noter que pour des dimensions maximums, le code a mettre serait du type: width:expression(document.body.clientWidth > 800? "800px": "100%" );

Exemple concret de ce code:
---------------------------
--> http://blog.ka-studio.net/tuto/div_min/800_600.html

Sources detaillées sur mon blog:
--------------------------------
--> http://blog.ka-studio.net/index.php?2007/03/17/30-fixer-les-dimensions-minimum-d-une-div-pour-flash-compatible-internet-explorer

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_x_mec)