Diesen Artikel teilen
Infos zum Artikel
Artikel-Thema: Praktisches CSS-Beispiel für Position mit float
Beschreibung: Praktisches CSS-Beispiel für die 👍 Positionierung von Elemente mit Hilfe der ✅ float-Einstellungen, die sehr häufig genutzt werden.
Im Beispiel werden fünf Kästchen, die gleich groß sind, mit float angeordnet. Eigentlich braucht man float:left; nicht gesondert anführen, weil das der Normalfall ist. Wenn man ein Element auf einer Webseite positioniert und nichts schreibt, geht die Seite davon aus, dass das Element links oben hinzugefügt werden soll. Ein Problem kann noch der Rahmen sein, aber im Grunde hat man sonst keine weitere Aufgabe durchzuführen.
Anders sieht es beim zweiten Kästchen der ersten Reihe aus, denn wenn man rechtsbündig anordnen will, braucht es float:right; als Angabe und prompt verabschiedet sich das Kästchen auf die rechte Außenposition. Die zweite Reihe bietet auch Varianten. Zuerst wird mit clear:left; das Anreihen an die obere Reihe ausgeschlossen. Damit erzwingt man eine neue Reihe, obwohl es oben noch genug Platz gegeben hätte.
Webhosting mit viel Software bei Alfahosting (Affiliate-Link)
Dann folgen zwei Kästchen mit float:left; allerdings im zweiten Fall zusätzlich mit einer margin-Angabe für den Abstand nach links, sodass mehr Abstand besteht als zwischen den beiden Kästchen davor.
Die float-Einstellung für die Positionierung ist zu einem sehr häufigen Werkzeug in CSS geworden. Die erste Standardanwendung war die dreispaltige Webseite mit linker und rechter Spalte sowie dem eigentlichen Inhaltsbereich in der Mitte. Mit float reihen sich die Spalten aneinander und damit ist die komplette Webseite sehr einfach aufgebaut.
Auch bei Überschriften nutzt man die float-Einstellung, zum zu erzwingen, dass die Überschrift auch wirklich in einer neuen Zeile beginnt und nicht etwa in einem noch freien Platz beginnt und hineingequetscht wirkt.
Man kann auch bei Absätzen mit float arbeiten, wenn man bestimmte Absätze anders ausrichten möchte und danach wieder zur normalen Darstellung zurückkehren will.
Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)
Die Positionierung ist in CSS eine der Hauptaufgaben und am Anfang nicht immer schlüssig. Margin wird gerne mit Padding verwechselt und nicht jedes float ist richtig gesetzt. Aber wenn man sich eingearbeitet hat, hat man ein mächtiges Werkzeug zur Verfügung. Wichtig ist dabei das Verständnis der Positionsarten.
Ein ganz eigenes Thema ist float, das eigentlich als Textfluss umschrieben werden muss. Doch es regeln das Verhältnis von ganzen Textbereichen oder den Hauptspalten zueinander ebenso.
Ebenfalls sehr oft im Einsatz sind natürlich die Abstände - Abstand vor und nach der Überschrift, vor und nach dem Text sind nur ein paar der Situationen.
Weitere Möglichkeiten bestehen darin, die Breite zu begrenzen oder die Höhe fest anzugeben. Auch die Arbeit mit verschiedenen Schichten oder auch Ebenen mit Indexangabe ist eine Option bei der Positionierung.
Themenseiten
Artikel-Thema: Praktisches CSS-Beispiel für Position mit float
Beschreibung: Praktisches CSS-Beispiel für die 👍 Positionierung von Elemente mit Hilfe der ✅ float-Einstellungen, die sehr häufig genutzt werden.
Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen
Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel