8. Unterrichtsblock

Inhaltsverzeichnis

Display
Position
Z-Index
Float

CSS Display

Die display-Eigenschaft ist eine der wichtigsten CSS-Eigenschaften zur Steuerung des Layouts.
Die display-Eigenschaft gibt an, ob und wie ein Element angezeigt wird.

Jedes HTML-Element hat einen Standardanzeigewert, je nachdem, um welchen Elementtyp es sich handelt. Der Standardanzeigewert für die meisten Elemente ist block oder inline.

Klicken Sie hier, um das Bedienfeld anzuzeigen

Elemente auf Blockebene

Ein Element auf Blockebene beginnt immer in einer neuen Zeile und nimmt die gesamte verfügbare Breite ein (dehnt sich so weit wie möglich nach links und rechts aus). Das Element <div> ist z. B. ein Element auf Blockebene.
Rückblick: https://webentwicklerkurs.de/1-jahr/html/5-unterrichtsblock/

Inline-Elemente

Ein Inline-Element beginnt nicht in einer neuen Zeile und nimmt nur so viel Breite wie nötig ein.

Dies ist ein Inline-<span>-Element innerhalb eines Absatzes.

Beispiele für Inline-Elemente:

<span>
<a>
<img>

display: none;

display: none; blendet Elemente aus. Die Eigenschaft wird häufig mit JavaScript verwendet, um Elemente auszublenden und anzuzeigen, ohne sie zu löschen und neu zu erstellen. Für das <script>-Element wird standardmäßig display: none; verwendet.

Überschreiben des Standardanzeigewerts

Wie bereits erwähnt, hat jedes Element einen Standardanzeigewert. Man kann diesen jedoch überschreiben. Das Ändern eines Inline-Elements in ein Blockelement oder umgekehrt kann nützlich sein, um der Seite ein bestimmtes Aussehen zu verleihen und dennoch den Webstandards zu folgen.

Ein gängiges Beispiel ist das Erstellen von Inline- <li>Elementen für horizontale Menüs:

Beispiel

li {
  display: inline;
}

Hinweis: Das Festlegen der Anzeigeeigenschaft eines Elements ändert nur, wie das Element angezeigt wird , NICHT um welche Art von Element es sich handelt. Ein Inline-Element mit display: block; darf also keine anderen Blockelemente enthalten.

Das folgende Beispiel zeigt alle <span>– und <a>-Elemente als Blockelemente an:

span, a {
  display: block;
}

Unterschied display: none; und visibility: hidden;

Aufgabe

Finde den Unterschied heraus. Erstelle hierfür 3 <p>-Elemente mit Lorem-Ipsum Text im Code-Editor. Probiere beide Eigenschaften am mittleren <p>-tag aus.

Baue zudem Block-Elemente ein, die anschließend als Inline-Elemente gekennzeichnet werden und umgekehrt, um zu sehen was passiert.

Ein Element kann ausgeblendet werden, indem die display Eigenschaft auf gesetzt wird none. Das Element wird ausgeblendet und die Seite wird so angezeigt, als wäre das Element nicht vorhanden:

h1 {
  display: none;
}

visibility: hidden; verbirgt ebenfalls Elemente.

Das Element nimmt jedoch immer noch den gleichen Platz wie zuvor ein. Das Element wird ausgeblendet, wirkt sich aber immer noch auf das Layout aus:

h1 {
  visibility: hidden;
}

Position

Die position-Eigenschaft gibt die Art der Positionierungsmethode an, die für ein Element verwendet wird. Es gibt fünf verschiedene Positionswerte:

static
relative
fixed
absolute
sticky

Elemente werden dann unter Verwendung der top-, bottom-, left– und right-Eigenschaften positioniert. Diese Eigenschaften funktionieren jedoch nur, wenn die position Eigenschaft zuerst festgelegt wird. Sie arbeiten auch je nach Positionswert unterschiedlich.

position: static;

HTML-Elemente werden standardmäßig statisch positioniert. Statisch positionierte Elemente werden von den Eigenschaften top, bottom, left und right nicht beeinflusst.

Ein Element mit position: static; wird nicht besonders dargestellt; es wird immer entsprechend dem normalen Fluss der Seite positioniert.

Dieses Element hat eine statische Position

Hier ist das verwendete CSS:

div {
  position: static;
  border: 2px solid tomato;
  padding: 10px;
}

position: relativ;

Ein Element mit position: relative; wird relativ zu seiner normalen Position positioniert.

Das Festlegen der oberen, rechten, unteren und linken Eigenschaften eines relativ positionierten Elements führt dazu, dass es von seiner normalen Position weg angepasst wird. Andere Inhalte werden jedoch nicht angepasst, um in die Lücke zu passen, die das Element hinterlassen hat.

Dieses <div>-Element hat die position: relative;

Dieses Element hat eine relative Position.

Hier ist das verwendete CSS:

div {
  position: relative;
  left: 30px;
  border: 2px solid tomato;
  padding: 10px;
}

position: fixed;

