Hauptmenü

Untermenü

HTML / CSS - Praxistutorial 2 - Copyright

1. Die Abschnitte

2. Der HTML-Code

So, nun wollen wir zum Abschluss noch einen Copyright-Vermerk sowie zwei zusätzliche "Funktions"-Links einbauen. Schreibt also folgenden Code unter das <div class="info">-Element.


<div class="copyright">
  <p>Copyright meine Wenigkeit © 2006</p>
  <class="funktion">
    <a href="#" class="druck">Druckversion</a>
    <a href="#" class="top">Seitenanfang</a>
  </p>
</div>

3. Das <div>-Element

Da wir uns bisher einen Wolf gefloatet haben, sollten wir in diesem Fall auf Nummer Sicher gehen, und dieses Element wieder in den "normalen" Fluss bringen. Anschließend wollen wir es linksbündig zum Inhalt ausrichten, es durch einen Strich im "Trio"-grau nach oben hin abgrenzen, und den eigentlichen Inhalt ein paar Pixel unterhalb des Strichs platzieren (rahmen.css).


div.copyright
{
  clearleft;
  margin-left260px;
  border-top1px solid #dadada;
  padding-bottom5px;
}

4. Die Absätze

Sieht doch schon ganz gut aus. Nun wollen wir die Schrift kleiner setzen, angrauen, und die beiden Absätze nebeneinander platzieren. Also rufen wir unter anderem wieder mal unseren float-Wolf und tragen in die html.css das ein.


div.copyright p
{
  font-size0.7em;
  color#888;
  floatleft;
}

Allerdings sollte aus optischen Gründen der funktion-Absatz mit den beiden Links rechtsbündig zur Infoleiste stehen. Dafür benötigen wir eine spezielle Klassendefinition (in welcher Datei?).


p.funktion
{
  margin-left350px;
}

Erklärung

Beim Abstand nach links habe ich ein wenig vorgegriffen, der ergibt sich nämlich aus der Formatierung der beiden Links. Aber da gilt.

"Vertrauen Sie mir, ich weiß, was ich tue" [Quelle: Sledgehammers]

5. Die Links

Zunächst sollte bei beiden Links, da sie letztendlich fast gleich aussehen, die grundsätzliche Formatierung vorgenommen werden (links.css):


p.funktion a
{
  color#789bec;
  floatleft;
  padding-top2px;
  padding-bottom2px;
  background-repeatno-repeat;
}

p.funktion a:hover
{
  color#002274;
}

Jetzt weisen wir beiden Links ihre Hintergrundbilder zu und sorgen für einen optisch ansprechenden RollOver-Effekt.


a.druck
{
  background-imageurl(../pics/menue/druck_b.gif);
  background-position0px 2px;
  padding-left18px;
}

a:hover.druck
{
  background-imageurl(../pics/menue/druck_o.gif);
}

a.top
{
  margin-left10px;
  background-imageurl(../pics/menue/top_b.gif);
  background-position0px 5px;
  padding-left10px;
}

a:hover.top
{
  background-imageurl(../pics/menue/top_o.gif);
}

6. Und zum Schluss das ganz große Aber!

Eigentlich sieht das doch ganz ok aus. Aber an eine Sache möchte ich euch noch erinnern. Man kann im Browser eigene Standardformate definieren. Im Firefox zum Beispiel über "Extras" -> "Einstellungen" -> "Inhalt" -> "Schrifarten und Farben". Jetzt ändert spaßeshalber mal die Größe und schaut euch die Seite noch mal an. Ja, da hat euch der Peter mal wieder ein wenig auf den Arm genommen. Aber ich gelobe Besserung. Versprochen!

7. Fazit

Ist es nicht schön, ist es nicht wunderwunderschön? Na ja, der große Designer werde ich wohl nie werden, aber darum geht es auch nicht. Ich hoffe, ihr habt anhand der beiden Tutorials etwas gelernt, und werdet eure Kenntnisse nun vertiefen. Und nun empfehle ich euch, meinen supi-toll auskommentierten Original-Code herunter zu laden und genauer zu studieren.

Die Vorgehensweise

... ist, wie schon erwähnt, nicht optimal! Ich habe hier aus Anschauungsgründen mit ein paar Techniken gearbeitet, die ich so niemals im praktischen Einsatz nutzen würde. Allerdings kann es manchmal sehr lehrreich sein, etwas falsch zu machen. Im vierten Tutorial dagegen werde ich den Blödsinn unterlassen. Ehrlich!

Die Aufteilung der CSS-Dateien

Dies könnte wohl der Hauptkritikpunkt an diesem Tutorial sein. Denn warum gehört ein div.topnavi ul in die html.css und nicht in die klassen.css? Und ist es nicht ziemlich blöd, die Listenformatierung der Navigation ebenfalls in der html.css vorzunehmen, während die CSS-Anweisungen der untergeordneten Links in der links.css stehen?

Naja, alle Fragen sind berechtigt. Aber! Habt ihr eine bessere Idee? Ich selber habe unterschiedlichste Variationen ausprobiert, war aber mit keiner Aufteilung wirklich zufrieden. Letztendlich ist die hier beschriebene Möglichkeit ein Kompromiss, der aber meiner Meinung nach noch die wenigsten Nachteile bietet. Allerdings solltet ihr euch dem nicht blindlings anschließen. Entwickelt ruhig eigene Ideen zu diesem Thema.

zurück zum vorherigen Abschnitt