[Résolu] Design fluide Em % px? Lequel choisir?

(reprise du message précédent)

Par rapport à cette discussion très intéressante, j'ai un peu remodelé l'article Faire un site pour toutes les résolutions.

Que pensez-vous d'y ajouter un paragraphe assez simple sur les méthodes de largeurs minimales et maximales ? L'endroit me semble approprié.

Salut,

cerede2000 a écrit :
Et en passant, peut on remplacer body par autre chose?

Oui ! expression peut contenir n'importe quel code javascript donc pas de problème... enfin si... un... seul IE sera en mesure d'obtenir cette valeur... Du coup, mieux vaudrait remplacer expression par un vrai code JS compatible avec tout le monde... mais... calculer les dimensions d'un conteneur en JS, (ou faire du CSS via JS) c'est déconseillé... donc... mieux vaut s'abstenir...

En fait, il est préférable de se servir d'expression uniquement lorsqu'il s'agit de corriger un bug ou une incompréhension made in IE et non pour étendre les possibilités de CSS parce que pas de JS -> pas de dimensions...

Raphaël a écrit :
Que pensez-vous d'y ajouter un paragraphe assez simple sur les méthodes de largeurs minimales et maximales ? L'endroit me semble approprié.

Oui, ça me semble être une bonne idée.
Modifié par koala64 (06 Jan 2007 - 18:52)

Et donc ca ne freeze plus avec IE6 et ca fonctionne?

Raphael a écrit :
Par rapport à cette discussion très intéressante, j'ai un peu remodelé l'article Faire un site pour toutes les résolutions.

Que pensez-vous d'y ajouter un paragraphe assez simple sur les méthodes de largeurs minimales et maximales ? L'endroit me semble approprié.

Houla, on dirait que quelqu'un s'est laissé emporter par son enthousiasme et a largement dépassé le « un paragraphe assez simple ».

Bon ben je pense que l'essentiel y est. Deux choses cependant, concernant les EM :

1. À deux ou trois endroits dans l'article, on présente les EM comme une possibilité pour dimensionner (surtout en largeur) des blocs. C'est techniquement tout à fait juste, mais je ne crois pas que ça soit une très bonne idée. Imaginons que j'ai un menu flottant à gauche d'une largeur de 16em, et un bloc de contenu à droite (non flottant) avec un margin-left de 17em. Si j'agrandis la taille du texte, la zone de contenu se réduit comme peau de chagrin au fur et à mesure que le menu devient disproportionné. Pas glop.
Et on peut imaginer des cas de figure encore pire que ça !

Je déconseillerais donc formellement l'utilisation des EM pour dimensionner des blocs, sauf dans des cas très particuliers et aux conséquences maitrisées.

2. Un de ces cas particuliers, c'est le dimensionnement d'un bloc global ou d'un bloc de texte en EM, pour obtenir une largeur correspondant à une longueur de ligne « optimale ». J'imagine qu'en parler également dans cet article alourdirait passablement la chose... mais ça reste une possibilité intéressante à creuser. Qu'en faire, du coup ? Un tutoriel axé sur une mise en page complète (ou du moins quelque chose d'un peu plus concret et détaillé que dans l'article) ?

cerede2000 a écrit :
Et donc ca ne freeze plus avec IE6 et ca fonctionne?

En effet

@mpop > oui j'ai été un peu rapide sur ce coup, je corrige certaines choses. Merci

J'ai essayer sur mon site et quand je met ceci:

<!--[if lt IE 7]>
<style type="text/css">
#conteneur {
width: 770px;
width: expression(document.body.clientWidth < 602? "600px" : document.body.clientWidth > 1002? "1000px" : "auto");
}
</style>
<! endif -->

Je n'ai plus rien sur la page juste la couleur de fond.

mpop a écrit :
Qu'en faire, du coup ? Un tutoriel axé sur une mise en page complète (ou du moins quelque chose d'un peu plus concret et détaillé que dans l'article) ?

Ce serait effectivement la cerise sur le gâteau : tels les deux précédents tutoriels de conception en 5 étapes, celui-ci aboutirait à un design fluide "intelligent" serait extrêmement intéressant.

cerede2000 a écrit :
J'ai essayer sur mon site et quand je met ceci:

- Tu as essayé sur IE6 ? (le commentaire conditionnel que tu montres que fonctionne que sur IE6)
- Tu peux essayer en indiquant une bordure au #conteneur, afin de le visualiser ?
- Tu as bien mis du texte dans le conteneur ?

