Position, Dialogfeld "Stil-Generator"

Článek
09/03/2008

Aktualisiert: November 2007

Auf der Seite Position des Dialogfelds Stil-Generator können Sie Positionierungsattribute für Cascading Stylesheets (CSS) definieren. Sie können diese Attribute entweder direkt HTML-Elementen zuweisen oder zu den CSS-Formatierungsregeln hinzufügen.

So wenden Sie Positionierungsattribute direkt auf HTML-Elemente in der Seite an

Öffnen Sie das HTML-Dokument in der Entwurfsansicht des HTML-Designers, und wählen Sie das zu formatierende Element aus.
Klicken Sie zum Öffnen des Dialogfelds Stil-Generator im Menü Format auf die Option Stil.
Klicken Sie im linken Bereich des Dialogfelds Stil-Generator auf Position.

Das Dialogfeld Position, Stil-Generator wird im rechten Bereich angezeigt.

Wenn Sie Formate den in der Entwurfsansicht ausgewählten Elementen zuweisen, werden CSS-Formatattribute inline in das HTML-Markup für diese Elemente eingefügt. Wechseln Sie zur HTML-Ansicht, um die neu eingefügten Formatattribute zu überprüfen.

So fügen Sie einer in einem externen Stylesheet definierten CSS-Stilregel Positionierungsattribute hinzu

Öffnen Sie ein vorhandenes externes Stylesheet, und platzieren Sie die Einfügemarke zwischen die geschweiften Klammern ({ }) hinter der Auswahl für die gewünschte Stilregel.
Klicken Sie zum Öffnen des Dialogfelds Stil-Generator im Menü Stile auf die Option Stil erstellen.
Klicken Sie im linken Bereich des Dialogfelds Stil-Generator auf Position.

Das Dialogfeld Position, Stil-Generator wird im rechten Bereich angezeigt.

Hinweis:
Das Menü Stile wird angezeigt, wenn Sie ein externes CSS-Stylesheet zum Bearbeiten öffnen. Wenn Sie die Einfügemarke zwischen die geschweiften Klammern hinter der Auswahl für eine Stilregel platzieren, wird im Menü Stile die Option Stil erstellen angezeigt.

Eine in einem externen Stylesheet definierte CSS-Stilklasse kann auf ein Element im <BODY>-Element einer Webseite angewendet werden, indem Sie die CSS-Stilauswahl als CLASS-Eigenschaft für das Element zuweisen.

Die folgenden Optionen sind auf der Seite Position des Dialogfelds Stil-Generator verfügbar.

Aufgaben

UI-Elemente

Positionsmodus

Durch Festlegen des Modus wird bestimmt, welche der nachfolgenden Positionierungsfelder verfügbar werden. Wählen Sie in der Dropdownliste eine der folgenden Optionen aus.

<Nicht gesetzt>
Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.
In Normalfluss positionieren
Ändert die Position des Elements nicht; jedoch können Höhe und Breite angegeben werden. Wenn Sie Im normalen Datenfluss auswählen, wird das folgende CSS-Markup eingefügt:

POSITION:static

Hinweis:

Der Vorschaubereich neben der Auswahl Positionsmodus wird aktualisiert und gibt jeweils den ausgewählten Modus wieder.
Nicht in Normalfluss positionieren
Ermöglicht die Angabe der oberen und linken Position für ein Element relativ zu dessen Position im normalen Fluss; Höhe und Breite können angegeben werden. Der normale Fluss eines Elements ist die Position, an der es sich vor dem Zuweisen der Formatvorlage befand. Wenn Sie Nicht in normalen Datenfluss auswählen, wird das folgende CSS-Markup eingefügt:

POSITION:relative
Absolut positionieren
Ermöglicht die Angabe der absoluten oberen Position, der absoluten linken Position, des Z-Index sowie der Höhe und Breite für ein Element. In der Regel positionieren Sie Elemente absolut, wenn sie an einer bestimmten Position verankert werden sollen. Sie können z. B. ein Logo absolut positionieren, sodass es beim Hinzufügen und Bearbeiten weiterer Elemente nicht verschoben wird. Wenn Sie Absolut positionieren auswählen, wird das folgende CSS-Markup eingefügt:

