Mise en page CSS sans largeur fixe

Question

Je ne suis en aucun cas expert en CSS; Je le connais dans une certaine mesure mais pas très profondément; float et IE6 me fait pleurer. Je suis donc toujours impatient de voir ce que les gens peuvent en faire.

Cependant, la plupart des exemples que je vois utilisent des dimensions fixes. Autant que je sache, cela est dû au fait que CSS est très complexe et qu’il est beaucoup plus facile de pirater les éléments quand ils ont une largeur importante, en particulier dans IE6.

Mais j'aime beaucoup la largeur flexible. Et étant ainsi, je ne comprends pas pourquoi c'est mal de faire du design avec des tables? Il existe un livre intitulé & "Tout ce que vous savez sur les CSS est faux! &"; ce qui explique à quel point il est bon de pouvoir maintenant mettre en forme des tableaux avec CSS avec les navigateurs récents ... mais ne pourrions-nous pas le faire tout le temps avec des tableaux HTML? Oui, ce n'est pas du CSS et peut-être pas aussi propre que du CSS pur ... mais, après tout, la disposition des tableaux EST ce dont nous avons souvent besoin, et si nous devons choisir entre CSS méchant pour le faire et simple tableau HTML, mais pas assez pur, je ne comprends pas pourquoi aucun de ces choix ne devrait être considéré comme mauvais. KISS est une bonne chose, n'est-ce pas?

Ou, peut-être que je ne le comprends pas et que vous POUVEZ créer des dispositions de type tableau dans CSS - qui fonctionnent dans IE6 - sans trop de peine dans le cul? Des exemples de tels sites?

UPDATE: Oui, je connais la séparation du contenu et du style. En fait, je suis fanatique de DRY, SRP et autres choses à faire absolument en matière de design. C'est pourquoi j'ai vraiment essayé de faire des choses en CSS; mais si c'est TELLEMENT plus difficile et moins fiable que les tables, de sorte qu'il est même écrit dans des livres comme mentionné ci-dessus, pourquoi essayer si fort? Je ne dis pas que tout doit être fait dans des tableaux; mais s'il est vraiment plus facile que CSS, pourquoi devrais-je préférer CSS à une solution simple et prévisible?

