CSS: div-Container

17. Juli 2016 von | Kategorie(n): Programmierung
Schlagwörter: // // // //

Eigentlich wollte ich diesen Teil der Tutorial-Reihe „div-Container bearbeiten“ nennen. Allerdings sollte dieser Artikel die  Grundlagen der  div-Container behandeln. Also was diese sind und vor allem: WofĂŒr man die Dinger eigentlich braucht. Sie sind nĂ€mlich extrem wichtig.

Was sind div-Elemente?

div-Container sind, wie der Name es sagt, einfache „BehĂ€lter“, die man dann Bilder, Texte, Tabellen oder auch andere divs reinpacken kann (eigentlich alles was man in HTML so findet). Wenn man sie nicht mit CSS bearbeitet, sind sie nicht sichtbar (fĂŒr uns Menschen; ein Browser „sieht“ diese natĂŒrlich), aber trotzdem da :D. Wenn du die also sehen möchtest im Browser,dann schmeiß einfach einen Rahmen drum oder gib dem Dingen eine background-Eigenschaft ;). Prinzipiell kann man fast alle CSS-Eigenschaften auf diese Container anwenden.

Wieso sind diese Teile denn so wichtig?

Wenn man nun eine (mehr oder weniger :D) professionelle Internetseite machen möchte, wie diese hier (Warum stinkt’s hier so? Eigenlob…), dann kommt man um div-Container nicht herum. Dies liegt daran, dass sehr viele Internetseiten einen bestimmten Aufbau haben: Es gibt einen header, einen footer und einen content. Ab und zu gibt es dann noch eine sidebar. Diese Bestandteile sind div-Container. Im Prinzip besteht eine Internetseite aus divs, die mit Inhalt gefĂŒllt werden.

Seit HTML5 gibt es zusĂ€tzlich Container, die header, main, aside, content, article, footer (usw.) heißen. Aber die verhalten sich so, wie die „normalen“ div-Container. Allerdings sollten diese besonderen BehĂ€lter schon verwendet werden, da Google (u.a.) deinen Quelltext anhand dieser durchsuchen.

Wer die Dinger in Action sehen möchte, kann ja den Quelltext meiner Seite unter die Lupe nehmen 😀

Unten kannst du natĂŒrlich wieder Likes und Kommentare hinterlassen. Freue mich. (Wahr leider etwas trocken… Muss aber auch mal sein ;))

<Tim Poerschke />

Was denkst du ĂŒber diesen Post?
  • Gut (2)
  • Hilfreich (0)
  • Nicht gut (1)
  • Lustig 😀 (0)
Diesen Post teilen:
Facebooktwittergoogle_plusredditpinterestlinkedinmail

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

57 + = 65