|
zurück
zur CSS Übersicht
zu 1. Farbige Scrolleisten: So kann
diese aussehen. (von meiner Homepage)
Diese farbigen Scrolleisten kann man in
CSS definieren. Diese gehen aber NUR ab dem IE 5.5.
Alle anderen Browser sehen die Standardmässigen grauen
Scrolleisten.
Ihr wollt wahrscheinlich eine andere Farbkombination
als meine Scrollbar-Leiste.
Hexadezimalfarben findet ihr hier.
Ausserdem gibt es einen Scrollbar-Generator.
Wie finde ich gelungene Farbkombinationen?
Wenn ich eine Grundfarbe habe, wähle
ich mir mit dem Windowsfarbwähler Farben oberhalb
und Unterhalb der Farbe aus.
So in etwa:
 |
<style TYPE="text/css">
<!--
Body {
scrollbar-base-color:#C2D9E3;
scrollbar-3dlight-color:#96BDCF;
scrollbar-arrow-color:#FFFFff;
scrollbar-darkshadow-color:#40758C;
scrollbar-highlight-color:#E4EEF3;
scrollbar-shadow-color:#5595B1;
scrollbar-track-color:#96BDCF;
-->
</style>
|
 |
<style TYPE="text/css">
<!--
Body {
scrollbar-base-color:#6A84B9;
scrollbar-3dlight-color:#435B8F;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#304165;
scrollbar-highlight-color:#A0B1D3;
scrollbar-shadow-color:#68A4F1;
scrollbar-track-color:#435B8F;
-->
</style>
|
 |
<style TYPE="text/css">
<!--
Body { scrollbar-base-color:#BEDAB7;
scrollbar-3dlight-color:#AAD79D;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#7BBA52;
scrollbar-highlight-color:#E3EBE2;
scrollbar-shadow-color:#ABD390;
scrollbar-track-color:#E3EBE2;
background-color : #94C188;
-->
</style>
|
Hier die verschiedenen Farbangaben:
|
scrollbar-base-color - In der Mitte
scrollbar-3dlight-color - Oben und Links aussen
scrollbar-arrow-color - Der Pfeil
scrollbar-darkshadow-color - Rechts und Unten
scrollbar-highlight-color - Oben/Links (Mitte)
scrollbar-shadow-color - Rechts/Unten (Mitte)
scrollbar-track-color - Wenn es nichts zu scrollen
gibt.
|
 |
Es gibt zwei Möglichkeiten, wie
diese Formatvorlagen eingebettet werden können:
Eingebettete Formatvorlage:
|
<html>
<head>
<title>Untitled Document</title>
</head>
<style TYPE="text/css">
<!--
Body {
scrollbar-base-color:#666666;
scrollbar-3dlight-color:#666666;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-highlight-color:#828282;
scrollbar-shadow-color:#666666;
scrollbar-track-color:#666666;
--></style>
<body>
</body>
</html>
|
Verknüpfte Formatvorlage:
Bei einer externe Datei habt Ihr die
Möglichkeit, alle möglichen Spielereien in einer Datei
zu definieren. Das klingt vielleicht für viele kompliziert
- ist es aber nicht. Window-User haben doch einen Notepad
auf dem Rechner Notepad (bei Windows 98 wurde es in
Editor umgetauft). Das findet ihr unter Start - Programme
- Zubehör - Editor. Darin könnt ihr die Angaben
machen. Und braucht nur eine Datei zu ändern und
schwupp sieht die ganze Webseite wieder anders aus.
Dort gebt Ihr folgenden Text ein...
|
BODY {
scrollbar-base-color:#666666;
scrollbar-3dlight-color:#666666;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-highlight-color:#828282;
scrollbar-shadow-color:#666666;
scrollbar-track-color:#666666;
}
|
.... und speichert diese als text.css
ab und legt es auf dem Server Eurer Homepage ab. Direkt
in das Root, d.h. da wo Eure HTML Seiten sind, nicht
in ein Unterverzeichnis.
Jetzt müsst Ihr noch diesen Link in
jede eurer Seiten einfügen.
<link rel="stylesheet" type="text/css"
href="text.css">
Und zwar wie folgt:
|
<HTML>
<head>
</head>
<TITLE>Ueberschrift</TITLE>
<body>
<link rel="STYLESHEET" type="text/css"
href="text.css">
Hier kann ein Text stehen...
<META http-equiv=Content-Type content="text/html;
charset=windows-1252">
</body>
</html>
|
Fertig! Wenn Ihr jetzt eine farbliche
Änderung Eurer Homepage macht und die Scrolleiste verändern
wollt, braucht Ihr nur EINE Datei ändern. Nur
die text.css und alle Seite sind geändert.
Zu 2. Wie geht das, dass die Links
nicht unterstrichen sind?
Das macht ihr entweder direkt in jeder
HTML Seite mit diesem Befehl:
|
<style TYPE="text/css">
<!--
a { text-decoration: none}
a:link { text-decoration: none}
a:vlink { text-decoration: none}
a:alink { text-decoration: none}
a:hover { text-decoration: underline}
-->
</style>
|
Oder Ihr fügt das in eure externe .css
Datei ein - und zwar so:
(Hier sind zusätzlich noch die Textfarben definiert)
|
a { color:#F1AEC2; text-decoration: none}
a:link { color:#F1AEC2; text-decoration: none}
a:vlink { color:#f1aec2; text-decoration: none}
a:alink { color:#f1aec2; text-decoration: none}
a:hover { color: #f1aec2; text-decoration: underline}
|
zurück
zur CSS Übersicht
|
