Uwe: Anfängerfrage: Layer - Positionierung - Tabellen...

Hallo,

auf meine Frage gestern nach gutem Webdesign antwortete Sven u.a.:"Als Stand der Dinge würde ich Layer und CSS bezeichnen".
Da ich von Layern im Zusammenhang mit Html noch keinen "Schimmer" hatte, habe ich mich hier nochmal durchgearbeitet.
Jetzt sind mir einige Sachen unklar.

Wenn man bei der Suche Layer eingibt erfährt man, dass die Layer-Technik (netscape ab Version 4) inzwischen veraltet ist und durch "CSS-Eigenschaften zum Positionieren von Elementen" abgelöst wurde. Also, wenn man hier von Layern spricht meint man wohl Letzteres, oder ?

Dann habe ich die Diskussion nachgelesen, ob man besser mit "Layern" arbeitet oder mit Tabellen.
Was ich dabei nicht ganz verstehe ist: Um mehrere Grafiken überlappend darzustellen (oder Text und Grafik) bedarf es doch der Positionierung mit CSS. Oder kann man diesen Effekt auch nur mit Tabellen erzeugen?
Wenn ja, wo steht genaueres ?

Danke für eine Antwort und
Gruss
Uwe

  1. Hallo Uwe,

    mit Layern sind meist 'überbegrifflich' ebenen gemeint. definierte Bereiche. bei Netscape4x sind das Layer. die versteht aber nur er. Explorer und Netscape 6 meinen damit Divs. netscape4x versteht sie zwar auch, hat aber damit meist probleme.
    Übereinandergelagerte Bilder ereichst du nur mit ebenen. mit tabellen nicht. ganz beschränkt geht das noch mit der Lösung ein Bild als hintergrundbild zu definieren, und das andere als <img> einzubinden. geht aber nur mit einem bild, und mit der positionierung ist es auch schwierig.

    vielleicht konnte ich dir helfen

    gruß ron

  2. Moin!

    Wenn man bei der Suche Layer eingibt erfährt man, dass die Layer-Technik (netscape ab Version 4) inzwischen veraltet ist und durch "CSS-Eigenschaften zum Positionieren von Elementen" abgelöst wurde. Also, wenn man hier von Layern spricht meint man wohl Letzteres, oder ?

    Richtig. "Layer" bezeichnet ganz allgemein irgendeine "Schicht". Damit würde ich in Photoshop z.B. auch die einzelnen Ebenen bezeichnen, die man übereinanderlegt. :)

    Was HTML angeht, war Netscape 4 mit dem Tag <layer> IIRC der erste, der sowas konnte - nur leider ging dieser Weg ins Leere, und das W3C hat einen anderen eingeschlagen.

    Wenn also heute von "Layern" die Rede ist, dann sind das normalerweise Abschnitte mit <div>. Ich würde da auch garkeine Trennung machen zwischen <div>, die mit CSS positioniert sind, und <div>, die einfach nur im Dokumentenfluß ihren automatischen Platz finden. Das sind alles Layer, und man _kann_ sie positionieren, muß aber nicht. Und welche Layer positioniert werden, und welche nicht, kann auch je nach Ausgabemedium unterschiedlich sein.

    Auf der Mineralwasser-Seite http://www.glashaeger.de/produkte/mineralwasser/index.php werden zum Beispiel für die Bildschirmdarstellung alle Produkte außer einem garnicht angezeigt, obwohl die Layer geladen wurden. Aber wenn du die Seite als Druckansicht (Opera, IE 6) ansieht oder ausdruckst (IE 5), dann werden alle Produkte inklusive Bild schön hintereinander auf eine Seite gedruckt - ohne Meta-Navigation, ohne Hintergrundbild, aber mit Logo und Überschrift. Für die Druckausgabe wird garnichts positioniert, sondern aussschließlich dem normalen Elementfluß überlassen (wenn man mal von der rechtsbündigen Ausrichtung der Bilder absieht - das ist aber auch alles ganz "natürlich").

    Kleine Anmerkung: Der Effekt funktioniert im IE nur bei frisch geladener Seite - das ist ein kleiner Schönheitsfehler, den ich noch nicht behoben habe, ich weiß aber, woran es liegt. In Opera ist alles bestens.

    Dann habe ich die Diskussion nachgelesen, ob man besser mit "Layern" arbeitet oder mit Tabellen.
    Was ich dabei nicht ganz verstehe ist: Um mehrere Grafiken überlappend darzustellen (oder Text und Grafik) bedarf es doch der Positionierung mit CSS. Oder kann man diesen Effekt auch nur mit Tabellen erzeugen?

    Eine Tabelle ist immer eindimensional. Wenn ich mir vorstellen würde, die Glashäger-Seite mit Tabellen zu realisieren, wäre das ein ziemliches Problem geworden. Tabellen mögen nun mal klar rechteckige Formen. Es läßt sich aber keine Zelle über eine andere Zelle legen - auch mit verschachtelten Tabellen nicht. Man hätte dann die Bildvorlage einfach passend zerschneiden müssen, was vermutlich einen relativ großen Aufwand bedeutet hätte, wenn sich einzelne Bilder ändern.

    Mit Layern hat man größere gestalterische Freiheit, weil natürlich ein tabellenartiges Design geht, aber noch wesentlich mehr. Nur runde Formen gibts mit HTML (egal was man nimmt) noch nicht, alles ist rechteckig.

    - Sven Rautenberg

    1. Moin!

      Auf der Mineralwasser-Seite http://www.glashaeger.de/produkte/mineralwasser/index.php werden zum Beispiel für die Bildschirmdarstellung alle Produkte außer einem garnicht angezeigt, obwohl die Layer geladen wurden. Aber wenn du die Seite als Druckansicht (Opera, IE 6) ansieht oder ausdruckst (IE 5), dann werden alle Produkte inklusive Bild schön hintereinander auf eine Seite gedruckt - ohne Meta-Navigation, ohne Hintergrundbild, aber mit Logo und Überschrift. Für die Druckausgabe wird garnichts positioniert, sondern aussschließlich dem normalen Elementfluß überlassen (wenn man mal von der rechtsbündigen Ausrichtung der Bilder absieht - das ist aber auch alles ganz "natürlich").

      die Druckvorschau tut's inzwischen auch in Mozilla... ich hoffe allerdings, das das, was er zu papier bringt besser aussieht, als die Vorschau....:)

      Eine Tabelle ist immer eindimensional. Wenn ich mir vorstellen würde, die

      eeh.. zweidimensional :) und CSS position: ist dann mehr oder weniger 3D...

    2. Danke an Dich Ron und Sven, jetzt habe ich es begriffen.

      Auf der Mineralwasser-Seite http://www.glashaeger.de/produkte/mineralwasser/index.php...

      Wie hast Du den bläulichen Schatteneffekt hinter den Bildern gemacht - mit einem Grafikprogramm oder auch mit CSS.

      Gruss
      Uwe

      1. Moin!

        Wie hast Du den bläulichen Schatteneffekt hinter den Bildern gemacht - mit einem Grafikprogramm oder auch mit CSS.

        Das ist das Photoshop der Grafikerin. Ich hab die Grafiken nur "zersägt".

        Ich stand vor der Wahl, entweder den Schatten mit "nichts drauf" als Extra-Layer zu machen und dann das Bild passend als Extra-Layer darüberzusetzen, oder so wie jetzt, den Schatten plus Bild als Gesamtheit.

        Dadurch ist die Position dieser Bildelemente nicht mehr frei wählbar, weil das dahinterliegende Bild im Schattenbereich mit Bestandteil des Vordergrundes ist. Einfach verschieben sähe doof aus, man müßte immer auch das Bild neu ausschneiden. Aber das wäre vermutlich relativ schnell erledigt: CSS ändern, Bilder neu schneiden und die alten Bilder damit überschreiben - fertig. Ist ein wenig Fleißarbeit, aber das macht man ja auch nur zweimal: Einmal bei der Erstellung der Vorlagenseite, und dann (hoffentlich) noch einmal, wenn die endgültige Position festgelegt ist.

        - Sven Rautenberg