XHTML/CSS/W3C dans la vraie vie

[AntoineViau]

Hello tout le monde !

Je suis actuellement en train de développer un site que l'on pourrait apparenter à un site de petites annonces. C'est un service assez complet avec plein de choses comme : espace perso, messagerie, interne, moteur de recherche spécifique, etc.

Comme je veux aussi être dans la "hype", au top du move de la techno, j'ai décidé de tout construire en XHTML/CSS/W3C compliant. J'ai longtemps été énervé par les promoteurs des standards à cause du ton qu'ils emploient, mais comme je suis d'accord sur le fond (vive les standards !) et que je ne suis pas un "conseilleur" mais un "acteur", moi je mets les mains dans le cambouis avant de donner mon avis.

A la base je suis développeur et la méthodologie du bazar me convient tout à fait (séparation contenu/structure/présentation). Ca oblige à la rigueur, à la propreté, etc. Ce qui fait qu'aujourd'hui j'ai un superbe site où il n'y a pas une once de présentation dans le XHTML. La structure est tip-top, tout est décomposé comme il faut. Mon CSS se résume à du noir & blanc et aucune image pour le moment. Jusque là tout va bien, je suis très content.

Je commence donc tout juste à attaquer la partie "présentation". Et là, j'ai l'impression de revenir 5 ou 10 ans en arrière tellement les contraintes et les incohérences (entre navigateurs) limitent le champ d'action. Je parcours le web depuis pas mal de temps pour apprendre mais j'ai le sentiment que tous les donneurs de leçons et auteurs de tutorials ont oublié que le web ça n'est pas seulement des blogs.

