CSS-Layer

[weebee]

Hallo,

im Prinzip kann ich ja ein Layout vollständig mit Layern ("div") aufbauen, so ähnlich wie ein einem DTP-Layoutprogramm. Durch die Positionierung sitzen die Divs dann auch da, wo sie hin sollen.

Aber was ist, wenn auf dem Zielsystem 'ne andere Schrift(größe) vorhanden ist oder 'ne Vergrößerung eingestellt hat? Dann würde der Text eines Layers unter/über den darunterliegenden Layer laufen. Kann man dagegen was machen?

wb

 

[Nogger]

im Prinzip kann ich ja ein Layout vollständig mit Layern ("div") aufbauen, so ähnlich wie ein einem DTP-Layoutprogramm.

Es ist ein Irrglaube, man könne in HTML ein Layout vorgeben wie in einer PDF Datei. Es kann nur innerhalb gewisser Grenzen den Anschein erwecken. Gründe, weshalb es nicht funktioniert, hast du selbst erkannt.

Aber was ist, wenn auf dem Zielsystem 'ne andere Schrift(größe) vorhanden ist oder 'ne Vergrößerung eingestellt hat? Dann würde der Text eines Layers unter/über den darunterliegenden Layer laufen.

Wenn du die Größe eines Elements in Schriftgrößenunabhängigen Werten angibst, dann gibt der Wert des CSS-Attributs "overflow" an, wie der Browser reagieren soll, wenn der Inhalt des Elements eine zu große Fläche beansprucht.

Kann man dagegen was machen?

Der falsche Weg ist, zu versuchen die Methoden des Papierlayouts auf das Web zu übertragen. Er berücksichtigt einfach nicht, daß der Autor keinen wirklichen Einfluß auf die Darstellungsumgebung beim Benutzer hat.

Der richtige Weg ist, eine Seite so zu gestalten, daß sie sich an die Gegebenheiten des Browsers und die Usereinstellungen automatisch anpaßt.

Ein wichtiger Punkt dabei ist, Längenangaben in Abhängigkeit von der Schriftgröße zu verwenden (Einheit "em"), und nicht in Pixeln.

Das Stichwort, nachdem du suchen kannst lautet "liquid design" oder "elastic design".

 

[weebee]

> dann gibt der Wert des CSS-Attributs "overflow" an

Schon klar, mir gehts hier aber um die anderen Elemente.

> Ein wichtiger Punkt dabei ist, Längenangaben in Abhängigkeit von der Schriftgröße zu verwenden (Einheit "em"), und nicht in Pixeln.
> Das Stichwort, nachdem du suchen kannst lautet "liquid design" oder "elastic design"

Danke für die Tipps, ich werde dann mal forschen gehen...

 

[Nogger]

> dann gibt der Wert des CSS-Attributs "overflow" an

Schon klar, mir gehts hier aber um die anderen Elemente.

Welche anderen Elemente? Overflow sagt, wie der Inhalt eines Elements dargestellt werden soll, wenn der Inhalt mehr Platz braucht als dem Element zur Verfügung steht.

Ansonsten gib doch mal ein konkretes Beispiel.

 

[weebee]

Es geht beispielsweise um das Element, dass sich darunter befindet. Das ist fix. Wird nun der im darüberliegenden Text größer oder länger, schiebt er sich -- aufgrund des Overflows -- unter (oder über) das nachfolgende, fixe Objekt.

Alle nachfolgenden Objekte müssten sich entsprechend verschieben.

Beispiel: http://portal.1und1.de/de/shopping

Einfach mal in die Site reinzoomen, dann siehtst Du was ich meine.

 

[Nogger]

Es wäre gut, wenn du die CSS Nomenklatur verwenden würdest, dann wäre alles viel einfacher und man vermeidet Mißverständnisse.

Es geht dir um Elemente mit "position: absolute", schätze ich jetzt mal. Solch positionierte Elemente sind aus dem normalen Fluß der Elemente herausgenommen und beeinflussen weder die Positionierung anderer Elemente, noch wird ihre Positionierung durch andere Elemente beeinflußt. Ausnahme für den zweiten Teil der vorherigen Ausage sind "position: relative" positionierte Eltern, die den Viewport als Bezugspunkt für die Positionierung ablösen.

Heißt: Da machste nichts, das gehört so.

Die 1 & 1 Seite ist aber ein hervorragendes Beispiel dafür, wie Webspezifika nicht berücksichtigt werden. Ein Rasterkonzept aus dem Papierbereich läßt sich so nicht aufs Web übertragen.

Schreib deine Seite um, so daß sie ohne "absolute" Positionierung auskommt.