Ein Element mit position: fixed; wird relativ zum Viewport positioniert, d.h. es bleibt immer an der gleichen Stelle, auch wenn die Seite gescrollt wird. Die Eigenschaften top, right, bottom und left werden verwendet, um das Element zu positionieren.

Ein fixiertes Element hinterlässt keine Lücke auf der Seite, wo es sich normalerweise befinden würde. Zudem überlappen fixierte Elemente die normale Seite.

Beachte das fixierte Element in der linken unteren Ecke der Seite.

Dieses Element hat eine feste Position

Hier ist das verwendete CSS:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 300px;
  border: 2px solid tomato;
  padding: 10px;
  background-color: white;
}

position: absolut;

Ein Element mit position: absolute; wird relativ zum nächsten positionierten Vorfahren platziert (anstatt relativ zum Ansichtsfenster, wie z. B. bei position: fixed;).

Hinweis: Wenn ein absolut positioniertes Element keine Vorgängerelemente mit der Eigenschaft position hat, verwendet es den Textkörper des Dokuments.

Hinweis: Absolut positionierte Elemente werden aus dem normalen Fluss entfernt und können Elemente überlappen.

Dieses Element hat die position: relative;

Dieses Element hat die position: absolute;

Hier ist das verwendete CSS:

div1 {
  position: relative;
  width: 400px;
  height: 200px;
  border: 2px solid tomato;
  padding: 5px;
  background-color: silver;
}

div2 {
  position: absolute;
  top: 80px;
  right: 10px;
  width: 200px;
  height: 100px;
  border: 2px solid tomato;
  padding: 5px;
  background-color: grey;
}

position: sticky;

Ein Element mit position: sticky; wird basierend auf der Bildlaufposition des Benutzers positioniert.

Ein Sticky-Element wechselt zwischen relative und fixed, je nach Scroll-Position. Es wird relativ positioniert, bis eine bestimmte Versatzposition im Ansichtsfenster erreicht wird – dann „klebt“ es an Ort und Stelle (wie position: fixed;).

Hinweis: Internet Explorer unterstützt keine Sticky-Positionierung. Safari erfordert ein -webkit- Präfix (siehe Beispiel unten). Sie müssen außerdem mindestens eines von , oder angeben top, damit right die Sticky-Positionierung funktioniert.bottomleft

In diesem Beispiel bleibt das Sticky-Element oben auf der Seite ( top: 0), wenn Sie seine Bildlaufposition erreichen.

Dieses Element hat die Eigenschaft position: sticky;

Hier ist das CSS:

div {
  position: sticky;
  top: 0;
  border: solid 2px tomato;
  padding: 10px;
  background-color: white;
}

Text in einem Bild positionieren

So positioniert man Text über einem Bild:

Unten links

Oben links

Oben rechts

Unten links

Zentriert

Aufgabe

Gehe in den Code-Editor und baue folgende Dinge nach:

Bild mit überlappendem Text
Ein sticky Element

Z-Index

Mit dem Z-Index können Elemente übereinander gelegt werden. Z-Index funktioniert dabei über Ebenen. Ein Element mit einer höheren Ebenen-Ziffer ist immer über den Elementen mit niedrigeren Ziffern.

Weißes Element (z-index: 1)

Graues Element (z-index: 3)

Grünes Element (z-index: 2)

.weisse-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.graue-box {
  position: absolute;
  z-index: 3; /* Das graue Element wird über dem grünen und dem weißen Element liegen */
  background: slategray;
  height: 60px;  
  width: 70%;
  left: 50px;
  top: 50px;
}

.gruene-box {
  position: absolute;
  z-index: 2; /* Das grüne Element wird über dem weißen Element platziert*/
  background: greenyellow;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}

CSS Float

Die CSS float-Eigenschaft gibt an, wie sich Elemente anordnen sollen, wie sie fließen sollen. Die CSS clear-Eigenschaft gibt an, welche Elemente neben dem gelöschten Element „schweben“ können und auf welcher Seite.

float: left;

float: right;

Die float-Eigenschaft wird zum Positionieren und Formatieren von Inhalten verwendet, z. B. kann man dadurch ein Bild links neben dem Text in einem Container „schweben“ lassen.

Die float-Eigenschaft kann einen der folgenden Werte haben:

left– Das Element schwebt links neben seinem Container
right– Das Element schwebt rechts neben seinem Container
none– Das Element schwebt nicht (wird genau dort angezeigt, wo es im Text vorkommt). Dies ist Standard
inherit– Das Element erbt den Wert seines Elternelements

In ihrer einfachsten Verwendung kann die float-Eigenschaft verwendet werden, um Text um Bilder fließen zu lassen.

Beispiel – Float: rechts;

Das folgende Beispiel gibt an, dass ein Bild in einem Text nach rechts schweben soll :

Pineapple In der SEO-Küche gibt es spannende Praktikumsplätze in den Bereichen Webdesign, Social Media, SEO und viele mehr ;D
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Hier ist das CSS:

img {
  float: right;
}

Beispiel – float: left;

