CSS-Layout ohne feste Breite

Question

Ich bin kein Experte in CSS in keiner Weise; Ich weiß, dass es zu einem gewissen Grad, aber nicht sehr tief; schweben und IE6 macht mich weinen. Also ich bin immer aufgeregt, um zu sehen, was die Leute damit machen können.

Allerdings sind die meisten der Beispiele, die ich verwenden Fixmaßen sehen. Soweit ich verstehe, ist dies, weil CSS so schwierig ist und es ist viel einfacher zu hacken, wenn Elemente Breite haben, vor allem in IE6.

Aber ich wirklich wie flexible Breite. Und so zu sein, ich verstehe nicht, warum es falsch ist Design mit Tabellen zu machen? Es gibt ein Buch mit dem Titel „Everything You Know About CSS ist falsch!“ die erklären, wie es gut ist, dass wir jetzt Tabellen-Layouts mit CSS mit neueren Browsern tun können ... aber könnten wir nicht tun es die ganze Zeit mit HTML-Tabellen? Ja, es ist nicht CSS und vielleicht nicht so sauber wie reine CSS ... aber immerhin Tabellenlayout , was wir oft brauchen, und wenn wir zwischen bösen Hacky CSS wählen haben, es zu tun und einfach but-not-rein genug HTML-Tabelle, verstehe ich nicht, warum sollte jeder dieser Entscheidungen schlecht angesehen werden. KISS ist eine gute Sache, nicht wahr?

Oder, vielleicht verstehe ich nicht, es und Sie können tabellenartige Layouts in CSS machen -, dass die Arbeit in IE6 - ohne zu viel Schmerz in den Arsch? Alle Beispiele solcher Seiten?

UPDATE: Ja, ich weiß über Inhalt und Stil Trennung. In der Tat, ich bin fanatisch DRY, SRP und andere Design-Must-Dinge zu tun. Deshalb habe ich wirklich versucht, die Dinge in CSS zu tun; aber wenn es so viel schwieriger und unzuverlässiger als Tabellen, so dass es sogar in Büchern geschrieben wie oben erwähnt, warum so hart versuchen? Ich sage nicht, dass alles muss in Tabellen durchgeführt werden; aber wenn es wirklich einfacher als CSS - warum soll ich lieber CSS auf eine einfache und berechenbare Lösung

Das heißt, ich sage nicht, dass Sie Tabellen immer verwenden sollten. Beachten Sie Master-Seiten-Layout - es ist unabhängig und haben keine Auswirkungen auf andere Seiten, die ich von CSS zu Tabellen und zurück in 20 Minuten (in der Tat ich so bereits getan haben) wechseln können ohne Probleme - Warum sollte ich auf CSS-Stick obwohl Tabellen kein Schaden?

UPDATE: Ich habe dies eine sehr gute Zusammenfassung zu finden, was ich sagen wollte: http://www.flownet.com/ron/css-rant.html . Und die Diskussion http :. //rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments

Für diejenigen, die interessiert sind, ist hier ein noch besserer Artikel: http://kv5r.com/ Artikel / dev / layouttables1.asp

Answer 1

Sie sind im wesentlichen richtig. Es gibt nichts wirklich falsch mit Tabellen für das Layout verwenden, so lange, für die Zugänglichkeit, die Reihenfolge der Zellen für die Seite geeignet ist. Ich persönlich feste Breite finde eine viel schlechtere Verschlechterung der Verwendbarkeit als Tabellen-for-Layout.

Wenn Sie Tabellen tun verwenden für das Layout, sollten Sie die Arten width: 100%; table-layout: fixed (und <col> mit einem styled width) zu verwenden, so dass Browser die Tabelle richtig von Anfang an heraus legen kann (die eine der Usability-Probleme beheben Tabellenlayouts hatten) und so, dass Sie nicht angewiesen sind auf IE eher schlecht auto-Layout Breite Mutmaßung.

Während ich sicherlich CSS für das Layout bevorzugen, wo immer möglich, und die meist einfachen Seitenlayouts vernünftig werden können nur mit CSS (vor allem jetzt IE5 und sein Quirky-Box-Modell ist weg) erreichen, gibt es einige Fälle, in denen CSS es nicht hacken und Tabellen können. Ein häufiger Fall ist komplex fluid-Breite bildet.

Das größte Problem ist der Mangel an Fähigkeit, Dinge wie width: 100%-10em zu sagen, eine Spalte zu erhalten, die die Breite des Ansichtsfensters minus einer festen Größe für eine andere Spalte. Für den einfachen Fällen können Sie rund um diese mit Margen und ein Wrapper div bekommen kann, aber sobald man Nachbestellung der Elemente auf Ihrer Seite und Hinzufügen mehrerer Wrapper starten Sie einfach die CSS-Layout zu arbeiten, sind Vertauschen Sie bereits die Präsentation mit der Inhalt:. nicht wirklich so sehr verschieden von Tabellen

