28138 sujets

CSS et mise en forme, CSS3

Pages :
Administrateur
(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é.
Modérateur
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... Smiley langue

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. Smiley smile
Modifié par koala64 (06 Jan 2007 - 18:52)
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 ». Smiley lol

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) ?
Administrateur
cerede2000 a écrit :
Et donc ca ne freeze plus avec IE6 et ca fonctionne?

En effet Smiley smile

@mpop > oui j'ai été un peu rapide sur ce coup, je corrige certaines choses. Merci Smiley smile
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 Smiley confus juste la couleur de fond.
Administrateur
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.
Administrateur
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 Smiley smile
Et oui il y a du texte j'ai pas les yeux en face des trous ce soir Smiley confus
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 Smiley eek
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 Smiley confus
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;
}
...
Administrateur
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 Smiley cligne
Modérateur
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é... Smiley langue
Modifié par koala64 (06 Jan 2007 - 23:43)
Ah d'accord oui effectivement j'utilise des versions standalone, j'ai prit le multiple installeur maitenant ca marche effectivement Smiley smile
Merci à vous! J'adore ce forum!

Edit: Petite question qui je le sent est idote mais tant pit, peut on mettre des commentaire conditionnels dans le CSS lui meme? Smiley confus
Modifié par cerede2000 (06 Jan 2007 - 23:49)
Administrateur
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? Smiley confus

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

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? Smiley confus

Ç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)
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 Smiley sweatdrop
Et même avec le standalone c'est pareille donc... BUG!
Modifié par cerede2000 (07 Jan 2007 - 11:02)
Pages :