28173 sujets

CSS et mise en forme, CSS3

[Résolu] Incompréhension équivalence max-width sur IE

Salut,

Je suis en train de m'intéresser au site fluides car j'ai une commande d'un client qui va dans ce sens.
J'ai commencé à établir mon gabarit pour qu'il soit fonctionnel.

Et là, j'en arrive à la largeur du contenu de ma colonne centrale, que j'aimerai bien limiter en largeur pour des raisons de facilité de lecture.
J'utilise donc le max-width qui fonctionne pour la plupart des navigateurs.
Et j'ajoute un commentaire conditionnel pour "l'émuler" sur IE 6.

En grande résolution, il n'y a pas de différence entre IE et FF, l'agrandissement se fait comme il se doit.

Par contre, quand je réduis la fenètre du navigateur en dessous de 1024x760, sous FF la colonne se réduit encore, mais sous IE elle saute plus bas dans la page.

Voilà le lien pour vous rendre compte :
http://mikachudesign.free.fr/test/fluid.html

Quelqu'un pourrait-il me dire d'ou provient ce comportement, et comment le corriger ?

Merci d'avance.
Modifié par Mikachu (04 Feb 2007 - 12:48)
Administrateur
Hello,

Dans ta CSS, je ne vois pas de max-width Smiley decu

Je ne vois que ces règles pour le conteneur :
#conteneur {
width: 90%;
margin: 0 5%;
background-color: orange;
}


EDIT : ah je vois que tu as appliqué le max-width à un autre élément :
#centre {
max-width: 60%;
background-color: white;
margin: 0 200px 0 160px;
padding: 30px 0 0;
}


Je pense qu'il serait plus pratique et moins contraignant de l'appliquer au conteneur global.
De plus, la valeur de 60% est ambigue, sur quoi repose-t-elle ? Si l'écran est redimensionné, la valeur 60% va forcément évoluer aussi. Tu ne peux donc pas t'y fier.

Il est préférable d'appliquer des valeurs plus connues, soit en px, soit en em.

Le problème est le même avec ton commentaire pour IE : je te conseille plutôt de choisir un minimum et un maximum en pixels.
Modifié par Raphael (07 Jan 2007 - 17:48)
Salut,

Le conteneur fait bien 90% de la taille quelle que soit la résolution d'écran, avec donc 5% de marge de chaque côté.

Il s'agit de la #centre un peu plus bas dans le style, qui possède un max-width :

a écrit :
#centre {
max-width: 60%;
background-color: white;
margin: 0 200px 0 160px;
padding: 30px 0 0;
}

et la partie pour IE6 et moins
a écrit :
<!--[if lte IE 6]>
<style>
#centre {
width: 60%;
width:expression(document.body.clientWidth > 60%? "60%": "auto" );
}
</style>
<![endif]-->
Salut Mikachu,

tu peux donner le code html des conteneurs principaux et un petit schéma du rendu à obtenir ?
Modifié par clb56 (07 Jan 2007 - 18:11)
Salut,

Merci de ta réponse Raphael, en effet nos messages se sont croisés.

A vrai dire ta solution semble logique, je viens de tester et en effet ça rend pas trop mal.
J'espère juste que cela ne vas pas me perturber pour faire rentrer le design qui est prévu dans ce gabarit, car je n'avais pas envisagé son extensibilité ainsi.
*prie pour ne pas avoir trop à refaire*

En fait ce système est très bien, car au final ca fait un site adapté pour les petites résolutions en plein écran, et qui devient un site centré pour les résolutions supérieures.
Pour l'instant çà donne çà :
http://mikachudesign.free.fr/test/fluid2.html

Bon par contre, car je suis un emm*** et que j'aime satisfaire ma curiosité, je souhaiterai bien savoir quand même pourquoi ce comportement se produit sur IE lorsqu'on réduit la fenètre du navigateur, alors que je lui attribue une taille maximale qu'il ne devrait pas étirer, donc provoquer la descente du contenu en bas de page.
Une idée sur la questions ?

Clb56, le code html est dans le lien que j'ai donné
plus haut, que je remets ici :
http://mikachudesign.free.fr/test/fluid.html

Pour l'explication, un schéma sera difficile à faire.
Je vais essayer de l'expliquer.
Le site doit faire quoi qu'il arrive 90% de la largeur du navigateur, centré avec 5% de marge de chaque côté.

Les colonnes gauches et droites sont définies en pixels et ne doivent pas s'élargir pour des questions d'ordre graphique. Elles doivent faire respectivement 160 et 210px de large.

Je comptais donc utiliser l'espace restant (90%-160px-210px) pour laisser le contenu s'y étendre.

J'envisageais ensuite d'attribuer à ce contenu des marges en unité relative, ainsi qu'une largeur maximale relative, de sorte que le texte occupe une bonne part de l'espace en petite résolution, mais soit limité proportionnellement en grande résolution.

Les marges entre les colonnes auraient été bien évidemment plus importantes en grande résolution, mais qu'importe le contenu restait lisible, et le site occupait toujours 90% de la largeur de la fenètre.

Ceci dit, avoir des marges plutôt à l'extérieur en grande résolution me semble plus agréable visuellement. j'avoue que je n'avais pas réalisé que çà pouvait fonctionner ainsi.
Modifié par Mikachu (07 Jan 2007 - 18:29)
Sujet clos
Aller à