26744 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour, encore moi et oui Smiley biggrin
Voila une petite question que je me pose en faisant mon nouveau design.
C'est que choisir entre l'em, le %, le px et les autres?
Je n'ai pas trouver de réponse a cette question.
Je souhaite faire le design le plus fluide possible et aussi qu'il ne se casse pas si on veut zoomer la page.
Merci
Modifié par cerede2000 (07 Jan 2007 - 13:29)
LOL !!!!!!!!!!!!!

Il faut le faire en % !!!

Ya pas mieux et ceux qui disent le contraire sont des post vendredÿstes chagrins.

Pour l'agrandissement du texte (qui est autre chose que le zoom) et bien il faut tester étape après étape.

C'est quand même un point à juger de manière assez distanciée, Firefox permet 8 Ctrl + et je n'est jamais réussi à faire un stylage qui ne craque pas au dessus de 6.

une bonne tenue jusqu'à 3 ctrl+ (inclus) c'est bien je trouve, après c'est plus aux logiciels de prendre le relais.

Et bonjour bien sur Smiley cligne
Modifié par clb56 (05 Jan 2007 - 23:35)
Modérateur
clb56 a écrit :
Firefox permet 8 Ctrl + et je n'est jamais réussi à faire un stylage qui ne craque pas au dessus de 6.

une bonne tenue jusqu'à 3 ctrl+ (inclus) c'est bien je trouve
C'est déjà très bien oui... Pour ma part, j'essaye de mettre à la base des textes bien lisibles et suffisament grand (c'est quoi cette mode débile des textes microscopiques gris clair sur blanc?) qui permettent un voire deux agrandissements, et c'est bien assez!
Salut

Je trouve que ça dépend quand même de ce que tu appelles un comportement fluide ... Personnellement, j'ai un problème avec les largeurs de colonnes déclarées en pourcentages.

Imaginons par exemple que je réalise un design à 3 colonnes, dont une ne sert que pour le menu de navigation. Quel intérêt ai-je à ce que cette colonne occuppe toujours 20% de l'espace, alors qu'en réalité, elle n'a besoin que de 15em ? On gère ainsi l'agrandissement de la police de caractères, sans que la colonne occupe un espace disproportionné par rapport à son contenu, dans les "grandes" résolutions.

Par contre, les 2 autres vont se redimensionner avantageusement en fonction de la place disponible, donc j'utiliserai les pourcentages ...

À toi de voir ce que tu préfères, en essayant plusieurs approches ...
Benjamin D.C. a écrit :
C'est déjà très bien oui...


Oui et j'en étais très fier jusqu'au moment où Laurent Denis m'a parlé de la fonction "fit to width" d'Opera qui arrive carrément à couper les mots en deux.

J'étais tellement vexé que j'ai abandonné Smiley biggol Smiley lol

PS : je partais d'une police verdana font-size 100% dans conteneur centré width 12em (de mémoire, la stylesheet est au boulot).
Oui effectivement, mais les % posent des fois des soucis car on peut se retrouver avec un espace super grand quand la fenêtre est maximisée, et en plus cela dépend de la résolution du visiteur.
clb56 a écrit :


Oui et j'en étais très fier jusqu'au moment où Laurent Denis m'a parlé de la fonction "fit to width" d'Opera qui arrive carrément à couper les mots en deux.
Tu parles de tenir le design en place après 6 agrandissements ? Parce qu'à ce moment-là, garder les mots un peu longs dans la fenêtre, c'est déjà compliqué Smiley lol
cerede2000 a écrit :
Oui effectivement, mais les % posent des fois des soucis car on peut se retrouver avec un espace super grand quand la fenêtre est maximisée, et en plus cela dépend de la résolution du visiteur.


Non pas du tout !!!

Il est au contraire très facile de controlé l'expansion des design fluides dans le cas de très grandes résolutions.

Il faut bien se mettre ça dans la tête : les design fluides ça ne sert pas du tout à agrandir, ça sert à réduire dans de bonnes conditions !
a écrit :
Non pas du tout !!!

Il est au contraire très facile de controlé l'expansion des design fluides dans le cas de très grandes résolutions.


Smiley lol Ah bon?! Et comment? Smiley confused
Sopo a écrit :
Tu parles de tenir le design en place après 6 agrandissements ?


Non "jusqu'à" et "inclus"...

ben oui pour la longueur des mots c'est effectivement la limite sur laquelle Opera m'a tué... Smiley decu
Modifié par clb56 (06 Jan 2007 - 00:11)
Sinon, pour un conteneur global, on peut faire des choses marrantes avec mes min-width, width et max-width, en utilisant des EM, des pourcentages et des pixels.

Avertissements :
1. les largeurs en pourcentages c'est bien, mais si on ne met pas de limite ça peut donner des trucs tout étirés et des lignes de texte de 200 signes (longueur optimale : entre 40 et 70 signes) ;
2. les largeurs en EM c'est bien pour les longueurs de ligne, mais si on agrandit le texte (ou si la taille de texte par défaut configurée par l'utilisateur est importante) tout part en sucette ;
3. avec des largeurs en pixels on prend moins de risques... mais c'est peu adaptable et pas toujours tip top pour l'accessibilité. La solution de facilité, quoi.

