Anzeige
Tutorialbeschreibung

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

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.

Bilder



 
Für dieses Menü habt ihr bereits einiges an Vorarbeit geleistet. Ihr erinnert euch sicherlich an den hübschen Farbverlauf, der als Ein-Pixel-Grafik abgespeichert wurde. Genau dieser kommt jetzt zum Einsatz. Zuvor muss allerdings noch die entsprechende HTML-Struktur für den Menübereich erstellt werden. Aussehen könnte diese folgendermaßen:
<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.

 
Ich arbeite an dieser Stelle – das wisst ihr längst – mit einem Farbverlauf, der über eine Grafik realisiert wird. Mittlerweile stehen natürlich für Menüs noch zahlreiche andere Optionen zur Verfügung. Denkt beispielsweise an JavaScript-Frameworks wie jQuery. All diese Möglichkeiten vorzustellen, würde hier natürlich den Rahmen sprengen. Längst gibt es aber zahlreiche Online-Generatoren, über die sich Menüs mit wenigen Klicks erstellen lassen. Einen davon – ohne Wertung, ob der jetzt der genialste seiner Art ist – findet ihr unter http://www.cssmenubuilder.com/.

Bilder



 
Ich jedenfalls habe mich für folgende Variante entschieden:
.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.

Bilder



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;
}

 
Im Browser sollte sich jetzt folgendes Bild ergeben:

Bilder



 

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.

Bilder



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>&copy; 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:

Bilder



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


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von matino
  • 12.10.2016 - 17:26

Vielen Dank für das interessante Tutorial

Portrait von Kiasa
  • 01.06.2015 - 19:38

Herzlichen Dank für das Tutorial!

Portrait von ZainaPhoto
  • 18.04.2015 - 09:29

Vielen Dank für das Video!

LG Zaina

Portrait von suzana
  • 12.04.2015 - 00:54

Vielen Dank für das Tutorial.

Portrait von Caesarion2004
  • 11.04.2015 - 22:46

Vielen Dank für das informative Tutorial.

Portrait von Kundentest
  • 11.04.2015 - 18:15

Herzlichen Dank für das Tutorial.

Portrait von MARIA52
  • 11.04.2015 - 17:40

Vielen Dank für den weiteren Teil.

Portrait von dlieb
  • 11.04.2015 - 17:06

vielen Dank für Teil 44.

Portrait von BOPsWelt
  • 11.04.2015 - 14:24

Vielen lieben Dank für den 44 Teil, klasse Tipps dabei.

Portrait von rocking_sid
  • 11.04.2015 - 13:53

Vielen Dank für das sehr informative Tutorial!

Portrait von ZainaPhoto
  • 11.04.2015 - 13:26

Vielen Dank für das Tutorial!

LG Zaina

Portrait von fe_web
  • 11.04.2015 - 13:14

Danke für dieses Tutorial und die hilfreichen Erklärungen. MfG

Portrait von ZainaPhoto
  • 28.03.2015 - 20:32

Großen Dank für das Video.

Portrait von fe_web
  • 09.03.2015 - 11:36

Danke für dieses Tutorial

Portrait von nikita2425
  • 08.03.2015 - 17:07

Super Danke, für das Video!

Portrait von dlieb
  • 07.03.2015 - 16:24

Vielen Dank für das Videotutorial, aber ich vermisse auch Teil 43.

Portrait von nikita2425
  • 07.03.2015 - 10:31

Danke für das Video. Ich habe auch gerade geschaut, wo ist der 43-te teil geblieben? :)
MfG

Portrait von renrew300160
  • 07.03.2015 - 09:44

Herzlichen Dank für das Video. Habt ihr Teil 43 vergessen?

Portrait von MARIA52
  • 07.03.2015 - 09:42

Vielen Dank für das Videotutorial.

Portrait von Caesarion2004
  • 07.03.2015 - 09:38

Herzlichen Dank für das Video.

x
×
×