CSS Profi

In dieser Aufgabe geht es darum, wie man die einzelnen Elemente auf einer Seite platzieren kann.

Ziel(e)

• Ich kann verschiedene HTML-Elemente mit CSS an einem gewünschten Ort auf der Website platzieren.

Aufgabe

CSS behandelt alle HTML-Elemente so, als befänden sie sich jeweils in einem eigenen Kasten. Dies kann entweder einen Block- oder Inline-Kasten sein. Der Unterschied zwischen einem Block- und Inline-Element hast du hoffentlich schon herausgefunden.

CSS-Eigenschaft «position»

In CSS kann man mit einem Positionierungsverfahren das Seitenlayout ändern: normaler Fluss, relative und absolute Positionierung. Hierzu wird die CSS-Eigenschaft «position» verwendet. Folgende Werte sind möglich:

• static

• relative

• absolute

• fixed

Finde heraus, wie du bei relativer, fester und absoluter Positionierung die Kästen überlappen kannst?

Recherchiere im Internet die Werte der CSS-Eigenschaft «position», schau dir Live-Beispiele an oder erstelle eigene Beispiele und halte alles in deinem Projektjournal fest.

CSS-Eigenschaft «float» & «clear»

• Was machen diese beiden Eigenschaft?

• Was sind ihre möglichen Werte?

• Was ist der Unterschied zwischen «float» und der CSS-Deklaration «display: inline(-block)» aus Aufgabe T5A1?

Halte alle Informationen und Antworten auf mind. zwei Seiten in deinem Projektjournal fest, so dass du es jederzeit zum Nachschlagen brauchen kannst.