HTML-Layout
Heute muss ich einmal meiner Verwunderung Ausdruck verleihen, dass man immer wieder davon hört, das Layout von Webseiten durch die HTML-Tabellen wäre gar so rückschrittlich und längst durch die Verwendung von CSS abgelöst. Zuletzt kamen mir solche Aussagen zum Beispiel bei diesem Podcast unter: http://technikwuerze.de/podcast/technikwuerze141/
Wenn man, wie ich gestern, dann aber einmal genauer nachsieht und versucht, eine Webseite, die mit einer Tabellenstruktur aufgebaut ist, auf CSS umzustellen - weil es anders ja gar so veraltet ist - muss man erleben, dass das gar nicht so einfach ist. CSS mag gut für die Formatierung von Texten geeignet sein, das Layout von Tabellen kann dieser Standard leider nicht vollständig ablösen. In meinem konkreten Fall ging es zum Beispiel darum, eine Tabelle aus 3x3 Feldern mit abwechselnden Hintergrundfarben darzustellen, in der Texte und Links angeordnet sind. Das könnt Ihr Euch ähnlich wie ein Tic Tac Toe-Spielfeld mit einer Schachbrettmusterung vorstellen. Das Layout als HTML-Tabelle ist an sich recht simpel: drei Zeilen mit drei Spalten, den TD-Tags sind per style-Anweisung die Hintergrundfarben zugewiesen. Durch die Breitenangaben 30%, 35% und 30% (Die mittlere Spalte ist absichtlich ein wenig breiter.) wird die Anzeige so immer auf die komplette Seitenbreite skaliert und die Texte entsprechend umgebrochen. Mein Versuch, das über ein verschachteltes CSS-Layout mit je einem DIV-Tag pro Zeile und Spalten über floating-Positionierung umzusetzen, scheiterte recht kläglich. Die Textlängen sorgten dafür, dass in der zweiten Zeile die erste Spalte ganz nach rechts rutschte, die folgenden Felder waren irgendwie seltsam angeordnet. Bei der Suche nach Lösungen im Netz fand ich dann eine Reihe von Tutorials wie dieses: http://www.stichpunkt.de/css/bereiche.html
Oder Seiten wie diese, auf denen man Code für vorgefertigte Seitenlayouts herunterladen kann:
http://layouts.ironmyers.com/
Nicht das, was ich für meinen Fall eigentlich bräuchte. Zusätzlich ist bei CSS leider auch wieder einmal zu beachten, dass die verschiedenen Browser teils unterschiedliche Interpretationen und unterschiedlich weit gediehene Standardkonformität aufweisen.
Diese Beschreibung wäre vielleicht hilfreich gewesen:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Nur kommt mir das mit den doppelt definierten Containern gleich wieder so kompliziert vor, dass ich es gleich gar nicht ausprobierte. Über der Seite steht groß "no hacks" - aber ich habe da eine andere Vorstellung von einer geradlinigen Implementation.
Da lobe ich mir doch wirklich mein simples Tabellenlayout! Sei es auch noch so altbacken und unmodern. Zumindest ist es leicht zu durchblicken und wird verlässlich nahezu 100% aller Browser dargestellt. Wie so oft gilt also, dass man sich nicht auf Moden verlassen sollte, sondern besser unvoreingenommen für den jeweiligen Einsatz-Zweck die einfachste und zuverlässigste Methode suchen sollte.
Wenn man, wie ich gestern, dann aber einmal genauer nachsieht und versucht, eine Webseite, die mit einer Tabellenstruktur aufgebaut ist, auf CSS umzustellen - weil es anders ja gar so veraltet ist - muss man erleben, dass das gar nicht so einfach ist. CSS mag gut für die Formatierung von Texten geeignet sein, das Layout von Tabellen kann dieser Standard leider nicht vollständig ablösen. In meinem konkreten Fall ging es zum Beispiel darum, eine Tabelle aus 3x3 Feldern mit abwechselnden Hintergrundfarben darzustellen, in der Texte und Links angeordnet sind. Das könnt Ihr Euch ähnlich wie ein Tic Tac Toe-Spielfeld mit einer Schachbrettmusterung vorstellen. Das Layout als HTML-Tabelle ist an sich recht simpel: drei Zeilen mit drei Spalten, den TD-Tags sind per style-Anweisung die Hintergrundfarben zugewiesen. Durch die Breitenangaben 30%, 35% und 30% (Die mittlere Spalte ist absichtlich ein wenig breiter.) wird die Anzeige so immer auf die komplette Seitenbreite skaliert und die Texte entsprechend umgebrochen. Mein Versuch, das über ein verschachteltes CSS-Layout mit je einem DIV-Tag pro Zeile und Spalten über floating-Positionierung umzusetzen, scheiterte recht kläglich. Die Textlängen sorgten dafür, dass in der zweiten Zeile die erste Spalte ganz nach rechts rutschte, die folgenden Felder waren irgendwie seltsam angeordnet. Bei der Suche nach Lösungen im Netz fand ich dann eine Reihe von Tutorials wie dieses: http://www.stichpunkt.de/css/bereiche.html
Oder Seiten wie diese, auf denen man Code für vorgefertigte Seitenlayouts herunterladen kann:
http://layouts.ironmyers.com/
Nicht das, was ich für meinen Fall eigentlich bräuchte. Zusätzlich ist bei CSS leider auch wieder einmal zu beachten, dass die verschiedenen Browser teils unterschiedliche Interpretationen und unterschiedlich weit gediehene Standardkonformität aufweisen.
Diese Beschreibung wäre vielleicht hilfreich gewesen:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Nur kommt mir das mit den doppelt definierten Containern gleich wieder so kompliziert vor, dass ich es gleich gar nicht ausprobierte. Über der Seite steht groß "no hacks" - aber ich habe da eine andere Vorstellung von einer geradlinigen Implementation.
Da lobe ich mir doch wirklich mein simples Tabellenlayout! Sei es auch noch so altbacken und unmodern. Zumindest ist es leicht zu durchblicken und wird verlässlich nahezu 100% aller Browser dargestellt. Wie so oft gilt also, dass man sich nicht auf Moden verlassen sollte, sondern besser unvoreingenommen für den jeweiligen Einsatz-Zweck die einfachste und zuverlässigste Methode suchen sollte.
Axel-F - So, 26. Jul, 19:37
0 Kommentare - Kommentar verfassen - 0 Trackbacks