Das folgende Beispiel gibt an, dass ein Bild in einem Text nach links schweben soll:

img {
  float: left;
}

Beispiel – float: none;

Im folgenden Beispiel wird das Bild genau dort angezeigt, wo es im Text vorkommt (float: none;):

img {
  float: none;
}

Beispiel – div-Elemente nebeneinander platzieren

Normalerweise werden div-Elemente übereinander angezeigt. Wenn wir jedoch float: left verwenden, können wir Elemente nebeneinander platzieren:

Div 1

Div 2

Div 3

Div 4

Div 5

Div 6

Div 7

Div 8

Div 9

Div 0

  <div style="float: left; width: 150px; padding: 15px; margin-right: 10px; margin-top: 10px; background-color: grey;">Div 1</div>
  <div style="float: left; width: 150px; padding: 15px; margin-right: 10px; margin-top: 10px; background-color: grey;">Div 2</div>
  <div style="float: left; width: 150px; padding: 15px; margin-right: 10px; margin-top: 10px; background-color: grey;">Div 3</div>
  <div style="float: left; width: 150px; padding: 15px; margin-right: 10px; margin-top: 10px; background-color: grey;">Div 4</div>
  <div style="float: left; width: 150px; padding: 15px; margin-right: 10px; margin-top: 10px; background-color: grey;">Div 5</div>
  <div style="float: left; width: 150px; padding: 15px; margin-right: 10px; margin-top: 10px; background-color: grey;">Div 6</div>
  <div style="float: left; width: 150px; padding: 15px; margin-right: 10px; margin-top: 10px; background-color: grey;">Div 7</div>
  <div style="float: left; width: 150px; padding: 15px; margin-right: 10px; margin-top: 10px; background-color: grey;">Div 8</div>
  <div style="float: left; width: 150px; padding: 15px; margin-right: 10px; margin-top: 10px; background-color: grey;">Div 9</div>
  <div style="float: left; width: 150px; padding: 15px; margin-right: 10px; margin-top: 10px; background-color: grey;">Div 0</div>

CSS clear & clearfix

Wenn man die float-Eigenschaft verwendet und das nächste Element wieder normal angeordnet werden soll bzw. man dieses Element darunter haben möchte (nicht rechts oder links), dann muss die clear-Eigenschaft verwenden.

Die clear-Eigenschaft gibt an, was mit dem Element passieren soll, das sich neben einem schwebenden Element befindet.

Die clear-Eigenschaft kann einen der folgenden Werte haben:

none– Das Element wird nicht unter linke oder rechte schwebende Elemente geschoben. Dies ist Standard
left– Das Element wird unter die linken schwebenden Elemente geschoben
right– Das Element wird unter die rechts schwebenden Elemente geschoben
both– Das Element wird sowohl unter das linke als auch das rechte schwebende Element geschoben
inherit– Das Element erbt den klaren Wert von seinem übergeordneten Element

Wenn man float-Eigenschaften löschen möchte, sollten man clear mit float abgleichen: Wenn ein Element nach links gefloatet ist, sollte man es nach links löschen. Das gefloatete Element wird weiterhin floaten, aber das geclearte Element wird darunter auf der Webseite angezeigt.

Ohne „clear“

div1

div2 – Bedenke, das div-2 nach div-1 im HTML kommt und eigentlich ein Block-Element ist. Unabhängig davon, schwebt div-1 auf der linken Seite und der Text in div-2 fließt um div-1.

Mit „clear“

div3

div4 – Hier wurde clear: left; eingesetzt, was dazu führt, dass div-4 unter das das schwebende Element div-3 fließt. Der Wert „left“ klärt den float-Befehl nach links. Man könnte hier auch noch „right“ und „both“ klären.

Dieses Beispiel löscht den float nach links. Hier bedeutet dies, dass das <div4>-Element unter das links schwebende <div3>-Element geschoben wird:

.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}

clearfix

Wenn ein schwebendes Element größer als das enthaltende Element ist, wird es außerhalb seines Containers „überlappen“. Man kann dann eine clearfix-Eigenschaft hinzufügen, um dieses Problem zu lösen:

Ohne clearfix

Mit clearfix

.clearfix {
  overflow: auto;
}

Das overflow: auto; Clearfix funktioniert gut, solange man die Kontrolle über die borders und paddings behalten kann (andernfalls sieht man möglicherweise Fehler). Der neue, moderne clearfix-Hack ist jedoch sicherer in der Verwendung, und der folgende Code wird für die meisten Webseiten verwendet:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Mehr über das ::after Pseudoelement besprechen wir in einem anderen Unterrichtsblock.

Aufgabe

Erstelle ein Navigationsmenü mit 5 Links in einem Listenelement. Die Liste darf keine Punkte haben und die einzelnen Elemente müssen nebeneinander links ausgerichtet angeordnet sein.

Auf der rechten Seite des Navigationsmenüs sollen ebenfalls zwei Links einer Liste enthalten sein. Allerdings sollen diese nach rechts fließen und keinen Text, sondern ein E-Mail-Icon und ein Telefon-Icon enthalten.