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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 15 326 fois - Téléchargée 19 fois

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

Messages postés
40
Date d'inscription
jeudi 23 janvier 2003
Statut
Membre
Dernière intervention
13 août 2008

Moi je mets 8/10 à ta source parce que même si je n'en avais pas besoin jusque maintenant, je pense que je pourrais le réutiliser plus tard en l'appliquant pour autre chose (des tables, images , etc... et pourquoi pas des divs !)
;-)
Messages postés
63
Date d'inscription
mercredi 25 août 2004
Statut
Membre
Dernière intervention
19 février 2008

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à ;)
Messages postés
5
Date d'inscription
vendredi 3 novembre 2000
Statut
Membre
Dernière intervention
21 mars 2007

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
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
7
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.
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
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.
@+
Afficher les 6 commentaires

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.