yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Design der Zukunft und Gegenwart: div-Containern und CSS

Zugegeben es ist am Anfang leichter mit Tabellen oder Frames zu arbeiten. Das ist wahrscheinlich bei jedem so. Doch das Arbeiten mit Containern bringt viele Vorteile mit sich. Ein Grund sich dieses Tutorial einmal genau durchzulesen!

Container, was bedeutet das überhaupt?
Vom Englischen ins Deutsche übersetzt, bedeutet es einfach „Behälter“. Ein "Behälter", der über CSS genau definiert wird, und ein Behältnis, das mit richtiger Handhabung auf jedem Browser gleich aussieht.
Der Vorteil liegt klar auf der Hand: Weniger Quelltext, geringere Ladezeiten.

Tabellen waren niemals dafür vorgesehen, dass sie als Designmittel benutzt werden. Sie sind nur dafür gedacht, um Auflistungen oder Formulare schön darzustellen. Jemand, der seine ganze Seite mit Tabellen designt, wird sich schnell im Haufen seiner HTML-Anweisungen verlaufen.
Jemand, der wiederrum mit div-Containern und CSS arbeitet, und dazu vielleicht noch seinen CSS-Code in einer seperaten Datei lagert, wird keinen langen, unübersichtlichen Quelltext haben. Außerdem kann er leicht Farben und Postionen des Containers abändern, was ein Redesign natürlich um einiges vereinfacht.
Fazit: Ein Design mit div-Containern und CSS bringt viele Vorteile. Aber besonders in der Administration und der Userfreundlichkeit überzeugende.

Ein bisschen Theorie:
Es gibt, zwei Arten von Elementen in HTML: die Block-Elemente und die Inline-Elemente.
Block-Elemente werden untereinader dargestellt. Man sagt also: Blockelemente erstrecken sich über die gesamte verfügbare Breite, ehe sie einen Umbruch erzeugen. Sie blockieren sozusagen den Bildschirm von Rand zu Rand, wenn man sie nicht anders anweist. Blockelemente sind z.B. <p>...</p>, <form>...</form>, <h1>...</h1> oder eben auch <div>...</div>, ein Container.

Code:

<div>Oben</div>
<div>Unten</div>

Der Code stellt jetzt das Wort "Oben" über dem Wort "Unten" dar.

Inline-Elemente ermöglichen es zwei Wörter nebeneinander darzustellen. Diese Elemente sind größenteils Formatierungselemente wie <b>, <u>, <i> oder <span> bzw. <font>. Denn alle diese Elemente kannst du im Text benutzen, ohne dass nach ihnen ein Zwangs-Zeilenumbruch geschieht.

Fangen wir nun an, unseren ersten div-Container zu schreiben:
Code:

<div id="container">
Inhalt
</div>

Dieser Container bekommt eine ID zugewiesen, damit man exakt diesen Container später mit CSS formatieren kann. So weiß CSS später, welchen Container es nach dem Formatierungen, die man angibt, ausgeben soll.

Fangen wir nun an, unseren Container mit CSS zu formatieren:
Code:

#container {
height: 50px;
width: 200px;
text-align: center;
background-color: #0066FF;
}


Die CSS-Definitionen sollten bekannt sein. Nochmal kurz zur Erinnerung: "height" regelt die Höhe des Containers, "width" die Breite, "text-align" legt die Textausrichtung innerhalb dieses Elements fest., in diesem Fall die Mitte, und "background-color" definiert die Hintergrundfarbe.

Man kann auch dem Container festsagen, wo genauer sich auf der Seite befinden soll. Wer dazu näheres erfahren möchte, guckt sich schnell mal michi's Tutorial an. Besser finde ich es aber, erst mal einen großen Container zu programmieren, der die feste Größe deiner Seite definiert: Am Besten, du nimmst eine Größe, die knapp unter 860 Pixel ist, damit du auch auf Leute Rücksicht nimmst, die eine kleinere Auflösung haben.

Zum Schluss: Das Tutorial erklärt nur die Anfänge, du solltest unbedingt mit CSS und den Formatierungsmöglichkeiten rumprobieren. Und auch, wenn es am Anfang nicht gelingt, nicht den Kopf in den Sand stecken: Auch yubb.de war mal eine schwarze Seite mit hässlichen Tabellen und roter Schrift, bevor die Seite mit CSS zu verschönert und benutzerfreundlich wurde. Also probieren, probieren und noch mal probieren :)



Weiterführende Links:
Alles um CSS und Container
Die ersten Schritte mit CSS

Geschrieben von darealplaya am 09.11.2004 (11974x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren

Tabellen sind auch nicht für Formulare da. Auch diese kann man mit CSS sehr gut formatieren (vgl. http://www.style-sheets.de/guide/formulare/formulare_per_css_layouten ). Tabellen sind reine Informationsvermittler.
Geschrieben von Phil Marx
ja, okay. Ich will halt nur nicht, dass man jetzt nur noch mit Container arbeitet.... Und um vielleicht ein kleines Login-System oder eine User-Liste schön darzustellen, kann man auch mal eine Tabelle verwenden.... Das war eher damit gemeint ;)
Geschrieben von darealplaya
Für ein Formular brauchst du nicht mal Container. Nur einmal eine Definition in der CSS-Datei und man ist für immer glücklich...
Geschrieben von Phil Marx