Discussion :

[redwire]

Bonjour!

Comparer l'affichage de cette page sous Firefox et IE en cliquant ICI

L'image, les renseignements à coté d'elle et la liste sont décalés vers la droite sous FF (ce que je souhaite, en fait centrés) tandisq qu'ils sont collés à gauche sous IE...

Pourtant j'utilise ça dans mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<table  align="center" >

ça ne marche pas sous IE? ou il y a autre chose?

Merci

[Kerod]

Si tu utilises directement la propriété text-align : center ça te donne quoi sous IE ?

[Erwan31]

Bonsoir,
d'un part l'attribut align comme tous les attributs de présentation, est
invalide en XHTML strict (ton doctype) et d'autre part je vois que tu utilises
encore beaucoup les tableaux qui ne sont pas toujours très appropriés...

Si tu souhaitent passer en douceur à la mise en page sans tableaux mais que tu
souhaites encore toutefois les utiliser, choisi un Doctype XHTML transitionnal.
Les attribut comme align sont tout à fait valide en transitionnal.

Ton decoupage en tableaux n'est pas très robuste, tu risques vite d'être
confronté à d'autre problème que tu ne maitrises pas.

Je te conseil donc de revoir toute ta structure

[redwire]

Bonsoir,
d'un part l'attribut align comme tous les attributs de présentation, est
invalide en XHTML strict (ton doctype) et d'autre part je vois que tu utilises
encore beaucoup les tableaux qui ne sont pas toujours très appropriés...

Si tu souhaitent passer en douceur à la mise en page sans tableaux mais que tu
souhaites encore toutefois les utiliser, choisi un Doctype XHTML transitionnal.
Les attribut comme align sont tout à fait valide en transitionnal.

Ton decoupage en tableaux n'est pas très robuste, tu risques vite d'être
confronté à d'autre problème que tu ne maitrises pas.

Je te conseil donc de revoir toute ta structure

Merci pour ces précisions...
C'était justement à cette conclusion que j'arrivais...
Etant donné que ces premières pages ont été écrites il y a quelques temps en effet...

[Lancelot du Lac]

Si pour ma part je devais te donner un conseil, je te dirai de passer en transitional et de pas te prendre le chou. C'est quand même un comble de même pas pouvoir faire un petit div align="center" ou un petit td nowrap="nowrap".

Ceci dit, contrairement à certains ici l'informatique n'est pas mon métier alors il y a des choses que j'ignore. Tout ce que je peux dire, c'est que ma vie a été grandement simplifiée le jour où j'ai passé mon site en transitional.

Et puis franchement, aujourd'hui on est en 2008 et on a toutes les raisons de croire que le xhtml est un cul-de-sac technologique. Et ces discours qu'on lit encore un peu partout sur les "vieux webmaster qui ont du mal à s'adapter..." Eh bien, ce sont précisément ces discours qui commencent à sentir le vieux. A mon avis, tu n'as aucune raison de craindre que ton site finisse par ne plus marcher parce qu'il est en xhtml transitional plutôt qu'en strict. Le jour où les navigateurs se mettent à parser le xhtml comme du xml, une grosse partie des pages invalides cesse d'être affichée, c'est pas plus compliqué que ça. Imagine un peu l'état du web. J'ai l'impression que même le w3c semble croire plus en html5 (pour dans trèèèès longtemps) qu'en une hypothétique nouvelle version de xhtml...

Quant à cette querelle des tableaux contre les div... Les tableaux sont plus pratiques et plus simples à mettre en place, c'est un fait. Et non, ce n'est pas juste une question de vieux webmaster qui a du mal à changer ses vieilles habitudes, parce que personnellement il y a quatre mois j'étais juste un blogger et je connaissait tout juste un peu les div, et pas du tout les tableaux. Tant qu'on veut disposer des blocs horizontalement et sans que l'un d'entre eux se fasse enrouler par les autres, c'est plus facile de le mettre en place avec des tableaux. Les div quant à eux sont plus puissants mais plus complexes; ils deviennent intéressants seulement à partir du moment où on doit faire un float.

