Artikelformat

Ordnung ins Layout bringen & erste CSS Anweisungen

Die CSS Syntax ist relativ einfach. Im Grunde müssen wir nur die Anweisungen innerhalb von zwei geschweiften Klammern {} hinter der Tag-Bezeichnung bzw. der class oder id schreiben.

div {
background-color: red;
}

Mit dieser Anweisung würden wir die Hintergrundfarbe jedes <div> – Bereiches auf Rot setzen. (Im Normalfall gibt man Farben mit dem Hex-Code an [Bei rot #FF0000]). Eine Anweisung muss man immer mit einem Semikolon (;) beenden.

Um einen eine class anzusprechen benutzt man einfach .class-name (z. b. .header) oder um eine Id anzusprechen #id-name.

Wir setzen jetzt die Breite des containers mit width auf 900 Pixel und versehen ihn mit border mit einem schwarzen Rand. Mit margin definiert man zwar normalerweise den äußeren Abstand zu anderen Objekten, aber mit margin: auto; können wir dafür sorgen, dass der Container in der Mitte der Seite liegt.

.container {
width: 900px;
margin: auto;
border: 1px solid #000000;
}

Jeder Browser benutzt Standardwerte, und um diese erstmal überall auf 0 zu setzen, benutzen wir folgenden Code:

* {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

  • margin = Abstand zu anderen Objekten
  • padding = Abstand des Inhalts zum Rand des Objektes
  • font-family = Die Schriftart. Hier entweder Arial, bzw. eine ohne Verzierungen wenn Arial nicht verfügbar ist.

Dem Header und der Navigation geben wir mit height eine bestimmte Größe. Den Content-Bereich und die Sidebar ordnen wir mit float nebeneinander an. Da sich in main jetzt keine Objekte ohne clear befinden, müssen wir dem Bereich mitteilen, dass er sich der Größe von Content und Sidebar anpassen soll. Das machen wir mit overflow: hidden. Für die Entwicklung habe ich jedem Div (außer main eine farbige Umrandung gegeben).

* {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

.container {
width: 900px;
margin: auto;
border: 1px solid #000000;
}

.header {
height: 150px;
border: 1px solid #FF0000;
}

.navigation {
height: 30px;
border: 1px solid #FFFF00;
}

.main {
overflow: hidden;
}

.content {
width: 690px;
float: left;
border: 1px solid #00FF00;
}

.sidebar-right {
width: 200px;
float: right;
border: 1px solid #0000FF;
}

.footer {
border: 1px solid #008080;
}

Jetzt fehlt nur noch der Header und die Navigation.


Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.