Supportnet / Forum / Webseiten/HTML
Slicen per CSS
Frage
Nochmal eine Frage zum Einsatz von CSS statt Tabellen:
Wie lassen sich grafische Layouts, die sich eigentlich in Tabellenform einfach darstellen lassen ("slicen"), per CSS positionieren? Für jedes grafische Element einen eigenen Container zu definieren ist wohl etwas zu aufwendig.
Antwort 1 von sutadur
Da offensichtlich meine Frage noch niemand gelesen hat, probier ich es jetzt noch einmal ... :o)
Antwort 2 von Ravetti
Nu' sei mal nicht so ungeduldig!
Wenn Du vorher ein Bild zerschnitten hast und diese Puzzleteile in einzelne Tabellenzellen gepackt hast legst Du nun für jedes Teil eine eigene Ebene an und die lassen sich genau positionieren. (Übrigens hat der Browser weniger Probleme damit, x Ebenen darzustellen als x Tabellenzellen, die Anzahl der Ebenen ist also egal.)
Ravetti
Wenn Du vorher ein Bild zerschnitten hast und diese Puzzleteile in einzelne Tabellenzellen gepackt hast legst Du nun für jedes Teil eine eigene Ebene an und die lassen sich genau positionieren. (Übrigens hat der Browser weniger Probleme damit, x Ebenen darzustellen als x Tabellenzellen, die Anzahl der Ebenen ist also egal.)
Ravetti
Antwort 3 von sutadur
Das bedeutet doch in der Folge, dass man tatsächlich jedes Teil seperat anordnen muß. Und das ist je nach Umfang des Layouts m.E. ein nicht zu vertretender Aufwand. Geht das evtl. auch anders?
Antwort 4 von Ravetti
In Dreamweaver kann man Tabellen einfach in Layer konvertieren. Keine Ahnung, ob andere Programme die Option auch haben.
Sonst schickst Du mir die Tabelle und ich konvertiere die.
Ravetti
Sonst schickst Du mir die Tabelle und ich konvertiere die.
Ravetti
Antwort 5 von sutadur
Ne, lieber nicht. Sonst kriegst Du jeden Tag mehrere Mails von mir, und das möchtest Du sicher nicht wirklich ... *gg*
Und selbst wenn ein Editor den Hauptteil der Arbeit übernimmt, scheint mir das eine sehr fragwürdige Methode. Gerade in dieser Richtung sind Tabellen für den Entwickler sehr viel vorteilhafter und einfacher zu handlen.
Und selbst wenn ein Editor den Hauptteil der Arbeit übernimmt, scheint mir das eine sehr fragwürdige Methode. Gerade in dieser Richtung sind Tabellen für den Entwickler sehr viel vorteilhafter und einfacher zu handlen.
Antwort 6 von rfb
CSS setzt eigentlich voraus, dass du deine Grafiken einfach als Grafiken einbindest und nicht als Puzzle.
Wenn du aber aufgrund übergroßer Bilder aufs slicen angewiesen bist, kannst du dafür natürlich auch eine Tabelle nutzen, solltest dann aber im title- und summary-Attribut der Tabelle auch ausdrücklich darauf hinweisen, dass dies eine Layout-Tabelle, die eine Grafik enthält, ist. Für Textbrowser ist evtl. ein "unsichtbarer" Link vor der Tabelle einzufügen, der zu einer Sprungmarke dahinter führt: <a href="#hinterTabelle" title="Tabelle überspringen" class="unsichtbar">Dieser Link überspringt die folgende Layouttabelle</a>
Der Ersatz einer Tabelle, mit der Textbrowser nix anfangen können, durch positionierte divs mit jeweils einem Bildschnipsel, mit denen der Textbrowser auch nix anfangen kann, ist aus Sicht der Barrierefreiheit m.E. doch etwas übertrieben.
Eine Beschreibung der Grafik sollte natürlich nicht fehlen.
Wenn du aber aufgrund übergroßer Bilder aufs slicen angewiesen bist, kannst du dafür natürlich auch eine Tabelle nutzen, solltest dann aber im title- und summary-Attribut der Tabelle auch ausdrücklich darauf hinweisen, dass dies eine Layout-Tabelle, die eine Grafik enthält, ist. Für Textbrowser ist evtl. ein "unsichtbarer" Link vor der Tabelle einzufügen, der zu einer Sprungmarke dahinter führt: <a href="#hinterTabelle" title="Tabelle überspringen" class="unsichtbar">Dieser Link überspringt die folgende Layouttabelle</a>
Der Ersatz einer Tabelle, mit der Textbrowser nix anfangen können, durch positionierte divs mit jeweils einem Bildschnipsel, mit denen der Textbrowser auch nix anfangen kann, ist aus Sicht der Barrierefreiheit m.E. doch etwas übertrieben.
Eine Beschreibung der Grafik sollte natürlich nicht fehlen.
Antwort 7 von sutadur
Sowas in der Art habe ich mir bereits gedacht. Im konkreten Fall bin ich aber nicht nur wegen der Größe eines Bildes auf das Slicen angewiesen, sondern die betreffende Homepage besteht im Grunde komplett aus einer großen Grafik, in die die Menüs und Inhalte optisch integriert sind. Offensichtlich scheint es da doch keine Alternative zu Tabellen zu geben. Da aber eine Vielzahl der verfügbaren Webseiten so oder ähnlich aufgebaut sind, sind wir m.E. noch weit davon entfernt davon sprechen zu können, man könne auf Tabellen verzichten und das gleiche auch mit alternativen Techniken erreichen ... :o(
Antwort 8 von Friedel
Sorry, aber deine Frage macht nicht viel Sinn. Offensichtlich scheinen zwar einige Leute in etwa zu ahnen, was du vorhast, aber mir ist es völlig unklar. Es steht auch nicht in diesem Thread.
Die Frage "Einsatz von CSS statt Tabellen" klingt, wie wenn ein Mantafahrer überlegt ob er Merzedes oder Diesel kaufen soll. CSS lässt dich sehr gut für Tabellen verwenden. Oder auch für andere Htmlelemente. CSS kann aber niemals eine Htmlelement ersetzen, also auch eine Tabelle.
Willst du tatsächlich Bilder zerschnibbeln und wieder zusammen setzen? Wenn ja, wozu?
In dem Fall musst du die einzelnen Schnipsel natürlich irgendwie positionieren. Da gibt es recht viele Möglichkeiten. Am einfachsten davon ist eine Tabelle.
Die Tatasche, dass Tabellen als Layouthilfsmittel gerade out sind, ist kein wirkliches Argument dagegen. Aber hier geht es auch ohne Tabellen.
Die Frage "Einsatz von CSS statt Tabellen" klingt, wie wenn ein Mantafahrer überlegt ob er Merzedes oder Diesel kaufen soll. CSS lässt dich sehr gut für Tabellen verwenden. Oder auch für andere Htmlelemente. CSS kann aber niemals eine Htmlelement ersetzen, also auch eine Tabelle.
Willst du tatsächlich Bilder zerschnibbeln und wieder zusammen setzen? Wenn ja, wozu?
In dem Fall musst du die einzelnen Schnipsel natürlich irgendwie positionieren. Da gibt es recht viele Möglichkeiten. Am einfachsten davon ist eine Tabelle.
Die Tatasche, dass Tabellen als Layouthilfsmittel gerade out sind, ist kein wirkliches Argument dagegen. Aber hier geht es auch ohne Tabellen.
Antwort 9 von sutadur
Zitat:
Willst du tatsächlich Bilder zerschnibbeln und wieder zusammen setzen? Wenn ja, wozu?
Willst du tatsächlich Bilder zerschnibbeln und wieder zusammen setzen? Wenn ja, wozu?
Das ist oftmals notwendig wenn man ein Layout verwendet, dass hauptsächlich auf grafischen Elementen basiert und der Content innerhalb dieser Grafik platziert wird.
Zitat:
CSS kann aber niemals eine Htmlelement ersetzen,
CSS kann aber niemals eine Htmlelement ersetzen,
Genau das meine ich ja auch, aber von vielen wird das genau so vertreten: Vergesst Tabellen, gestaltet lieber mit CSS. Mir ging es lediglich darum heruaszufinden, ob CSS tatsächlich eine "Wunderwaffe" ist, wie es oftmals dargestellt wird.
Antwort 10 von MoRe99
CSS ist keine Wunderwaffe. Tabellen sollten allerdings nur noch dazu verwendet werden, wozu sie gedacht sind, nämlich Daten tabellarisch darzustellen. Warum sollte ich z. B. die Bundesligatabelle, die ich auf einer Homepage zeigen möchte, mit <div> erstellen? Geht viel einfacher mit Tabellen. Und dafür sind sie ja auch da.
Wenn aber Tabellen dafür verwendet werden, das Layout für die Seite zu erstellen (Logo links oben, Navigation darunter, Inhalt rechts etc.) Dann sidn Tabellen wirklich out. Hierfür sollte man dann eben CSS verwenden.
Wenn aber Tabellen dafür verwendet werden, das Layout für die Seite zu erstellen (Logo links oben, Navigation darunter, Inhalt rechts etc.) Dann sidn Tabellen wirklich out. Hierfür sollte man dann eben CSS verwenden.
Antwort 11 von sutadur
Dann nehmen wir das doch einfach mal als Beispiel, wo man nach wie vor auf Tabellen angewiesen ist und wir noch nicht mal annähernd davon sprechen sollten, zur Gestaltung des Layouts gänzlich auf Tabellen verzichten zu können (wie es vielfach oft gepredigt wird).
Antwort 12 von Friedel
Ich mache meine Seiten mit Tabellen und CSS. CSS kann keine Tabelle ersetzen. Natürlich kann man viele Tabellen durch Div ersetzen. Man kann sowohl Div als auch Tabellen durch Css formatieren.