Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Positionierung mit CSS

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Positionierung mit CSS

CSS ist nicht nur zur Auszeichnung von Schrift oder zur farbigen Gestaltung da - mit CSS können alle Elemente auch im Raum positioniert werden. So kann ein ansprechendes Layout gestaltet werden - ganz ohne Stützkorsett aus Tabellen, wie es lange üblich war. Das hat den Vorteil, dass ein solches Layout später jederzeit leicht ohne Eingriff ins Markup verändert werden kann - nur durch Veränderungen in der CSS-Datei. So kann z. B. leicht ein Menü von links nach rechts versetzt werden - nur durch eine Änderung in der CSS-Datei und das auf allen Seiten gleichzeitig!

Positionierungsarten

Es gibt verschiedene Arten der Positionierung. Wird keine Positionierungsangabe mitgegeben, so werden die Elemente einfach in ihrem natürlichen Fluß positioniert (was der Angabe position:static entspräche). Inline-Elemente (z. B. a, img, span) legen sich dabei nebeneinander, Blockelemente (z. B. hx, p, div) dagegen untereinander. Möchte man ein anderes Verhalten, so kann display helfen.

Relative Positionierung

Mit position:relativekann das Element aus seinem natürlichen Fluß heraus verschoben werden. Dabei verschieben sich die umgebenden Elemente nicht mit – Überlappungen sind also möglich.
Außerdem kann ein relativ positioniertes Element auch als Elternelement für absolut positionierte dienen. Gelegentlich braucht man diese Positionierungsart auch, um Browserbugs zu reparieren – speziell dem Internet Explorer hilft es oft, Elemente wie gewünscht am Platz zu halten.

Absolute Positionierung

Durch position:absolute kann man Elemente genau an bestimmte Stellen positionieren – was auf der einen Seite verlockend erscheint, vor allem für diejenigen, die gerne ein pixelgenaues Layout wollen. Auf der anderen Seite sind absolut positionierte Layouts aber extrem unflexibel, da die Elemente keinerlei Rücksicht aufeinander nehmen – sie legen sich im Zweifelsfalle einfach übereinander und verdecken den Inhalt. Insbesondere bei Schriftvergrößerungen oder anderen Viewportgrößen gibt es oft Probleme.

Fixe Position

Mit position:fixed können Elemente auf der Seite fixiert werden – auch beim Scrollen bleibt ein so positioniertes Element zum Beispiel immer in einer bestimmten Ecke. Leider können noch nicht alle Browser diese Positionierung (genauer: der Internet Explorer kann es nicht) – außerdem muß man natürlich auch hier wieder die mögliche Überlappung und Verdeckung anderer Inhalte beachten.

Das Floaten

Doch damit nicht genug – CSS kann noch mehr!

Man braucht nicht immer positionieren, Elemente können auch einfach per float nach rechts oder links verschoben werden. Der Inhalt bleibt dabei immer sichtbar und wird nur verschoben.
Mit Floats bleibt man also sehr flexibel in der Gestaltung.
Allerdings soll auch nicht verschwiegen werden, dass es leider einige Browserprobleme gerade bei der Verwendung von float gibt, die einem das Leben manchmal schwer machen können.

Zusammenfassend läßt sich sagen, dass CSS viele Möglichkeiten an die Hand gibt, eine Webseite ansprechend zu gestalten. Tabellen als Fachwerkkrücke sind daher heute nicht mehr notwendig. Trotzdem braucht es etwas Erfahrung, weil die doch recht unterschiedlichen Browserinterpretationen nicht immer einfach zu beherrschen sind.

Weiterführende Links:

Kommentare

Matthias
am 15.12.2005 - 12:13

So richtig hilfreich finde ich den Artikel ehrlich gesagt nicht. Immer wenns interessant wird bricht er ab, konkretes sucht man vergebens. Kurz zsammengefasst sagt er uns doch nur: Absolute, fixe und float-Positionierung kann der IE sowieso nicht, relative Positionierung hilft zwar, "Elemente wie gewünscht am Platz zu halten" und "Browserbugs zu reparieren". Aber wie das geht verrät man uns nicht. Irgendwie bin ich jetzt nicht viel schlauer als vorher.

Permanenter Link

joko13
am 15.12.2005 - 14:25

Ich muß mich hier Matthias anschließen. Der Beitrag kratzt leider nur an der Oberfläche. Eine intensive Auseindandersetzung mit CSS-Positionierung würde hier aber sicherlich den Rahmen sprengen.

Permanenter Link

ulle
am 15.12.2005 - 15:57

Ihr wollt tiefere Informationen?

Dann arbeitet ein mal durch die Links die Teresia aufgeführt hat.
Hier noch ein kleines Tutorial:

http://www.webwriting-magazin.de/sogehts/csstutorial/tut1.html

Permanenter Link

Matthias
am 16.12.2005 - 11:06

Natürlich kann man in so einem Artikel nicht alles erschöpfend behandeln. Was ich meine wird wohl am ehesten deutlich, wenn man sich als Vergleich mal die exzellenten Artikel 10, 11, 12 oder auch 16 ansieht.. nach jeder Artikellektüre bin ich (als CSS-Anfänger) sofort losgerannt und habe mein eigenes Set von Stylesheets optimiert. Nach diesem hier habe ich nur ratlos auf meinen Code gestarrt und überlegt, was mit die Autorin eigentlich sagen wollte..

Permanenter Link

Iris
am 16.12.2005 - 12:46

"nach jeder Artikellektüre bin ich (als CSS-Anfänger) sofort losgerannt und habe mein eigenes Set von Stylesheets optimiert. "

