Positionieren von Elementen in der Entwurfsansicht

Artikel
09/03/2008

Aktualisiert: November 2007

Wenn Sie im HTML-Designer HTML-Seiten oder ASP.NET-Webseiten erstellen, werden die Elemente physikalisch von oben nach unten angeordnet. Standardmäßig erfolgt das Rendern der Elemente bei der Übergabe der Seite an den Browser in der gleichen Reihenfolge. Diese Methode wird manchmal als Flusslayout bezeichnet.

Sie können Elemente auch zweidimensional anordnen, indem Sie die Elemente mit horizontalen und vertikalen Koordinaten irgendwo auf der Seite positionieren. Diese Layoutoption nutzt die Positionierungsoptionen, die durch die Formate verfügbar sind.

In der Entwurfsansicht können Sie Elemente ziehen, um sie auf der Seite zu positionieren, und Sie können Elemente auswählen, um Positionierungsoptionen darauf anzuwenden. In der Entwurfsansicht werden die Elemente dort angezeigt, wo Sie sie positionieren. Sie können Elemente mithilfes ihres Ziehpunkts neu positionieren. In der Quellansicht können Sie im Markup Positionierungsoptionen für einzelne Elemente festlegen.

Wenn die Seite ausgegeben wird, zeigt der Browser die Elemente entsprechend den von Ihnen angegebenen Positionierungsinformationen an.

Flusslayout

Elemente, die über keinerlei Positionierungsformateigenschaften verfügen, werden auf der Seite von oben nach unten angeordnet und entweder von links nach rechts oder von rechts nach links. Dies ist abhängig von der Festlegung im dir-Attribut der Seite oder des Containerelements des Elements bzw. von der Spracheinstellung des Browsers. Alle Webbrowser können HTML-Dokumente anzeigen, die dieses Layout verwenden. Elemente werden manchmal neu angeordnet, wenn sich die Größe der Seite ändert.

Wenn Sie für eine Seite das Flusslayout verwenden, können Sie Elemente innerhalb eines table-Elements ausrichten oder ein div-Element mit Positionierungsformat- oder Textausrichtungseigenschaften verwenden. Die Elemente dürfen sich jedoch nicht überschneiden. Elemente können sich bei einer Größenanpassung der Seite verschieben, je nachdem, ob Sie die Größe von Tabellen und Zellen in absoluten oder prozentualen Werten angeben.

Zweidimensionale Positionierung

Sie können einzelnen Elementen Positionierungsoptionen zuweisen, sodass Sie die Elemente auf der Seite exakt positionieren können.

Sie können auch für alle neuen Elemente, die Sie der Seite hinzufügen, Positionierungsoptionen angeben.

Mit dem Microsoft Visual Web Developer-Webentwicklungstool können Sie Positionierungsoptionen angeben, die der W3C-Spezifikation für Cascading Stylesheets entsprechen. Die Positionierungsoptionen sind für jeden Browser gültig, der den W3C-HTML 4.0-Standard implementiert hat, einschließlich solcher Browser, die XHTML 1.1 unterstützen.

Dies sind die Optionen:

absolute

Das Element wird an einer Position auf der Seite gerendert, die durch eine beliebige Kombination der Formateigenschaften left, right, top und bottom definiert ist. Die Definition der Position 0,0 basiert auf dem übergeordneten Element des aktuellen Elements. Das übergeordnete Element ist das erste Containerelement, das über Positionierungsinformationen verfügt. Wenn sich beispielsweise das aktuelle Element innerhalb eines div-Elements mit Positionierungsinformationen befindet, wird die absolute Position auf Grundlage der Position des div-Elements berechnet. Wenn das aktuelle Element nicht über ein Containerelement mit Positionierungsinformationen verfügt, werden die Positionierungsinformationen basierend auf dem body-Element berechnet.

relative

