Centrer dans la page sans rognage

(reprise du message précédent)

talvins a écrit :

Malheureusement, je constate de plus en plus qu'en CSS, on est loin de pouvoir faire ce que l'on veut.

Penser que la réalité nous accorde des circonstances où on peut faire tout ce que l'on veut est un pur fantasme.

Il y a toujours des contraintes et ce n'est pas en restant à l'extérieure d'un système à se plaindre ou à ironiser que l'on peut le comprendre, s'y adapter et finalement trouver des solutions voire faire preuve de créativité.

Les <table> non plus ne permettent pas de faire tout ce que l'on "veut". Il suffit de "vouloir" quelque chose d'infaisable.

A part ça, ceci répond-il à ta question?

++
Modifié par clb56 (20 Sep 2005 - 12:33)

clb56 a écrit :

Il y a toujours des contraintes et ce n'est pas en restant à l'extérieure d'un système à se plaindre ou à ironiser que l'on peut le comprendre, s'y adapter et finalement trouver des solutions voire faire preuve de créativité.

Voilà qui est très juste et très joliment dit.

Pour ma part, j'ai testé (longtemps) les mises en page par tableaux, puis celles en CSS.
Ce que j'en conclus :
- les tables sont plus faciles à utiliser pour débuter avec un WYSIWYG (comment la plupart des débutants)
- les CSS nécessitent un apprentissage dont le temps et l'investissement ne sont pas nuls
- les tables sont trop restrictives (cellules obligatoirement adjacentes, obligation de colspaner/rowspaner à tout va, etc.) pour vraiment pouvoir "se libérer" en terme de design
- les CSS sont bien plus larges d'esprit mais nécessitent malheureusement encore qulques accomodation pour les anciens élèves.

Pour ma part, je n'arriverai plus à me ré-enfermer dans la rigidité des tables... mais au moins j'ai testé les deux systèmes assez profondément.

Ce n'est en général pas le cas des détracteurs des CSS.
Modifié par Raphael (20 Sep 2005 - 12:51)

talvins a écrit :
Des sites très très laids en CSS, il y en a un gros paquet.

"Des sites très très laids" tout court, ça suffira.

Oui : on peut faire du laid en CSS, oui on peut faire du laid en tableaux. Oui on peut faire du beau en CSS et aussi en tableaux.

Que la structure soit en tableaux ou en CSS n'a strictement aucune influence sur l'esthétique du site.


Tu ne vas pas nous sortir le faux débat "CSS = pas beau" j'espère ?
Parce que là, on n'est pas sorti de l'auberge

Ces galeries prouvent chaque jour le contraire : http://forum.alsacreations.com/topic.php?fid=4&aid=26

a écrit :

Pour en revenir très briévement aux CSS, j'espère que vous l'avez compris, je critique bien leur compatibilité dans les navigateurs et non la théorie.

Donc on est bien d'accord, c'est les navigateurs et leur retard que tu critiques et non les CSS.

a écrit :
Mais qui sont-ils imposer leur loi ? Personne, au sens juridique. Donc réfléchissez qd même au fait que nous devons nous adapter au marché (dans certaines limites bien sûr : on demande à personne d'utiliser les effets de transition de IE) ! Sachant de toute façon que si c'est dans son intêret, le marché s'adaptera à nous.

Il n'y a pas de loi, heureusement.
Par contre, le jour où tous les navigateurs parleront le même langage, on pourra enfin faire des choses proprement, ne crois-tu pas ?
Modifié par Raphael (20 Sep 2005 - 16:09)

talvins a écrit :

Des sites très très laids en CSS, il y en a un gros paquet. Le professionnalisme ne trouve donc pas sa source dans l'utilisation, arrêtez de diverger !

Le professionnalisme ne s'arrête pas à l'esthétisme d'un site, cela en est qu'une partie. La qualité du côté technique derrière, l'accessibilité, le respect des normes, la séparation du contenu de la présentation, ce sont tous des éléments qui doivent (devraient) être respectés par les professionnels. Pour y arriver, l'utilisation des CSS est fortement recommandé, voir indispensable.
Modifié par Merkel (20 Sep 2005 - 17:12)

talvins a écrit :

clb56 me sort cet apologue si facile.

Il faudra m'expliquer où se trouve l'apologie et de quoi dans mes propos (mes propos à moi, pas ceux que tu crois entendre).

talvins a écrit :

les contraintes sont celles de mon client donc centrage H et V que ça me (et vous à plus forte raison) plaise ou non.

Cet aspect des choses est très sérieux mais pose, je trouve, beaucoup de question sur le positionnement professionnel des webmasters .

A titre de comparaison j'indique quand même que dans mon cadre professionnel propre (qui n'a rien à voir avec le développement web) c'est continuellement que je dois convaincre mes donneurs d'ordre que c'est bien mon expertise et les perspectives que j'indique qui doivent être pris en compte au nom du simple fait que ma compétence les assure que c'est bien ainsi qu'il sera répondu au mieux à leurs véritables attentes.

Dans ce genre de démarche je met en oeuvre tout l'aplomb que permet une maitrise professionnelle aboutie. Et désolé de le dire mais ça marche.

Sinon tu ne dis pas si le lien que je t'ai donné te convient, le revoici :
centrage vertical en design fluide
Modifié par clb56 (20 Sep 2005 - 20:44)

Je suis tout à fait d'accord avec clb56.

Lors d'une rencontre avec un de nos clients, celui-ci voulait absolument un menu de navigation à plusieurs niveaux qui se déroulait au passage de la souris. J'ai effectué des recherches au niveau de l'accessibilité et de l'ergonomie de ce genre de menu, et j'ai récolté divers arguments contre cette pratique. Nous avons par la suite réussi à convaincre le client de remplacer son menu interactif par un menu simple. Il faisait confiance à notre expertise dans le domaine et nous a laissé faire notre boulot.

Évidemment, tout n'est pas toujours parfait dans ce monde et il peut arriver de rencontrer des clients plus têtus qui ne veulent rien entendre. C'est peut-être le cas du client de talvins.

Ceci dit, jusqu'à présent, je n'ai jamais eu ce genre de problème avec nos clients. Nous avons toujours pu faire ce que nous avons jugé préférable pour leur site ou leur application.
Modifié par Merkel (20 Sep 2005 - 20:32)

Bonjour,

Quel est l'objet du débat ? Ou plutôt, des multiples débats qui s'entrecroisent ici :

- la facilité de réalisation en CSS v. en tableaux ?
- les limites inhérentes à CSS ou liées à ses implémentations ?
- les techniques de centrage horizontal et vertical non obstructives ?
- la démarche des donneurs d'ordre et leur conception de la page Web ?

La facilité avec laquelle on peut réaliser telle ou telle mise en page avec CSS ou à l'ancienne est question entièrement subjective à laquelle chacun répond selon son expérience. Je ne crois pas qu'il y ait vraiment matière à polémique.

Les limites inhérentes à CSS, il y en a. Même en ignorant les problèmes d'implémentation dans les navigateurs, CSS2.1 a des capacités théoriques limitées. Par exemple : il est possible d'utiliser diverses propriétés pour réaliser des mises en page en colonne, mais aucune ne correspond à un véritable colonnage (répartition du flux sur deux colonnes en fonction de sa longueur, par exemple). Il n'y a aucune raison de les nier.

Ces limites se conjuguent aux limites des techniques d'accessibilité : le centrage vertical posera des problèmes d'accessibilité faute d'outils permettant au navigateur de manipuler, par exemple, les éléments ainsi présentés pour les rendre pleinement accessible au clavier. Les menus déroulants et autres widgets tentant de faire des interfaces riches sur la base du HTML ne peuvent pas non plus être manipulés pour être rendus accessibles.

XHTML1.x et css2.x sont effectivement des formats aux capacités limitées. Des formats plus puissants sont donc en cours de développement, pour répondre à des besoins évidents, notament en matière de mise en page. Reste qu'on se trouve dans l'obligation de "faire avec" XHTML1.x et CSS2.x et de contourner ces limites. C'est ce que l'on fait quotidiennement en utilisant les flottants ou le positionnement absolu comme seuls outils de colonnage. Ces contournements sont plus ou moins satisfaisants. Mais il faut garder à l'esprit que ce sont des contournements qui ne remettent pas en cause la technique elle-même, mais son état actuel de développement.

