Disposition CSS sans largeur fixe

Question

Je ne suis pas expert en matière de CSS de quelque façon que ce soit; Je le sais dans une certaine mesure mais pas très profond; float et IE6 me fait pleurer. Donc je suis toujours excité de voir ce que les gens peuvent en faire.

Cependant, la plupart des exemples que je vois utilisent des dimensions fixes. Pour autant que je comprenne c'est parce que CSS est si difficile et il est beaucoup plus facile de pirater lorsque les éléments ont une largeur, en particulier dans IE6.

Mais, j'aime vraiment la largeur flexible. Et étant ainsi, je ne comprends pas pourquoi c'est mal de faire du design avec des tables? Il y a un livre intitulé "Tout ce que vous savez sur CSS est erroné!" ce qui explique comment c'est bien que maintenant on puisse faire des mises en page avec CSS avec des navigateurs récents ... mais, on ne pourrait pas le faire tout le temps avec des tables HTML? Oui, ce n'est pas CSS et peut-être pas aussi propre que CSS pure ... mais, après tout, la mise en page IS est ce que nous avons souvent besoin, et si nous devons choisir entre méchant CSS CSS pour le faire et simple mais pas tableau HTML pur-assez, je ne comprends pas pourquoi l'un de ces choix devrait être considéré comme mauvais. KISS est une bonne chose, n'est-ce pas? Ou, peut-être que je ne comprends pas et que vous pouvez faire des mises en page de type table en CSS - qui fonctionnent dans IE6 - sans trop de douleur dans le cul? Des exemples de tels sites?

MISE À JOUR: Oui, je connais le contenu et la séparation de style. En fait, je suis fanatique de DRY, SRP et d'autres choses à faire. 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 dur? Je ne dis pas que tout doit être fait dans des tableaux; mais si c'est vraiment plus facile que CSS - pourquoi devrais-je préférer CSS à une solution simple et prévisible? C'est-à-dire, je ne dis pas que vous devriez toujours utiliser les tables. Gardez à l'esprit la mise en page maîtresse - elle est indépendante et n'affecte pas les autres pages, je peux passer de CSS à des tables et revenir en 20 minutes (en fait je l'ai déjà fait) sans problème - Pourquoi devrais-je coller à CSS pas de mal?

MISE À JOUR: 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 se intéresse, voici un article encore mieux: http://kv5r.com/articles/dev/layouttables1.asp

Answer 1

Vous avez essentiellement raison. Il n'y a rien de vraiment mauvais avec l'utilisation des tables pour la mise en page tant que, pour l'accessibilité, l'ordre des cellules est approprié pour la page. Personnellement, je trouve que la largeur fixe est une dégradation de l'utilisabilité bien pire que celle des tableaux pour la mise en page.

Lorsque vous utilisez des tables pour la mise en page, assurez-vous d'utiliser les styles width: 100%; table-layout: fixed (et <col> avec un style width) afin que les navigateurs peuvent mettre la table correctement dès le début (qui fixe l'un des problèmes d'utilisation mises en page de table ont), et de sorte que vous ne dépendez pas de la largeur de la mise en page automatique d'IE. Alors que je préfère certainement CSS pour la mise en page chaque fois que possible, et la plupart des mises en page de sites simples peuvent être raisonnablement réalisées en utilisant uniquement CSS (surtout maintenant IE5 et son modèle Quirky Box est parti), il y a des cas où CSS et les tables peuvent. Un cas courant est celui des formes complexes de 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 qui est la largeur de la fenêtre moins une taille fixe pour une autre colonne. Pour les cas simples, vous pouvez contourner cela avec des marges et un div wrapper, mais une fois que vous avez réorganisé les éléments de votre page et ajouté plusieurs wrappers juste pour que la mise en page CSS fonctionne, vous mélangez déjà la présentation avec le contenu: pas vraiment très différent des tables. Dans le pire des cas, vous vous retrouvez avec ces «frameworks CSS» ridicules qui vous obligent à utiliser des noms de classe et d'imbrication pour spécifier complètement la disposition dans le balisage lui-même.Ce n'est pas mieux que des tables du tout; Je trouve absolument hilarant que ce retour désespéré au mauvais vieux temps est considéré comme une technique de pointe du Web 2.0 à la mode. CSS3 travaille sur des options de positionnement actuelles qui pourraient un jour offrir la possibilité d'un balisage total et d'une séparation de mise en page. Mais c'est loin d'aujourd'hui.

