Skip to main content

Aufgabe 7: CSS Anordnung

Um unsere Website noch etwas ansprechender zu gestalten, wollen wir nun die Liste der Hobbies und das Bild nebeneinander anordnen. Hier können wir wieder die Klassen verwenden, die wir in der letzten Aufgabe erstellt haben.

  1. Öffne die Datei style.css.
  2. Gehe in den CSS-Selektor, der die Klasse hobbies-bild auswählt.
  3. Ändere die Breite der Klasse hobbies-bild, sodass das Element die Hälfte der Breite des Bildschirms einnimmt. (Tipp: Mit Prozentangaben können wir die Breite relativ zur Breite des Bildschirms angeben.)
  4. Veränder die Position des Elements, sodass es auf der linken Seite des Bildschirms angezeigt wird.
Lösung
.hobbies-bild {
  width: 50%;
  float: left;
}
  1. Gehe in den CSS-Selektor, der die Klasse hobbies-text auswählt.
  2. Ändere die Breite der Klasse hobbies-text, sodass das Element die Hälfte der Breite des Bildschirms einnimmt.
  3. Veränder die Position des Elements, sodass es auf der rechten Seite des Bildschirms angezeigt wird.
Lösung
.hobbies-text {
  width: 50%;
  float: right;
}

Als letztes wollen wir noch erreichen, dass das Bild mittig in dem Container angezeigt wird. Dazu können wir ein CSS-Attribut verwenden, welches wir bereits in der letzten Lektion kennengelernt haben.

  1. Gehe in den CSS-Selektor, der die Klasse hobbies-bild auswählt.
  2. Ändere die Position des Elements, sodass es mittig in dem Container angezeigt wird.
Tipp: Mittiger Text

Erinner dich daran, wie wir in der letzten Lektion den Text mittig angezeigt haben.

Lösung
.hobbies-bild {
  width: 50%;
  float: left;
  text-align: center;
}