Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Bilder in Fließtext positionieren

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Eigenschaft Float bietet eine weitere Variante, um die Position von HTML-Elementen anzupassen. Diese dient hauptsächlich dazu, Bilder optimal in einem Fließtext zu platzieren.

Transkript

Neben der Eigenschaft "position", mit den Werten "static", "relative", "absolute" und "fixed", gibt es noch die Eigenschaft "float" mit der Sie ebenfalls die Positionierung eines Elements verändern können. "float" ist eine eigenständige CSS-Eigenschaft und kann die Werte "left" und "right" oder "none" bekommen. "float: none" ist die Standardeinstellung, "n-o-n-e", und "left" oder "right" bewirken, dass ein Element nach links oder nach rechts gefloatet wird. "float: center" gibt es nicht. "to float" heißt schweben und eine schwebende Box macht drei Bewegungen: Sie erhebt sich ein bisschen aus dem Fluss, sie schwebt wie ein Heliumballon in der umgebenden Box auf einer Seite nach oben und driftet dann je nach Windrichtung nach "left" oder nach "right", also auf die jeweils andere Seite. Das klassische Einsatzgebiet zum Floaten ist die Positionierung von Bildern in einem Fließtext. Ich habe hier bereits eine Grafik eingebunden, die Grafik heißt "ballon.jpg". Hier sehen Sie das im Editor. im Ordner "anfang" für das zweite Kapitel hier, für Float und Clear. Hier sehen Sie "ballon.jpg". 78 mal 100 Pixel, 2,3 Kilobyte Und hier auf der Startseite ist die Grafik bereits eingebunden. Da ist es, am Anfang des Absatzes. Und man sieht das ganz deutlich: Hier der Text beginnt unten, das heißt, das fließt nicht wirklich schön da drum herum. Anders ausgedrückt, der Ballon ist drin, aber er schwebt noch nicht und das wollen wir jetzt im nächsten Schritt machen. Ich setze den Cursor in das Image-Element und gebe das Attribut "style" ein. Ich schreibe hier einfach mal direkt in das Element, - ein Inline-Style nennt sich das - "float: left;" Speichern. Rüber in den Browser, neu laden. Und Sie sehen, jetzt fließt der Text um die Grafik drum herum. Das heißt, diese Grafik ist gefloatet. Das sehen wir jetzt hier, "float: left". Wenn ich das wieder ausstelle, sehen Sie gleich: Ah, da ist der Unterschied zwischen gefloatet und nicht gefloatet. Was noch nett wäre, ist ein klein bisschen Abstand hierzu. Und das ist nicht ganz so einfach wie erwartet. Der Text hier im Inhaltsbereich des Absatzes umfließt die Grafik. Wenn ich das hier also aufrufe, haben wir hier den Absatz. Und man sieht das sehr schön hier ist die Grafik. Wenn ich jetzt aber den Absatz markiere, können Sie oben sehr schön sehen, dass der Text zwar um die Grafik fließt, aber der hellgelbe Bereich unten, der "margin", der geht bis unter die Grafik. Das heißt also "background", "padding", "border" und "margin" des Absatzes in dem die Grafik sitzt, fließen nicht um die Grafik herum, sondern rutschen darunter. Mit anderen Worten, wenn Sie einen Abstand erreichen wollen, zwischen Bild und Text, dann müssen Sie diesen Abstand dem Bild geben. Oder Sie müssen einen sehr großen Abstand nehmen, aber effektiver ist es mit dem Bild. Ich schreibe das hier mal rein. Nach rechts soll ein bisschen Abstand, "margin: right", Doppelpunkt, wir nehmen mal 15 Pixel. Speichern. Rüber und neu laden. und da ist schon der Abstand. Auch das noch einmal kurz im Entwicklertool. Sie sehen die Grafik und da sieht man sehr schön den Abstand zum Text.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Einfach nur genial!
Monika G.

Ich bin jedesmal begeistert von den Videotutorials von Peter Müller. Er überzeugt mit seiner sympathischen Stimme und dem richtigen Tempo, schafft es, komplizierte Sachverhalte einfach zu strukturieren und so logisch und übersichtlich aufzubauen, dass es jeder verstehen kann. Für mich ist er eine großartige Hilfe beim Erlernen von Webdesign. Vielen vielen Dank, lieber Peter Müller! Ich hoffe, dass noch viele weitere Tutorials folgen!!

 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!