'Neue Formatvorlage' und 'Formatvorlage ändern' (Dialogfelder, Position)
Veröffentlicht: März 2016
Mithilfe der Kategorie Position der Dialogfelder Neuer Stil und Stil bearbeiten können Sie für die Position von Elementen der Benutzeroberfläche auf einer Webseite Cascading Stylesheet-Stilregeln (CSS) definieren. Sie können diese Stilregeln entweder direkt HTML-Elementen zuweisen oder sie der aktuellen Seite oder einem externen Stylesheet hinzufügen.
So definieren Sie eine CSS-Stilregel für Positionen für Benutzeroberflächenelemente auf der aktuellen Seite
Öffnen Sie die Seite in der Entwurfsansicht oder der Quellansicht.
Wählen Sie je nach Bedarf den Text oder die HTML-Elemente aus, auf den bzw. die der Stil angewendet werden soll.
Klicken Sie im Menü Format auf Neuer Stil.
Das Dialogfeld Neuer Stil wird angezeigt.
Wählen Sie im Bereich Kategorie die Option Position.
Die Stilauswahl für die Position wird im rechten Bereich angezeigt.
Wenn Sie Stile in der Entwurfsansicht auf markierten Text anwenden, werden Stilattribute inline in das HTML-Markup für die Seite eingefügt. Wechseln Sie zur Quellansicht, um die neuen Stilattribute zu überprüfen.
So fügen Sie einer in einem externen Stylesheet definierten CSS-Stilregel Positionierungsattribute hinzu
Öffnen Sie ein vorhandenes externes Stylesheet.
Positionieren Sie den Cursor innerhalb der Klammern der Stilregel, die Sie ändern möchten.
Führen Sie einen der folgenden Schritte aus.
Klicken Sie im Editor mit der rechten Maustaste auf das Stylesheet, und wählen Sie dann aus dem Kontextmenü Stil erstellen aus.
Wählen Sie in der Stylesheet-Symbolleiste Stil erstellen aus.
Das Dialogfeld Stil bearbeiten wird angezeigt.
Klicken Sie im linken Bereich auf Position.
Die Stilauswahl für die Position wird im rechten Bereich angezeigt.
UIElement-Liste
In der folgenden Tabelle sind Optionen aufgeführt, die unter der Kategorie Position in den Dialogfeldern Neuer Stil und Stil bearbeiten verfügbar sind.
Positionierungsoptionen
Position
Der Algorithmus, der beim Positionieren eines Elements auf einer Webseite verwendet wird. Gültige Werte sind:absolute: Die Position des Elements wird mithilfe der Eigenschaften top, right, bottom und left angegeben. Diese Eigenschaften gelten relativ zum enthaltenden Block.
fixed: Die Position des Elements wird mithilfe der Eigenschaften top, right, bottom und left angegeben. Diese Eigenschaften gelten relativ zum Browserfenster. Das Element wird nicht in den Bildlauf der Webseite einbezogen.
relative: Die Position des Elements wird basierend auf dem normalen Fluss berechnet und dann mithilfe der Eigenschaften top, right, bottom und left versetzt. Der Versatz gilt relativ zur normalen Position des Elements.
static: Die Position des Elements wird basierend auf dem normalen Fluss berechnet. Die Eigenschaften top, right, bottom und left werden ignoriert. Dies ist die Standardeinstellung.
inherit: Das Element erbt seinen Positionierungsalgorithmus von einem übergeordneten Element.
z-index
Die Stapelebene eines Elements. Elemente mit einer höheren Stapelebene werden vor Elementen mit einer niedrigeren Stapelebene angezeigt.Breite
Die Breite eines Elements. Wenn Sie einen Wert angeben, können Sie entsprechende Einheiten in der Liste auswählen.height
Die Höhe eines Elements. Wenn Sie einen Wert angeben, können Sie entsprechende Einheiten in der Liste auswählen.top
Der obere Rand eines Elements. Wenn die position-Eigenschaft auf static gesetzt ist, wird diese Eigenschaft ignoriert. Wenn Sie einen Wert angeben, können Sie entsprechende Einheiten in der Liste auswählen.right
Der rechte Rand eines Elements. Wenn die position-Eigenschaft auf static gesetzt ist, wird diese Eigenschaft ignoriert. Wenn Sie einen Wert angeben, können Sie entsprechende Einheiten in der Liste auswählen.bottom
Der untere Rand eines Elements. Wenn die position-Eigenschaft auf static gesetzt ist, wird diese Eigenschaft ignoriert. Wenn Sie einen Wert angeben, können Sie entsprechende Einheiten in der Liste auswählen.left
Der linke Rand eines Elements. Wenn die position-Eigenschaft auf static gesetzt ist, wird diese Eigenschaft ignoriert. Wenn Sie einen Wert angeben, können Sie entsprechende Einheiten in der Liste auswählen.
Andere Elemente der Benutzeroberfläche
Auswahl
(nur Dialogfeld Neuer Stil) Sie können einen Klassennamen eingeben oder auf ein HTML-Element klicken, um den Stil darauf anzuwenden. Klassennamen müssen mit einem Punkt (.) beginnen. Sie können auch (Inlinestile) wählen. Dabei wird der Stil auf den markierten Text bzw. die HTML-Elemente inline angewendet.Definieren in
(nur Dialogfeld Neuer Stil) Sie können angeben, wo die Definition der Stilregel geschrieben werden soll. Gültige Werte sind:Aktuelle Seite: Die Stilregel wird in ein style-Element der aktuellen Seite geschrieben.
Neues Stylesheet: Dem Projekt wird ein neues CSS-Stylesheet hinzugefügt, und die Regel wird in das Stylesheet geschrieben.
Vorhandenes Stylesheet: Die Stilregel wird dem CSS-Stylesheet hinzugefügt, das Sie mithilfe der Liste URL angegeben haben.
URL
(nur Dialogfeld Neuer Stil) Sie können ein vorhandenes CSS-Stylesheet auswählen. Diese Option ist nur aktiviert, wenn Definieren in auf Vorhandenes Stylesheet festgelegt ist.Neuen Stil auf Dokumentauswahl anwenden
(nur Dialogfeld Neuer Stil) Legt fest, dass der Stil auf den ausgewählten Text, die Klasse oder das HTML-Element angewendet wird.Vorschau
Zeigt ein Beispiel dafür an, was die Stilregel bewirkt, wenn sie angewendet wird.Beschreibung
Zeigt die CSS-Definition der Stilregel an.