Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Klassen definieren

Testen Sie unsere 1870 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Definition von entsprechenden Klassen im CSS-Quellcode erleichtert die Positionierung von Bildern innerhalb eines Fließtexts.

Transkript

Die Grafik hier mit dem Ballon ist "gefloatet" und der Ballon schwebt im buchstäblichen Sinne hier auf der Seite. Im Editor sehen Sie, das ist mit einem Inline-Style erreicht worden, also mit dem Attribut "style" für die Grafik, und das ist zum Testen sehr schön, aber auf Dauer sind Inline-Styles sehr unpraktisch, weil Sie schlecht wiederverwendbar sind und man muss sie erstmal immer finden hier in dem Quelltext. Deswegen ist das schöner, dort ein paar Klassen einzurichten. Die könnte man, zum Beispiel, "bildlinks" und "bildrechts" nennen und dann in diesen Klassen die Einstellung mit "Margin" und der "Floatrichtung" speichern. Dazu nehme ich hier gleich erstmal den Inline-Style wieder raus. Speichere das und wechsle in das Stylesheet "bildschirm.css". Dort können Sie am Ende der allgemeinen Styles hier von "TEIL I", dort machen wir zwei Klassen, die Reihenfolge spielt keine Rolle. Ich nehme erstmal ".bildlinks" und gebe hier die geschweiften Klammern ein, und dann nehmen wir erstmal "float: left;" und dann wollen wir gleich so einen kleinen Standard-Margin da mit einbauen: "margin-right: 10px;" und nehmen wir "margin-bottom", also Abstand nach unten, auch noch gleich dazu: "10px". Das Ganze will ich kopieren -- bin ja etwas schreibfaul -- und dann ändern. Das ist natürlich auch nicht ganz ohne Risiko, weil man muss dann auch immer die entscheidenden Stellen wirklich ändern. Sie sehen hier ".bildrechts" kriegt also "float: right;" und dann soll der Margin natürlich nach links gehen, immer an die entgegengesetzte Seite und "margin-bottom" unten bleibt gleich. Zwei Klassen: "bildlinks" und "bildrechts". Jetzt zurück hier in den Quelltext der Startseite, und jetzt muss ich dem Bild diese Klasse zuweisen. Ich sage also: "class='bildrechts' ". Speichere das und gehe rüber in den Browser und Sie sehen, da ist das Bild auf der rechten Seite gefloatet. Und im Entwickler-Tool hier gleich noch einmal wieder überprüfen. Dort steht "class='bildrechts' " und hier wird es auch gefunden. In "bildschirm.css", Zeile 57, sehen Sie, dort ist das aus dem Stylesheet hier gleich zu sehen. Jetzt könnte man im Quelltext der Webseite gleich sagen, hier "bildlinks" und dann wäre das auf der anderen Seite. Das Schöne daran ist, Sie können jetzt wieder per Fernsteuerung über die Klassen die genauen Einstellungen vornehmen. Das würde für alle Bilder gelten, die diese Klassen bekommen. Eine weitere Klasse möchte ich noch eben anlegen hier und die nenne ich mal ".bilderrahmen", also zur Verzierung ein klein bisschen, und das wird dann auch gleich zugewiesen. Ein Bilderrahmen soll ein "padding" bekommen von "3px", dann ein "border" von "5px solid" und einem Grauton [#ccc] erstmal, im Zweifelsfall immer grau. Und "border-radius" von "5px", sagen wir einfach mal zum ausprobieren. Jetzt ist er ausgerichtet, da kann alles insgesamt noch etwas rüber; Ordnung ist das halbe Leben. Und suchen die andere Hälfte. "bilderrahmen" haben wir, "padding: 3px", "border: 5px solid", so weit stimmt alles im Überblick. Jetzt gehe ich wieder hier rein und weise die zweite Klasse zu, und das sieht dann so aus: "bilderrahmen" heißt sie, mit einer Leerstelle getrennt von der anderen Klasse. Die Reihenfolge hier spielt keine Rolle, Sie können die genauso gut umdrehen. Wichtig ist das wir speichern, rüber in den Browser und uns das anschauen. So sieht das hier jetzt aus, das ist der Bilderrahmen. Auch den können Sie anschließend per Fernsteuerung gestalten und für alle Bilder, die diesen Rahmen bekommen, dann gleichzeitig ändern.

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)
Derzeit sind keine Feedbacks vorhanden...
 

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!