S'y ajoutent les questions d'implémentation : CSS2.1 est partiellement implémentée actuellement, que ce soit par Firefox, Opera etc. ou plus encore par Internet Explorer. Là encore, cela contraint à contourner de nouvelles limites. Display:table permet de centrer verticalement et de réaliser des colonnes avec facilité, mais son absence de support par Internet Explorer oblige à se replier sur des astuces de hauteurs, de marges, etc. dans celui-ci. Display: inline-block permet de réaliser facilement certains effets de centrage horizontaux ou de colonnes, mais son absence de support dans Firefox oblige, là encore, à passer par des contournements.

Donc, il y a de nouvelles difficultés quand on développe sa CSS. Et à nouveau du temps à dépenser. Mais tomber dans une vision "figée" du problème est une erreur. Ces implémentations ont considérablement progressé depuis deux ou ans, et continuent à le faire à un rythme accéléré. Lorsque qu'on apprend, comme on vient de le faire hier, que la prochaine version d'Opera implémentera les Web forms 2.0 développés à l'initiative commune d'Opera, de Mozilla et de Safari... on prend la mesure de ces progrès de plus en plus rapprochés.

En particulier, il est plus que temps de se sortir du cliché "IE sera toujours à la traîne, IE7, c'est de la daube et de la blague, j'y crois pas". Mais pour cela, il faut commencer par lire ce qui est documenté à son sujet, au lieu de parler dans le vide. C'est une difficulté de plus, indéniable : Le Web n'est pas statique (il ne l'a jamais été), et nécessite un effort de formation et d'information permanent.

Une remarque, au passage : malgré ces implémentations encore partielles, il est faux de dire que les hacks CSS sont aujourd'hui une nécessité parce qu'il faudrait hacker dans tous les sens une CSS en fonction de tous les navigateurs. Les implémentations de Firefox, Opera et Safari sont aujourd'hui fortement convergentes, et les résolutions de bugs de rendu se multiplient à chaque version. En réalité, ces fameux bugs si exapsérants sont essentiellement ceux d'IE Windows et Mac, et la plupart des mises en pages complexes ne nécessitent ces hacks que pour cette famille de navigateurs. Ou plutôt que des hacks, des CSS en commentaires conditionnels bien plus faciles à gérer. Là encore, de nombreux développeurs CSS ont dans ce domaine bien des habitudes à revoir.

Le centrage horizontal et vertical d'une page Web entière, pour sa part, pose un problème bien spécifique. Ce n'est pas le centrage qui est vraiment en cause. Mais cette "réduction figée de l'affichage" tout droit issue des habitudes de design de l'imprimé. Le design Web n'est pas, contrairement à ce que pratiquent de très nombreux designers, une extension du design "classique". C'est un domaine entièrement différent. Là encore, il y a un apprentissage à faire, et des conceptions à revoir.

Enfin, ceci est encore plus vrai pour les donneurs d'ordre. Non seulement le design, mais toutes les notions de contenu, structure et comportement, sont très mal compris par de nombreux donneurs d'ordre qui les abordent comme s'il s'agissait des médias classique qui leurs sont familiers. Les développements Web irréfléchis de ces dernières années ont en outre créé des précédents fâcheux : le client demande, ou exige, ou impose ceci ou cela... sans savoir que ce n'est pas parce que c'est techniquement réalisable et qu'il l'a déjà vu faire que c'est approprié sur ce media. Voir à ce sujet les excellentes interventions de jcm et de jpv dans ce sujet qui porte justement sur le centrage.

En conclusion, la grande révolution culturelle à accomplir chez les donneurs d'ordre comme chez les designers réside sans doute dans le "lâcher prise" sur l'image au sens large apporté par le Web. Le design tout entier tout entier étant une image de l'entreprise, ainsi que de la compétence et du talent du designer, il n'est pas évident d'accepter de ne plus maîtriser étroitement celle-ci. Chaque internaute, chaque configuration de rendu, chaque application, chaque implémentation... en fera potentiellement quelque-chose de différent. C'est la grande peur du Web, mais c'est surtout sa grande force et l'un de ses principaux apports.
Modifié par Laurent Denis (21 Sep 2005 - 06:33)

Raphael a écrit :

Tu ne vas pas nous sortir le faux débat "CSS = pas beau" j'espère ?
Parce que là, on n'est pas sorti de l'auberge

mais pourquoi ne me lit-on pas ?
Je n'ai jamais, ne serait-ce qu'insinuer ça ! Par contre, le contraire (enfin, il ne s'agit pas vraiment d'un contraire) se voit souvent : des gens très fiers de montrer leur site partout parce qu'il est full CSS... mais très moche aussi, donc restez discrets

Raphael a écrit :
Donc on est bien d'accord, c'est les navigateurs et leur retard que tu critiques et non les CSS.

Parfaitement

Raphael a écrit :
Il n'y a pas de loi, heureusement.
Par contre, le jour où tous les navigateurs parleront le même langage, on pourra enfin faire des choses proprement, ne crois-tu pas ?

Tout à fait. Mais j'ai simplement un peu de mal à croire à cette utopie.

clb56 a écrit :
Il faudra m'expliquer où se trouve l'apologie et de quoi dans mes propos (mes propos à moi, pas ceux que tu crois entendre).

Oulà, t'emballes pas gars ! "apologue" est un mot, un vrai, du dico (pas comme "implémenté" )
Tu veux un vague apologue à ton encontre ? "Si les personnes qui répondent à mes messages connaissaient le français aussi bien qu'ils défendent le CSS, on pourrait avancer plus vite". (blague, boutade, déconnade quoi, parce que je suis le premier à laisser un paquet de fautes.)

Merkel a écrit :
Évidemment, tout n'est pas toujours parfait dans ce monde et il peut arriver de rencontrer des clients plus têtus qui ne veulent rien entendre. C'est peut-être le cas du client de talvins.

C'est un peu ça. Le débat a dérivé parce qu'on a pas le droit de toucher au sacro-saint CSS alors que ma question, simplissime, portée sur le centrage. Il s'agissait d'une question, pas d'une demande d'analyse esthétique, pratique, conceptuelle sur le centrage.
C'est un cas unique, c'est aussi une question de curiosité (se dire "c'est nul alors faut pas le faire, c'est un peu léger").
Mon client est en fait une boite de com par qui passe mon client pour le design de son site.
Au passage, cette boite prend 2,5 fois plus pour faire uniquement le graphisme (très sommaire et banal au final !), que j'ai de plus arrangé, que moi pour faire tout un site, graphisme compris.

Et puis entiérement d'accord avec l'exposé de Laurent Denis.

a écrit :
habitudes de design de l'imprimé

ce qui est normal puisque ceux qui ont "designer" le site font essentiellement de l'imprimé.

Bon voilà, tout a été dis je crois

Ah oui, clb56, merci pour ton script mais mon problème est que le div centré est de taille fixe (eh oui, nous sommes vraiment dans la réplique de l'imprimé).

talvins a écrit :

C'est un peu ça. Le débat a dérivé parce qu'on a pas le droit de toucher au sacro-saint CSS

Eh non tu te trompes encore une fois de cible

On s'en fiche un peu que tu critiques les CSS en fait.
Mais lorsqu'on dit que "les CSS ne permettent pas ci, ou ça" et que c'est faux, ça commence à énerver et je reprends : "les CSS le permettent; mais les navigateurs sont en retard". Ne vous trompez pas de cible.

Bref :
- les DVD c'est super bien
- tout le monde n'a pas encore de lecteur DVD
- donc les DVD ne sont pas bien et ne remplissent pas leur rôle ?

talvins a écrit :




Oulà, t'emballes pas gars ! "apologue" est un mot, un vrai, du dico (pas comme "implémenté" )
Tu veux un vague apologue à ton encontre ? "Si les personnes qui répondent à mes messages connaissaient le français aussi bien qu'ils défendent le CSS, on pourrait avancer plus vite".

si apologue = "courte fiction destinée à illustrer une vérité morale".

alors je ne vois pas trop le rapport
Modifié par clb56 (21 Sep 2005 - 13:39)

talvins a écrit :

Oulà, t'emballes pas gars ! "apologue" est un mot, un vrai, du dico (pas comme "implémenté" )
Tu veux un vague apologue à ton encontre ? "Si les personnes qui répondent à mes messages connaissaient le français aussi bien qu'ils défendent le CSS, on pourrait avancer plus vite".

Sic

Antidote (druide.com) a écrit :

implémenté
[INFORMATIQUE] [Critiqué] Réaliser la phase finale d’élaboration d’un système, afin que le matériel et les logiciels soient concrètement opérationnels.

Désolé pour là, y'a des lourdeurs qui s'installent, alors je ferais très bref.

Lecteur DVD de Raphael : comparaison ridicule -comme souvent dans les comparaisons et je suis le premier à en faire- et qui, justement, va à contre-sens du propos. En effet, le DVD-vidéo est un standard. Et il est pleinement respecté par tous les lecteurs DVD. Le CSS est un standard, pas du tout respecté par tous les browser.

clb56 : ta petite phrase sur émouvante sur 'adapte toi aux contraintes ou crêve' et un apologue, que tu le veuilles ou non, ça s'appelle ainsi.

Stephan : décidemment, vous aviez raison, le troll arrive mais franchement, ça ne sera pas de moi. Donc implémenté, dans le dico du petit geek, il y est (en encore, ils ajoutent [critiqué]). Et je vais te dire "gromelufier" est dans le mien que j'ai écrit. Mais dans un dico de référence (comme un standard quoi), disons http://atilf.atilf.fr/, ça n'existe pas.

Et donc, pour la nième fois (après vous risquez d'être finalement très lourdo avec cette puissance argumentaire), je me fous royalement de la vie des CSS, que j'utilise : je veux centrer H et V sans qu'on me fasse la morale, ce qui semble impossible.

talvins a écrit :
Désolé pour là, y'a des lourdeurs qui s'installent, alors je ferais très bref.

On va faire bref en réponse, vu que tu ne lis manifestement pas les réponses détaillées.

- Centrage horizontal: pour éviter le rognage, comme indiqué dès les premières réponses, ne pas centrer par les marges négatives. Voir le tuto d'alsa cité dans la réponse. de ce côté, aucun problème.

- Centrage vertical: ça ne rogne pas obligatoirement, mais ça marche mal, et il a été amplement expliqué pourquoi. Il n'est pas possible de l'utiliser sans générer les problèmes qui y sont associé. A part un rituel vaudou, un grigri, une sainte relique ou une intervention transcendantale quelconque, il n'y a pas moyen. C'est comme ça. CSS est à la fois mal fichu et mal implémenté. Si ton client exige un centrage vertical, fais-le sans état d'âmes et en connaissance de cause.

Voilà, tu sais tout.

<edit> Pour ma part, on peut taper sur CSS autant qu'on veut. Il y a d'excellentes raisons de le faire. C'est juste d'une utilité souvent limitée si on s'arrête là. </>
Modifié par Laurent Denis (23 Sep 2005 - 10:30)

bonjour :

a écrit :
Lanza a écrit :

En fait pour faire vraiment bien, il ne faudrait pas véritablement le centrer mais le positionner selon le nombre d'or biggol (soit approximativement au tiers de la surface disponible), là où l'oeil va le chercher en premier. (voir pour un bel exemple, les message d'erreur sous MacOS)



Cas-type de transposition brutale des règles de l'imprimé aux medias Web. Est-ce avisé ? Pertinent ?

Bookmark : Etude comportementale Eye track III de l'insitut Poynter

Jean-pierre

talvins a écrit :
Lecteur DVD de Raphael : comparaison ridicule -comme souvent dans les comparaisons et je suis le premier à en faire- et qui, justement, va à contre-sens du propos. En effet, le DVD-vidéo est un standard. Et il est pleinement respecté par tous les lecteurs DVD. Le CSS est un standard, pas du tout respecté par tous les browser.

J'aime le ridicule dirait-on.
- Le DVD n'est pas compatible sur les anciens lecteurs... VHS qui ne comprenaient pas encore la technologie DVD.
- CSS2 (considérant qu'il y'a des centaines de propriétés à intégrer), c'est plus ou moins pareil : c'est standard, mais des navigateurs comme IE6 (dont le moteur et le support CSS date de 1999) ne comprenaient pas encore correctement cette technologie.

Allons plus loin : le DVD vidéo n'est pas supporté par tous les lecteurs.
Durant des années, il y'a eu deux "standards" : le DVD-R et le DVD+R. Le premier développé par Pioneer a longtemps été considéré comme standard jusqu'à ce qu'une autre norme (+R) vienne lui faire concurrence, cette norme étant bien évidemment incompatible au début.
Donc NON, même aujourd'hui, tous les formats DVD ne sont pas compatibles sur tous les lecteurs.

Actuellement presque tous les lecteurs supportent les deux formats DVD... mais tant que les gens ne changeront pas leur lecteur, il restera des incompatibilités.
Hmm sauf si je me ridiculise à nouveau, c'est la même chose pour les CSS.
Modifié par Raphael (23 Sep 2005 - 10:37)

a écrit :
"Sans parler du temps qu'il faut pour s'adapter aux différents bugs de IE (85% du marché minimum)"

Juste pour alimenter le débat : L'un des freins principal à l'adoption de CSS en remplacement de la conception par table est la période nécessaire pour abandonner la transition cellule=div, wiewport=quadrillage.
Lors de l'apprentissage on constate que cette transition est longue et douloureuse.

Les bugs d'IE ne concernent pas à proprement parler la conception CSS elle-même, ils limitent certaines possibilités, complique la tâche mais n'interdisent absolument aucun modèle de conception CSS.

Il n'y aucun modèle, issus de la conception par tables qui ne soit pas reproductible en CSS, mais de toute manière ça n'à aucun intérêt...

Jean-pierre

Raphael a écrit :

J'aime le ridicule dirait-on.
- Le DVD n'est pas compatible sur les anciens lecteurs... VHS qui ne comprenaient pas encore la technologie DVD.
- CSS2 (considérant qu'il y'a des centaines de propriétés à intégrer), c'est plus ou moins pareil : c'est standard, mais des navigateurs comme IE6 (dont le moteur et le support CSS date de 1999) ne comprenaient pas encore correctement cette technologie.

C'est bien ça qui est drôle avec les comparaisons : ça peut toujours être utilisé mais aussitôt contredit.
A ma connaissance, il n'y a pas 2 standards CSS. Donc incomparable avec les formats -R et +R. Il faudrait plutôt parler de l'encodage, mpeg2 en débit variable en 720x576. Ca passe sur tout les lecteurs car c'est ça, le vrai standard. L'autre c'est dans une couche plus proche du support.

Mais bon, tout ça pour lire que je peux pas centrer H et V donc ça valait bien la peine

Etonné que Laurent n'ait pas répondu ça, même si je peux esquisser une raison -> il veut pas de vilain site centré en hauteur avec hauteur fixe

Mais pourquoi tu n'utiliserais pas un tableau tout bête globalisant ton site puisque le support des CSS trouve ses limites ?

Tu fous la page dans une cellule de tableau avec le vertical-align qui va bien et ensuite tu fais tout le reste proprement comme tu semblais être en train de le faire.

Pour reprendre la philosophie de Laurent à ce sujet, quand l'implémentation des CSS trouve ses limites à l'heure actuelle, pourquoi ne pas utiliser *un p'tit peu* les techniques desuettes qui deviennent pas si desuettes pour des cas isolés comme celui ci.

Par contre, pas d'imbrication de tableaux etc.

<edit mod="a prendre sur le ton de la rigolade">Arretez avec vos bidules sur le DVD, c'est ridicule sérieux
La comparaison aurait pu être interessante (et encore, j'en sais rien, j'avoue que j'y ai pas réfléchi et que vu le casque à pointe que j'ai dans la tête, je m'en fout en fait ^^) mais bon, là vous partez en "freestyle", je vous modère tiens !!</edit>
Modifié par Olivier (23 Sep 2005 - 19:57)

Heureusement que l'on s'est rendu compte que c'était ridicule, mais c'est justement tout ce qui fait le charme (ou la bétise ?) des comparaisons.

Pour le centrage par tableau, c'est sûr, mais j'avais fait tellement d'effort pour dégager les tables de ma tête que je suis comme (ah tiens, une comparaison ) un ancien fumeur qui vomis devant l'odeur d'un clope.
Bon là, Raphaêl me dirait que l'ex-fumeur il reste drogué toute sa vie et qu'il risque qd même d'en mourir un jour, même s'il a arrêté...

Ceci dit, vu ce qu'on me demande de faire, tu as bien raison, je vais arrêté de m'emmerder à chercher des heures et des heures un truc dont ils se foutent éperdument (le centrage en css).