Soit dit en passant, histoire de continuer dans le mauvais esprit, avez vous remarqué que les sites des grands chevaliers FF/OSS/LL/W3C/etc. sont souvent les plus moches ? (ou alors ils sont tous pareils) (ok j'arrête)

- CSS Zen Garden c'est bien joli mais ça me dit pas comment afficher la liste des messages internes sans tableau...

- pareil pour une liste de produits où je dois afficher : photo, prix, titre et boutons d'actions (panier, zoom, etc)

- Ce me dit pas non plus comment avoir 4 boutons sur la page d'accueil disposés "en carré", toujours sans tableau...

- Et si je veux faire autre chose que des colonnes ?

- etc.

Enfin bref, j'en ai fini pour le coup de gueule et je voudrais savoir si certains d'entre vous ont de quoi me contredire. Autrement dit, pourriez vous me donner des sites qui soient autre chose que des blogs et qui sont W3C compliant avec séparation contenu/structure/présentation ?

Attention, je vous parle de vrais sites utilisés par des vrais gens pour faire du vrai argent : des boutiques, des sites de services (genre ebay ou 2xmoinscher), etc.

Merciiiii

Antoine

[kiara]

www.eyrolles.com est une boutique avec un code valide, XHTML strict.

Mais ceci ne repondra peut etre pas a ton interrogation.

ensuite si tu veux comprendre, apprendre et tout savoir sur le positionnement des division en CSS : alsacreations

[Loupilo]

J'espère que tu ne seras pas gêné par mon «ton»

Bonne résolution de te lancer dans les standards, qui seront au fur et à mesure de mieux en mieux supportés.

le coup des messages internes j'ai pas capté, c'est quoi exactement ?

*pareil pour une liste de produits où je dois afficher : photo, prix, titre et boutons d'actions (panier, zoom, etc)

Ce sont des données tabulaires, pourquoi s'affranchir d'un tableau ?? Un tableau sert à présenter du contenu, pas à faire la présentation d'un site. Dans ton cas, tu en ferais un usage correct !

*Ce me dit pas non plus comment avoir 4 boutons sur la page d'accueil disposés "en carré", toujours sans tableau...

Là, il s'agit donc d'une liste.

Alors, construit une liste en html, comme ceci :

<ul> <li>Élément 1</li> <li>Élément 2</li> </ul>

Ensuite, dans ta feuille de style, tu peux choisir de mettre la liste en ligne :

li { display:inline; }

*Et si je veux faire autre chose que des colonnes ?

Ben tu peux tout faire en CSS

Pour les "gros" sites valides, il y a effectivement Eyrolles, mais aussi Lycos.fr ou encore Macromedia France.

Aux dernières nouvelles, ces 3 sites marchaient très bien

(je n'ai pas osé citer skyblog.com, mais effectivement, pour eux aussi ça roule !)

[AntoineViau]

J'espère que tu ne seras pas gêné par mon «ton»

Meuh non

C'est juste que l'attitude de certains, à mon sens, aurait plutôt tendance à déservir la cause qu'autre chose. C'est bien de promouvoir, c'est insupportable que de vouloir imposer. Et quand ces "ayatollas" n'ont jamais rien pondu (ou si peu) puis viennent m'expliquer comment je dois travailler, j'avoue que ça passe mal. Je suis assez corporatiste : les programmeurs parlent aux programmeurs ! (je suis un ancien du jeu vidéo, spécialisé 3D, et les guéguerres sont légions dans ce milieu)

Bonne résolution de te lancer dans les standards, qui seront au fur et à mesure de mieux en mieux supportés.

Oula, je ne me "lance" pas dans les standards. Ca fait un bout de temps que j'y suis, mais jamais à 100% (va expliquer à ton boss que son site ne passera pas sur son Mac OS9 Netscape 7 !). Comme je suis sur un projet perso, sans avoir de comptes à rendre, j'ai décidé de "tout faire bien". Pour le coup, je vais tenter l'expérience à fond : design fluide, standard XHTML+CSS, accessible et respect des bonnes pratiques (OPQuast). Outre la volonté de suivre la philosophie inhérente à tout ça, je dois bien avouer que le "défi" technique m'amuse beaucoup (pour le moment)

*pareil pour une liste de produits où je dois afficher : photo, prix, titre et boutons d'actions (panier, zoom, etc) Ce sont des données tabulaires, pourquoi s'affranchir d'un tableau ?? Un tableau sert à présenter du contenu, pas à faire la présentation d'un site. Dans ton cas, tu en ferais un usage correct !

C'est bien ce qu'il me semblait. Mais tu as, en l'occurence, la preuve de l'effet pervers des "donneurs de leçons". A force de lire "les tableaux c'est mal, tu brûleras en enfer", je ne sais plus trop ce qui doit être considéré comme tabulaire ou pas. Tout le problème vient des origines du web qui était destiné à des publications scientifiques. Aujourd'hui on se sert des même outils sémantiques pour afficher tous types de données qui ont une signification "humaine" très concrète et non pas abstraite. Aujourd'hui, lorsque je dois afficher quelque chose à l'écran, je considère toujours le point de vue sémantique : qu'est ce que c'est ? quel doit être (donc) sa méthode d'affichage ? etc.

*Ce me dit pas non plus comment avoir 4 boutons sur la page d'accueil disposés "en carré", toujours sans tableau...

Là, il s'agit donc d'une liste.

Alors sur ce point, j'avoue ne pas trop savoir quoi penser. En réalité, je suis gêné par le fait qu'il y ait "structure" entre "contenu" et "présentation". Car, pour moi, établir un double UL pour faire un effet visuel (disposition en carrés) revient à écrire du XHTML de présentation et non plus de contenu. Mais là encore il s'agit d'un vaste débat.

*Et si je veux faire autre chose que des colonnes ?

Ben tu peux tout faire en CSS

Hum, certes, mais à quel prix.

Si je m'en réfère par exemple à "one true layout" il s'agit de tweaking de bout en bout. A l'arrivée, le code XHTML est une soupe immonde qui sort totalement de la philosophie des standards : des conteneurs, des sous-conteneurs, etc.

Ce qui revient, pour moi, à devoir limiter mes désirs "artistiques" (uhuh) selon un schéma établi pour rester "propre" dans mon code.

Pour les "gros" sites valides, il y a effectivement Eyrolles, mais aussi Lycos.fr ou encore Macromedia France.

Aux dernières nouvelles, ces 3 sites marchaient très bien

(je n'ai pas osé citer skyblog.com, mais effectivement, pour eux aussi ça roule !)

Je connaissais Eyrolles. Je vais de ce pas voir les autres.

Merci pour les infos.

Antoine

[Anonymus]

Les sites des sacrosaintes institutions (du web) sont moches, parce qu'ils ne sont pas faits pour être beaux.

Lorsque tu lis la doc. php (http://fr.php.net/), tu ne cherches pas du flash ni des rendus écran, tu cherches une info. C'est ce que le site fait.

On peut comparer le web au 'print'. Il y a les mêmes types de publication. Certaines, comme les docs techniques se résument à 3 colonnes, d'autres comme les magazines de mode sont un peu plus complexes au niveau visuel. Lesquels sont les 'mieux' ?

[Dudu]

Salut

(va expliquer à ton boss que son site ne passera pas sur son Mac OS9 Netscape 7 !)

Je rebondis sur cette phrase rapidement avant de m'intéresser au reste:

Netscape (7 ou autre) étant un navigateur multi plateforme et doté d'un moteur assez répandu, Gecko pour ne pas le citer, je ne vois pas le problème qu'il tourne sur OS 9 ou sur Windows XP ou sur n'importe quelle distribution Linux.

A force de lire "les tableaux c'est mal, tu brûleras en enfer", je ne sais plus trop ce qui doit être considéré comme tabulaire ou pas.

En effet, c'est un peu le problème. Faisant moi aussi partie de ceux qui conseillent les standards, je suis souvent moi-même choqué de ce que je lis sur les "tableaux" tout court. Ce qui est un frein à l'accessibilité et un non-respect de la sémantique, ce sont les "tableaux de mise en page". Énorme différence.

Le dernier en date à m'avoir choqué avec çà est pourtant un mec que j'estime, et il s'appellle Eric Meyer. Dans son blog, il parle de ne pas utiliser de tableaux pour représenter des barres graphiques de type statistiques. On pourrait lancer le débat, mais ma petite conclusion personnelle c'est "oui, en tableau".

Car, pour moi, établir un double UL pour faire un effet visuel (disposition en carrés) revient à écrire du XHTML de présentation et non plus de contenu. Mais là encore il s'agit d'un vaste débat.

Aucun débat, tu construis ta liste (une seule liste) et tu la styles en CSS, point barre. Pour le type d'application concrète dont tu parles il y a plusieurs solutions. Soit un display:table, soit un jeu de class qui ferait en sorte que chaque groupe de 2 éléments constituent un bloc à eux deux mais que chaque élément dans son bloc soit positionné en flottant, et peut-être encore d'autres. Il y a mille manières de disposer ses éléments (pourquoi pas en mode bourrin à grands coups de position:absolute sur les li)

Si je m'en réfère par exemple à "one true layout" il s'agit de tweaking de bout en bout. A l'arrivée, le code XHTML est une soupe immonde qui sort totalement de la philosophie des standards : des conteneurs, des sous-conteneurs, etc.

Ce qui revient, pour moi, à devoir limiter mes désirs "artistiques" (uhuh) selon un schéma établi pour rester "propre" dans mon code.

Pour ma part, je hurle aussi bien contre les tableaux-de-mise-en-page () que sur ce genre de tag-soup soit disant valide, et qui est communément appelée "divite" (il y aussi la "spanite").

On voit malheureusement souvent dans les forums s'opposer les notions de "design en tables" et de "design en div": c'en est presque à se demander pourquoi le W3C se décarcasse à instaurer de nouvelles balises.

Pour ce qui est des grosses références à montrer:

/.

McAfee

News.com Australia

Microsoft Network

Drupal

ABC News

AOL Time Warner (gaffe à la redirection, le .com est clean tandis que le .fr a un code cataclysmique)

Inc.com

(pas rancunier, je tire cette liste du Redesign Watch d'Eric Meyer ;-) )

[AntoineViau]

Je rebondis sur cette phrase rapidement avant de m'intéresser au reste:

Netscape (7 ou autre) étant un navigateur multi plateforme et doté d'un moteur assez répandu, Gecko pour ne pas le citer, je ne vois pas le problème qu'il tourne sur OS 9 ou sur Windows XP ou sur n'importe quelle distribution Linux.

Heu, on doit pas parler du même... Gecko sur OS9 c'est un vieux de chez vieux sous Netscape (en fait je parlais ptet la version antérieur à la 7). Mais bon, c'est un détail. C'était juste pour dire que j'étais dans la situation où je devais composer avec un boss qui utilisait un vieux browser et un vieux OS et surtout, étant boss d'une maison d'édition, considère que le web c'est le diable

Donc, à l'époque (il y a deux ans) les CSS c'était niet pour que je garde mon job...

Bon aujourd'hui il m'adore parce que le CA du site est assez plaisant

En effet, c'est un peu le problème. Faisant moi aussi partie de ceux qui conseillent les standards, je suis souvent moi-même choqué de ce que je lis sur les "tableaux" tout court. Ce qui est un frein à l'accessibilité et un non-respect de la sémantique, ce sont les "tableaux de mise en page". Énorme différence.

Le dernier en date à m'avoir choqué avec çà est pourtant un mec que j'estime, et il s'appellle Eric Meyer. Dans son blog, il parle de ne pas utiliser de tableaux pour représenter des barres graphiques de type statistiques...

Je plussoies grandement. J'ai le sentiment que certaines personnes ne vivent pas du même métier que moi. Les contraintes d'interaction, d'esthétique, de marketing, de développement, etc. sont outrepassées par "il faut faire comme ça, point barre". Mais au bout du compte, le problème de fond est toujours le même : un certain nombre de règles sont établies et il arrive qu'elles soient sujettes à interprétations diverses. Le cas des tableau est le plus marquant. Mais quand certains assènent "leur" vérité, et qu'on ose émettre un doute, tous aux abris !

Aucun débat, tu construis ta liste (une seule liste) et tu la styles en CSS, point barre. Pour le type d'application concrète dont tu parles il y a plusieurs solutions. Soit un display:table, soit un jeu de class qui ferait en sorte que chaque groupe de 2  éléments constituent un bloc à eux deux mais que chaque élément dans son bloc soit positionné en flottant, et peut-être encore d'autres. Il y a mille manières de disposer ses éléments (pourquoi pas en mode bourrin à grands coups de position:absolute sur les li)

Bon je vais re-étudier le problème et voir si je trouve une solution qui corresponde à mes volontés de sémantique. A priori, je dois passer par des id pour chaque bouton, ce qui respecterait toutes les conditions requises.

Pour ma part, je hurle aussi bien contre les tableaux-de-mise-en-page () que sur ce genre de tag-soup soit disant valide, et qui est communément appelée "divite" (il y aussi la "spanite").

On voit malheureusement souvent dans les forums s'opposer les notions de "design en tables" et de "design en div": c'en est presque à se demander pourquoi le W3C se décarcasse à instaurer de nouvelles balises.

La "divite" prend sa source dans le fait qu'on a tout un existant depuis des années qui est basé sur les tableaux et l'interprétation de IE. Passer aux standards c'est dire à un client "on ne peut plus faire comme ça, on change le design". Et si ça lui plait pas, il paye pas. Alors on compose comme on peut et ça donne la "divite".

De toutes manières, la "divite" et la "spanite" semblent un passage obligé. Dans mon cas, chaque information affichée a une "existence sémantique". Ce qui signifie que chaque information est encapsulée dans des balises. Et ce sont autant de div, de span, de p, de a, etc. qui viennent remplir le bel arbre du DOM.

Je pense qu'il faut arrêter de se faire des illusions sur "simple is beautiful". C'est bon pour les blogs où la quantité sémantique est ridicule face à un site différent.

Qui se sent les épaules de reprendre tout Ebay en CSS ?

C'est aussi la raison d'être du tweaking. Le W3C propose des solutions mais elles ne sont pas universelles et fatalement on "dévoie" les rôles de certaines règles.

Pour ce qui est des grosses références à montrer:

/.

...

Merci pour les liens, je vais regarder tout ça.

Soit dit en passant, j'ai été très impressionné par Lycos et Macromédia : beau et propre. Un peu de tweaking, mais rien de bien méchant.

Edit :

Pour le guide du voyage, je viens de jeter un rapide coup d'oeil et so far : superbe travail !

Antoine

Modifié 3 Janvier 2006 par AntoineViau

[Loupilo]

Dudu a presque tout dit.

Je reviens juste un peu sur ce que tu as dis : le coup des tableaux. Effectivement (et malheureusement), on a beaucoup entendu de "banissez ce <table> que je ne saurais voir", à toutes les sauces, et les "nouveaux ayatollas" des standards qui s'y mettent parce que c'est hype en ce moment répètent en boucle ce message en confondant parfois tout.

Les tableaux sont là pour répondre un besoin : celui de présenter des données. Que ce soit pour des statistiques, des forums, des pétitions à plusieurs champs, les usages sont très nombreux !

On peste contre les tableaux à partir du moment ou ils sont détournés, c'est à dire utilisés dans un autre but que celui d'exposer du contenu tabulaire.

Ils peuvent l'être à des fins de mise en page ou à des fins de jevaisleplusvitepossiblesansreflechir (pour faire un bête un menu en ligne, par exemple).

Pour tous les autres usages, vive les tableaux !

D'ailleurs je suis un de ceux qui trouvent stupides les projets de créer des forums de discussion sans aucun tableau, alors qu'ils sont fait pour ça !

Pour la liste, si tu veux faire un carré, il existe aussi des propriétés css te permettant de le faire sans toucher à ton code HTML, cependant la majorité des navigateurs ne les comprennent pas... Donc pour l'instant, soit tu rajoutes un class="xxx" à ton élément que tu veux faire passer à la ligne, sois tu construit une double liste, effectivement. Ceci dit, tu t'approches mille fois plus des spécifications qu'en utilisant un tableau !

Quant à refaire eBay en CSS, c'est bien sûr du boulot

Mais il faut bien retenir que dès la spécification HTML 3.2, les tableaux étaient destinés aux données tabulaires, et que dès le début, elle a été détournée : la faute incombe entièrement à ceux qui se sont mis à utiliser les tableaux ! Les CSS ne sont pas nouveaux... la spec 1 date de décembre 96 !

mais pour reprendre l'exemple d'eBay, s'il n'y avait pas autant de pages, sa mise en page serait très simple à reproduire.

Sinon, tu peux vraiment presque tout faire... bien sûr, pour l'instant, on ne se débarassera pas de la séparation du contenu et de la présentation tel que tu l'entends* (il faudrait supprimer l'attribut class et l'attribut id quand ils sont utlisés à des fins de stylage CSS ), mais plutôt de la façon grâce à laquelle, sans toucher au code HTML, on peut changer radicalement la présentation (pas les images, la présentation). Et c'est dans ce sens que j'aime citer csszengarden, qui est pour moi l'ambassadeur de la séparation du contenu et de la présentation tant on peut trouver des choses fondamentalement opposées, mais qui pourtant utilisent le même code de base.

Et puis, connais-tu l'exemple de Mac4Ever ?

Bon courage,

Loupilo.

*Pour séparer réellement contenu et présentation, attaque toi au couple XML+XSL...

[Anonymus]

*Pour séparer réellement contenu et présentation, attaque toi au couple XML+XSL...

<{POST_SNAPBACK}>

Dommage que tu termines là dessus, alors qu'à mon avis, ca devrait être le commencement :

Faire un site en css n'a aucun intéret. Si c'est pour dire 'mon site est valide machin', ca sert pas à grand chose. Je ne connais pas un imprimeur qui martelle à qui veut l'entendre que ses feuilles sont en telle composition, ou telle autre, qu'elles sont faites de telle manière.

Quel est l'intéret, alors, du css (à mon humble avis) ?

Il permet de séparer radicalement le contenu de la présentation. Et en cela, il est très puissant. A quoi ca sert réellement ? Tout simple. On fait une page de code (php?), qui renverra des données (sans présentations). Ensuite, ces données pourront servir non pas à telle ou telle présentation, mais bel et bien à tel ou tel support :

- site internet,

- publications pdf,

- impressions papier,

- wap,

- etc..

Bref, le site sera entièrement fait, il n'y aura plus qu'à faire une feuille de style pour ajouter tel ou tel support à son site, sans pour autant reprendre le code originel.

Ceci n'est possible que si le contenu est complètement séparé de la présentation, et c'est en (très) général le cas du xml. Je dis bien 'général', car je trouve parfois des <i> </i> dans du xml (d'affiliations)...

Mais, sur le nombre de sites entièrement en css (tableless, etc..), combien ont vraiment séparé les données brut de la présentation ?? ?

A mon avis, le débat n'est pas près d'être clos.

[Monique]

Bonjour,

Enfin bref, j'en ai fini pour le coup de gueule et je voudrais savoir si certains d'entre vous ont de quoi me contredire. Autrement dit, pourriez vous me donner des sites qui soient autre chose que des blogs et qui sont W3C compliant avec séparation contenu/structure/présentation ?

Attention, je vous parle de vrais sites utilisés par des vrais gens pour faire du vrai argent : des boutiques, des sites de services (genre ebay ou 2xmoinscher), etc.

<{POST_SNAPBACK}>

Il y a encore assez peu de tels sites à se mettre sous les dents, c'est vrai

Laurent Zimmerli a entrepris de répertorier des sites (entreprises, administrations, sites persos...) passés au crible des validateurs : Validité des sites Web (n'hésitez pas à alimenter sa base de données d'ailleurs ).

Pour approfondir ses réflexions, les articles de la catégorie Décideur d'Openweb sont intéressants à lire, et tout particulièrement la FAQ Décideurs rédigée par Elie Sloïm (responsable du projet Opquast).

[AntoineViau]

Un petit coucou en passant pour juste signaler : 4 boutons disposés en carré ça sera table et merci au revoir. Je viens de passer 20 minutes sur la question (sans compter mes tentatives précédentes) à jongler entre IE et FF pour écrire du XHTML pourri et du CSS "bricolo". Gag ultime : sous IE j'obtiens un résultat presque acceptable en trois minutes, tandis que sous FF c'est nawak.

Alors à moins qu'on me prouve par A+B et code à l'appui qu'il y a une solution élégante qui tourne sous IE6 (je vous épargne 5+) et FF1+, ça va se ranger dans des cellules vite fait.

C'est très gentil les "y pas débat" et les "y a qu'à faire..." mais moi j'y arrive pas. Je suis peut-être pas doué (ce qui est fort possible) mais puisque "y a qu'à", et ben allez-y : épatez moi !

Données du problème :

4 boutons dans un conteneur. Taille fixe ou variable (mais variable, par un pourcentage, serait mieux). Les boutons font la même taille et contiennent une ancre. Centrage horizontal et vertical des ancres (have fun sur le vertical).

Une petite image pour plus de clarté...

C'est le genre de défi qui nous changera de "comment faire trois colonnes et un pied de page"

Antoine

[Raphael]

Autrement dit, pourriez vous me donner des sites qui soient autre chose que des blogs et qui sont W3C compliant avec séparation contenu/structure/présentation ?

Oui bien sûr :

- Liste de sites web professionels conformes : http://forum.alsacreations.com/ad-14-27-Si...-conformes.html

- Galeries de sites en CSS : http://forum.alsacreations.com/ad-4-26-Gal...tes-en-CSS.html

Avec ça, tu devrais être paré

Un petit coucou en passant pour juste signaler : 4 boutons disposés en carré ça sera table et merci au revoir. Je viens de passer 20 minutes sur la question (sans compter mes tentatives précédentes) à jongler entre IE et FF pour écrire du XHTML pourri et du CSS "bricolo". Gag ultime : sous IE j'obtiens un résultat presque acceptable en trois minutes, tandis que sous FF c'est nawak.

C'est vrai que la conception de sites en CSS nécessite un tout nouvel apprentissage, complètement différent de la vision qu'était celle en tableaux.

Il faut accepter de prendre le temps (nécessaire et parfois long) de cet apprentissage.

Données du problème :

4 boutons dans un conteneur. Taille fixe ou variable (mais variable, par un pourcentage, serait mieux). Les boutons font la même taille et contiennent une ancre. Centrage horizontal et vertical des ancres (have fun sur le vertical).

Une petite image pour plus de clarté...

Le centrage vertical est une notion très spécifique. En toute théorie, le media web (media="screen") n'est pas paginé, donc il n'y a pas de notion de hauteur de page par exemple, puisque le concept de "page" n'existe pas sur l'écran mais uniquement sur certains medias (print) par exemple.

Il en découle qu'un site web devrait se conformer aux contraintes de son media et que les webmasters ne devraient pas "faire du print" là où ce n'est pas prévu.

Bref, le centrage vertical est très simple à mettre en oeuvre en employant la déclaration "display: table-cell" + "vertical-align: middle". Cependant, cette première déclaration n'est pas reconnue par IE (elle le sera dans IE7).

La faute à qui ? aux CSS ? Non aux navigateurs obsolètes. Mais ceci est une autre question.

Pour finir, il est facile d'obtenir quelque chose d'approchant à tes désirs, mais cela posera plus de problèmes pour le centrage vertical (pour ce dernier : http://forum.alsacreations.com/faq/#item3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
#conteneur {
width: 500px;
border: 2px solid black;
}
#blocboutons {
width: 310px;
margin: auto;
}
.bouton {
float: left;
width: 150px;
height: 100px;
border: 1px solid gray;
}
p {
clear: both;
}
</style>
</head>
<body>
<div id="conteneur">
	<div id="blocboutons">
  <a href="*" class="bouton">Bouton</a>
  <a href="*" class="bouton">Bouton</a>
  <a href="*" class="bouton">Bouton</a>
  <a href="*" class="bouton">Bouton</a>
	</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean nec quam. Morbi eu eros sed felis faucibus posuere. Maecenas aliquet. Sed hendrerit ultricies metus. Proin nulla. Vivamus mi pede, mattis in, condimentum in, volutpat at, nisl. Aliquam sed augue. Suspendisse in tortor ac turpis faucibus vulputate. Vestibulum turpis. Etiam eu leo. Morbi nisi. Quisque eget quam. Etiam ac leo at mauris mattis porta. Donec pharetra. Quisque nonummy faucibus lectus.</p>
</body>
</html>

Modifié 3 Janvier 2006 par Sibelius

[DanielR]

et hop, voilà qui est fait

la soluce :-)

Réalisé en quelques minutes. Je ne dis pas ça pour faire le malin, mais seulement pour dire que c'est seulement une façon de travailler qui est différente mais quand on a pris le pli ça devient assez rapide à réaliser.

J'ai mis les styles directement dans le fichier html et non dans un fichier css externe pour que tout soit visible en affichant le code source.

C'est vrai qu'au début le positionnement css peu paraître peu intuitif quand on est habitué à d'autres méthodes, surtout avec les bugs des navigateurs (principalement IE) qui ajoutent une grosse difficulté.

Mais avec un peu de pratique, on sait par habitude ce qui passe ou ne passe pas dans différents navigateurs, et comment faire pour écrire directement des styles qui passent bien partout (parfois il faut un peu d'essais/erreurs, ou au pire recourir à 1 ou 2 petits hacks).

[AntoineViau]

et hop, voilà qui est fait 

la soluce :-)

Bien joué sauf que... ça n'est pas adaptatif

Antoine

[Raphael]

Bien joué sauf que... ça n'est pas adaptatif

Antoine

<{POST_SNAPBACK}>

Oui il est préférable de donner une hauteur aux boutons pour éviter ce genre de désagrément.

Du coup, il faut éviter les paddings pour le centrage vertical et se référer aux solutions évoquées dans mon message précédent.

[Cleden]

Je cherche à connaître le but de ce post .

Y a t-il une loi que j'aurais manqué et qui oblige tous les créateurs de sites à développer en full CSS ?

Antoine, puisque vous vous obstinez à toujours trouver des arguments contre la séparation contenu et mise en forme grâce aux CSS, pourquoi vouloir les utiliser ?

Continuez donc à utiliser vos méthodes puisqu'elles fonctionnent, vous codez probablement le html bien mieux que je ne code le xhtml . Personne n'ira vous embêter parce que vous utilisez les tableaux etc. Pour ma part, j'ai constaté que ça (les CSS) me simplifiait la vie, pourquoi continuer si ça complexifie la votre...

Chacun voit midi à sa porte.

Edit: Ce sont bien les CSS qui me simplifient la vie

Modifié 3 Janvier 2006 par Cleden

[DanielR]

J'ai pris l'habitude de (quasiment) tout faire en css. Mais de temps en temps on tombe sur des cas vraiment difficiles. Alors parfois c'est clair qu'il vaut mieux déroger un peu à la règle, c'est pas la fin du monde non plus !

Par exemple, si tu as un site full css qui utilise exceptionnellement un petit tableau pour te faciliter la tâche dans un cas difficile, je n'y vois rien de dramatique.

Dans la plupart des cas, faire des sites en css permet réellement de se simplifier la vie, d'alléger le code, de le rendre plus accessible, de faciliter la maintenance etc.

Mais si tu utilises un tableau de temps en temps pour te sortir des situations difficiles, je ne vois pas le mal.

Les CSS ne peuvent pas tout, alors parfois il faut choisir entre

1. modifier un choia son design pour faire un truc + facile à transcrire en css

2. chercher obstinément une solution 100% css

3. utiliser un petit tableau

Le choix dépend de la situation, mais dire qu'il faut à tout prix choisir la 2ème solution, ça va en théorie, mais en pratique ça tient pas debout.

[AntoineViau]

Je cherche à connaître le but de ce post 

Y a t-il une loi que j'aurais manqué et qui oblige tous les créateurs de sites à développer en full CSS ?

Antoine, puisque vous vous obstinez à toujours trouver des arguments contre la séparation contenu et mise en forme grâce aux CSS, pourquoi vouloir les utiliser ?

<{POST_SNAPBACK}>

Hum, je crains que vous n'ayez mal lu mes précédents posts (on se vouvoie ?)

C'est tout le contraire !

J'en suis au stade où j'ai un site complet (j'irai même jusqu'à dire un "service") totalement XHTML, avec une séparation contenu/structure/présentation totale. C'est une voie que j'ai choisie et je cherche à la respecter au maximum. Pourquoi ? Par "convictions technologiques", défi technique, et aussi parce que mon oncle est aveugle et regrette de ne pouvoir être aussi geek qu'il le pourrait (le service lui servira à terme).

Néanmoins, je me refuse à négliger certains aspects inhérents au web tel qu'il existe aujourd'hui. Ce sont des aspects qui impliquent, par exemple, la présence de 4 boutons disposés en carrés, en format adaptif (design fluide) pour offrir à l'utilisateur des raccourcis (ergonomie), pour l'inciter à aller dans les parties importantes (marketing) et pour qu'il ait une vision efficace quelque soit sa résolution et sa condition (accessibilité).

La question initiale était : existe t'il aujourd'hui des sites totalement XHTML/CSS qui sont autres choses que des blogs. Sur ce point, j'ai maintenant de quoi faire (CTRL+U sous FF est mon ami !) et il me semble que certains ont réussi à faire des petits chef d'oeuvre. Ils seront mes mentors !

Le thread a dérivé sur les 4 boutons et ne croyez pas que je cherche désespérément à mettre en défaut les CSS. Mon propos n'est pas là. Il s'agit pour moi de trouver des solutions à des problèmes donnés. Ensuite, en tant de programmeur, j'aime à débattre sur "l'esthétique" d'une solution. Un UL et quatre LI feraient mon bonheur. Malheureusement, en l'état actuel cela semble impossible. Reste donc la solution du tableau qui, si elle n'est pas la plus élégante, reste pour moi plus "sémantiquement propre" qu'un double UL. Mais bon, à ce stade on frôle la masturbation intellectuelle

Après, il y a d'autres débats de fond qui sont bien loin de la technique. Mon point de vue strictement personnel, est qu'une partie de la communauté veut faire table rase de l'existant sans proposer des solutions de remplacement visuellement identiques. C'est très gentil de répéter "les standards, les CSS, le XHTML" comme une longue litanie. Mais avant cela il faut être capable de dire franchement ce qui est faisable et pas faisable en l'état (et non pas dans le futur). Parce que le client il s'en fout : il veut comme le voisin quand il clique sur le mulot. Alors que celui qui n'a fait que modifier un template de Dotclear veuille bien se mettre au boulot plutôt que d'asséner des demi-vérités (attention, je ne vise personne en particulier hein !) Les blogs et forums regorgent de donneurs de leçons qui n'ont pas les main dans le cambouis et le boss/patron au cul et ça m'insupporte au plus au point ! (ayé, je m'énerve tout seul)

En conclusion : vivement les prochaines années (mois ?) pour qu'enfin 90% du parc des navigateurs soit totalement CSS que l'on touche enfin du doigt ce saint-graal qu'est la séparation stricte du contenu et de la présentation. Alors les esprits s'apaiseront (le temps d'une nouvelle bataille) et nous gambaderont gaiment à travers le cyberspace tous ensemble !! (me disais bien qu'elle avait un drôle de goût cette cigarette)

Antoine

PS :

Pour Sibelius :

Je viens de réaliser que c'est toi qui a écrit le bouquin qui squatte mon bureau actuellement ! Uh, ça fait bizarre

Modifié 3 Janvier 2006 par AntoineViau