Oui sur IE6 bien sur
Et oui il y a du texte j'ai pas les yeux en face des trous ce soir
Enfin j'ai fait autrement ca a l'aire de marcher, par contre comment ca se fait que cela ne marche pas avec IE7 et FF quand je retire le commentaire conditionnel. Si je ne met pas max-width le conteneur s'etend sans fin
Modifié par cerede2000 (06 Jan 2007 - 23:05)

Et en plus ceci:

width: expression(document.body.clientWidth < 702? "700px" : document.body.clientWidth > 902? "900px" : "100%"); /* Pour IE<IE7 */

Pose un probleme de validation de CSS

Normal, c'est un code propriétaire.

Oui mais pour qu'il marche chez moi je suis oblige de le mettre dans ma feuille css comme ceci:

...
#conteneur {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: expression(document.body.clientWidth < 702? "700px" : document.body.clientWidth > 902? "900px" : "100%"); /* Pour IE<IE7 */
	width: 100%;
	min-width: 700px;
	max-width: 900px;
}
...

cerede2000 a écrit :
Oui mais pour qu'il marche chez moi je suis oblige de le mettre dans ma feuille css comme ceci:

OK, j'ai compris : je suppose que tu utilises une version standalone de IE6, n'est-ce pas ?

Dans ce cas, relis très attentivement la fin de la FAQ sur les commentaires conditionnels. Je pense que la solution s'y trouve

oui, tout à fait, mais ce que j'entendais par là, c'est que ce code n'est viable que pour IE. Le fait qu'il soit invalide indique simplement qu'il ne sera pas lu ou interprété correctement par les autres. Pour être tranquille, tu peux le placer en commentaires conditionnels, car même si ce n'est qu'une rustine, tu t'assures que ça ne posera de problème aux autres (ce qui n'est pas le cas à ma connaissance)

La validité CSS n'est pas obligatoire si tu sais ce que tu fais.

<edit>ah ben grillé...
Modifié par koala64 (06 Jan 2007 - 23:43)

cerede2000 a écrit :

Edit: Petite question qui je le sent est idote mais tant pit, peut on mettre des commentaire conditionnels dans le CSS lui meme?

Rien n'est idiot... mais c'est agaçant de donner des liens que personne ne lit

lien de la FAQ que personne ne lit a écrit :
Rappel : un commentaire conditionnel ne peut être inséré que dans un document (x)HTML, et ne peut contenir que des instructions (x)HTML et non CSS.

cerede2000 a écrit :
Edit: Petite question qui je le sent est idote mais tant pit, peut on mettre des commentaire conditionnels dans le CSS lui meme?

Ça n'est pas idiot, mais tu as pressenti la réponse : non, on ne peut pas. La raison en est simple : si tu regardes la syntaxe des commentaires conditionnels, tu remarqueras qu'il s'agit de simples commentaires HTML, dont le contenu adopte une syntaxe particulière qui sera comprise par IE.

Salut a tous, il subsite encore un probleme!
Quand je met ceci:

<!--[if lte IE 6]>
<style type="text/css">
#conteneur {
	width: expression(document.body.clientWidth < 702? "700px" : document.body.clientWidth > 902? "900px" : "100%");
}
</style>
<! endif -->

Dans ma page, cela marche très bien sur IE6 et même IE5, seulement sur IE7 il n'y a rien d'afficher juste ma couleur de fond de la page et rien d'autre.

En sachant que c'est insérer comme ceci:

<link rel="stylesheet" type="text/css" href="style.css"/>
<!--[if lte IE 6]>
<style type="text/css">
#conteneur {
	width: expression(document.body.clientWidth < 702? "700px" : document.body.clientWidth > 902? "900px" : "100%");
}
</style>
<! endif -->

Et que dans le fichier CSS on a déjà:

#conteneur {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	min-width: 700px;
	max-width: 900px;
}

Alors comment faire?
Merci
Modifié par cerede2000 (07 Jan 2007 - 10:19)

cerede2000 a écrit :

Alors comment faire?
Merci

Tu as bien installé les versions correctement, telles qu'elles sont expliquées sur le site http://tredosoft.com/Multiple_IE ?
Ainsi que la version IE7 standalone du même site ? http://tredosoft.com/IE7_standalone

Ca ne vient pas que de chez moi! J'ai fait tester a des personnes qui ont IE7 seulement et ca leurs fait la même chose
Et même avec le standalone c'est pareille donc... BUG!
Modifié par cerede2000 (07 Jan 2007 - 11:02)

cerede2000 a écrit :

<!--[if lte IE 6]>
...

Pourquoi ne mets-tu pas

<!--[if lt IE 7]>

Comme cela est indiqué ?

Chez moi cela fonctionne partout.

De plus, la manipulation pour l'installation des versions standalone est assez rigoureuse, voici comment faire exactement : http://forum.alsacreations.com/topic.php?fid=2&tid=19587