10 – Grundlagen HTML & CSS: Das Design einer Internetseite per CSS verbessern

Auf dem vorherigen Video aufbauend, wird am Design der Internetseite weiterhin per CSS gefeilt. Am Ende dieser Video-Lektion ist die erste einfache Homepage, zumindest die Basis dafür, fertig. In den weiteren verbleibenden Tutorials wird das Design / Erscheinungsbild immer weiter optimiert.

Die Hintergrundfarben der DIV-Container, die uns die Struktur der Internetseite besser veranschaulichen sollten, können wir langsam aber sicher auskommentieren und durch endgültige Anweisungen bzw. Inhalte ersetzen. So ist im Kopfbereich der Seite (Header) eine Grafik eingefügt, die die Internetseite erstmals gefällig erscheinen lässt – Was für eine Kraft Bilder doch haben!

Zum Anderen gehe ich in diesem Video kurz auf die relative und absolute Positionierung von Objekten ein. Durch die absolute Positionierung eines Objekts mittels CSS, kann dieses an eine beliebige Stelle im Design positioniert werden.

Wichtig ist der Hinweis, dass ein absolut positioniertes Element / Objekt, sich immer am ihm umschließenden und zuletzt relative positionierten Objekt orientiert. Eine anschauliche Demonstration dieser Bedingung zeige ich in diesem Video in dem eine Überschrift absolut über ein Bild positioniert werden soll.

Relativ positionierte Objekte orientieren sich ebenfalls an dem sie umschließenden Objekt, können jedoch nur innerhalb des umschließenden Objektes positioniert werden.

Zu diesem Thema(„Positionierung von Objekten“) wird es in diesem Video-Blog noch einmal einen gesonderten Video-Beitrag geben.

Folgende wichtige CSS-Anweisungen werden in diesem Video genutzt:

  • Border: 1px dotted black;
  • Text-align: center;
  • Position: absolute;
  • Position: relative;
  • Vererbung von CSS-Eigenschaften