Im schlimmsten Fall, dass Sie mit diesem dummen ‚CSS-Frameworks‘ am Ende, die Sie benötigen Verschachtelung und feste Klassennamen verwenden, um vollständig das Layout in der Markup selbst angeben. Dies ist nicht besser als Tabellen überhaupt; Ich finde es absolut urkomisch, dass diese hoffnungslos Reminiszenz an die schlechten alten Zeiten gilt eine trendige topaktuelle Web 2.0-Technik.

CSS3 wird auf einige interessante Alternativen zur aktuellen Positionierung Optionen , die kann man Tag liefert das Versprechen der gesamten Markup und Layout Trennung. Aber das ist ein langer Weg heute.

Answer 2

Hier finden Sie aktuelle Yaml und Fluid 960gs . Beide helfen, eine Menge mit Cross-Browser-Layout. Table-Layouts sind nicht die Antwort und IE6 wird verschwinden, früher oder später.

Answer 3

Es gibt einen Grund, dass HTML-Tabellen für etwas anderes als Tabellendaten schlecht sind. HTML ist eine Auszeichnungssprache für Dateninhalt und damit Gruppierungen von Ist-Daten enthalten sollte, nicht das Layout für diese Daten. CSS sollte vollständig für Layout und Stil Zwecke sein; so sein Name. Deshalb sollte die CSS den gesamten Look and Feel der Webseite enthält, während die HTML die Struktur für die Daten enthält; und nie wird die entzwei erfüllen.

tut alles in Tabellen ist schlecht für einen Grund.

Sie sollten als die Abstraktion zwischen Stil und Inhalt denken Sie daran, und Sie können einen guten Überblick von hier: http://www.alistapart.com / articles / Reise /

Warum soll ich lieber CSS auf eine einfache und berechenbare Lösung?

Das ist, was wir sagen wollen. Es kann auf kurze Sicht leichter erscheinen, aber alles, was Sie werden schreiben weniger wartbar und härter in der Zukunft zu bearbeiten. Sie können eine Webseite gehen und schreiben, die einfacher auf kurze Sicht scheint aber Sie sind stechend sich nur in den Fuß wirklich für später, wenn Sie mehr tun wollen. Warum nicht einfach macht es richtig beim ersten Mal? (Es ist nur eine kleine Menge von zusätzlichem Aufwand wirklich)

Answer 4

Nur weil CSS-Layout ist eine Herausforderung für Sie, dass es nicht schlechter als Tabellen macht. Durch die Angabe dieses, sie begehen Sie einen logischen Fehlschluss als Relativist Fallacy bekannt.

Sobald Sie vollständig CSS verstehen, wie es zu benutzen, und die meisten der anderen Browser Macken, werden Sie feststellen, dass es in HTML-Tabellen weit überlegen ist.

Markup sollte semantische sein. Das heißt, es sollte genau den Inhalt beschreiben, die es enthält. Das macht es maschinenlesbar (für SEO und andere Anwendungen). Tabellen für das Layout ist überhaupt nicht semantische.

Abstraktion von verschiedenen Schichten hilft eine Website viel leichter zu pflegen. Halten Sie den Inhalt in der HTML, das Verhalten in der Javascript und die Darstellung in der CSS.

Sie haben Recht, dass CSS seine Mängel hat, though. Aber Tabellen haben viele mehr, die sind viel schlimmer.

Answer 5

Der Grund, warum Sie wollen nicht Markup machen, die Tabellen als Layout verwendet, ist aufgrund der Entkopplung von Design und Inhalt.

sollte Ihr Markup sitzen, auf seinem eigenen, als eine perfekte Beschreibung des Inhalts, der in ihm ist. Im Wesentlichen sollten Sie Ihre Seiten in HTML markieren, bevor Sie überhaupt die Stile berühren. Dann würden Sie CSS verwenden, um die Art und Weise, die Ihr semantisches Markup sieht standardmäßig zu ändern.

Die Tatsache der Angelegenheit ist, dass Ihre Web-Inhalte, die Sie nicht ‚Tabellarische Daten‘ sind Auslegen ist - Markup ist für Computer / Bots zu lesen, wo es für uns, um zu sehen, das Mischen der beiden verwirrt nur eine oder beide Parteien, in der Regel auf den zusätzlichen Kosten von Wartbarkeit.

Answer 6

Hier ist ein Szenario, das ich gestoßen persönlich, die ich den Anteil mag. Hinweis: Ich bin nicht dafür, „no-Tisch-at-all“, ist es für andere Anforderungen in Gabe kommen.

Ich habe ein Formular erstellt (optisch top-down flow):

Heading1
 Label1 
 Textbox1
 Label2 
 Textbox2

Heading2
 Label3 
 Dropdown3
 Label4 
 Textbox4
 Label5 
 Textbox5

Dann Kunde wollte eine strukturiertere Rohr ein wie folgt aus:

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

Da ich nicht Tabelle der Art TR TD mit bin, kann ich einfach (fast) wandelt die Strukturänderungen CSS Modifikation und kleinere HTML-Markup verwenden.