Was ist daran optimal, wenn man einfach stur macht, was andere vorbeten?
Darum sollte es imo gar nicht gehen. Ich finde es gut, sich Denkanstöße zu holen, dann loszusurfen und weiter zu recherchieren - auch ruhig mal nach abweichenden Meinungen und Vorgehensweisen zu forschen. Und dann anfangen, über das nachzudenken, was man aufgenommen hat, Fragen stellen, Zweifeln, Vor- und Nachteile verschiedener Methoden abzuwägen, sich eine eigene Meinung zu bilden. Dabei kommen einem sogar manchmal ganz neue Ideen oder Variationen und Kombinationen dessen in den Sinn, was man aufgenommen hat. SO funktioniert imo moderne Webentwicklung. Dabei entwickelt man nicht nur Webseiten, sondern nebenbei auch sein Verständnis vom Web als lebendiges Medium. Das ist kein Patentrezept, das man sich einfach mal so verschreiben lässt und in Nullkommanix ist alles perfekt. Es ist zunächst ein Prozess des Lernens, dann einer des Experimentierens und dann einer des allmählichen Fortschritts. Und am Ende dieses Prozesses stehst Du wieder am Anfang, denn er ist eine Endlosschleife. ;o).

Man kann den Weg, den ich hier beschrieb, aber auch einfacher formulieren - mit den Worten von Stefan Münz: Es geht dabei um 'die Energie des Verstehens'. Und die braucht nun mal auch Zeit, Geduld und Eigeninitiative. Und den 'goldenen Weg', den gibt's imo sowieso nicht. Es gibt viele Wege zum Ziel und ich finde das auch gut so. ;o)

Permanenter Link

Mathias Brodala
am 18.12.2005 - 13:50

Eine wichtige Positionierungsmethode wurde hier (wie so oft) aber vergessen: margin und padding.

Auch damit kann man Elemente wunderbar ausrichten und dennoch die Beeinflussung der Elemente untereinander intakt halten.

Permanenter Link

Matthias
am 18.12.2005 - 18:45

"nach jeder Artikellektüre bin ich (als CSS-Anfänger) sofort losgerannt und habe mein eigenes Set von Stylesheets optimiert."
inwiefern ist diesem Satz zu entnehmen, dass ich stur irgendetwas vorgebetetes nachgemacht habe? Das war es nicht was ich damit sagen wollte. Ich habe jedoch aus den erwähnten Artikeln Erkenntnisse gewonnen, die ich sofort einsetzen konnte (natürlich an meine Bedürfnisse angepasst - das hatte ich eigentlich als selbstverständlich betrachtet und habe es deswegen nicht extra nocheinmal aufgeführt). Aus diesem Artikel hier nicht. Ein einfacher Vergleich: dies ist der einzige Artikel in dem es kein einziges Codebeispiel gibt. (abgesehen von Nr 17) Was nützt mir eine Aussage wie "Möchte man ein anderes Verhalten, so kann display helfen." wenn nochnichtmal gesagt wird, ob display nun eine Eigenschaft (mit welchen zulässigen Werten?) oder ein Wert (von welcher Eigeschaft?) ist. Sicher kann man das in den Links oder bei SelfHTML nachlesen, aber wozu brauche ich dann den Artikel? Dann hätte die Linkliste gereicht.

Permanenter Link

Jens Grochtdreis
am 21.12.2005 - 11:55

@Mathias: margin und padding sind keine Positionierungsmethode, sondern der Aussen- und der Innenabstand eines Objektes. Man nutzt diese allerdings beispielsweise bei der statischen oder relativen Positionierung, um das Objekt vom Nachbarobjekt zu verschieben.

Permanenter Link

Mathias Brodala
am 21.12.2005 - 15:22

Bzw. um das Element an Hand seines Elternelementes ausrichten, richtig.
Warum sollte man margin und padding nicht bei Positionierungsmethoden aufzählen? Durch Beeinflussung der Abstände werden Elemente schließlich auch ausgerichtet. (Sofern sie für die jeweilige Eigenschaft empfänglich sind.)

Permanenter Link

Eckhard Rotte
am 24.12.2005 - 01:43

Es ist wohl kaum möglich, bei einem derart komplexen Thema den Spagat zwischen adventskalendergerechter Artikellänge und angemessener Tiefe der Informationen hinzubekommen.
Hier sind es wohl eindeutig zu viele Themenbereiche geworden, sodaß (wie schon oben erwähnt) an den wirklich spannenden Stellen das nächste Fass aufgemacht wird. Ich vermissse z. B.
die Information, dass absolut positionierte Elemente ihre Position am nächsten positionierten Elternelement ausrichten. Die beschriebenen Probleme mit Schriftgrößen- und Viewportveränderungen kann man damit zu großen Teilen umgehen.

Permanenter Link

Jens Grochtdreis
am 02.01.2006 - 23:09

@mathias: Du magst es sprachlich drehen und wenden, wie Du es möchtest. Weder in der Praxis, noch in der Theorie des W3C haben margin und padding etwas mit Positionierung zu tun. Sie sind Teil des Boxmodells. Für Deine Augen ist der Effekt identisch, ob ich eine Box per absoluter Positionierung 30 Pixel von links platziere oder ob ich dem linken Außenabstand 30 Pixel zuweise. Für die Box und für die Seite macht dies schon einen Unterschied.

Permanenter Link

ayrton89
am 07.01.2007 - 14:10

ich würde padding und margin nicht zu den positionierungseigenschaften zählen. sie sind ganz einfach dazu gedacht, elemente auszurichten, also das geographische verhältnis zu ihrem elternelement zu verändern, wohingegen positionierung vielmehr die geogrpahische lage eines elements innerhalb des dokuments beeinflusst.

Permanenter Link

Die Kommentare sind geschlossen.