AccueilCodesTutorielsForumsEmploiLivresConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2008 11 20 12:46:57
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

FIXER LES DIMENSIONS MINIMUM D'UNE DIV (FONCTIONNE POUR LE MAXIMUM AUSSI)


Information sur la source

Catégorie :Trucs & Astuces Classé sous : minheight, maxheight, css, expression, ie Niveau : Débutant Date de création : 20/03/2007 Vu : 7 300
Auteur : x_mec Site perso
Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Note :
8,14 / 10 - par 7 personnes
8,14 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

Description

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

  • <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]-->
<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

 

Commentaires et avis

signaler à un administrateur
Commentaire de x_mec le 20/03/2007 14:23:09

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 :$

signaler à un administrateur
Commentaire de bultez le 20/03/2007 14:49:37

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.
@+

signaler à un administrateur
Commentaire de Arto_8000 le 20/03/2007 21:04:39

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.

signaler à un administrateur
Commentaire de thecancre le 21/03/2007 09:08:57

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

signaler à un administrateur
Commentaire de x_mec le 21/03/2007 11:15:47

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

signaler à un administrateur
Commentaire de gege217 le 22/03/2007 09:22:55

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 !)
;-)

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Bouton en style CSS qui ne fonctionne pas sous ie [ par zemele ] Bonjour, Voil&#224; j'ai fait un bouton qui fait appel &#224; un style : Code css : a.bouton { &nbsp;&nbsp;&nbsp; color: #333333; &nbsp;&nbsp;&nb Pb de css simple sous IE 7 [ par sebastien_et_typh ] Bonjour je vien solliciter votre aide car je devute en css et mon code que je trouve simple ne fonction pas sous IE7 mais sous Mozilla aucun probleme Le hover en css marche pas sous IE? [ par Monico9385 ] Bonjour tout le monde! j'ai cr&#233;&#233; un menu tout simple en css, ou quand on passe la souris au dessus d'un div ca change la couleur. Voila mon pourquoi les calques ne recouvrent-ils pas les listes de formulaire sous ie ?? [ par MisterRack ] Bonjour, voila il se trouve que je viens de remarquer un petit probl&#232;me sur mon site... tout allait bien lorsque je l'ouvrait avec firefox, mais wysiwyg inserer du texte directement dans iframe [ par jerame ] Bonjour a tous, je suis en train de faire un wysiwyg moins evoluer que javascriptfr. Les principaux utilisateurs qui vont utiliser le WYSIWYG sont su saveas sous FireFox [ par crashtest ] Bonjour,alors c'est simple je voudrais faire pareil que le saveas de IE mais sous FireFox voila @++ et merci pour vos r&#233;ponse.Mes sitewebs (fonct position curseur dans un calque [ par djcal007 ] Bonjour tt le monde, je c pas comment faire parce ke IE et mozilla il m&#233;nerve. G une image et je ve avoir les coordon&#233;es de la souris par ra Comment mettre Date et Heure valide pour IE, Nescape, Firefox [ par JLB59 ] Bonjour tout le monde, J'ai fait un site que j'ai mis en ligne. Comme j'utilisais IE en local pour voir le r&#233;sultat, je n'ai eu aucun prb. J'ai comment supprimer l'énorme écart en haut de ma page dans ie [ par MisterRack ] Bonjour, Je suis en train de cr&#233;er un site en essayant qu'il s'adapte &#224; peu pr&#232;s pareil avec tous les navigateurs... alors avec firefo Menu Firefox / IE - Ne marche que sous IE [ par Blacknight91titi ] Bonjours a tous.Je pense que ca n'est pas la premi&#232;re question sur ce sujet mais celle ci comporte un plus.En effet j'ai cr&#233;er un petit menu


Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode

Appels d'offres

Téléchargements

Logiciels à télécharger sur le même thème :


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,187 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.