1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Fixer les dimensions minimum d'une div (fonctionne pour le maximum aussi)

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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 15 728 fois - Téléchargée 21 fois

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

Ajouter un commentaire Commentaires
cs_x_mec Messages postés 63 Date d'inscription mercredi 25 août 2004 Statut Membre Dernière intervention 19 février 2008
20 mars 2007 à 14:23
Ouah, 1/10, c'est trop d'honneur pour ma 1ère note sur javascriptfr !

Enfin bon, malgré celà j'espère que ce script sera utile a quelqu'un :$
cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
20 mars 2007 à 14:49
ne t'inquiètes pas x_mec.
je parlais l'autre jour de ces "1 béciles" qui sévissent.
je n'ai pas regardé le script. je le ferais dés possible.
mais noter sans expliquer : c'est lamentable.
tu n'es heureusement (?) pas le seul à subir ces gamineries.
pour compenser je note 10, sans justifications.
@+
Arto_8000 Messages postés 1044 Date d'inscription lundi 7 mars 2005 Statut Membre Dernière intervention 13 juillet 2010 7
20 mars 2007 à 21:04
Même si c'est pas pas du javascript, je trouves que c'est un bon exemple de "hack" css pour ie.

À propos des notes, moi-aussi j'ai souvent eu des 1 et des 5 quand tous les commentaires des gens étaient positifs. Faut pas s'en faire avec ça ce n'est qu'un détail.

C'est souvent que les gens ne savent pas l'utilité ou ne savez pas comment le faire fonctionner donc pense que c'est mauvais ... Jugement assez primaire, mais plusieurs personnes pensent comme cela et on peut rien y faire.
thecancre Messages postés 5 Date d'inscription vendredi 3 novembre 2000 Statut Membre Dernière intervention 21 mars 2007
21 mars 2007 à 09:08
Bonjour,
merci pour ton code.

Juste un truc, j'ai externalisé ma feuille de style:
<link href="CSS/defaultStyle1.css" rel="stylesheet" type="text/css" />

Est-ce que je peux modifier un div dans ma feuille de style avec ta méthode ? Si oui comment ?

J'ai essayé cela, mais ça n'a pas marché

<!--[if lt IE 7]>
<style type="text/css">
#le_nom_de_mon_div_dans_mon_CSS_externe {
width:expression(document.body.clientWidth < 800? "800px": "100%" );
}
</style>
<![endif]-->

Merci de ton aide.
Cordialement,
The Cancre
cs_x_mec Messages postés 63 Date d'inscription mercredi 25 août 2004 Statut Membre Dernière intervention 19 février 2008
21 mars 2007 à 11:15
Merc bultez et Arto_8000
C'est vrai que je devrais m'y faire a ce genre de notation (dont je fut victime sur flashcode), mais a chaque fois ça me revolte lol. En tout cas merci.

@thecancre
LA meilleur façon de faire avec des css externes, c'est de faire une css generale, et une css pour ie6, du genre:

<link href="CSS/defaultStyle1.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link href="CSS/defaultStyle2.css" rel="stylesheet" type="text/css" />
<![endif]-->

Dans defaultStyle1.css tu met:
#id_div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
min-width: 800px;
min-height: 600px;
}
Et dans defaultStyle2.css:
#id_div {
width:expression(document.body.clientWidth < 800? "800px": "100%" );
height:expression(document.body.clientHeight < 600? "600px": "100%" );
}

Voilà ;)
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)