NICKNAMEs HP
wurde schon ZAHLx mal geknuddelt | Mein Gästebuch


Dies ist ein Standardinhalt auf jeder Homepage von Knuddels. Er sieht unschön und langweilig aus. In diesem Tutorial von huendchen wird gezeigt, wie man einen eigenen Headerschriftzug einsetzen kann. Ich möchte euch in diesem kleinen Tutorial zeigen, wie ihr dem Bereich auch einen eigenen Hintergrund geben könnt! Auf dem folgenden Screenshot seht ihr, wie euer Header am Ende aussehen könnte. ;-)

[img]http://i35.tinypic.com/ynn2p.png[/img]
Abbildung 1: Beispieldesign

Das ganze läuft über CSS. Aufgrund der von mir verwendeten Selektorwahl solltet ihr möglichst davon absehen im Rest eures Codes das center-Element zu verwenden, denn damit könnte es zu Fehlern kommen.

Html:
<style type="text/css"><!--
center center {
    display: block;
}
--></style>

Das ist erstmal die Grundlage, die wir benötigen. Damit haben wir den gesamten Headerbereich eingenommen. Nun müssen wir definieren, wie Breit der Header sein soll (normalerweise nimmt er die volle Seitenbreite ein). Ich empfehle hier eine Breite von 600px, denn das ist die Breite die auch die HP-Inhalte und der Footer in der Regel haben. Wenn ihr größere Hintergrundbilder verwenden wollt, müsst ihr die Breite natürlich dem Hintergrundbild entsprechend anpassen.

Html:
<style type="text/css"><!--
center center {
    display: block;
    width: 600px; /* Breite definieren */
    padding: 10px 0;
}
--></style>

Nun kommt auch schon das entscheidene: Der Hintergrund. Ihr könnt einfach eine Farbe nehmen, oder auch eine Grafik - ganz wie ihr möchtet. Falls ihr selbst keine Hintergrundgrafiken erstellen könnt, bietet euch beispielsweise diese Seite von sienc Hintergrundbilder zur Nutzung an. Hintergrundafben werden mit Hex-Codes angegeben, die man auf Chatfarben.de en masse finden kann. Die Eigenschaft padding legt hier einen Innenabstand im Bereich fest, der hier von oben und unten 10px beträgt. Rechts und links habe ich keinen Innenabstand eingesetzt, weil die Inhalte ohnehin nicht zum Rand hin ragen, weil sie zentriert sind. Wichtig ist es später bei der height (s.u.) zu beachten, dass das padding (in diesem Fall 20px) eingerechnet werden und man die height somit veringern muss.

Variante 1 - Hintergrundbild
Html:
<style type="text/css"><!--
center center {
    display: block;
    width: 600px; /* Breite definieren */
    padding: 10px 0;
    background: url('http://meinedomain/meinbild.jpg') repeat;
    height: auto; /* oder height: ZAHLpx; /*
}
--></style>

Die mit background beginnende Zeile ist die, die hier wichtig ist. Dabei ist mein Beispiel-URL http://meinedomain/meinbild.jpg durch einen eigenen zu ersetzen. Wenn man möchte, dass das Bild wiederholt wird lässt man dort repeat stehen, wenn es nicht wiederholt werden soll ersetzt man das durch no-repeat. Alle Eigenschaften zu erklären und aufzulisten würde zu weit führen, eine Übersicht findet man aber auf CSS 4 You. Was hier allerdings noch wichtig ist, ist die Eigenschaft height, denn bei einem nicht-wiederholten Hintergrundbild ist oft eine konstate Höhe des Kastens anzugeben.

Variante 2 - Hintergrundfarbe
Html:
<style type="text/css"><!--
center center {
    display: block;
    width: 600px; /* Breite definieren */
    padding: 10px 0;
    background: #aa0000;
}
--></style>

Hier ist nun einfach die Farbe #aa0000 definiert. Es ist aber auch jede andere Farbe möglich.

Variante 3 - Hintergrundfarbe, Schatten, Rundung und Transparenz
Html:
<style type="text/css"><!--
center center {
    display: block;
    width: 600px; /* Breite definieren */
    padding: 10px 0;
    background: white;
    /* Transparenz */
    opacity: 0.5;
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    /* Schatten */
    box-shadow: 5px 5px 5px black;
    -moz-box-shadow: 5px 5px 5px black;
    -webkit-box-shadow: 5px 5px 5px black;
    /* Rundung */
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
--></style>

Zuerst einmal möchte ich darauf hinweisen, dass das nur in vernünftigen Browsern (aktuelle Versionen von Firefox, Safari und Opera) und nicht im Internet Explorer funktioniert. Letzterer zeigt einfach einen weißen eckigen Kasten an. In den eben beschriebenen vernünftigen Browsern wird das Design angezeigt, das oben auf der Abbildung zu sehen ist. Die verwendeten Eigenschafen aus dem Code kann man bei CSS 4 You nachschlagen oder ergooglen, aber ich nehme an dass die Leute, die diesen fertigen Schnippsel benutzen, ohnehin nicht groß danach fragen, wie sie ihn anpassen können. *g*


Wichtiger Hinweis
Die Entfernung oder Unkenntlichmachung der Standardinhalte auf den Knuddels-Homepages stellt einen AGB-Verstoß dar. Achtet also darauf, dass sich die Schrift immer deutlich vom Hintergrund abhebt und ihr nicht durch falschen Code etwas aus dem Header entfernt, denn das wird mit einer Sperrung der Homepage enden.


Viel Spaß beim Ausprobieren! :-]
Bei Fragen zu diesem Tutorial könnt ihr wie immer diesen Thread nutzen.


Bearbeitet von Scnappi (05.08.2010, 00:02:20)