HTML & CSS für Einsteiger (Teil 44): Den Inhaltsbereich gestalten

Das Grundgerüst der Seite steht, kommt allerdings noch recht spartanisch daher. In diesem Video-Training wird der Inhalt der Seite weiter ausgebaut. Im Fokus steht dabei zunächst einmal das Menü, das im oberen Seitenbereich liegt. Daran schließen sich das rechte und das untere Menü an.
Los geht es also mit dem Menü, das im oberen Fensterbereich angezeigt wird.
<div class="header"> <div class="header-top"> <h1>Dein Steuerberater</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Startseite</a></li> <li><a href="#">Über uns</a></li> <li><a href="#">Wie wir arbeiten</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> </ul> </div> <div class="header-img"> </div> </div>
Für die Gestaltung des Hintergrunds wird die Ein-Pixel-Grafik eingebunden und vertikal so oft wiederholt, bis das gesamte Element ausgefüllt ist.
.topmenu { background-image: url(../images/menue.jpg); background-repeat: repeat-x; width: 978px; height: 37px; float: left; }
Anschließend kann das Menü formatiert werden. Hier gibt es prinzipiell keine Besonderheiten zu beachten. Entscheidend sind bei solchen Menüs eigentlich immer nur die folgenden Aspekte:
• Blendet die Aufzählungspunkte über
list-style-type: none;
aus.• Sorgt dafür, dass die Listeneinträge nebeneinander angezeigt werden.
.topmenu ul { width: 100%; height: 37px; list-style-type: none; } .topmenu ul li { height: 37px; float: left; padding-right: 25px; padding-left: 25px; } .topmenu ul li a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; line-height: 37px; color: #fff; text-decoration: none; display: block; height: 37px; float: left; padding-right: 20px; padding-left: 20px; } .topmenu ul li a:hover { background-image: url(../images/menue-hover.jpg); background-repeat: repeat-x; background-position: left top; }
Entscheidend ist eigentlich nur der Hover-Zustand. Tritt dieses Ereignis ein, wird eine andere Hintergrundgrafik angezeigt.
Das rechte Menü
Die Webseite besitzt nicht nur oben ein Menü, auch im rechten Fensterbereich wird eins angezeigt.Dieses Menü gehört in den
div
-Bereich mit der Klasse content-right
. Für die Entwicklungsphase der Seite habe ich dort lediglich Dummy-Inhalte hinterlegt.<div class="content-right"> <h2>Hauptmenü</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul>
Der Bereich wird zunächst an der passenden Stelle und in der gewünschten Größe positioniert.
.content-right { width: 210px; float: right; padding-right: 20px; margin-top: 20px; border: 1px solid #eee; }
Weiter geht es mit der Definition des eigentlichen Menüs. Dieses Mal stehen die Einträge allerdings untereinander. Ihr müsst also lediglich darauf achten, dass die Aufzählungspunkte ausgeblendet sind. Die übrige Gestaltung des Menüs bleibt letztendlich euch überlassen.
.content-right ul { list-style-type: none; } .content-right ul li { padding-left: 45px; padding-top: 4px; padding-bottom: 4px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #ccc; } .content-right ul li a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000; text-decoration: none; text-align: left; display: block; } .content-right ul li a:hover { color: #0b90d6; }
Das untere Menü
Im Fußbereich der Webseite wird es ein weiteres Menü geben. Hier auf PSD-Tutorials.de wird ein solches Menü ebenfalls verwendet, um so Links zu allgemeinen Informationen bereitzustellen.Auf unserer Webseite gibt es zusätzlich einen Copyright-Hinweis. Beide Dinge sind eigentlich ganz typisch für Webseiten. Zunächst wieder die HTML-Struktur.
<div class="bottom"> <ul> <li><a href="index.html">Home</a></li> <li><a href="#">Über uns</a></li> <li><a href="#">Neuigkeiten</a></li> <li><a href="#">Kontrollzentrum</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Impressum</a></li> <li><a href="#">Sitemap</a></li> </ul> <p>© Copyright 2014 by PSD-Tutorials.de</p> </div>
Es handelt sich um eine einfache
ul
-Liste. Jeder Listeneintrag enthält einen Menüeintrag. Unterhalb der ul
-Liste gibt es ein p
-Element, in dem der Copyright-Hinweis steht. Was nun noch fehlt, ist natürlich wieder die CSS-Syntax..bottom { background-image: url(../images/footer.jpg); background-repeat: no-repeat; background-position: left top; text-align: center; width: 1000px; height: 110px; float: left; }
Wie ihr den Fußbereich gestaltet, bleibt letztendlich natürlich euch überlassen. Ich verwende wieder einen Farbverlauf. Ihr könnt aber beispielsweise auch eine einfache Hintergrundfarbe oder gleich CSS3-Syntax einsetzen. Im Fall meiner Grafikvariante ist allerdings entscheidend, dass ein Wiederholen durch
background-repeat: no-repeat;
verhindert wird.Werft zunächst einen Blick auf das Ergebnis:
Was hier auffällt, sind die weißen Striche, die neben den einzelnen Menüeinträgen angezeigt werden. Diese werden mittels verschiedener
border-left
-Angaben definiert, was letztendlich nichts anderes bedeutet, als dass sich die Angaben jeweils auf den linken Elementrand beziehen.Insgesamt sieht die Syntax für das untere Menü dann folgendermaßen aus:
.bottom ul { margin-top: 30px; list-style-type: none; } .bottom ul li { display: inline; border-left-width: 1px; border-left-style: solid; border-left-color: #fff; } .bottom ul li a { font-size: 12px; color: #fff; text-decoration: none; padding-right: 15px; padding-left: 15px; } .bottom ul li a:hover { text-decoration: underline; } .bottom p { font-size: 12px; color: #fff; margin-top: 40px; } .bottom a { font-size: 12px; color: #fff; margin-top: 40px; } .bottom a:hover { text-decoration: none; }
Eine Besonderheit im Gegensatz zum Top-Menü gibt es hier. Tatsächlich wird im Hover-Fall keine weitere Grafik geladen. Um den Besuchern aber dennoch zu verstehen zu geben, dass sie mit dem Mauszeiger über einen Link fahren, werden die einzelnen Links unterstrichen, wenn das Hover-Event eintritt.
Am Ende dieses Tutorials sind die grundlegenden Schritte hin zur Webseite erledigt. Was jetzt noch fehlt, ist das Aufhübschen der Seite. Mehr dazu dann in den nächsten Tutorials.
Weitere Teile
- Tutorial: HTML & CSS für Einsteiger (Teil 01): Ein erster Blick auf HTML, CSS & Co.
- Tutorial: HTML & CSS für Einsteiger (Teil 02): Die erste HTML-Seite
- Tutorial: HTML & CSS für Einsteiger (Teil 03): Elemente, Tags und Attribute
- Tutorial: HTML & CSS für Einsteiger (Teil 04): Texte strukturieren
- Tutorial: HTML & CSS für Einsteiger (Teil 05): Texte aufhübschen
- Tutorial: HTML & CSS für Einsteiger (Teil 06): Listen
- Tutorial: HTML & CSS für Einsteiger (Teil 07): Tabellen (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 08): Tabellen (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 09): Grafiken fürs Web (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 10): Grafiken fürs Web (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 11): Hyperlinks definieren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 12): Hyperlinks definieren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 13): Formulare (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 14): Formulare (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 15): Formulare (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 16): Formulare (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 17): Formulare (5)
- Tutorial: HTML & CSS für Einsteiger (Teil 18): Semantik fürs Web (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 19): Semantik fürs Web (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 20): Semantik fürs Web (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 21): Semantik fürs Web (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 23): Multimedia für die Webseite (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 24): iFrames
- Tutorial: HTML & CSS für Einsteiger (Teil 25): Das ist CSS
- Tutorial: HTML & CSS für Einsteiger (Teil 26): So klappt der Zugriff mit den Selektoren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 27): So klappt der Zugriff mit den Selektoren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 28): So klappt der Zugriff mit den Selektoren (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 29): Schöner Text durch CSS (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 30): Schöner Text durch CSS (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 31): Farben und Hintergründe
- Tutorial: HTML & CSS für Einsteiger (Teil 32): Außenabstände und Außenränder
- Tutorial: HTML & CSS für Einsteiger (Teil 33): Den Textfluss kontrollieren
- Tutorial: HTML & CSS für Einsteiger (Teil 34): Rahmen
- Tutorial: HTML & CSS für Einsteiger (Teil 35): Listen und Counter
- Tutorial: HTML & CSS für Einsteiger (Teil 36): Das Boxmodell
- Tutorial: HTML & CSS für Einsteiger (Teil 37): Elemente positionieren
- Tutorial: HTML & CSS für Einsteiger (Teil 38): Alles im Fluss mit float
- Tutorial: HTML & CSS für Einsteiger (Teil 39): Die verschiedenen Layoutvarianten
- Tutorial: HTML & CSS für Einsteiger (Teil 40): Zwei- und dreispaltige Layouts
- Tutorial: HTML & CSS für Einsteiger (Teil 41): Das Layout entwickeln
- Tutorial: HTML & CSS für Einsteiger (Teil 42): Das Layout weiter anpassen
- Tutorial: HTML & CSS für Einsteiger (Teil 43): Das Grundgerüst erstellen
- HTML & CSS für Einsteiger (Teil 44): Den Inhaltsbereich gestalten
- Tutorial: HTML & CSS für Einsteiger (Teil 45): Schicke Schriften für die Seite
- Tutorial: HTML & CSS für Einsteiger (Teil 46): Das Kontaktformular (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 47): Das Kontaktformular (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 48): Die Webseite geht online

Passend zum Inhalt empfehlen wir:
Modernes CSS mit Sass – Praxis-Tutorial
Vielen Dank für das interessante Tutorial
Herzlichen Dank für das Tutorial!
Vielen Dank für das Video!
LG Zaina
Vielen Dank für das Tutorial.
Vielen Dank für das informative Tutorial.
Herzlichen Dank für das Tutorial.
Vielen Dank für den weiteren Teil.
vielen Dank für Teil 44.
Vielen lieben Dank für den 44 Teil, klasse Tipps dabei.
Vielen Dank für das sehr informative Tutorial!
Vielen Dank für das Tutorial!
LG Zaina
Danke für dieses Tutorial und die hilfreichen Erklärungen. MfG
Großen Dank für das Video.
Danke für dieses Tutorial
Super Danke, für das Video!
Vielen Dank für das Videotutorial, aber ich vermisse auch Teil 43.
Danke für das Video. Ich habe auch gerade geschaut, wo ist der 43-te teil geblieben? :)
MfG
Herzlichen Dank für das Video. Habt ihr Teil 43 vergessen?
Vielen Dank für das Videotutorial.
Herzlichen Dank für das Video.
Mehr anzeigen