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>
<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
{
clear: left;
margin-left: 260px;
border-top: 1px solid #dadada;
padding-bottom: 5px;
}
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-size: 0.7em;
color: #888;
float: left;
}
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-left: 350px;
}
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;
float: left;
padding-top: 2px;
padding-bottom: 2px;
background-repeat: no-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-image: url(../pics/menue/druck_b.gif);
background-position: 0px 2px;
padding-left: 18px;
}
a:hover.druck
{
background-image: url(../pics/menue/druck_o.gif);
}
a.top
{
margin-left: 10px;
background-image: url(../pics/menue/top_b.gif);
background-position: 0px 5px;
padding-left: 10px;
}
a:hover.top
{
background-image: url(../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.