Avec le xhtml transitional, tu gagnes la possibilité de faire les choses plus simplement, que ce soit pour les div ou pour les tableaux.

Mais si je dis tout ce que j'ai dit ci-dessus, c'est moitié par provocation, moitié pour m'instruire. Je sais que pour la plupart, les pros du développement web ne pensent pas comme ça, ils ont probablement de bonnes raisons. Simplement, si je raisonne en fonction de mon expérience et de mes connaissances de développeur amateur, j'arrive à ces conclusions. Alors je suis curieux de savoir ce qu'il y a dont je n'ai pas conscience.

[Erwan31]

Si pour ma part je devais te donner un conseil, je te dirai de passer en transitional et de pas te prendre le chou. C'est quand même un comble de même pas pouvoir faire un petit div align="center" ou un petit td nowrap="nowrap".

Rien ne t'interdit d'utiliser l'attribut align comme d'écrire encore du simple HTML, d'ailleurs le XHTML 1.0 n'apporte aucun gain qualitatif aussi bien
d'un point de vue sémantique qu'au niveau de l'accessibilité...
Le but et l'intérêt essentiel du Strict aussi bien HTML qu'XHTML est de séparer la structure et le contenu de la présentation afin d'externaliser la mise en forme pour faciliter sa mise à jour et favoriser son indépendance au média de sortie (print, handheld...).

Les tableaux sont plus pratiques et plus simples à mettre en place, c'est un fait.

De ton point de vue peut-être mais dans l'absolue pas forcément...
Par exemple la mise en page en tableau ne favorise pas la modularité des éléments qui la constitue ou l'ajout de contenus dans certains cas de figure.

Avec le xhtml transitional, tu gagnes la possibilité de faire les choses plus simplement, que ce soit pour les div ou pour les tableaux.

Pourquoi ça?

[Lancelot du Lac]

Pourquoi ça?

De mon point de vue c'est pourtant assez évident. Compare par exemple les deux bouts de code suivants:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
(...)
<div align="center">Ceci est un contenu</div>
(...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
(...)
.CSScanbequiteheavy {
margin-left:auto;
margin-right:auto;
}
(...)
<div class="CSScanbequiteheavy">Ceci est un contenu</div>
(...)

En xhtml transitional, les deux sont pris en compte. En strict, seulement le deuxième. A minima, le transitional offre la possiblité de coder avec beaucoup plus de légèreté. Oui, le CSS offre des avantages dans certains cas, maintenant on n'a pas forcément envie ou besoin de définir une classe pour le moindre petit élément de présentation.

D'autre part, et cette comparaison est à ce propos particulièrement éloquente, mettons-nous à la place de quelqu'un qui apprend. Le premier code ne lui pose aucune difficulté particulière. Pour l'acquérir, il lui suffira par exemple d'observer le code des pages en transitional qu'il fréquente.

Mais pour le deuxième c'est une autre paire de manche. Soit notre débutant devra bénéficier d'un cours, soit il faudra qu'il aille déchiffrer la spécification CSS2 du w3c et qu'il ait le bonheur de ne pas louper le passage suivant: "If at this point both 'margin-left' and 'margin-right' are still 'auto', solve the equation under the extra constraint that the two margins must get equal values."

A mon tour de poser une question. En xhtml strict, comment fait-on pour obtenir l'équivalent d'un <td nowrap="nowrap">? Parce que là, on a beau me dire "deprecated, use styles instead," je dois bien avouer que j'ai jamais trouvé (pour la petite histoire, une cellule de ce type se trouve légèrement à à droite de celle qui contient le texte que vous êtes en train de lire; EDIT: mince je me suis trompé, la colonne nowrap="nowrap" ne se trouve pas sur cette page, mais sur l'index et sur les page d'acceuil différents forums; on trouve d'ailleurs la même chose sur les forums PHPBB).

[MasterOfChakhaL]

Salut,

Je trouve quand même que tes exemples ne sont pas très bien choisis... Moi, j'en ai un autre qui prêche pour ma paroisse:

Il y a quelques mois, je me suis occupé de la refonte du site de ma boîte. Ils avaient commandé des prototypes pour différentes pages du site qu'on n'aurait plus eu qu'à remplir avec les contenus qui vont bien.
Quand on a vu le code qui était derrière ça, ca n'a pas durer longtemps avant qu'on décide de re maquetter le tout en utilisant réellement du CSS.

En caricaturant, le code ressemblait un peu à ca:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.greenText { color: green; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<table>
  <tbody>
    <tr>
      <td>
        <table>
          <tbody>
            <tr>
              <td>
                <div class="greenText">Ce texte est vert!!</div>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Et encore, je ne parles pas de l'incroyable quantité d'événement javascript dont l'utilité paraissait parfois douteuse...

Résultat, sur l'exemple de la page d'accueil, on obtient un gain de poids qui est presque de x10 en notre faveur (ils avaient grandement déconner avec les imbrications de tableaux).
Si on s'interesse un peu au référencement, on constate que sur la première maquette, le contenu de la page commence a peu prêt à la ligne 1000 alors que sur notre correction, le contenu commence à peu prêt à la ligne 50 (entêtes comprises).

Sur notre page d'accueil, nous avons trois grandes zones genre actu, liens rapides et cie qui se retrouvent sur une petite colonne sur les autres pages. Et bien l'include est le même, il n'y a rien eu à réécrire côté html.
Et c'est logique puisque que le contenu est identique. (Par contre un autre bout de css a été écrit).
Avec une mise en page à base de tableaux, cela n'aurait pas été possible.

En continuant à mettre de la présentation dans le html:
- Tu alourdis le code (il devient moins lisible).
- Tu luttes contres la maintenabilité.
- Tu perds le C de CSS (cascaded) qui lui donne toute sa puissance.
- Tu alourdis l'utilisation de la bande passante de ton visiteur qui ne peut pas profiter du css de ton site qui est mis en cache une fois pour toute.
- Tu te retrouves à devoir dupliquer des choses si tu veux que ton site soit dispo sur différents supports (écran ordi ou TV, pda, papier...).

bref, y'a aussi des inconvénients...

Je comprends parfaitement que quelqu'un dont ce n'est ni le métier ni la passion soit réticent à apprendre des nouvelles technologies qui ne sont pas forcément évidentes. Par contre je trouve mauvais l'argument qui dit que "plus facile" égal "mieux et plus adapté".

Excuse moi si j'ai quelque peut déformer ton propos. Si c'est le cas, ce n'était pas mon but.

[Lancelot du Lac]

J'essaye de ne pas avoir de passion, car la passion, c'est le fait de pâtir. Par contre, l'argument de la réticence à apprendre ne tient pas vraiment dans mon cas, puisqu'au moment où j'ai commencé à créer des pages web, tout était nouveau pour moi, le CSS pas plus que le reste. Je suis précisément celui qui apprend de nouvelles technologies pour son plaisir. C'est bien pouquoi à mon humble avis, et contrairement à ce qu'on lit partout, ce n'est pas la résistance à la nouveauté qui explique la faible pénétrance des DTD strictes, simplement le fait qu'elles empêchent l'utilisation de tout un tas de choses qui, pour ne pas être indisplensables, sont tout de même infiniment pratiques. La recherche de la facilité par contre y est effectivement pour quelque chose. Quand plusieurs méthodes permettent d'atteindre un résultat, on a intérêt à utiliser la plus simple. Cela vaut dans les deux sens: s'interdire d'utiliser le CSS, c'est se compliquer la vie; être jusqu'au-boutiste dans la séparation du contenu de la présentation, c'est se compliquer la vie. Sur le principe, je trouve que la DTD stricte est stupide au même titre qu'une déclaration qui interdirait totalement l'utilisation du CSS serait stupide. Peut-être est-elle le fruit d'une raison aveuglée par la passion?

Et je trouve que mes exemples n'étaient pas si mal choisis, puisque c'est précisément pour ce genre de raison que la plupart des pages sont écrites en transitional. Je viens de regarder, même la page de la spécification du CSS2 par le w3c est écrite en transitional... on y trouve d'ailleurs un <p align="center"> et un <p align="right">. A y regarder vite fait, tout le reste de la page semble faire appel à du CSS. Je prends cet exemple car il est assez révélateur. On peut penser que quiconque a créé cette page n'avait aucune envie de rédiger du CSS pour deux toutes petites choses qui n'interviennent chacune qu'une seule fois dans son document. Il s'est simplifié la vie. Par contre, pour les éléments qui font intervenir beaucoup de présentation et ceux qui sont repris un grand nombre de fois dans le document, il a utilisé le CSS.

D'autre part, parfois on choisit sciemment de sacrifier un peu portabilité contre le fait de coder plus vite.

Mais, et en dépit de tout cela, l'auteur qui veut séparer entièrement la présentation du contenu, il peut quand même le faire en transitional. Pour cet auteur, les attributs de présentation restent quand même bien pratique à utiliser de manière transitoire pour faire du débug (exemple: est-ce que je suis en train d'essayer de centrer un élément alors que c'est impossible ici, ou est-ce que c'est bêtement mon CSS qui n'est pas pris en compte?)

Et enfin, je réitère ma question: comment fait-on pour obtenir l'équivalent d'un <td nowrap="nowrap"> en CSS? Ca c'est un truc que j'ai jamais trouvé. Or il paraît que les éléments de présentation peuvent être entièrement remplacés par du CSS. je devrais peut-être ouvrir un fil là dessus.

[Erwan31]

Bonjour,
tu lances un débat intéressant mais ne sois pas si excessif et sévère avec le strict

+1 avec les arguments de MasterOfChakhaL.
Il montre là l'exemple typique de ce qu'il faut éviter de faire et je rajouterais
que les tableaux imbriqués (même 1 niveau d'imbrications) sont catastrophique en terme d'accessibilité, et ralentissent l'affichage du contenu sous IE. En effet IE attend d'avoir atteint la fin d'un tableau conteneur pour afficher son contenu.
Mais je ne suis pas un anti-tableaux primaire, un tableau non imbriqué et bien linéarisé peut être une alternative intéressante lorsqu'on est limité par CSS...
L'utilisation abusive des tableaux pendant des années vient d'ailleurs principalement d'un support CSS trop faible et d'une interprétation trop hétérogène (équivalente grosso modo au mode de rendu Quirks) sur les anciens navigateurs.

C'est bien pouquoi à mon humble avis, et contrairement à ce qu'on lit partout, ce n'est pas la résistance à la nouveauté qui explique la faible pénétrance des DTD strictes, simplement le fait qu'elles empêchent l'utilisation de tout un tas de choses qui, pour ne pas être indisplensables, sont tout de même infiniment pratiques. La recherche de la facilité par contre y est effectivement pour quelque chose.

Je crois qu'on utilises du transitionnal pour plusieurs raison, soit pour que le l'attribut target des liens ou les iframe soient valides, soit pour les raisons que tu cites même si elles sont plus rares, soit pour être valide, soit lorsque l'on souhaites encore utiliser des tableaux avec des images dedans, etc.
En effet le doctype transitionnal déclenche un mode pas tout à fait standard inventé par Mozilla que l'on appelle mode Almost standard (sur les dernières versions de Firefox, Safari et Opera) plus proche du mode Standard d'IE et qui diffère essentiellement sur un point : il supprime les espaces sous les images en convertissant leur display à inline-block...

Mais une fois qu'on maitrise assez bien CSS et que l'on sait ce qui est valide ou pas en strict, amha le seul argument valable pour utiliser du transitionnal
est l'utilisation de l'iframe qui bien implémenté n'a rien d'inaccessible.
Le targert en revanche est à éviter...

Quand plusieurs méthodes permettent d'atteindre un résultat, on a intérêt à utiliser la plus simple.

..et la plus facile à mettre à jour aussi.
Quand on maitrise CSS, ça devient aussi simple que l'utilisation des attributs HTML.

Cela vaut dans les deux sens: s'interdire d'utiliser le CSS, c'est se compliquer la vie; être jusqu'au-boutiste dans la séparation du contenu de la présentation, c'est se compliquer la vie.

Je suis d'accord avec toi sur le fait qu'il est illusoire de séparer totalement le présentation du document HTML sur de gros projets sans template et ou l'efficacité prime.
Mais non pas oublier Lancelot du Lac que les style en-ligne sont là pour ça et qu'ils vont plus loin que les attributs HTML.

Même la page de la spécification du CSS2 par le w3c est écrite en transitional... on y trouve d'ailleurs un <p align="center"> et un <p align="right">. A y regarder vite fait, tout le reste de la page semble faire appel à du CSS. Je prends cet exemple car il est assez révélateur.

Ne sais tu pas que les cordonniers sont souvent les plus mal chaussés
Pour moi ce n'est pas une raison... Il y a des centaines d'exemples comme ça! Ca peut aussi venir d'un manque de temps ou d'intérêt.
Un des meilleurs exemples est le site d'Eric Meyer (le grand manitou des CSS) qui est en HTML 4.0 transitionnal, ce qui m'étonne qu'à moitié.
Et je crois qu'il y a encore 2 écoles en dépit de ce qu'on a pu évangéliser
sur XHTML.

On peut penser que quiconque a créé cette page n'avait aucune envie de rédiger du CSS pour deux toutes petites choses qui n'interviennent chacune qu'une seule fois dans son document. Il s'est simplifié la vie. Par contre, pour les éléments qui font intervenir beaucoup de présentation et ceux qui sont repris un grand nombre de fois dans le document, il a utilisé le CSS.

Pourquoi encore utiliser les attribut HTML alors que les style en-ligne sont là pour ça, si ce n'est par refus d'apprendre?

Et enfin, je réitère ma question: comment fait-on pour obtenir l'équivalent d'un <td nowrap="nowrap"> en CSS? Ca c'est un truc que j'ai jamais trouvé. Or il paraît que les éléments de présentation peuvent être entièrement remplacés par du CSS. je devrais peut-être ouvrir un fil là dessus.

Oui avec les style en-ligne tou en étant valide > style="white-space:nowrap"

[Candygirl]

Bon j'efface la moitié de ma réponse vu qu'Erwan31 est passé entre deux j'ajouterais juste 2 petits points:

Et je trouve que mes exemples n'étaient pas si mal choisis,...

Je trouve, au contraire ton exemple assez mal choisi puisque ces 2 notations ne donnent pas le même résultat. Dans ton contexte l'équivalent css aurait été:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.CSScanbequiteheavy {
  text-align:center;
}

ce qui me semble assez parlant pour un débutant

Je viens de regarder, même la page de la spécification du CSS2 par le w3c est écrite en transitional...

Perso je constate que la recommandation css2 (de même que la candidate 2.1) n'a qu'un doctype incomplet, relant d'un autre temps. Il faut savoir que la 2 date de 1998 et donc à l'époque, les doctypes.... Ce n'est pas parce qu'une nouveauté arrive que tous les sites web vont se mettre à la page immédiatement, tu imagines aisément les coûts que cela engendrerait pour les entreprises de faire remonter entièrement leur site juste pour correspondre aux standards actuels. Ils vont donc plutôt attendre l'occasion d'une refonte pour améliorer l'accessibilité et adopter les nouveaux standards.

Ce qui est important c'est d'observer les nouveaux sites et de voir quel doctype ils adoptent et surtout de quelle manière le site est construit. Tu remarqueras donc que, pour ses travaux sur css3, le w3c a opté pour un doctype html4.01 strict, que sa home actuelle est en xhtml 1.0 strict,...

Après, le doctype est une chose, mais on peut très bien avoir un site très mal construit et valide xhtml strict et un site bien plus pertinent en html transitionnel (ne serait-ce que pour les raisons évoquées par Erwan31).

[Lancelot du Lac]

erwan: merci pour le nowrap

candy (sur align et text-align): mince exact je m'étais gourré. Au temps pour moi. Comme quoi je dois avoir quelques éléments sur mon site qui ne se comportent pas comme je pensais (mais au final dans mon cas le rendu est le même).