nicht angemeldet
Tabellenlayout in CSS nachbauen
StruppiHallo zusammen.
Ich habe mal eine kurze Grundsatzfrage zum Thema Tabellenlayout und CSS.
Ist es möglich, das folgende Tabellenlayout mit dem exakt gleichen Verhalten in CSS nachzubauen?
Code:
<html>
<body>
<table align="center" style="border:0px; width:99%">
<tr>
<td colspan="2" id="Banner" style="background-color:#0000FF; color:#FFFFFF; font-size:24px; text-align:center; height:100px;">
Schriftzug
</td>
</tr>
<tr>
<td width="200" id="Navigation" style="background-color:#0000FF; color:#FFFFFF; font-size:12px; text-align:left;">
<ul>
<li>Navigationspunkt 1</li>
<li>Navigationspunkt 2</li>
<li>Navigationspunkt 3</li>
</ul>
</td>
<td width="*" id="Inhalt" style="background-color:#FFFFFF; color:#000000; font-size:12px; text-align:left;">
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.
</td>
</tr>
</body>
</html>
Mir fehlt bei rein CSS-basierten Layouts etwas wie <td width="*">.
Dadurch kann ich in tabellenbasierten Layouts nämlich meinen Bannerbereich und meine Navigationsleiste mit fixen Höhen- und Breitenwerten definieren und den kompletten übrigen Bereich für den Inhalt nutzen.
In CSS ist dieser Effekt meiner Erfahrung nach nur schwer zu erreichen.
Hierbei stelle ich mir persönlich die folgende Grundsatzfrage:
Ist es wirklich ratsam, auf Biegen und Brechen zu versuchen, alles mit CSS-Positionierung zu gestalten, auch wenn es mit einem Tabellenlayout so viel einfacher wäre?
Ist es wirklich so schlimm, gegen das semantische Markup zu verstoßen, wenn man dadurch den Quelltext weniger kompliziert machen kann?
Ich weiß, dass hier die HTML- und CSS-Experten predigen, CSS-Positionierung einzusetzen, und grundsätzlich gebe ich diesen Leuten ja auch recht.
Nur manchmal hört sich das meiner Ansicht nach so an, als würde man die verwendeten Mittel über den damit zu erreichenden Effekt stellen - und das halte ich persönlich nicht so sinnvoll.
Aber falls mir jetzt jemand eine Lösung mit CSS präsentiert, die exakt das Verhalten des tabellenbasierten Layouts bietet und auf die ich nur noch nicht gekommen bin, dann lasse ich mich natürlich sehr gern eines besseren belehren...
Viele Grüße,
Thomas
-
Hi,
ich muss dir Recht geben. CSS ist ne tolle Sache und kann das Leben echt vereinfachen (vor allem wenn man sich den Luxus erlauben kann den IE zu ignorieren). Aber CSS ist auch bei weitem nicht perfekt und es gibt Dinge, die funktionieren mit Tabellen einfach besser (ich sag nur zwei Spalten die immer gleich hoch sind - da hab ich per CSS bis heute keine brauchbare Lösung gefunden). Ein reines CSS Layout ist was schönes, aber ich denke auch, das es manchmal einfach sinnvoller ist Tabellen zu verwenden.
Marc
-
Hallo AllesMeins.
(ich sag nur zwei Spalten die immer gleich hoch sind - da hab ich per CSS bis heute keine brauchbare Lösung gefunden).
Einen schönen Mittwoch noch.
Gruß, Mathias
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
debian/rules-
Hi,
Also alleine die Tatsache das für so etwas simples wie zwei gleichlange Spalten ein solch langer Artikel nötig ist lässt doch schon tief blicken. Wie "parxistauglich" die Lösung ist werde ich bei Gelegenheit mal ausprobieren, dazu fehlt mir im Moment die Lust...
Marc
-
Hallo AllesMeins.
Also alleine die Tatsache das für so etwas simples wie zwei gleichlange Spalten ein solch langer Artikel nötig ist lässt doch schon tief blicken.
Ja, insotief, dass CSS eigentlich (noch) nicht für spaltenbasierte Layouts gedacht ist.
Einen schönen Mittwoch noch.
Gruß, Mathias
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
debian/rules-
Hi,
Ja, insotief, dass CSS eigentlich (noch) nicht für spaltenbasierte Layouts gedacht ist.
ja, und das ist ziemlich schade, wenn man bedenkt das fast alle Webseiten in irgend einer Form spaltenbasiert sind...
Marc
-
Hallo AllesMeins.
Ja, insotief, dass CSS eigentlich (noch) nicht für spaltenbasierte Layouts gedacht ist.
ja, und das ist ziemlich schade, wenn man bedenkt das fast alle Webseiten in irgend einer Form spaltenbasiert sind...
Ja, dieser Mangel an Kreativität ist in der Tat schade …
Einen schönen Donnerstag noch.
Gruß, Mathias
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
debian/rules-
Hi,
Ja, dieser Mangel an Kreativität ist in der Tat schade …
Seiten sollen nicht kreativ sondern nutzbar sein. Und meiner Meinung nach gibt es wirklich nur eine Handvoll möglicher Grund-Layouts, die wirklich gut zu benutzen sind (Spalten sind eines davon bzw. gehören zu den Grundkonzepten mit denen man ein solches Layout entwerfen könnte). Alle darüber hinausgehende Kreativität geht immer auf Kosten der Übersichtlichkeit oder Nutzbarkeit.
Marc
-
Seiten sollen nicht kreativ sondern nutzbar sein.
Ideal wäre natürlich, wenn eine Seite beides erfüllt ;-)
Aber ich stimme zu, dass die Nutzbarkeit und der Inhalt höhere Priorität haben sollte als ein kreatives Design und die Vermeidung von Layout-Tabellen.
-
hi,
Seiten sollen nicht kreativ sondern nutzbar sein. Und meiner Meinung nach gibt es wirklich nur eine Handvoll möglicher Grund-Layouts, die wirklich gut zu benutzen sind (Spalten sind eines davon bzw. gehören zu den Grundkonzepten mit denen man ein solches Layout entwerfen könnte).
"Inahlte in Spalten" kriegst du auch mit CSS relativ problemlos hin.
Nur das "gleich lang" sind dann wieder designerische Extrawünsche ...
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Nur das "gleich lang" sind dann wieder designerische Extrawünsche ...
Das sind Extrawünsche, die man mit Tabellen ohne großen Aufwand problemlos umsetzen kann ;-)
Viele Grüße,
Thomas-
Nur das "gleich lang" sind dann wieder designerische Extrawünsche ...
Das sind Extrawünsche, die man mit Tabellen ohne großen Aufwand problemlos umsetzen kann ;-)
Dann fang mal an mit einem Tabellenlayout die Anordnung von Elementen zu ändern. Das sind Extra Wünsche die sehr viel Aufwand nach sich zuiehen können.
Es ist halt die Frage ob dir lieber die krzfristige Umsetzung, eines nicht der Technik gerecht werdenen Ziels, wichtiger ist oder ob du langfristig deinen Aufwand, um z.b. Layoutänderungen umzusetzen, verringern willst.
Struppi.
--
Javascript ist toll (Perl auch!)
-
-
-
-
-
Tach.
Ja, insotief, dass CSS eigentlich (noch) nicht für spaltenbasierte Layouts gedacht ist.
ja, und das ist ziemlich schade, wenn man bedenkt das fast alle Webseiten in irgend einer Form spaltenbasiert sind...
Meiner Meinung nach ist das hauptsächlich darin begründet, daß die Tabellen (als ehemaliges Hauptgestaltungsmittel) diese Form vorgaben. Du verwechselst hier Ursache und Wirkung!
Umso mehr schmerzt es mich zu sehen, wie auch heutzutage oft noch junge, unvorbelastete Leute, die sich dem Webdesign zuwenden, zuerst mit Tabellen als Layoutmittel konfrontiert werden als wäre das die tollste Sache seit geschnittenem Brot – und vielleicht sogar der Weisheit letzter Schluß, was die gestalterischen Mittel fürs Web angeht.
Allerdings stimme ich dir zu in Bezug auf Übersichtlichkeit und Nutzbarkeit von Spaltenlayouts. Wenn alles kreuz und quer auf der Seite verteilt ist, fällt die Orientierung den meisten Besuchern sicher schwerer als bei einem spaltenweise sortierten Erscheinungsbild mit vielen geraden Linie, die das Auge führen. ;)
Ich empfinde dennoch 08-15-Spaltenlayouts mit vielen farbigen Kästchen für die großen inhaltlichen Blöcke als ziemlich langweilig – völlig egal ob mit Tabellen oder reinem CSS gebaut – und bin wirklich dankbar für die zusätzlichen Möglichkeiten, die CSS zur Gestaltung bietet.
--
Once is a mistake, twice is jazz.
-
-
-
Hi there,
Also alleine die Tatsache das für so etwas simples wie zwei gleichlange Spalten ein solch langer Artikel nötig ist lässt doch schon tief blicken.
Hehe, voll getroffen;) Ich persönlich versuche so gut es geht, Tabellen zu Layoutzwecken auszuweichen, aber wenn dann der Aufwand für das Gewünschte durch Verzicht auf Tabellen in absolut keinem Verhältnis zum Ergebnis steht, dann soll's mir auch recht sein. Vor allem aber auch, weil ich denke, daß der Inhalt ohnehin wesentlich wichtiger als das Layout ist. Eine Spalte oder zwei, wen interessierts im Normalfall?
Ich denke, daß manche Werbeagentur und auch viele selbsternannte oder echte Webdesigner das kalte Grausen bekämen wüßten sie, wie komplett egal den Besuchern einer Seite das Layout derselben ist. Die Usability muss passen und der Inhalt interessieren. Ein gutes Beispiel ist für mich eBay - grottenschlecht von der Optik aber funktioniell in der Bedienung, darauf kommt es an. Niemand, aber absolut niemanden interessiert es, wie eBay aussieht oder gar, ob Tabellen zu "Layoutzwecken" verwendet wurden.
Den einzigen (und wichtigen!) Vorteil von semantischem Markup seh ich in der Wartbarkeit einer Seite und auch in der Flexibilität, vor allem in Hinblick auf eine etwaige elektronische Verwendung des Inhalts etc. Aber auch das ist für den Surfer oder Besucher meist komplett egal und kein wie immer auch gearteter Mehrwert.
Daher: semantisches Markup dort, wo es aus datentechnischen Gründen unverzichtbar ist, dort, wo es geht, aber keine Klimmzüge. Das steht imho nicht dafür und das bezahlt auch keiner...
-
Ich denke, daß manche Werbeagentur und auch viele selbsternannte oder echte Webdesigner das kalte Grausen bekämen wüßten sie, wie komplett egal den Besuchern einer Seite das Layout derselben ist. Die Usability muss passen und der Inhalt interessieren. Ein gutes Beispiel ist für mich eBay - grottenschlecht von der Optik aber funktioniell in der Bedienung, darauf kommt es an. Niemand, aber absolut niemanden interessiert es, wie eBay aussieht oder gar, ob Tabellen zu "Layoutzwecken" verwendet wurden.
Ganz genau, oder auch Amazon.
Wobei gerade eBay sich die ganze Sache noch vereinfachen könnte, wenn sie auf Tabellen verzichten würden und den HTML Code entschlacken würden. Man sieht dem code schon die entwicklung an.Ich würde sogar soweit gehen und behaupten, dass es keine erfolgreiche Seite gibt, weil sie ein "gutes" (was immer das sein mag, ich verstehe darunter das negative, ein völlig überkanditeltes Layout, mit grossem Headergrafik und Bildchen hier und da usw.) Layout hat, sondern alle Seiten die erfolgreich sind haben einen Nutzen für den Besucher.
Struppi.
--
Javascript ist toll (Perl auch!)-
Ich würde sogar soweit gehen und behaupten, dass es keine erfolgreiche Seite gibt, weil sie ein "gutes" (was immer das sein mag, ich verstehe darunter das negative, ein völlig überkanditeltes Layout, mit grossem Headergrafik und Bildchen hier und da usw.) Layout hat, sondern alle Seiten die erfolgreich sind haben einen Nutzen für den Besucher.
Ja, aber der Nutzen für die Besucher kann durch ein schlechtes, unpraktisches oder nicht richtig durchdachtes Layout extrem eingeschränkt werden...
Marc
-
Ich würde sogar soweit gehen und behaupten, dass es keine erfolgreiche Seite gibt, weil sie ein "gutes" (was immer das sein mag, ich verstehe darunter das negative, ein völlig überkanditeltes Layout, mit grossem Headergrafik und Bildchen hier und da usw.) Layout hat, sondern alle Seiten die erfolgreich sind haben einen Nutzen für den Besucher.
Ja, aber der Nutzen für die Besucher kann durch ein schlechtes, unpraktisches oder nicht richtig durchdachtes Layout extrem eingeschränkt werden...
Ich habe nie davon gesprochen, dass ein schlechtes Design besser wäre als ein gutes. Ich stimme deiner Aussage 100% zu.
Es geht hier in der Diskussion ja um so eine Frage ob eine Spalte durchgängig layoutet werden kann. Das hat für mich null mit richtig oder durchdacht zu tun, sondern klingt wie der Wunsch nach einem überflüssige Designkonzept.
Struppi.
--
Javascript ist toll (Perl auch!)
-
-
-
Tach.
Niemand, aber absolut niemanden interessiert es, wie eBay aussieht ...
Dieser Aussage kann ich so pauschal nicht zustimmen. Der *erste Eindruck*, den man als neuer Besucher einer Seite gewinnt, hängt in meinen Augen schon maßgeblich von deren Erscheinungsbild ab. Wenn's aussieht wie Mist, ist das kein Anreiz, der Seite noch mehr Aufmerksamkeit zu widmen – vor allem, wenn noch 20+ weitere Seiten als Suchergebnissewarten. Natürlich erreichst du diesen Effekt mit schlechter Nutzbarkeit (unübersichliche Navigation etc.) auch. Der Unterschied ist jedoch folgender: Zuerst *sehe* ich die Seite. *Dann* folgt (vielleicht) der erste Klick auf einen Link.
Wenn ich es bereits mit einem "grottenschlechten" Erscheinungsbild schaffe, potentielle Dauerbesucher abzuschrecken, spielt der Inhalt keine Rolle mehr. Ganz ohne die Optik funktioniert es also nicht!
... oder gar, ob Tabellen zu "Layoutzwecken" verwendet wurden.
ACK.
Den einzigen (und wichtigen!) Vorteil von semantischem Markup seh ich in der Wartbarkeit einer Seite und auch in der Flexibilität, vor allem in Hinblick auf eine etwaige elektronische Verwendung des Inhalts etc. Aber auch das ist für den Surfer oder Besucher meist komplett egal und kein wie immer auch gearteter Mehrwert.
Richtig. Dieser Mehrwert geht allein zugunsten des Entwicklers. Den Besucher *muß* das auch gar nicht interessieren.
--
Once is a mistake, twice is jazz.-
hi,
Niemand, aber absolut niemanden interessiert es, wie eBay aussieht ...
Dieser Aussage kann ich so pauschal nicht zustimmen. Der *erste Eindruck*, den man als neuer Besucher einer Seite gewinnt, hängt in meinen Augen schon maßgeblich von deren Erscheinungsbild ab. Wenn's aussieht wie Mist, ist das kein Anreiz, der Seite noch mehr Aufmerksamkeit zu widmen – vor allem, wenn noch 20+ weitere Seiten als Suchergebnissewarten.
eBay benutzt man nicht, weil man im www gesucht hat, sondern weil eBay eBay ist.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Tach.
eBay benutzt man nicht, weil man im www gesucht hat, sondern weil eBay eBay ist.
Ja, die haben es geschafft, sich einen Namen zu erarbeiten, und der Laden läuft. Allerdings sind sie nicht die einzige Plattform dieser Art und deshalb vielleicht doch ein Suchtreffer unter anderen. ;)
Außerdem schien mir Klawischniggs Aussage viel allgemeiner gültig gemeint und eBay nur ein Beispiel zu sein. Nicht alle Seiten (besonders neue, bisher nicht so bekannte) können auf eine ähnliche Erfolgsgeschichte zurückblicken und ihr Erscheinungsbild deshalb völlig "vernachlässigen".
--
Once is a mistake, twice is jazz.
-
-
-
-
Morgen.
Also alleine die Tatsache das für so etwas simples wie zwei gleichlange Spalten ein solch langer Artikel nötig ist lässt doch schon tief blicken.
Für das Grundprinzip reichen auch zweieinhalb Sätze - der Artikel ist aber durchaus lesenswert!
Wie "parxistauglich" die Lösung ist werde ich bei Gelegenheit mal ausprobieren, dazu fehlt mir im Moment die Lust...
Also ich kannte weder diesen Artikel noch habe ich bisher meine Seiten nach dem beschriebenen Schema gegliedert - mein Ergebnis nach kurzem Einlesen: http://user.uni-frankfurt.de/~cgaertne/self/spaltenlayout.html
Der HTML-Code ist unabhängig von der gewünschten Präsentation, und auch das CSS ist nicht wirklich kompliziert - versuche mal, das so hübsch mit Tabellen hinzubekommen!
Gruß
Christoph-
-
Nein ;)
http://user.uni-frankfurt.de/~cgaertne/self/spaltenlayout.html
Ich gebe zu: ein 'sinnloses' <div> hab ich gebraucht, aber am CSS musste kaum was geändert werden:
http://user.uni-frankfurt.de/~cgaertne/self/spaltenlayout_styles.html
http://user.uni-frankfurt.de/~cgaertne/self/spaltenlayout_styles_alt.htmlGruß
CHristoph-
btw: gestern Nacht war ich noch weiter kreativ und habe auch ein etwas praxisnäheres Beispiel zusammengeschustert:
http://user.uni-frankfurt.de/~cgaertne/creation/
Ich bezweifle, dass ich das mit Tabellen in der selben Zeit hinbekommen hätte!
Gruß
ChristophPS: Hintergund und Farben sind von http://www.jakob-persson.com/templates/solaris 'geklaut', der Inhalt stammt von http://thecreation.de...
-
Hi,
http://user.uni-frankfurt.de/~cgaertne/creation/
Ich bezweifle, dass ich das mit Tabellen in der selben Zeit
Kein Problem. Im Gegensatz zu den CSS-Leuten ist es ja nicht so als ob Tabellenlayouts die andere Technologie auf die schwarze Liste gesetzt hätten. Also schnell ne zweispaltige Tabelle. Und dann per CSS die einzelnen Boxen entsprechend formatiert.
Marc
-
Kein Problem. Im Gegensatz zu den CSS-Leuten ist es ja nicht so als ob Tabellenlayouts die andere Technologie auf die schwarze Liste gesetzt hätten. Also schnell ne zweispaltige Tabelle. Und dann per CSS die einzelnen Boxen entsprechend formatiert.
Ich weiß nicht, wie es dir geht: aber ich brauche für das händische Schreiben von Tabellen immer recht lange (liegt wohl vor allem an der Verschachtelung). Ich bleibe davon überzeugt, dass ich für eine Tabellenversion der Seite für ein ähnlich ansehliches Ergebnis (im Firefox) länger gebraucht hätte!
Gruß
Christoph-
Ich weiß nicht, wie es dir geht: aber ich brauche für das händische Schreiben von Tabellen immer recht lange (liegt wohl vor allem an der Verschachtelung).
Na, das wäre aber eine sehr simple Tabelle gewesen:
<table>
<tr>
<td colspan="2">HEADER</td>
</tr>
<tr>
<td>MENU</td>
<td>INHALT</td>
</tr>
</table>Das müsste es dann doch, mit entsprechenden CSS Formatierungsbefehlen, schon tun, oder?
Marc
-
Das müsste es dann doch, mit entsprechenden CSS Formatierungsbefehlen, schon tun, oder?
Nur zu - gib Bescheid, wenn du so weit bist: ich muss gleich weg, wenn ich heute Abend wieder an einen Rechner kann, will ich Ergebnisse sehen! (SCNR)
Gruß
Christoph-
Hehe, ne ich bau lieber an der erwähnten CSS-Only-Non-IE Seite weiter. Das macht deutlich mehr Spaß ;)
Marc
-
Na wer die Zeit hat, so inbrünstig nach Fehlern in meinem gestern Nacht mehr-oder-minder hingerotzten Code zu suchen, der wird ja wohl auch ein Stündchen aufbringen können, um mir die Bessere Und Einfachere Alternative[tm] vorzuführen ;)
Gruß
Christoph-
Hi,
wer sagt denn das es hier an der Zeit mangelt. Geht um den Spaß bei der Sache. Und fehlersuchen macht Spaß, Webseite ohne Beachtung des IE bauen macht Spaß, Code bauen der in allen Browsern funktionieren soll macht keinen Spaß
Marc
-
-
-
-
-
-
-
Und noch einer... Dein Creation-Design ist im IE absolut unnutzbar, wenn man das fenster nicht auf voller Bildschirmgröße hat sondern verkleinert. Monitore mit 1024x768 oder gar 800x600 dürften keine Chance haben...
Und im IE 5 ist es übrigens total zerhauen.
Siehst du langsam das Layouts in CSS bei weitem nicht so einfach und problemfrei sind, wie man vielleicht denken mag?Marc
-
Und noch einer... Dein Creation-Design ist im IE absolut unnutzbar, wenn man das fenster nicht auf voller Bildschirmgröße hat sondern verkleinert. Monitore mit 1024x768 oder gar 800x600 dürften keine Chance haben...
Das liegt an den Bugs des IE: F5 behebt das Problem. Meiner Meinung nach ist das Microsofts Aufgabe, nicht meine...
Je nach Schriftgröße reicht auch eine Viewport-Breite von < 650px, bei der Größe, die ich als angenehm empfinde, wird ab 690px horizontal gescrollt...
Und im IE 5 ist es übrigens total zerhauen.
Siehe zweiter Teil der ersten meiner obigen Aussagen - im Zweifelsfall kriegt der IE halt ein Stylesheet 'light'...
Siehst du langsam das Layouts in CSS bei weitem nicht so einfach und problemfrei sind, wie man vielleicht denken mag?
Für 'vernünftige Browser' nicht - wer auch jede Krücke anständig versorgt sehen möchte, fährt mit Tabellen tatsächlich meist besser.
Gruß
Christoph-
Für 'vernünftige Browser' nicht - wer auch jede Krücke anständig versorgt sehen möchte, fährt mit Tabellen tatsächlich meist besser.
Tja, und leider hat diese Krücke immer noch weit über 50% Marktanteil. Und ist damit schon eine Größe, die man ernst nehmen muss. Habe neulich (für mich) auch mal eine Seite nur für FF und Opera gebaut (übrigends ohne Tabellen). Keine Frage, was man da mit CSS, transparenten PNGs usw. schönes machen kann ist toll. Und man kommt mit verhältnismäßig wenig Code hin.
Aber diesen Luxus kann man sich halt leider nicht erlauben, wenn man Seiten für "alle" Nutzer bauen will...Marc
-
Tach.
Und noch einer... Dein Creation-Design ist im IE absolut unnutzbar, wenn man das fenster nicht auf voller Bildschirmgröße hat sondern verkleinert. Monitore mit 1024x768 oder gar 800x600 dürften keine Chance haben...
Das liegt an den Bugs des IE: F5 behebt das Problem. Meiner Meinung nach ist das Microsofts Aufgabe, nicht meine...
Richtig. Aber bochmal: Was interessiert das die IE-Nutzer, die diese Seite besuchen? Für die funktioniert sie einfach nicht und damit hat es sich aus ihrer Sicht.
Ob du bei tatsächlichen Seiten diese Leute vor den Kopf stoßen willst oder doch lieber Korrekturen für ihren Browser einbaust, bleibt letztlich natürlich dir überlassen.
wer auch jede Krücke anständig versorgt sehen möchte, fährt mit Tabellen tatsächlich meist besser.
Wenn du jedesmal mit deinem CSS bei Null anfängst, vielleicht. Aber die Macken des IEs sind ja umfangreich dokumentiert – inklusive Lösungen. Darauf läßt sich doch aufbauen. :)
--
Once is a mistake, twice is jazz.
-
-
Siehst du langsam das Layouts in CSS bei weitem nicht so einfach und problemfrei sind, wie man vielleicht denken mag?
Ihr macht es euch hier auch schwer. Ein Tabellenlayout mit CSS nachzubauen ist Quatsch.
Und niemand der Ahnung davon hat, würde behaupten es wäre Problemfrei ein Tabellenlayout mit CSS umzusetzen. Im gegenteil, das Problem ist, das es keine Spalten gibt. CSS kennt keine Funktion um eine Spalte darzustellen, wenn du eine willst benutze eine Tabelle!
CSS, fließt und paßt sich an, ist flexibel und Variantenreich. Wer diese Eleganz der Umsetzung im Vergleich zum starren Tabellenkonzept erkennt, für den ist ein CSS Layout (im gegensatz zu einem Tabellenlayout) einfach und problemfrei
Struppi.
--
Javascript ist toll (Perl auch!)
-
-
Und weiter gehts:
Wenn ich im Mozilla die Schrift vergrößere ist das "Login-Feld" nicht mehr nutzbar, weil es vom "Registrieren"-Link überdeckt wird.
So, jetzt reichts aber ;)Marc
-
Das Problem ist da, ich zweifle aber dessen praktische Relevanz an (bei mobilen Geräten könnte ein solch ungünstiges Verhältnis von Schrift- zu Viewportgröße auftreten, die würden aber sowieso ein eigenes CSS bekommen...)
Unschöner Workaround nach ner halben Minute überlegen: z-index (der Registrieren-Link wird dann überdeckt, findet sich aber noch an anderer Stelle...)
Du hast aber recht, dass das Problem mit Tabellen erst gar nicht aufgetreten wäre.
Gruß
Christoph
-
-
-
Hi,
nagut. Spielen wir das Spielchen mal weiter...
Schau dir dein Spaltenlayout mal im IE an...
Marc
-
Keine Angst: darauf habe ich nur gewartet, denn da ich min-height und min-width verwende, war mit schon beim Schreiben klar, dass das im IE nicht geht - das war volle Absicht!
Ist aber alles kein Problem: verwendet man statt dessen
body { overflow: visible; width: 40em; } #content { overflow: visible; height: 20em; }für den IE, sieht's auch dort wie gewünscht aus...
Der kleine Abstand zwischen den Spalten war da schon etwas kniffliger:
#navi { position: absolute; margin-left: -12em; }Gruß
Christoph-
Wenn ich den Schriftgrad erhöhe wird im IE der Header überdeckt...
Keine Frage, aber was du da an dem Design schon nachbessern musstest, bis es so aussieht, wies soll... Da wärst du mit jeder Tabelle schneller gewesen...
Marc
-
Und das Layout funktioniert im IE bei geringerer Auflösung nicht mehr (der Links-Kasten schiebt sich über den Inhalt)
Marc
-
-
-
Im Übrigen spielt dein layout auch nicht mit, wenn du die Navigation verlängerst (also noch 10 Links einfügst). Sowas kann zum Beispiel wichtig werden, wenn man mit ausklappbaren Untermenus arbeiten will oder Redaktionssystemen, die die Navigation anpassen können oder neue Navigationspunkte für angemeldete Nutzer hinzufügen will. Mit Tabellen wäre das kein Problem gewesen :)
-
-
-
-
-
-
ich muss dir Recht geben. CSS ist ne tolle Sache und kann das Leben echt vereinfachen (vor allem wenn man sich den Luxus erlauben kann den IE zu ignorieren). Aber CSS ist auch bei weitem nicht perfekt und es gibt Dinge, die funktionieren mit Tabellen einfach besser (ich sag nur zwei Spalten die immer gleich hoch sind - da hab ich per CSS bis heute keine brauchbare Lösung gefunden). Ein reines CSS Layout ist was schönes, aber ich denke auch, das es manchmal einfach sinnvoller ist Tabellen zu verwenden.
Ja genau, wenn du ein Tabellenlayout entworfen hast, solltest du auch eine Tabelle nehmen.
CSS ist flexibel, d.h. jedes Element kann je nach der zu Verfügung stehenden Fläche angeordnet werden. Du machst als Layouter Vorschläge wie das geschehen kann. Damit sind aber die meisten überfordert, da ein Layout für fast alle erstmal auf dem Papier entworfen wird, dann mancht man Spalten und Reihen und dann versucht man es umzusetzen. Das ist ein Tabellenlayout. Wenn ich sowas haben will sollte ich eine Tabelle verwenden.
Wenn man sich aber gedanklich von diesem Tabllen konzept gelöst hat, merkt man das man mit purem CSS Layout wesentlich mehr erreichen kann und sich besser auf die Bedürfnisse, sowohl der Nutzer als auch des Layouters einstellen, kann.
Struppi.
--
Javascript ist toll (Perl auch!)
-
-
hi,
Hierbei stelle ich mir persönlich die folgende Grundsatzfrage:
Ist es wirklich ratsam, auf Biegen und Brechen zu versuchen, alles mit CSS-Positionierung zu gestalten, auch wenn es mit einem Tabellenlayout so viel einfacher wäre?Ich würde die Frage stellen, ob es wirklich immer nötig ist, ein typisches Tabellenlayout mit CSS "nachzubasteln"?
Nur manchmal hört sich das meiner Ansicht nach so an, als würde man die verwendeten Mittel über den damit zu erreichenden Effekt stellen - und das halte ich persönlich nicht so sinnvoll.
Fragen wie die deine hören sich für mich ein wenig so an, als ob das "Denken in Tabellen" oftmals auch die Kreativität beim Layouten einschränkt.
Wenn ich mir ansehe, was zum Beispiel beim CSS Zen Garden so alles an ungewöhnlichen und überraschenden Layouts rauskommt - dann bedauere ich "die Tabellenlayouter" fast ein wenig.
Ist es wirklich so schlimm, gegen das semantische Markup zu verstoßen, wenn man dadurch den Quelltext weniger kompliziert machen kann?
IdR. ist letzteres m.E. nicht der Fall, eher im Gegenteil.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hallo,
ohne es getestet zu haben:
<html>
<body>für Body: style="width:99%; margin-left:auto; margin-right:auto; text-align:center"
Das text-align ist nur für den IE, der dass fälschlicherweise auf Blockelemente anwendet, margin-left=auto und margin-right=auto aber nicht kapiert.
<td colspan="2" id="Banner" style="background-color:#0000FF; color:#FFFFFF; font-size:24px; text-align:center; height:100px;">
Schriftzug
</td>
</tr>
<tr>Hier stellt sich die Frage, ob du nur einen Schriftzug haben willst, dann wäre hier die Verwendung von <h1> angebracht, ansonsten mußt die Elemente per DIV gruppieren
<td width="200" id="Navigation" style="background-color:#0000FF; color:#FFFFFF; font-size:12px; text-align:left;">
<ul>
<li>Navigationspunkt 1</li>
<li>Navigationspunkt 2</li>
<li>Navigationspunkt 3</li>
</ul>
</td>Die Liste kannst du dann direkt nehmen, du mußt sie nur noch formatieren. Dazu kommt noch float:left, damit der Inhalt links daneben steht.
<td width="*" id="Inhalt" style="background-color:#FFFFFF; color:#000000; font-size:12px; text-align:left;">
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.<br>
Hier steht der Inhalt.
</td>Die Zelle wird dann ein div.
Das sollte funktionieren. Wie gesagt, ich habs nicht getestet. Ein vollkommen gleiches Verhalten wirst du allerdings nicht erreichen, z.B. wird der Inhaltsbereich unter die Navigation gesetzt, wenn der Platz nicht reicht.
Mir fehlt bei rein CSS-basierten Layouts etwas wie <td width="*">.
Dass fehlt mir manchmal auch...
-
Ein vollkommen gleiches Verhalten wirst du allerdings nicht erreichen, z.B. wird der Inhaltsbereich unter die Navigation gesetzt, wenn der Platz nicht reicht.
Und ein derartiges Verhalten schadet meiner Meinung nach die Funktionalität und Nutzbarkeit der Seite - daher möchte ich solche Effekte wenn möglich vermeiden.
-
hi,
Ein vollkommen gleiches Verhalten wirst du allerdings nicht erreichen, z.B. wird der Inhaltsbereich unter die Navigation gesetzt, wenn der Platz nicht reicht.
Und ein derartiges Verhalten schadet meiner Meinung nach die Funktionalität und Nutzbarkeit der Seite
M.E. schadet es der Nutzbarkeit der Seite, wenn ich auf schmalerem Bildschirm querscrollen muss.
Außerdem muss es gar nicht so passieren - du kannst ja entsprechende (Mindest-)Breiten vorgeben.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Ein vollkommen gleiches Verhalten wirst du allerdings nicht erreichen, z.B. wird der Inhaltsbereich unter die Navigation gesetzt, wenn der Platz nicht reicht.
Und ein derartiges Verhalten schadet meiner Meinung nach die Funktionalität und Nutzbarkeit der Seite - daher möchte ich solche Effekte wenn möglich vermeiden.
Kein Problem, nimm statt float position:absolute
float ist ein super Werkzeug um mit CSS ein fliessendes Layout zu erzeugen, das kannst du mit einer Tabele nie erreichen, wenn dir aber dieses Verhalten nicht zusagt, dann solltest du auch kein CSS Layout machen.
In diesem Fall übrigens wird es sowieso selten passieren, dass bei einem Menu Links und dem Inhalt rechts davon der Inhalt unter das Menu rutscht. Und selbst wenn, wer so ein schmales Browserfenster hat, wird froh sein über dieses Verhalten, da er evtl. nicht zweifach scrollen muss, was bei Tabellen die Regel ist wenn der Inhalt nicht in's Browserfenster paßt.
Struppi.
--
Javascript ist toll (Perl auch!)
-
-