Übung 8: CSS IV

Arbeite auf dem Laufwerk P: im Verzeichnis P:\Informatik\Block 3 - Webprogrammierung\Lektion 8\

Aufgabe 1: Flexbox

  1. Lade die Vorlagedatei ehealth2.html herunter in den Ordner Lektion 8 auf dem Laufwerk P: und bearbeite mit Visual Studio Code.
  2. Aufgabe 1a: Der magentafarbene Seitencontainer soll neben dem Inhaltscontainer ausgerichtet werden. Das Verhältnis soll 4:1 betragen (d.h. Inhaltscontainer ist 4x grösser als Seitencontainer).
  3. Aufgabe 1b (Umbruch): Beim Verkleinern der Fenstergrösse soll der Seitencontainer auf eine Zeile springen, wenn die Basis-Grösse von 330px unterschritten wird. Verwende dafür flex-wrap
  4. Aufgabe 1c (Zusatz –> löse nach Aufgabe 2): Die Navigation soll nun links neben dem Container main stehen.

Aufgabe 2: Flexbox-Navigation

  1. Gegeben ist folgende Navigation: ehealth_nav.html
  2. Gestalte die Navigation mithilfe einer Flexbox gemäss Screenshot, wobei die Buttons alle gleich breit und auf einer Zeile ausgerichtet sind.