Answer 2

Jetez un oeil à Yaml et Fluid 960gs. Les deux vous aident beaucoup avec les mises en page de plusieurs navigateurs. Table-Layouts ne sont pas la réponse et IE6 disparaîtra tôt ou tard.

Answer 3

La raison pour laquelle vous ne souhaitez pas créer de balisage utilisant des tables comme mise en page est due au découplage de la conception et du contenu.

Votre balisage devrait être, à lui seul, une description parfaite du contenu qui s'y trouve. Essentiellement, vous devriez marquer vos pages en HTML avant de toucher les styles. Ensuite, vous utiliserez CSS pour modifier la manière dont votre balisage sémantique est affiché par défaut. Le fait est que le contenu de votre site Web n'est pas 'Données tabulaires' - Le balisage est pour les ordinateurs/bots à lire, et les styles sont à nous de voir, mélanger les deux ne fait que confondre un ou les deux parties, généralement au coût supplémentaire de la maintenabilité.

Answer 4

Il existe une raison pour laquelle les tables HTML sont mauvaises pour tout autre élément que les données tabulaires. HTML est un langage de balisage pour le contenu de données et devrait donc contenir des regroupements de données réelles, pas la mise en page de ces données. CSS est destiné à être complètement à des fins de mise en page et de style; ainsi son nom.Par conséquent, le CSS doit contenir l'aspect global de la page Web tandis que le HTML contient la structure pour les données; Et jamais les deux ne se rencontreront.

Faire tout dans les tables est mauvais pour une raison.

Vous devriez penser comme l'abstraction entre le style et le contenu et vous pouvez obtenir un bon aperçu d'ici: http://www.alistapart.com/articles/separationdilemma/

également en réponse directe à votre goto question « A List Apart » et la recherche à travers vos articles. Ils décrivent en quelque sorte le voyage que vous êtes sur le point de faire ici: http://www.alistapart.com/articles/journey/

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 à éditer à l'avenir. Vous pouvez y aller et écrire une page Web qui semble plus facile à court terme, mais vous êtes juste en train de vous poignarder dans le pied pour plus tard quand vous voulez en faire plus. Pourquoi ne pas le faire juste la première fois? (Ce n'est qu'une petite quantité d'effort supplémentaire)

Answer 5

Voici un scénario que j'ai rencontré personnellement dont j'apprécierais le partage. Note: Je ne préconise pas "no-table-at-all", il vient en main pour d'autres exigences.

J'ai créé une forme (visuellement l'écoulement de haut en bas):

Heading1 
Label1 
Textbox1 
Label2 
Textbox2 

Heading2 
Label3 
Dropdown3 
Label4 
Textbox4 
Label5 
Textbox5 

Alors client voulait un tube plus structuré comme celui-ci:

Heading1 
Label1 Textbox1  Label2 Textbox2 

Heading2 
Label3 Dropdown3 Label4 Textbox4 
Label5 Textbox5 

Comme je ne suis pas en utilisant le tableau de le tri TR TD, je peux facilement (presque) convertir la structure en utilisant la modification CSS et les modifications mineures du balisage HTML.

Answer 6

Tout simplement parce que la mise en page CSS est un défi pour vous, cela ne la rend pas inférieure aux tables. En déclarant cela, vous commettez une erreur logique connue sous le nom d'erreur relativiste. Une fois que vous comprendrez complètement CSS, comment l'utiliser, et la plupart des différents caprices du navigateur, vous trouverez qu'il est largement supérieur aux tableaux HTML.

Le balisage doit être sémantique. Autrement dit, il devrait décrire avec précision le contenu qu'il contient. Cela rend la machine lisible (pour le référencement et d'autres applications). Les tableaux pour la mise en page ne sont pas du tout sémantiques. L'abstraction de différentes couches permet de rendre un site Web beaucoup plus facile à maintenir. Conservez le contenu dans le code HTML, le comportement dans le Javascript, et la présentation dans le CSS.

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