Übungsaufgaben „Ein basales Bloglayout mit CSS“

PDF-Download der Übungsaufgaben (344 KB)

Aufgabe 1

Erstellen sie ein einspaltiges Webseitenlayout unter Verwendung von CSS und (u.a.) <div> Containern nach dem folgenden schematischen Vorbild:

Schematische Darstellung eines einfachen Bloglayouts
Schematische Darstellung eines einfachen Bloglayouts

Verwenden Sie ein externes Stylesheet (z.B. in der Datei „style.css“), um die Darstellung Ihrer Website anzupassen. Bilden Sie die oben angedeuteten Seitenbereiche („logo“, „topnavigation“, etc.) über div-Container ab. Überlegen Sie hierbei, wann Klassen- und wann ID-Selektoren zu verwenden sind.

Aufgabe 2

Weisen Sie den Seitenbereichen „logo“, „topnavigation“ und „footer“ eine feste Höhe (height) zu; der div-Container „maincontainer“ dient dazu, die Breite (width) Ihrer Website festzulegen. Setzen Sie Ihre Website mit fester Breite um; berücksichtigen Sie dabei, dass Ihre Website auch auf Anzeigegeräten mit niedriger Auflösung (800x600px) korrekt dargestellt werden soll.

Aufgabe 2a (optional / fortgeschritten)

Lassen Sie Ihre Website zentriert darstellen. Verwenden Sie für die zentrierte Darstellung ausschließlich CSS (die HTML-Bordmittel <div align=“center“> oder <center> sollen nicht verwendet werden). Tipp: margin-left: auto; und margin-right: auto;

Aufgabe 3

Füllen Sie Ihre Website mit Farbe und Inhalt:

logo: Weisen Sie dem Logobereich eine Hintergrundfarbe (background-color) zu

topnavigation

  • Erstellen Sie eine unsortierte Liste in topnavigation mit fünf Elementen (Hyperlinks mit beliebiger Beschriftung)
  • Stellen Sie die einzelnen Listenelemente ohne Aufzählungszeichen dar. Erstellen Sie hierfür den entsprechenden Nachkommen-Selektor für die unsortierte Liste (ul) der topnavigation. Mit list-style-type: none; lassen Sie die Aufzählungszeichen verschwinden.
  • Erstellen Sie einen Nachkommen-Selektor für die Listenelemente (li) der unsortierten Liste (ul) im topnavigation-Container. Ergänzen Sie den erstellten Nachkommen-Selektor um display: inline;, um die Listenelemente nebeneinander darzustellen.
  • Statten Sie jedes Listenelement der topnavigation mit einer Hintergrundfarbe (background-color) und Rahmenlinien am unteren (border-bottom) und rechten Rand (border-right) der Listenelemente aus, z.B.: border-bottom: 1px solid #cccccc; oder border-bottom: 2px dotted blue;

contentarea und textblock

  • Füllen Sie jeden textblock innerhalb von contentarea mit beliebigem Text.
  • Setzen Sie über jeden Text eine Überschrift; ergänzen Sie die Überschrift mit Hilfe von CSS um einen unteren Rand von beliebiger Stärke und Farbe.

footer: Weisen Sie dem Fußbereich Ihrer Website eine beliebige Hintergrundfarbe zu.

Aufgabe 4

Verwenden Sie CSS-Pseudoklassen, um das Verhalten der Listenelemente in der topnavigation beim Herüberfahren der Mouse (:hover) zu definieren: Befindet sich die Mouse über einem Listenelement, so soll sich die Hintergrundfarbe des Listenelementes in eine beliebige Farbe ändern.

Aufgabe 5

Ergänzen Sie die Textblöcke (textblock) im Inhaltsbereich Ihrer Website um die Angabe eines Außenabstandes (margin) und eines Innenabstandes (padding). Der Abstand der Textblöcke zum Inhaltsbereich soll 25px betragen, der Innenabstand der Textblöcke soll ebenfalls auf 25px gesetzt sein.

Aufgabe 6

Erstellen Sie den div-Container fixedcontainer von 175px Breite und 300px Höhe und positionieren Sie den Container rechts neben Ihren maincontainer. Verhindern Sie, dass sich die Position des Containers beim Scrollen verändert.

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.