POSITION:absolute

Hinweis:
Der Vorschaubereich neben der Auswahl Positionsmodus wird aktualisiert und gibt jeweils den ausgewählten Modus wieder.

Wenn Sie einen Positionierungsmodus auswählen, sind die folgenden Optionen verfügbar.

Oben
Legt die obere Position eines Elements entweder als absoluten Wert oder als Wert relativ zu dessen Position im normalen Fluss fest. Geben Sie im Zahlenfeld einen Wert ein, und wählen Sie für die Maßeinheit eine Option aus (px, pt, pc, mm, cm, in, em, ex oder %). Die Standardmaßeinheit ist px. Wenn Sie z. B. 5 eingeben und anschließend die Standardmaßeinheit übernehmen, wird das folgende CSS-Markup eingefügt:

TOP:5px

Hinweis:

Diese Option ist verfügbar, wenn Sie in der Liste Positionsmodus die OptionNicht in normalen Datenfluss auswählen.
Links
Legt die linke Position eines Elements entweder als absoluten Wert oder als Wert relativ zu dessen Position im normalen Fluss fest. Geben Sie einen Wert ein, und wählen Sie für die Maßeinheit eine Option aus (px, pt, pc, mm, cm, in, em, ex oder %). Die Standardmaßeinheit ist px. Wenn Sie z. B. 5 eingeben und anschließend die Standardmaßeinheit übernehmen, wird das folgende CSS-Markup eingefügt:

LEFT:5px

Hinweis:

Diese Option ist verfügbar, wenn Sie in der Liste Positionsmodus die Option Nicht in normalen Datenfluss auswählen.
Höhe
Legt die Höhe eines Elements fest. Geben Sie einen Wert ein, und wählen Sie für die Maßeinheit eine Option aus (px, pt, pc, mm, cm, in, em, ex oder %). Die Standardmaßeinheit ist px. Wenn Sie z. B. 5 eingeben und anschließend die Standardmaßeinheit übernehmen, wird das folgende CSS-Markup eingefügt:

HEIGHT:5px
Breite
Legt die Breite eines Elements fest. Geben Sie einen Wert ein, und wählen Sie für die Maßeinheit eine Option aus (px, pt, pc, mm, cm, in, em, ex oder %). Die Standardmaßeinheit ist px. Wenn Sie z. B. 5 eingeben und anschließend die Standardmaßeinheit übernehmen, wird das folgende CSS-Markup eingefügt:

WIDTH:5px

Hinweis:
Diese Option ist verfügbar, wenn Sie in der Liste Positionsmodus die OptionNicht in normalen Datenfluss auswählen.

Hinweis:
Diese Option ist verfügbar, wenn Sie in der Liste Positionsmodus die Option Nicht in normalen Datenfluss auswählen.

Z-Index
Legt die z-Reihenfolge für ein Element fest. Mit der z-Reihenfolge wird die Anzeige überlappender Elemente gesteuert. Elemente mit höheren Werten in der z-Reihenfolge werden vor solchen mit niedrigeren Werten in der z-Reihenfolge angezeigt. Wenn Sie das Element in der z-Reihenfolge nach oben verschieben möchten, geben Sie eine positive Zahl ein, um z. B. folgendes Ergebnis zu erhalten:

Z-INDEX:99

Hinweis:
Wenn Sie das Element in der z-Reihenfolge nach unten verschieben möchten, geben Sie eine kleinere oder eine negative Zahl ein.

Hinweis:
Z-Index und Position stehen miteinander in Beziehung. Wenn Sie Positionswerte eingegeben haben, die zur Überlappung von Elementen führen, können Sie steuern, welche Elemente jeweils über den anderen angezeigt werden, indem Sie die entsprechenden Werte für den Z-Index zuweisen. Weisen Sie dem Element, das vor dem anderen Element angezeigt werden soll, einen höheren Z-Indexwert zu.