Artikelformat

CSS Layout: So bringst du mit ersten CSS-Befehlen Ordnung ins Layout!

XOVI Banner

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.

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.

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

  • 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).

Jetzt fehlt nur noch der Header und die Navigation.

AAWP

Bestes Amazon Affiliate Plugin: AAWP

AAWP Funktionen
  • Sehr schöne Vergleichstabellen
  • Mehr Provisionen
  • Geringer Aufwand
AAWP Button
SeedingUp

Digital Content Marketing Plattform: SeedingUp

SeedingUp Funktionen
  • Website & Produkte bekannt machen
  • Hochwertige Backlinks kaufen und verkaufen
  • Schnell und effizient
SeedingUp Button
Bewerte diesen Artikel
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne

16 Bewertung(en), durchschnittlich: 5,00 von 5

Loading...

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.