729777

Elemente im Web-Editor NVU genau positionieren

15.02.2007 | 11:25 Uhr |

Sie wollen auf einer Web-Seite Bilder und Texte an bestimmten Stellen unterbringen. Die Elemente sollen ihre Positionen auch behalten, wenn sich die Größe des Browser-Fensters ändert. Wir zeigen Ihnen, wie Sie dieses Problem lösen können.

Anforderung:

Fortgeschrittener

Zeitaufwand:

Mittel

Problem:

Sie wollen auf einer Web-Seite Bilder und Texte an bestimmten Stellen unterbringen. Die Elemente sollen ihre Positionen auch behalten, wenn sich die Größe des Browser-Fensters ändert.

Lösung:

Text und Bilder lassen sich auf Web-Seiten mit Tabellen oder per CSS (Cascading Stylesheets) positionieren. Tabellen haben einige Nachteile: Layout-Änderungen erfordern immer einen umständlichen Eingriff in den HTML-Code, und die genaue Positionierung ist nur mit Tricks möglich, etwa durch den Einsatz unsichtbarer Grafiken. Dafür ist die Darstellung ohne weitere Anpassungen praktisch in allen aktuellen Browsern gleich.

Mit CSS können Sie das Layout vom Inhalt der Seite trennen – dadurch ist es später leichter, Änderungen vorzunehmen, die dann auch für alle Seiten auf einmal gelten. Außerdem ist eine pixelgenaue Positionierung möglich. Allerdings bereiten einige CSS-Strukturen vor allem dem Internet Explorer Schwierigkeiten, so dass für diesen spezielle Anpassungen nötig sein können.

CSS-Anweisungen lassen sich mit Hilfe des :Web-Editors NVU komfortabel einbauen. Fügen Sie zuerst den Text ein, und markieren Sie diesen. Klicken Sie dann auf das Symbol „Layer“ (rechts neben dem Auswahlfeld „Schriftart wählen“) in der Format-Symbolleiste. NVU umgibt den Text dann mit einem Rahmen, den Sie beliebig auf der Seite positionieren und in der Größe anpassen können. Auf die gleiche Weise bringen Sie Grafiken und weitere Textbereiche jeweils in eigenen Rahmen unter und ziehen sie auf der Seite an die gewünschten Stellen. Die Rahmen dürfen sich dabei auch überschneiden. Ob ein Element dabei im Vorder- oder Hintergrund steht, bestimmen Sie per Klick auf eine der beiden Schaltflächen neben dem Symbol „Layer“.

Tipp:
Wenn Sie mehrere Seiten im gleichen Layout erstellen möchten, sollten Sie den CSS-Code in einem externen Stylesheet unterbringen. Dabei hilft Ihnen der Editor, den Sie über „Extras, CSS-Editor“ aufrufen. Darüber festgelegte Rahmen sollten Sie in der Normalansicht allerdings nicht verändern. NVU fügt den CSS-Code sonst als Style-Attribut in den jeweiligen Tag und nicht in das externe Stylesheet ein.

0 Kommentare zu diesem Artikel
729777