Elemente per CSS positionieren
CSS-Position - Relatv - Absolut - Flexibel
Auf Pahl 4u finden Sie fiktive Fragen und Antworten, ohne Garantie auf Vollständigkeit oder Richtigkeit, zu unterschiedlichen Themen aus dem Bereich der Mediengestaltung.
Warum benutzt man CSS?
Durch den konsequenten Einsatz von CSS werden Inhalt und Layout getrennt. So ist beispielsweise auch ein Redesign einer Webpräsens mit vielen Seiten schnell umzusetzen.
CSS bietet mehr Formatierungsmöglichkeiten als HTML und es können mehrere Layouts für unterschiedliche Medientypen angelegt werden. Die Möglichkeit benutzerdefinierte Angaben für Schriftgrößen und Zeilenabstände anzugeben, ist ein wichtiges Kriterium für die Barrierefreiheit.
Wie ist die Rangfolge der einzelnen Stylesheet -Arten. Wie und wo werden diese definiert?
1. Lokale Stylesheets
º Lokale Stylesheet stehen innerhalb von Blockelementen und setzen sich über alle anderen Styles hinweg.
2. Interne Stylesheets
º Interne Stylesheets - stehen innerhalb des Headbereiches und sind den lokalen Stylesheets untergeordnet. Sie müssen auskommentiert werden da ältere Browser CSS nicht lesen können.
3. Externe Stylesheets
º Die CSS-Anweisungen werden in einer externen Datei ausgelagert. Diese Stylesheets sind allen anderen Stylesheets untergeordnet und müssen innerhalb des Headbereichs eingebunden werden.
Wofür werden Positionsangaben benötigt?
Das Attribut "position", verbunden mit einem entsprechenden Wert, befiehlt Elementen woran diese sich ausrichten sollen.
Welche Möglichkeiten gibt es um Elemente per CSS zu positionieren?
» Eine feste Position
» Die statische Positionierung
» Positionierung auf verschiedenen Ebenen
» Eine absolute Positionierung
» Die relative Positionierung
» Flexible Positionsangaben
Wozu könnte man eine feste Positionsangabe verwenden?
Die Position "fixed" wird verwendet, wenn ein Element auf einer Webseite fixiert werden soll.
Beispiel: Ein Bild mit Positionsangaben, position: fixed; bottom: 0; right: 0; bleibt auch beim Scrollen immer in der unteren rechten Ecke. Einzig der Internet Explorer 6 macht hier leider eine Ausnahme und unterstützt den Wert nicht.
Was verstehen Sie unter der statischen Positionierung von Elementen?
Die statische Positionierung per CSS funktioniert einfach und simpel. Es existieren keinerlei Positionsangaben. Alle Inhalte erscheinen in der gleichen Reihenfolge, in der sie im HTML-Quelltext vorliegen.
Wie können Elemente in verschiedenen Ebenen positioniert werden?
Um Elemente in verschiedenen Ebenen übereinander zu platzieren, kann man mit der CSS-Eigenschaft "z-index"S bestimmen, welches Element oben oder unten liegen soll. Je höher der z-index, desto höher ist auch die Position des Elements.
Was können Sie über die absolute Positionierung von Elementen sagen?
Um ein Element absolut zu positionieren, wird dem Selector das Attribut "position" zugewiesen und auf den Wert "absolute" gesetzt.
Die Attribute margin- "left", "right", "top" und "bottom", mit einem entsprechend zugewiesenen Wert, legen den Abstand zu anderen Elementen fest.
Alle weiteren Inhalte sollten nun ebenfalls "absolut" positioniert werden. Werden diese nicht "absolut" positioniert, liegen sie entweder hinter- oder vor dem "absolut" platzierten Element. Bei der Verwendung mehrerer Ebenen kann dies jedoch durchaus erwünscht sein.
Nachteil der absoluten Positionierung: Die Größe der Ansicht ist statisch. Verändert der Benutzer die Schriftgröße dann läuft die Schrift über die Elemente hinaus.
Was verstehen Sie unter der relativen Positionierung von Elementen?
Um ein Element relativ zu positionieren, wird die Eigenschaft position auf den Wert "relative" gesetzt. Der Unterschied zwischen absoluter und relativer Positionierung liegt in der Berechnung der Position.
Relativ positionierte Elemente sind von anderen Elementen abhängig. Ausgehend von der Position eines anderen Elements, wird der Standort des neu zu positionierenden Elements nach rechts, links, oben oder unten verschoben im Dokument verschoben.
Welchbe Vorteile bietet "float" bei der Positionierung?
º Die Seite bleibt flexibel.
º Elemente lassen sich mühelos, ohne Rechnerei, nebeneinander anordnen.
º Floaten bietet viele Gestaltungsmöglichkeiten ohne großen Aufwand.
Was ist beim floaten von Elementen zu beachten?
Jedem Element kann "float" zugewiesen werden. Zum Beispiel einem:
» Container
» Absatz
» Liste
» Bild
Floatende Elemente werden direkt nach dem letzten vorausgehenden Block-Element angeordnet.
Wenn einem Element "float" zugewiesen wird dann erhält es immer eine Richtungsangabe. Entweder links oder rechts. Diese Angabe richtet das gefloatete Element zur angegeben Seite innerhalb seines Elternelements aus.
» Alle Elemente werden automatisch zu Block-Elementen.
» Allen Elementen muss unbedingt eine Breite zugewiesen werden, ohne diese Angabe könnte das gefloatete Element entweder so breit wie sein Inhalt- oder aber wie das Elternelement sein.
Was geschieht, wenn einer Box "clear":both; zugewiesen wird?
Eine Box mit der Eigenschaft "clear" kann horizontal nicht auf derselben Ebene wie ein vorausgehendes floatendes Element liegen. Der obere Rand, der mit "clear" versehenen Box, wird so weit ausgedehnt bis diese Box unterhalb des floatenden Elements angeordnet wird.
Können Floats gegenüberliegend angeordnet werden?
Ja, dazu werden innerhalb des Elternelements zwei Elemente, von denen eines links und das andere rechts floatet, angeordnet. Ist das Elternelement breit genug, entsteht zwischen den beiden Elementen ein Freiraum.
Ist das Elternelement zu schmal, werden die beiden Elemente untereinander angeordnet – das eine auf der linken- und das andere auf der rechten Seite.
Digital und Print von A bis Z