Maintenant, si on joue avec tous les outils à notre disposition dans les navigateurs modernes (IE7 compris, mais pas IE6 hélas), on peut faire des choses comme :

1. largeur en EM, mais avec une largeur maximale en pourcentages pour éviter un scroll horizontal
div#global {
	width: 50em;
	max-width: 90%;
}

Mon préféré, mais hélas difficile à rendre compatible avec IE6... de plus, si on n'arrive pas à émuler le max-width dans IE6, on retrouve le danger d'une largeur fixée en EM.

2. largeurs max et mini en pixels, largeur globale en pourcentages
div#global {
	width: 70%;
	min-width: 720px;
	max-width: 980px;
}

C'est un simple width: 70%, mais où l'on combat les deux écueils rencontrés habituellement : résultat trop étroit sur un écran en 800x600 (ici avec du 720px on devrait être bon), et résultat trop large sur des très grosses résolutions (plus de 1280px de large).

3. Une petit subtilité pour la route...
div#global {
	width: 90%;
	max-width: 50em;
}

L'effet sera presque le même que le (1), alors qu'on a inversé les propriétés. Smiley murf
mpop a écrit :

Avertissements :
1. les largeurs en pourcentages c'est bien, mais si on ne met pas de limite ça peut donner des trucs tout étirés et des lignes de texte de 200 signes (longueur optimale : entre 40 et 70 signes)


merci de tenir compte de mon post précédent.
Sinon il n'est pas très utile de limiter en em un div#global.

Mieux vaut pour cela s'intéresser aux conteneurs des parties textes utiles eux même placés dans le conteneur principal. Il y a quand même une certaine complexité du document qu'il est bon de prendre en compte.
Administrateur
mpop a écrit :
Sinon, pour un conteneur global, on peut faire des choses marrantes avec mes min-width, width et max-width, en utilisant des EM, des pourcentages et des pixels.

Aaah peut-être un tuto sur les méthodes de design fluide : mon rêve ! Smiley langue

PS : je suis très sérieux, c'est une technique extrêmement intéressante et malheureusement sous-exploitée (à cause du manque de compatibilité d'IE6), mais un article qui dégrossirait tout ça et apporterait une solution serait redoutable !
Administrateur
clb56 a écrit :

Notamment la fin du document
http://www.clb56.fr/test_css/fluide_et_padding/#titre_exemple8

Ah merci, je ne connaissais pas cette astuce JS intéressante.
J'en ai d'ailleurs profité pour créer un nouveau point dans la FAQ : http://forum.alsacreations.com/faq/faq-81-Max-width-sur-Internet-Explorer.html

Je pense tout de même qu'un petit article expliquant pourquoi et comment faire un design fluide "intelligent" serait très utile. Je trouve ton tuto un peu trop orienté sur la technique, clb56.
Quelque chose de plus théorique sur l'intérêt de fixer des minima et maxima (lisibilité du texte, etc.) pourrait servir aux néophytes.
Modifié par Raphael (06 Jan 2007 - 12:20)
Raphael a écrit :
Quelque chose de plus théorique sur l'intérêt de fixer des minima et maxima (lisibilité du texte, etc.) pourrait servir aux néophytes.

La la la, mais qu'ai-je donc fait de ma To-Do List Alsa ?
Hop, item n°71 : un tuto sur une ou plusieurs solutions de design fluides intelligentes. C'est noté.
Raphael a écrit :

Je trouve ton tuto un peu trop orienté sur la technique, clb56.


En fait ce n'est pas un tuto, rien de ce que je fait n'entre dans la catégorie tuto. C'est d'ailleurs sur cet aspect que j'alerte sur l'accueil de mon site :
a écrit :

Ce site présente un certain nombre de tests et de réflexions sur quelques langages web. Les exposés qui le composent ne sont pas des tutoriels mais plutôt des comptes rendus de mes propres expériences.

Il est donc souhaitable de les appréhender avec tout l'esprit critique qui convient.


La première conséquence de cela c'est que je ne prend pas spécialement en charge les néophytes. Ceux ci peuvent donc trouver les exposés un peu abscons mais après tout l'état de néophytes n'est que transitoire et des ressources existent (et il y en a même certaines qui sont bonnes) par ailleurs.

Et si ce que je produit peut avoir une quelconque valeur c'est justement pour cette raison. Sans m'embarquer dans de la technique de très haut vol, on en est très loin en fait, j'impose à mes lecteurs éventuels le pre requisit d'un minimum de background qu'avec un minimum d'effort ils peuvent acquérir.

Pour le dire autrement je n'ai pas du tout l'âme d'un évangéliste.

C'était juste une précision...


PS :
je viens de regarder le point de FAQ et je viens de me rendre compte que je n'ai pas mis à jour mon propre topo quant à la gestion du cas js inactif pour IE less than IE7.
je règle ça tout de suite et reposte derrière
Modifié par clb56 (06 Jan 2007 - 13:54)
Pages :