begin process at 2012 05 28 10:07:58
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

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

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


 Information sur la source

Note :
8,14 / 10 - par 7 personnes
8,14 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Classé sous :minheight, maxheight, css, expression, ie Niveau :Débutant Date de création :20/03/2007 Vu :13 356
Auteur : x_mec

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
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.htm l

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


 Sources du même auteur

POSITION 'FIXED' POUR LE BACKGROUND, FONCTIONNE SOUS IE
Toutes les sources de x_mec

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec une capture PRÉSENTOIR PAGE/SUJET par tiranus
Source avec Zip IMPRIMER UNE PARTIE DE PAGE NON SÉLECTIONNABLE par lecurieux41
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
POSITION 'FIXED' POUR LE BACKGROUND, FONCTIONNE SOUS IE par x_mec

Commentaires et avis

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

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

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.

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

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

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

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,184 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)