Autrement dit, je ne dis pas que vous devriez toujours utiliser des tableaux. Gardez à l'esprit la mise en page principale - elle est indépendante et n'affecte pas les autres pages, je peux basculer du CSS aux tableaux en 20 minutes (en fait je l'ai déjà fait) sans problème - POURQUOI dois-je m'en tenir aux CSS, même si les tableaux sont pas de mal?

UPDATE: J'ai trouvé que c'était un très bon résumé de ce que j'essayais de dire: http://www.flownet.com/ron/css-rant.html . Et la discussion http : //rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments .

Pour ceux qui sont intéressés, voici un article encore meilleur: http://kv5r.com/ articles / dev / layouttables1.asp

Answer 1

Vous avez essentiellement raison. Il n’ya rien de mal à utiliser des tableaux pour la mise en page tant que, pour l’accessibilité, l’ordre des cellules convient à la page. Personnellement, je trouve que la largeur fixe est une dégradation bien pire de la convivialité que les tableaux pour la mise en page.

Lorsque vous utilisez des tableaux pour la mise en forme, veillez à utiliser les styles width: 100%; table-layout: fixed (et <col> avec un style width) afin que les navigateurs puissent disposer correctement le tableau dès le début (ce qui corrige l'un des problèmes de convivialité que les tableaux avaient), et que vous ne dépendiez pas de la médiocre approximation de la largeur de la disposition automatique d'IE.

Bien que je préfère certes CSS pour la mise en page dans la mesure du possible, et que la plupart des mises en page de site simples peuvent être raisonnablement réalisées à l'aide de CSS uniquement (surtout maintenant que IE5 et son modèle de boîte fictive ont disparu), il existe des cas où CSS ne peut pas la pirater et les tables peuvent. Un cas courant est celui des formes complexes à largeur de fluide.

Le problème le plus important est le manque de capacité à dire des choses comme width: 100%-10em pour obtenir une colonne de la largeur de la fenêtre de visualisation moins une taille fixe pour une autre colonne. Pour les cas simples, vous pouvez contourner ce problème avec des marges et une div wrapper, mais une fois que vous avez commencé à réorganiser les éléments de votre page et à ajouter plusieurs wrappers juste pour que la disposition CSS fonctionne, vous mélangez déjà la présentation avec le contenu: pas vraiment si différent des tableaux.

Dans le pire des cas, vous vous retrouvez avec ces stupides & # 8216; frameworks CSS & # 8217; vous obliger à utiliser des noms de classe imbriqués et fixes pour spécifier complètement la mise en page à l'intérieur du balisage Ce n'est pas mieux que des tables du tout; Je trouve absolument hilarant que ce retour en arrière désespéré soit considéré comme une technique Web 2.0 à la pointe de la mode.

CSS3 travaille sur des alternatives aux options de positionnement actuelles qui pourraient vous intéresser jour sur la promesse de séparation totale du balisage et de la mise en page. Mais c'est loin aujourd'hui.

Answer 2

Consultez Yaml et Fluide 960gs . Les deux vous aident beaucoup avec les dispositions inter-navigateurs. Les tableaux ne sont pas la solution et IE6 disparaîtra tôt ou tard.

Answer 3

Il y a une raison pour laquelle les tableaux HTML sont mauvais pour autre chose que des données tabulaires. Le HTML est un langage de balisage pour le contenu des données et doit donc contenir des groupes de données réelles, et non la présentation de ces données. CSS est conçu pour être complètement conçu pour la mise en page et le style; d'où son nom. Par conséquent, le code CSS doit contenir l’ensemble de la page Web, tandis que le code HTML contient la structure des données; et jamais les deux ne se rencontreront.

Tout faire dans les tableaux est mauvais pour une raison.

Vous devriez y voir une abstraction entre style et contenu et obtenir un bon récapitulatif à partir d'ici: http://www.alistapart.com/articles/separationdilemma/

Aussi en réponse directe à votre question, allez à «Une liste à part» et effectuez une recherche dans vos articles. Ils décrivent en quelque sorte le voyage que vous êtes sur le point de faire ici: http://www.alistapart.com / articles / voyage /

pourquoi devrais-je préférer le CSS à une solution simple et prévisible?

C'est ce que nous essayons de dire. Cela peut sembler plus facile à court terme, mais tout ce que vous écrivez sera moins facile à maintenir et plus difficile à modifier à l'avenir. Vous pouvez écrire une page Web qui semble plus facile à court terme, mais vous ne vous en faites que vous poignarder dans le pied pour plus tard, quand vous voulez en faire plus. Pourquoi ne pas le faire correctement du premier coup? (ce n'est vraiment qu'une petite quantité d'effort supplémentaire)

Answer 4

Ce n’est pas parce que la mise en page CSS est un défi pour vous que cela ne le rend pas inférieur aux tableaux. En déclarant cela, vous commettez une erreur logique connue sous le nom d’erreur relative.

Une fois que vous avez parfaitement compris le CSS, son utilisation et la plupart des bizarreries de navigateur, vous constaterez qu'il est nettement supérieur aux tableaux HTML.

Le balisage doit être sémantique. C'est-à-dire qu'il devrait décrire avec précision le contenu qu'il contient. Cela le rend lisible par machine (pour le référencement et autres applications). Les tableaux de présentation ne sont pas du tout sémantiques.

L'abstraction de différentes couches contribue à rendre le site Web beaucoup plus facile à gérer. Conservez le contenu dans le code HTML, le comportement dans le code Javascript et la présentation dans le code CSS.

Vous avez raison de dire que CSS a ses inconvénients, cependant. Mais les tables en ont beaucoup plus, ce qui est bien pire.

Answer 5

La raison pour laquelle vous ne souhaitez pas créer de balisage utilisant des tableaux en tant que disposition est due au découplage du design et du contenu.

Votre balisage doit constituer, à lui seul, une description parfaite du contenu qu’il contient. Essentiellement, vous devez marquer vos pages en HTML avant de toucher aux styles. Vous utiliseriez ensuite CSS pour modifier l'aspect par défaut de votre balisage sémantique.

Le fait est que votre contenu Web que vous présentez n'est pas des "données tabulaires" - le balisage est destiné aux ordinateurs / bots à lire, et les styles correspondent à nos styles, le fait de mélanger les deux confondre l'un ou les deux parties, généralement au coût supplémentaire de la maintenabilité.

Answer 6

Voici un scénario que j'ai personnellement rencontré et que j'aimerai partager. Remarque: je ne préconise pas & «Pas de table &», Elle répond à d’autres exigences.

J'ai créé un formulaire (flux visuel de haut en bas):

Heading1
 Label1 
 Textbox1
 Label2 
 Textbox2

Heading2
 Label3 
 Dropdown3
 Label4 
 Textbox4
 Label5 
 Textbox5

Ensuite, le client voulait un tube plus structuré comme celui-ci:

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

Comme je n'utilise pas de tableau du type TR TD, je peux facilement (presque) convertir la structure à l'aide d'une modification CSS et de modifications mineures du balisage HTML.