Accueil > > > 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
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
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Bouton en style CSS qui ne fonctionne pas sous ie [ par zemele ]
Bonjour, Voilà j'ai fait un bouton qui fait appel à un style : Code css : a.bouton { color: #333333; &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éé 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è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é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énerve. G une image et je ve avoir les coordoné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é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éer un site en essayant qu'il s'adapte à peu prè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ère question sur ce sujet mais celle ci comporte un plus.En effet j'ai créer un petit menu
|
Derniers Blogs
COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE?COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL
Avec EF, les vues doivent être mappées sur des entity types. Le problème c'est que les entity types doivent avoir une clé. Avec EF, nous avons les complex type qui n'ont pas de clé mais les vues ne peuvent pas être mappées dessus. Avec EF4, il est possibl...
Cliquez pour lire la suite de l'article par Matthieu MEZIL [WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL?[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson
Certain d'entre vous on peut être vécu cette situation embarrassante après quelques temps passer avec WF4 : Au début avec mon " ActivityDesigner" , tout allait bien. Et puis un jour j'ai au des problèmes de " Binding" . Alors nous sommes allé sur le site ...
Cliquez pour lire la suite de l'article par JeremyJeanson MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ?MYTIC - SHAREPOINT 2010 : DéJà UN MYTHE MICROSOFT ? par junarnoalg
La prochaine session de MyTIC aura lieu à Namur, le 23 mars prochain. Pendant presque une heure, nous parlerons de SharePoint 2010. Voici un aperçu du programme.
Accueil : 17h30 Début de la session : 18h00 - Les nouvelles int...
Cliquez pour lire la suite de l'article par junarnoalg
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|