CSS: div-Container

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)

von | Kategorie: Programmierung
Schlagwörter: // // // //

Schreibe einen Kommentar

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

− 2 = 8