Das Element wird an einer Position auf der Seite gerendert, die durch die left-Formateigenschaft und die top-Formateigenschaft definiert ist. Diese Option unterscheidet sich dadurch von absolute, dass die Position 0,0 in Bezug auf die Position des Elements im Seitenfluss definiert wird. Ein Element mit relativer Positionierung, bei dem top und left auf 0 festgelegt sind, erscheint normal im Fluss.

Hinweis:
Bei Elementen mit absoluter oder relativer Positionierung weicht die Darstellung auf der Seite teilweise von der Deklaration im Markup der Seite ab, was Anlass zur Verwirrung sein kann. Angenommen, Sie definieren in der Quellansicht eine Schaltfläche als erstes Element im Markup, aber nachdem Sie ihre Positionierung festgelegt haben, wird die Schaltfläche in der gerenderten Seite bzw. in der Entwurfsansicht als letztes Element angezeigt.

Bei Elementen mit absoluter oder relativer Positionierung weicht die Darstellung auf der Seite teilweise von der Deklaration im Markup der Seite ab, was Anlass zur Verwirrung sein kann. Angenommen, Sie definieren in der Quellansicht eine Schaltfläche als erstes Element im Markup, aber nachdem Sie ihre Positionierung festgelegt haben, wird die Schaltfläche in der gerenderten Seite bzw. in der Entwurfsansicht als letztes Element angezeigt.

static

Das Element wird im Flusslayout gerendert – das Element verwendet also keine zweidimensionale Positionierung. Wählen Sie diese Option beispielsweise aus, wenn Sie eine Positionierungsoption für ein einzelnes Steuerelement festlegen möchten, die eine von einem Design oder Stylesheet geerbte Einstellung überschreibt.

In Visual Web Developer gibt es auch die Positionierungsoption Not Set, mit der Sie vorhandene Positionierungsinformationen für einzelne Steuerelemente oder für zukünftig noch hinzuzufügende Steuerelemente entfernen können.

Positionieren von statischem Text oder Elementgruppen

Für das Erstellen von statischem Text oder Elementgruppen als Einheit können Sie der Seite eine Ebene hinzufügen. Eine Ebene ist ein div-Element, das Positionierungsinformationen enthält, sodass Sie es auf der Seite beliebig verschieben können. Sie können dann Text eingeben oder Elemente in das div-Element ziehen. Visual Web Developer verfügt im Menü Format über einen Befehl zum Hinzufügen einer Ebene, oder Sie können das div-Element selbst erstellen und Positionierungsinformationen manuell hinzufügen.

Einschränken von Positionen durch ein Raster

Wenn Sie bei absoluter oder relativer Positionierung auf Basis von Pixeln positionieren (d. h. wenn die left-Eigenschaft und die top-Eigenschaft in Pixel angegeben sind), können Sie per Option festlegen, dass die Elemente an einem unsichtbaren Raster ausgerichtet werden sollen. Dies erleichtert die Ausrichtung der Elemente auf der Seite. Ausführliche Informationen finden Sie unter CSS-Positionierung, HTML-Designer, Dialogfeld "Optionen".

Schichten von Elementen

Wenn Sie absolute oder relative Positionierung verwenden, können Sie einander überschneidende Elemente definieren, die dann im Browser mit Überschneidung angezeigt werden. Wenn Sie Elemente mit einer Tabelle positionieren, können Objekte sich nicht überschneiden.

Elemente mit absoluter oder relativer Positionierung können eine z-index-Eigenschaft besitzen, die die Position des Elements in der Reihenfolge von hinten nach vorne in einer dritten Dimension angibt. Wenn zwei Elemente sich überschneiden, wird das Element mit dem höheren Z-Index-Attributwert vor dem anderen angezeigt. Wenn Sie zur Positionierung in der Entwurfsansicht Befehle verwenden, wird die z-index-Eigenschaft automatisch festgelegt, beginnend mit 100 für das am weitesten hinten liegende Element. Wenn Sie in der Quellansicht Positionierungseigenschaften hinzufügen, müssen Sie die z-index-Eigenschaft manuell hinzufügen.