Nokia Handy
Inhaltsverzeichnis
CSS
CSS
-
Absatz mit Initial
Absatz mit Initial
Mit CSS statten Sie einen Absatz automatisch mit einem Initial und besonderer Formatierung der ersten Zeile aus.
Cascading Style Sheets werden oft über das Universalattribut style="" in einem Tag zugewiesen. Damit haben Sie aber nur Zugriff auf sämtliche Elemente im Gültigkeitsbereich des Tags. Für besondere Fälle bietet CSS deshalb die so genannten Pseudoformate an. Das sind CSS-Formate, mit dem Sie Zugriff "nicht greifbare" Elemente einer Webseite haben. Im konkreten Beispiel geht es um den ersten Buchstaben und die erste Zeile in einem Absatz. Sie definieren zunächst einen Style-Bereich im Kopf der HTML-Datei:
<head>
<style type="text/css">
<!--
.initialabsatz:first-line
{font-weight: bold; color:black;}
.initialabsatz:first-letter
{font-size:400%;
font-weight:bold; float:left;
color:red;}
-->
</style>
</head>
Die Pseudoformate werden mit einem Doppelpunkt eingeleitet. :first-line ist für die erste Zeile zuständig, :first-letter für den ersten Buchstaben. .initialabsatz (mit einem einleitenden Punkt) ist der Klassenname des Style Sheets. Das Beispiel setzt die erste Zeile in fetter, schwarzer Schrift. Der erste Buchstabe wird 400 Prozent größer als die Grundschrift, fett und rot. Außerdem steht er links außerhalb des Absatzes (float: left;). Auf einem bestimmten Absatz wenden Sie die CSS-Klasse sehr einfach an:
<p class="initialabsatz">
Text...
</p>
-
Animierter Text verfolgt den Mauszeiger
Animierter Text verfolgt den Mauszeiger
Der Mauszeiger lässt sich auf mehrere Arten an die eigenen Vorlieben anpassen. Wer seinen Besuchern etwas Ausgefallenes bieten möchte, sollte es mit animiertem Text versuchen.
Fügen Sie den Code aus Listing 1 in den Head-Bereich der Seite ein. Anschließend erweitern Sie den Body-Bereich um das folgende Mini-Script:
<script language="JavaScript1.2">
<!
for (i=0;i<message.length;i++) {
document.write("<span
id='span"+i+"'
class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
//>
</script>
Den gewünschten Text geben Sie in die Variablen var message ein. Schrifttyp, -größe, -stärke und -farbe bestimmen Sie in den folgenden Parametern font-size, font-family, font-weight und color. Dieses Beispiel ergibt einen schönen Animationseffekt.
-
Buttons mit Pep
Buttons mit Pep
Mit CSS-Angaben passen Sie Formularbuttons ans Design Ihrer Webseiten an.
Formularbuttons sind auf Webseiten meist auffällig grau gehalten. Diese Standarddarstellung können Sie umgehen. HTML 4.0 kennt das Tag <button> ... </button> für Formulare, das sehr universell ist. Zwischen die Tags dürfen Sie beliebige andere Tags für Tabellen, Bilder etc. einbauen. So gestalten Sie die Schaltfläche. Doch das funktioniert nur mit neuen Browsern (IE 5, Netscape 6). Benutzer älterer Browser sehen nichts. Das Problem lösen CSS-Angaben in Kombination mit klassischen Buttons. Zwar zeigen ältere Browser auch hier nicht die besondere Formatierung - der Button funktioniert aber trotzdem. Das folgende Tag erzeugt beispielsweise einen Submit-Button mit gelber Schrift auf grünem Untergrund:
<input type="submit"
style="background-color:green;
color:yellow;" name="submit">
Selbst Hintergrundbilder für Buttons gelingen:
<input type="submit"
style="background-image:
url(wolken.jpg);">
Sie geben den Namen der Bilddatei in den runden Klammern hinter url an. Es gelten die bei HTML üblichen Regeln für Grafikreferenzen. Opera 6 kann mit den CSS-Angaben für Buttons ebensowenig anfangen wie Netscape 4.x.
-
Datei importieren
Datei importieren
Spalten Sie CSS-Angaben in einzelne Moduldateien auf, die Sie nach Bedarf importieren.
Im Lauf der Zeit entwickelt jeder Web-Autor einige grundlegende CSSFormatangaben, die immer wieder verwendet werden. Statt diese Angaben jeweils in eine HTML-Datei in den Kopfbereich zu kopieren erzeugen Sie eigenständige CSS-Dateien. Diese importieren Sie ganz einfach in einem anderen Style Sheet:
<style>
<!--
@importurl("extern.css");
{ weitere Regeln }-->
</style>
-
Durchsichtige Elemente
Durchsichtige Elemente
Netscape 6 kann mit speziellen CSS-Angaben Bilder und andere Elemente transparent darstellen.
Stellt der Browser ein Bild oder eine Ebene (Layer) mit Hintergrundfarbe dar, überdeckt er die dahinter liegenden Elemente. Netscape 6 stellt eine CSSAngabe zur Verfügung, die transparente Seitenelemente erlaubt. Diese Angabe gehört nicht zum CSS-Standard. Außer Netscape 6/Mozilla gibt es keinen Browser, der sie beherrscht. -moz-opacity definiert Elemente einer Seite als transparent, der Hintergrund scheint also durch. Die Durchsichtigkeit lässt sich von 0 bis 100 Prozent einstellen. Die Definition
<img style="-moz-opacity:0.9"
src="space ship.jpg">
bedeutet, dass das Bild den Hintergrund zu neunzig Prozent abdeckt, aber zehn Prozent durchscheinen lässt. Die erlaubten Werte liegen zwischen null und eins, bei null ist das Bild durchsichtig, bei eins überhaupt nicht. Beachten Sie, dass Sie als Dezimaltrennzeichen einen Punkt setzen müssen und kein Komma - sonst interpretiert Netscape den Wert immer als eins.
-
Dynamische Links
Dynamische Links
Ihre Homepage soll ein dynamisches Navigationsmenü erhalten. Aber Sie beherrschen nicht genug JavaScript.
Mit ein paar CSS-Angaben können Sie fast genau so schöne Menüs gestalten wie mit JavaScript. Sie brauchen nur folgendes kleines Listing in den Head-Bereich Ihrer Seite einzufügen. Es bewirkt, dass Verweise nicht unterstrichen und in blauer Schrift dargestellt werden. Fährt der Mauszeiger über sie, ändert sich die Schriftfarbe in Rot und wird fett. Diese Methode lässt sich variieren. Sie können etwa die Links mit einer Farbe hinterlegen, die geändert wird, wenn der Mauszeiger über den Link fährt. Die CSS-Anweisung dazu ist backgroundcolor.
<style type="text/css">
<!-
a:link {
color: #0000FF;
text-decoration:none;
}
a:hover {
font-weight: bold;
color: #FF0000;
}
->
</style>
-
Einrücken und Ränder
Einrücken und Ränder
Versehen Sie die erste Zeile eines Absatzes mit einem Einzug und rücken Sie Text links oder rechts ein.
Speziell für den Einzug bei einem Absatz, also eine eingerückte erste Zeile gibt es eine CSS-Angabe. Mit
<p style="text-indent: 15px">
rücken Sie genau diesen Absatz um 15 Pixel ein. Es gibt noch viele weitere Maßeinheiten: pt für Punkt (typografische Einheit, 1/72 Zoll), mm und cm für Millimeter und Zentimeter, in für Inch (Zoll, 2,54 cm). Prozentwerte mit nachgestellten % setzen einen Wert relativ zum Elternelement. Einen kompletten Absatz rücken Sie rechts so ein:
<p style="margin-left: 40px;
margin-right: 30px">
Das rückt den Absatz links 40 Pixel und auf der rechten Seite 30 Pixel ein. So sparen Sie sich den Einsatz von <blockquote>.
-
Farbige Formulare
Farbige Formulare
Sie haben eine peppige Homepage in kräftigen Farben gebastelt. Nur das Formular platzt mit seinen langweiligen Eingabefeldern noch heraus. Mit HTML-Attributen wie bgcolor kann man bei vielen Seitenelementen das Aussehen beeinflussen, nicht jedoch bei Formularen. Bei ihnen helfen jedoch Style-Sheet- Angaben weiter. Das Listing zeigt an einem einfachen Beispiel, wie es geht. Beachten Sie, dass nur der größte Teil der Surfer in den Genuss Ihrer Farbgebung kommt: Sie funktioniert nur im IE und Netscape 6.
<form>
<select name="maedels" size="1"
style="background-color:pink">
<option style="color:blue;">Ally
Walker
<option >Gong Li
<option >Tia Carrere
</select>
</form>
-
Farbige Scrollbalken
Farbige Scrollbalken
Beim Internet Explorer 5.5 färben Sie die Rollbalken mit CSSAngaben nach Belieben ein.
Die Rollbalken zeigen alle Browser im Windows-einheitlichen Grau (falls in den Desktop-Einstellungen keine Farben gewählt wurden). Eine Webseite mit farbigem Hintergrund kann hässlich wirken. Der Internet Explorer ab Version 5.5 unterstützt einige CSS-Angaben, mit denen Sie die Farbe der Rollbalken steuern. Diese Angaben kommen im CSS-Standard nicht vor, funktionieren also nur mit MS-Browsern. Die folgenden Angaben im Head-Bereich einer HTML-Datei erzeugen einen blaugrünen Rollbalken mit schwarzen Schatten.
<style>
body
{scrollbar-base-color:Teal;
scrollbar-highlight-color:#33cc99;
scrollbar-arrow-color:#006666;
scrollbar-shadow-color:Black;}
</style>
Die Wirkung der einzelnen Farbangaben probieren Sie am besten an einem einfachen Beispiel aus. Andere Browser ignorieren die Angaben, mit Fehlanzeigen müssen Sie nicht rechnen.
-
Initial in rot
Initial in rot
Heben Sie den ersten Buchstaben eines Absatzes als Initiale vergrößert und in Rot hervor.
In Zeitschriften und Büchern (und auch im PC Magazin) ist es oft anzutreffen: Der erste Buchstabe in einem Artikel oder längeren Absatz ist vergrößert dargestellt und damit mehrere Textzeilen hoch. Auf einer Webseite mit viel Text kann das die "Bleiwüste" auflockern und Akzente setzen. Mit ein paar CSS-Angaben haben Sie die Initialen im Griff. Zunächst definieren Sie im Head-Bereich der Webseite einen entsprechenden Stil:
<head>
<style>
.initial {
width: 1em; height: 1em;
float: left; text-align: center;
font-size: 20pt; color:red;
font-style:italic
} </style>
</head>
Die meisten Angaben haben sprechende Namen. Einen gesonderten Blick verdienen die Größenangaben für width und height. Die Einheit ist hier em, das entspricht dem jeweils breitesten (dem "m") bzw. höchsten Buchstaben im gewählten Zeichensatz. So ist sichergestellt, dass das Initial genügend Platz hat. Bei manchen Buchstaben wirkt der Abstand zu groß, hier können Sie kleinere Werte eintragen. Um einen Absatz mit dem frisch definierten Stil zu versehen, gehen Sie so vor:
<p><SPAN class="initial">D</span>
as ist ein Initial.</p>
-
Linien farbig
Linien farbig
Beim Formatieren von Trennlinien mit Cascading Style-Sheets mangelt es an Kompatibilität mit den 6er-Browsern.
Gerade auf textlastigen Webseiten sind Trennlinien (Tag <hr>) ein wichtiges Element zur Gliederung und Auflockerung. HTML sieht eine Reihe von Attributen wie noshade oder size zur exakten Anpassung vor, der Internet Explorer kann sogar die Farbe ändern. Leider sind all diese Attribute in HTML 4.0 als missbilligt (deprecated) eingestuft. Mit Cascading StyleSheets (CSS) umgehen Sie dieses Problem und setzen zudem bei Netscape 6 die Farbe der Linien fest. Eigentlich müsste
<hr style="color : blue">
für eine blaue Linie sorgen. Das klappt nur beim Internet Explorer, nicht bei Netscape 6. Damit beide Browser etwas Vernünftiges anzeigen, sind zwei zusätzliche CSS-Angaben nötig:
<hr style="border:0px;
background-color:blue; color:
blue">
Diese Linie erscheint in beiden 6er-Browsern blau.
-
Listen mit eigenen Grafik-Bullets aufwerten
Listen mit eigenen Grafik-Bullets aufwerten
Auch wenn die Listendarstellung in HTML fest definiert ist, gibt es Spielraum, um eigene Grafiken einzubinden.
Statt Listen immer nur mit den standardmäßigen Aufzählzeichen (Bullets) zu versehen (Kreise oder Kästchen), sorgen Sie mit einem CSS-Befehl für Abwechslung. Zunächst designen Sie eine GIF-Grafik, die Sie als Bullet verwenden wollen, in der Größe 8 x 8 Pixel. Dazu verwenden Sie ein gängiges Bildbearbeitungsprogramm. Zur Einbindung stehen Ihnen zwei Wege offen. Der einfachere verwendet eine Eigenschaft des Internet Explorers: der Befehl list-style-image. Im Head-Bereich bzw. einem externen Style Sheet geben Sie den Pfad zur Grafik vor (in unserem Beispiel bullet.gif).
ul {list-style-image:www.meinserver.de(bullet.gif) }
Surfer, die nicht mit der Microsoft-Surfhilfe unterwegs sind, bekommen von Ihrer nach diesem Muster aufgewerteten Webseite nur die standardmäßigen Aufzählzeichen zu sehen. Um diese ungewollte Darstellung zu verhindern, greifen Sie auf das bewährteste aller Stilmittel zurück: Ordnen Sie die Listen in Tabellenform an.
<TABLE cellpadding=0
cellspacing=1 border=0>
<TR>
<TD><IMG SRC="bullet.gif"
width="8" height="8" alt="Grafik-
Bullet"></TD>
<TD>Treasure Island</TD>
</TR>
<TR>
<TD><IMG SRC="bullet.gif"
width="8" height="8" alt="
Grafik-Bullet"></TD>
<TD>The Mirage</TD>
</TR>
<TR>
<TD><IMG SRC="bullet.gif"
width="8" height="8" alt=
"Grafik-Bullet"></TD>
<TD>Bellagio</TD>
</TR>
<TR>
<TD><IMG SRC="bullet.gif"
width="8" height="8" alt="
Grafik-Bullet"></TD>
<TD>MGM Grand</TD>
</TR>
</TABLE>
-
Mauszeiger-Darstellung anpassen
Mauszeiger-Darstellung anpassen
Im Browser verändert sich der Mauszeiger etwa beim Überfahren eines Links. Diesen Effekt können Sie steuern, um ihn auf Ihren Webseiten einzusetzen.
Die Darstellung des Mauszeigers lässt sich mit einfachen CSS-Anweisungen festlegen. Dazu notieren Sie die Eigenschaft cursor als Stil im Tag, über dem der Cursor sich verändern soll:
<p style="cursor:hand;">Ich bin
ein Absatz mit einer Hand als
Cursor.</p>
Pfeile in die acht Haupthimmelsrichtungen erzeugen Sie mit resize. cursor:w-resize; ergibt einen Pfeil nach Westen (links), ne-resize steht für einen Zeiger nach rechts oben (north east). Diese CSS2-Angabe wird bisher nur vom Internet Explorer und von Netscape 6 interpretiert.
-
Positionierte Elemente
Positionierte Elemente
Ein positionierter Bereich wird im Netscape 6 nicht an die gewünschte Koordinate gesetzt, obwohl der Browser CSS verstehen soll.
Mit Cascading Style Sheets können Sie Seitenelemente positionieren. Für Kompatibilität sorgen Sie, indem Sie die zu positionierenden Elemente mit dem DIV-Tag umschließen und für diesen Bereich eine CSS-Definition schreiben:
ElementID { position: absolute;top:50;left:100 }
Damit Netscape 6 die Definition korrekt rendert, müssen Sie den Werten für top und left die Einheitenbezeichnung (px für Pixel) hinzufügen.
-
Ränder und Abstände einrichten
Ränder und Abstände einrichten
Ihre Webseite soll möglichst wenige grafische Elemente erhalten, aber trotzdem gut aussehen.
Für Ihre Homepage möchten Sie ein edles Layout entwerfen, das durch freie Flächen gestaltet ist. Das ließ sich früher nur mit komplizierten Tabellen-Layouts verwirklichen, wie sie viele WYSIWYG- Editoren auch heute noch generieren. Wenn Sie keine antiken Browser auf Ihren Seiten erwarten, kommen Sie mit Cascading Style Sheets besser und moderner zum Ziel. Besonders nützlich ist die Angabe margin, mit der Sie den Abstand eines Elements zum vorhergehenden bzw. den Rand gegenüber dem übergeordneten festlegen können. Möglich sind die Einzelangaben margin-top, margin-bottom, margin-left und margin- right, zum Anderen auch eine zusammenfassende Notierung für alle vier Abstände, etwa margin:50px; Diese Angabe sorgt für einen Abstand von 50px zu allen Seiten. Besondere Effekte können Sie erzielen, wenn Sie der margin-Angabe einen negativen Wert geben. Dann überlappen sich die Seitenelemente. Folgendes Listing- Fragment erzeugt mit einfachen Mitteln eine Marginalspalte wie im Screenshot:
<body style="margin-left:200px;
margin-top:100px">
<h3>Textgestaltung mit CSS</h3>
<p style="margin-left:-200px;color:
red"> Text in einer Marginalspalte</
p>
<p style="margin-top:-40px;">normaler
Textabsatz</p>
-
Rollover-Links
Rollover-Links
Mit CSS-Angaben markieren Sie Links, so dass sie beim Überfahren mit der Maus ihr Aussehen ändern.
Auf vielen Webseiten sind Rollover-Buttons bereits Standard: Bewegt der Besucher den Mauszeiger über einen Button, ändert dieser sein Aussehen. Einen vergleichbaren Effekt für Textlinks erzeugen Sie mit Hilfe von Style Sheets und Event-Handlern. Zunächst definieren Sie im Head-Bereich zwei Styles, die die Links im Normalzustand und im "überfahrenen" Zustand beschreiben:
<style>
.an
{
text-decoration: underline
overline;
color: blue;
}
.aus {
text-decoration: none;
color: black;
}
</style>
Mit dem Style aus markieren Sie die Links für den normalen Zustand. Bewegt sich der Mauszeiger über den Link, schalten Sie auf an um. Das zeigt Ihnen das folgende Skript:
<a HREF="ziel.htm"
CLASS="aus"
onMouseOver="this.className
='an';"
onMouseOut="this.className =
'aus';">
Home
</a>
Es handelt sich um einen Link mit dem Tag <a>. Das Attribut CLASS legt den Style im Normalzustand fest, also aus. Bewegt sich der Mauszeiger über den Link, aktiviert das den Event-Handler onMouseOver. Er schaltet auf den Style an um. Sobald der Mauszeiger den Textlink verlässt, schaltet sich onMouseOut ein und setzt den Style auf aus zurück. Der Vorteil gegenüber klassischem Rollover ist der geringe Platzbedarf.
-
Schrift mit Schatten
Schrift mit Schatten
Ohne große Bilddateien erzeugen Sie nur mit CSS einen Schatten für Überschriften (und andere Gelegenheiten).
Schrift mit Schatten produziert man für Webseiten normalerweise mit einem Grafikprogramm. In die Webseite integrieren Sie dann eine Bilddatei. Diese bläht aber den Umfang der Seite auf und sorgt für lange Ladezeiten. Die folgende Lösung kommt mit ein paar Zeilen im HTML-Code aus. Der Text wird in einem positionierten Bereich zweimal angezeigt, und zwar leicht verschoben. Der untere (überlagerte) Text wird grau dargestellt und wirkt so wie ein Schatten. Zunächst kommt also der Schatten:
<DIV style=" position: absolute;
top: 15px;
width: 500px; height: 80px;
font-size: 60pt;
font-family:Verdana;
color:808080">
PC Magazin
</DIV>
Das <DIV>-Tag umspannt den Text und nimmt alle CSS-Angaben auf. Der Bereich ist 500 x 80 Pixel groß und beginnt 15 Pixel unter dem oberen Seitenrand. Die Größe des Bereichs müssen Sie eventuell an Ihren Text anpassen, sonst kommt es zu einem Umbruch. Die Schrift ist hellgrau. Ein zweiter Bereich platziert die rote Schrift etwas versetzt über den grauen Schattenwurf. Im Beispiel ist ein Versatz von fünf Pixeln gewählt, die Angabe lautet damit top: 10px. Bis auf die Farbe sind die restlichen Angaben identisch:
<DIV style="position: absolute;
top: 10px;
width: 500px; height: 80px;
font-size: 60pt;
font-family:Verdana; color:red">
PC Magazin
</DIV>
Die Nachteile: Die Position der Schattenschrift innerhalb der Webseite ist festgelegt. Deshalb eignet sich das Verfahren hauptsächlich für Überschriften, denn diese stehen eben am Anfang.
-
Seitenhintergrund einstellen
Seitenhintergrund einstellen
Sie möchten Ihre Homepage mit einem Farbverlauf oder einer Grafik am linken Fensterrand veredeln, aber Frames vermeiden.
Um eine Webseite mit einer Grafik am linken Fensterrand zu verfeinern, erstellen Sie ein Hintergrundbild. Fertigen Sie eine Grafik mit dem Farbverlauf am linken Rand und dem Rest des Bildes in der gewünschten Hintergrundfarbe an. Das Bild kann eine sehr geringe Höhe haben, weil der Browser es automatisch kachelt. Wichtig ist eine ausreichende Breite, damit der Farbverlauf nicht mehrmals erscheint. Sie können den oberen Rand auch mit einem schmalen, langen Bild versehen. Mit Cascading Style Sheets geht das einfacher. Dabei enthält das Hintergrundbild lediglich den Farbverlauf bzw. die Grafik. Mit der CSS-Angabe background-repeat können Sie bestimmen, wie der Browser das Bild kacheln soll. Für den gewünschten Effekt wählen Sie einen der Werte repeat-x, repeat-y oder no-repeat: body {
background-image:url(bild.gif);
background-repeat:repeat-y;
background-color:white;
}
So sinkt die Dateigröße der Hintergrundgrafik, und Sie können eine andere Hintergrundfarbe einstellen, ohne die Grafik ändern zu müssen.
-
Text farblich unterlegen
Text farblich unterlegen
Mit Cascading Style Sheets erhält Ihr Text eine Hintergrundfarbe.
Sie möchten einen mehrzeiligen Textbereich hervorheben, indem Sie ihm mit CSS eine Hintergrundfarbe geben. Das Ergebnis sieht jedoch im Netscape Navigator scheußlich aus: Der Navigator zieht die Hintergrundfarbe nur jeweils bis zum Zeilenende, so dass der rechte Rand ausgefranst ist, während der Internet Explorer einen von der Länge der einzelnen Zeilen unabhängigen rechteckigen Farbblock als Hintergrund erzeugt, allerdings über die ganze Seitenbreite. Um den gewünschten Effekt zu erzielen, müssen Sie die Stilangabe um Definitionen für die Breite und den Rand des Textabschnitts erweitern:
<p style="width:200px;border-style:none;border-width: thin;background-color:red;">
Einheitlicher Hintergrundfarbblock hinter mehreren Textzeilen bei einer Breite von 200 Pixeln.
-
Transparente Radio Buttons
Transparente Radio Buttons
Die Radio-Buttons Ihrer Formulare sollen bei farbigen Tabellenzellen die gleiche Hintergrundfarbe annehmen.
Binden Sie in einer Tabellenzelle, der Sie einen farbigen Hintergrund zugewiesen haben, Radio-Buttons ein, werden diese mit Netscape in der Farbe des Dokumentenhintergrunds und nicht in der Farbe der Tabellenzelle umrandet. Abhilfe schafft ein Style Sheet: Weisen Sie den betroffenen Formularelementen eine Stilvorlage zu:
<INPUT TYPE=
"radio" NAME=
"color" VALUE="blue" STYLE="background:#
FFCC00;">
Mit dem STYLE-Attribut weisen Sie mit der Angabe background dem Formularelement dieselbe Hintergrundfarbe wie den Tabellen zu. Bei Radio-Buttons verfahren Sie ebenso.
-
Überblendeffekte
Überblendeffekte
Mit einem CSS-Filter erzeugen Sie im Internet Explorer Übergangseffekte wie bei Präsentationsprogrammen.
Der Internet Explorer unterstützt seit der Version 4.0 bei CSS-Angaben spezielle Filter. Mit einem davon erzeugen Sie beeindruckende Ein- und Ausblendeffekte. Das funktioniert als Kombination zwischen ein paar Zeilen JavaScript und einer CSS-Angabe. Fügen Sie zunächst an beliebiger Stelle innerhalb des Body-Tags folgendes Script ein:
<SCRIPT FOR=window EVENT=onload
LANGUAGE=Javascript>
uebergang.filters[0].Apply();
uebergang.innerHTML =
"<img src=untergang.jpg>";
uebergang.filters[0].Play();
</script>
Dieses Script bezieht sich auf den Bereich uebergang (den Sie gleich noch definieren). Die erste Zeile weist die Filter dem Bereich zu. Die zweite Zeile definiert den neuen Inhalt des Bereichs, hier geben Sie HTML-Code an. Im Beispiel wird ein Bild eingebunden. Die dritte Zeile aktiviert den Filter und sorgt für den Überblendeffekt. Den Bereich legen Sie mit HTMLTags fest:
<div id="uebergang"
style="position:relative;
width:347;
height:330;
top:20; left:30;
filter:reveal Trans
(transition=12,duration=8)">
<h1>Hier steht
Text!</h1>
</div>
Die Verbindung zwischen dem Script und dem Bereich stellt das Attribut id="uebergang" her. Der Parameter Transition steuert die Art des Übergangs. Welche Varianten es gibt, zeigt die Tabelle rechts. Mit Duration steuern Sie die Dauer des Effekts in Sekunden und Millisekunden (1.500 entspricht 1,5 Sekunden). Diese Filter sind nicht im CSS-Standard enthalten und funktionieren nicht mit anderen Browsern. Während bei jenen nichts passiert, bleibt im Beispiel der Text erhalten, das Bild ist unsichtbar.
-
Verweise mal anders
Verweise mal anders
So weisen Sie den Hyperlinks Ihrer Webseite unterschiedliche Farben und Effekte zu.
Nach althergebrachter Methode bestimmen Sie die Link-Farben für die unterschiedlichen Zustände im body-Tag. Sie können den neutralen Link, seinen Zustand beim Klicken und besuchte Links unterschiedlich darstellen. In HTML sieht dies wie folgt aus:
<body link="Farbwert"
alink="Farbwert" vlink="
farbwert">
Statt eines Farbwerts müssen Sie einen gültigen hexadezimalen Wert für eine Farbe (zum Beispiel #FFFFFF für Weiß) oder einen Farbnamen wie red eingeben. Dabei dient das Attribut link für die Farbe des neutralen Links, alink für einen aktiven, angeklickten Link und vlink für besuchte Verweise (Seiten, die sich in der History des Browsers befinden). Mit Hilfe von Style-Sheets haben Sie weitere Effekte zur Auswahl. Das Beispiel von oben sieht mit CSS so aus:
<style
type="text/css">
<!
a {color:#FF0000}
a:visited {textdecoration:
none;
color:#000000;}
a:link {
text-decoration:
none;
color:#000000;}
a:active {
text-decoration:none;
color:#5d7790;}
a:hover { textdecoration:
underline;
color:#666666;}
>
</style>
Sie können hier bereits zwei Erweiterungen erkennen. Die Angabe text-decoration:none; bedeutet, dass Verweise nicht unterstrichen dargestellt werden. Mit a:hover können Sie mit dem Internet Explorer ab Version 4 und Netscape 6.x einen Hover-Effekt hervorrufen (wenn der Besucher mit der Maus über den Link streicht). In unserem Beispiel würde ein Verweis in einer anderen Farbe und unterstrichen dargestellt werden. Wenn Sie unterschiedliche Effekte für Verweise auf einer Seite bestimmen möchten, definieren Sie zusätzliche Klassen für Verweise , im Beispiel neufarbe:
<style type="text/css">
<!... Angaben wie zuvor ....
a.neuefarbe {color:# 666666}
a.neuefarbe:visited {
text-decoration: underline;
color:#000000;}
a.neuefarbe:link {
text-decoration: underline;
color:# 666666;}
a.neuefarbe:active {
text-decoration: underline;
color:#ffff00;}
a.neuefarbe:hover {
text-decoration:none;
color:#00ffff;}
>
</style>
Damit diese Effekte zum Tragen kommen, müssen Sie im Dokument in jedem Verweis angeben, welcher Style verwendet werden soll:
<a href="seite_1.html">Normaler
Link</a>
<a href="seite_2.html"
class="neuefarbe">Link in einer
anderen Formatierung</a>
Der erste Link ohne Klasse verwendet die Standardangaben, der zweite die Klasse neufarbe. Mit dieser Technik können Sie das Aussehen Ihrer Webseiten auf interessante Weise bereichern.
-
Wasserzeichen
Wasserzeichen
Nageln Sie das Hintergrundbild einer Webseite fest und unterbinden Sie die "Kachelung" des Bildes.
Hintergrundbilder für Webseiten sind normalerweise dynamisch und lassen sich über die Rollbalken zusammen mit dem Seiteninhalt verschieben. Wie wäre es mit einem Hintergrundbild, das fixiert ist? Es steht fest wie ein Wasserzeichen bei einem Blatt Papier. Der Internet Explorer verfügt über ein extra Attribut für das Body-Tag:
<body background="bild.gif" bgproperties="fixed">
Allerdings kennt kein anderer Browser dieses Attribut, auch in HTML 4.0 ist es nicht vorgesehen. Eine kompatible Lösung bieten die Cascading Style Sheets. Das funktioniert auch bei Netscape 4 bis 6 sowie Opera. Wenn Sie schon dabei sind, binden Sie über die CSS-Angabe auch gleich das Hintergrundbild ein. Denn die offizielle HTML-Dokumentation des W3C empfiehlt, das Attribut background zu vermeiden.
<body style="backgroundimage:
url(wolken.jpg); background-attachment:fixed;">
Wenn das Hintergrundbild zu klein für das ganze Fenster ist, dann wiederholt der Browser das Bild waagerecht und senkrecht. Dieser Kacheleffekt ist manchmal unerwünscht, etwa wenn Sie ein Hintergrundbild mit einem eingezeichneten Rand haben. Die CSSAngabe
style="background-repeat:no-repeat"
unterdrückt alle Wiederholungen. Mit den CSS-Angaben repeat-x (waagrecht) und repeat-y (senkrecht) verhindern Sie nur eine Wiederholung in einer Richtung.
-
Webseiten mit Stil ausdrucken
Webseiten mit Stil ausdrucken
Deckblätter haben sich bei Faxnachrichten als Standard etabliert. Doch nur wenige Webdesigner wissen, dass sich auch die eigene Homepage um solch ein Feature erweitern lässt.
Wer seinen Besuchern einen besonderen Service anbieten möchte, kann die einzelnen Seiten um ein informatives Deckblatt erweitern, das beim Drucken einer Seite automatisch mit ausgegeben wird. Obwohl der Sourcecode in der Seite eingebunden ist, wird das Deckblatt nicht im Browser angezeigt (Befehl { display: none; }), es sei denn, die verwendete Surfhilfe unterstützt Cascading StyleSheets nicht. Lediglich ältere Netscape-Versionen kommen mit diesem Feature nicht zurecht. Um Ihre Seiten mit einem Deckblatt aufzuwerten, ergänzen Sie im Quellcode der jeweiligen Pages die Angaben in Listing 1. Zusätzlich definieren Sie die Datei druck.css. Der Befehl { page-break-after: always } sorgt dafür, dass nach dem Deckblatt automatisch ein Seitenwechsel erfolgt):
div.deckblatt, div.deckblatt h3 {
display: block }
div.deckblatt { page-break-after:
always }
-
Schlagschatten für eingebundene Objekte
Schlagschatten für eingebundene Objekte
Wer in den CSS-Spezifikationen keinen Hinweis auf den Einsatz von Schlagschatten gefunden. hat, wird mit diesem Trick fündig.
Obwohl CSS2 keine Spezifikationen für den Schattenwurf einer Textbox kennt, lässt sich dieser reizvolle Effekt einfach realisieren. Dazu müssen Sie lediglich zwei ineinander verschachtelte Elemente so miteinander verbinden, dass das äußere Objekt den Schattenwurf des inneren erzeugt. Anschließend positionieren Sie beide Elemente so, dass sie sich überlagern; bei der Farbgebung haben Sie freie Wahl. Das folgende Beispiel zeigt den Quellcode der im Bildschirmfoto gezeigten Konstruktion. Der Code wird im <head>-Bereich der Seite eingefügt.
<style type="text/css">
body {background: #72E7FC}
div.back {background: #7C7F5F}
div.section {background: #F7FDB5}
div.back {padding: 1.5em}
div.section {margin:
-3em 0 0 -3em}
div.back {margin: 3em 0 3em 5em}
div.section {border: thin solid
#999; padding: 1.5em}
</style>
<div class=back>
<div class=section lang=de>
<h2>Textboxen mit ansehnlichem
Schlagschatten</h2>
<address>CSS2 macht es
möglich</address>
<p>Ihr Text
</div>
</div>
-
Farbige Formulare
Farbige Formulare
Schwarze Schrift auf weißem Grund erscheint auf Dauer langweilig. Sie können aber nicht nur durch Bilder, sondern auch mit Formularen und Tabellen Farbe auf Ihre Website bringen.
Mit Cascading Stylesheets können Sie sowohl die Text- als auch die Hintergrundfarbe in Formularen und Tabellen ändern. Sie sollten dabei aber aufpassen, dass die Texte weiterhin lesbar bleiben. Zu viel Spielerei mit Farben erzeugt oft unleserliche Effekte wie blaue Schrift auf blauem Grund oder Augenschmerzen durch zu viele und zu stark leuchtende Farben. Daher sind sanftere Hintergrundfarben und kräftigere Textfarben zu empfehlen, die einen gut lesbaren Kontrast erzeugen. Darüber hinaus ist dunkler Text auf hellem Grund meist leichter zu lesen als heller Text auf dunklem Grund. Die Textfarbe legen Sie mit dem Befehl color fest, die Hintergrundfarbe über background-color. Durch Verlinkungen können Sie so sehr einfach und schnell eine ansprechende Navigation für Ihre Website erzeugen.
<body>
<form name="Formular1">
<select name="roll" size="3"
style="background-color:lightskyblue">
<option style="color:red">Bilder
<option style="color:green">
Downloads
<option style="color:blue">
Freunde
<option style="color:black">
Nachrichten
<option style="color:yellow">
Sonstiges
</select>
</form>
<table width="90%" border="1">
<tr style="background-color:lightskyblue">
<td width="40%"
style="color:red">WEKA-Verlag
</td>
<td width="60%"
style="color:blue">PC-Magazin
</td>
</tr>
</table>
</body>
-
Farbe der Links ändern
Farbe der Links ändern
Viele Browser zeigen Links standardmäßig in blauer Schrift und unterstrichen an. Sie können dies mit einem JavaScript ändern.
Überlegen Sie sich gut, ob Sie Farbe und Unterstreichung von Hyperlinks ändern wollen. Die meisten Besucher Ihrer Website haben sich nämlich inzwischen an die Standardfarben und Unterstreichungen gewöhnt. Sie erkennen dann einen Textabschnitt automatisch als Link. Verwenden Sie andere Schriftfarben, wird der Link häufig nicht mehr als solcher erkannt - vor allem, wenn der Text nicht unterstrichen ist. Deswegen sollten andersfarbige Texte deutlich als Link zu erkennen sein: zum Beispiel über einen Hinweis im Text oder einer Tabellenbeschriftung. Eine Farbänderung beim Drüberfahren mit der Maus unterstützt das Erkennen. Ihre gewünschte Farbe erreichen Sie durch ein Cascading Stylesheet, wobei visited den bereits besuchten Link markiert, und hover die Farbänderung beim Drüberfahren mit der Maus:
<head>
<style type="text/css">
<!--
a:link { color:black;
text-decoration:none; }
a:visited { color:red;
text-decoration:none; }
a:hover { color:green;
text-decoration:underline; }
//-->
</style>
</head>
<body>
Das ist ein unsichtbarer <a
href="">http://www.pc-magazin.de">
Link</a>.
</body>
-
Rollover mit Hover
Rollover mit Hover
Einfache Rollover-Menüs lassen sich mit Cascading Style Sheets ohne großen Aufwand realisieren.
Das Menü in Form einer horizontalen Navigationsleiste wird ausschließlich durch ein externes Cascading Style Sheet definiert. Änderungen können so schnell Site-übergreifend vorgenommen werden. Das Stylesheet benutzt den Hover-Parameter, um den Rollover-Effekt zuzuweisen. Die Definitionsdatei wird unter dem Namen rollover.css gespeichert. Zunächst werden Hintergrundfarbe und Schrift festgelegt. Dann erfolgt die Formatierung des Menüs. Der Ausgangszustand (A:link) zeigt weiße Schrift auf schwarzem Hintergrund. Beim Überfahren (A:hover) wechselt die Hintergrundfarbe zu Rot und die Schrift zu Gelb.
P {background-color: white;
font-family: Verdana, Helvetica,
Arial, sans-serif}
P.navigationsleiste
{background-color: black; border:
medium #ffffff solid; padding:
1%; text-align: center; width:
80%}
P.navigationsleiste A:link
{background-color: black; color:
white; text-decoration: none}
P.navigationsleiste A:hover
{background-color: red; color:
yellow; text-decoration: none}
P.navigationsleiste A:visited
{background-color: black; color:
white; text-decoration: none}
P.navigationsleiste
a:visited:hover
{background-color: red; color:
yellow; text-decoration: none}
Das Stylesheet binden Sie im Header Ihrer Seite durch die Zeile
<link href="rollover.css"
rel="styleSheet" type="text/css">
ein. Auf der Seite wird die Naviagationsleiste dann folgendermaßen eingebunden:
<p class="navigationsleiste">
<a href="home.html">Home</a> |
<a href="prod.html">Produkte</a> |
<a href="support.html">Support</a> |
<a href="mail.html">Kontakt</a>
</p>
-
Font-Attribute
Font-Attribute
Viele Web-Entwickler nutzen die Vorzüge von Stylesheets. Sie benötigen nur eines für mehrere Seiten. Das heißt, Sie nehmen Änderungen nur in diesem vor und nicht für jede Seite einzeln. Eine der wichtigen Eigenschaften betrifft die Schrift. Für sie gibt es fünf Parameter.
l font-family: Hier wird der Name der benutzten Schrift angegeben: Courier, Helvetica, Arial oder Times. Ist der Schrifttyp nicht verfügbar, kann eine übergeordnete Familienbezeichnung angegeben werden: serif, sansserif, monospace, cursive und fantasy. Die Fonts können in einer bevorzugten Reihenfolge angegeben werden. Ist dann die zuerst genannte nicht auf dem System verfügbar, wird die nächstniedrigere benutzt. Beispiele: BODY { font-family: Times, TimesRoman, serif } P { font-family: Helvetica, Verdana, Arial, sans-serif } H1 { font-family: Monaco, Courier, monospace }
l font-style: Unterscheidungen im Stil finden eigentlich nur zwischen normal und italic (kursiv) statt. Die dritte Option, oblique, ist normalerweise mit italic identisch.
l font-variant: Auch unter den Varianten sind nur zwei Optionen gebräuchlich, normal und small-caps, wobei es sich bei den small-caps um kleiner dargestellte Großbuchstaben (Kapitälchen) handelt. Diese Einstellung wird nur in seltenen Fällen gewählt.
l font-weight: Das Gewicht der Schrift bezeichnet die Stärke der Darstellung, übliche Einstellungen sind Normaldarstellung und Fettdruck (bold). Unter font-weight sind vier Bezeichnungen sowie einige Werteingaben zulässig: normal, bold, bolder, lighter und 100, 200, 300, 400, 500, 600, 700, 800, 900 ( normal = 400 und bold = 700).
l font-size Die Größe der Schrift lässt sich auf fünf Arten festlegen, in absoluter Größe durch Punkt: 7pt, 22pt, 14pt, 36pt, 72pt, ... und Pixel: 100px, 45px, 90px, 10px, .... Alternativ können Sie relative Größen verwenden: xx-small, xsmall, small, medium, large, x-large, xx-large und Prozent: 24%, 58%, 150%, 10%, 100%, .... Seltener gebräuchlich ist die Größenangabe Ems. Sie entspricht der prozentualen Größe (Ems: .24em, .58em, 1.5em, .1em, 1.0em, ...). Die relative Größe bezieht sich auf die zuvor gesetzte absolute Größe. Wird im Body-Tag eine feste Größe definiert, lassen sich in den Absätzen hierzu relative Angaben treffen.
-
Hintergrundgrafiken einbauen
Hintergrundgrafiken einbauen
Sind Ihnen einfarbige Hintergründe auf Webseiten zu langweilig, können Sie diese mit einem Bild aufpeppen.
Normalerweise binden Sie Hintergrundgrafiken mit HTML in eine Seite ein. Die Browser stellen diese Bilder dann gekachelt dar, das heißt, sie wiederholen die Grafiken so oft, bis die gesamte Seite ausgefüllt ist. Der gewünschte Effekte geht hierbei jedoch häufig verloren. Mit CSS verhindern Sie die Kachelung und können Platzierung sowie Anzeige des Bildes vollständig kontrollieren. In HTML binden Sie eine Hintergrund-Grafik über das <body>-Tag ein: <body background="bgimage.jpg"> Möchten Sie nun die Darstellung mit CSS kontrollieren und den Kacheleffekt verhindern, benutzen Sie den Wert "no-repeat". Der Browser zeigt die Hintergrund-Grafik jetzt nur ein einziges Mal in der linken oberen Ecke an. Sie sind damit nicht zufrieden? Kein Problem: Mit der Option "center" platzieren Sie das Bild in der Mitte Ihrer Webseite. Während Netscape 4.7 "center" noch nicht kennt, stellen neuere Browser das Bild in der gewünschten Weise dar. Wenn Ihre Seite sehr lang geworden ist, kann es passieren, dass Besucher die Hintergrund-Grafik erst sehen, wenn sie auf die Seite nach unten gescrollt haben. Ergänzend sollten Sie eine Hintergrundfarbe definieren, die im gleichen Farbklima gehalten ist. Farben werden schneller dargestellt, als Bilder geladen werden. Dadurch vermeiden Sie ungewollte Kontraste beim Seitenaufbau. Auch diese Hintergrundfarbe integrieren Sie als Farbcode (#xxxxxx) direkt in das Style Sheet. Komplett sieht es dann folgendermaßen aus:
<style type="text/css" >
body { background: #CCFF99 url(bg
image.jpg) no-repeat center; }
</style>
Verwenden Sie keine großen Bilder mit einer langen Ladezeit für den Hintergrund und achten Sie auf einen guten Kontrast zwischen Hintergrund und Text bzw. anderen Seitenelementen.
-
Wasserzeichen mit CSS
Wasserzeichen mit CSS
Ein Wasserzeichen ist ein Hintergrundbild, das fixiert ist. Der Internet Explorer verfügt über eine extra Attribut für das <body>-Tag:
<body background="bild.gif"
bgproperties=fixed>
Allerdings kennt kein anderer Browser dieses Attribut, auch in HTML 4.0 ist es nicht vorgesehen. Eine kompatible Lösung bieten Cascading Style Sheets. Das funktioniert immerhin auch bei Mozilla/Netscape 7.
<body style="background-image:
url(bild.gif); backgroundattachment:
fixed;">
-
Browserweiche ohne Skript
Browserweiche ohne Skript
Netscape 4.x macht bei vielen CSS-Eigenschaften Probleme. Definieren Sie deshalb einen Stylesheet-Bereich, den dieser Browser ignoriert.
Immer noch nutzen etliche Surfer Netscape 4.x. Gerade beim Einsatz von CSS macht der Browser aber Probleme und zerwürfelt viele Layouts. Mit einem CSS-Kniff ist es leicht, spezielle CSS-Deklarationen nur für modernere Browser wie Internet Explorer, Mozilla oder Opera zu notieren: Netscape 4 kennt die At-Regel @medianicht, alle anderen Browser schon. Klammern Sie einfach alle für Netscape 4.x ungeeigneten CSS-Regeln so ein:
<style type="text/css">
@mediaall {
a {border: solid red}
} </style>
-
3D-Rahmen mit CSS
3D-Rahmen mit CSS
Einfache grafische 3D-Rahmen sind mit CSS kein Problem. Mit der CSS-Eigenschaft border-style umgeben Sie praktisch jedes Element mit einem Rahmen, egal ob Bild, Absatz oder ein einzelnes Wort:
<img src="bild.gif"
style="border-style: inset;">
Der Wert inset lässt das Bild so aussehen, als wäre es in den Hintergrund eingedrückt. Daneben sind noch outset (Gegenteil von inset), groove (Rahmen in Hintergrund eingeritzt) und ridge (Rahmenlinie erhaben dargestellt) erlaubt. Die Breite des Rahmens steuern Sie mit border-width zum Beispiel in Pixel.
-
Formularbuttons formatieren
Formularbuttons formatieren
CSS-Eigenschaften lassen sich auch auf Buttons in Formularen anwenden, so dass sie beispielsweise ein Hintergrundbild erhalten.
Ein Vorteil von CSS gegenüber HTML-Attributen ist die (beinahe) universelle Anwendbarkeit. So stehen Ihnen für Formularbuttons nahezu alle CSS-Eigenschaften zur Verfügung. Das folgende Beispiel stattet einen Button mit Hintergrundbild aus, legt die Größe fest und bestimmt die Größe der Beschriftung:
<input type="submit"
style="background-image: url(lod.jpg);
font-size: 20pt; font-weight: bolder;
width: 320px; height: 213px;">
<\>/form>
In der zweiten Zeile weisen Sie mit background-image: url(lodge.jpg) dem Button ein Hintergrundbild zu. Die nächste Zeile bestimmt mit font-size eine Schriftgröße von 20 Punkt, font-weight: bolder sorgt für eine extra fette Schrift. Wenn Sie den Standardtext für den Submit-Button ändern wollen, verwenden Sie das HTML-Attribut value="....". Die letzten beiden CSS-Angaben setzen die Breite und Höhe des Buttons auf die Maße des Bildes. Ohne diese Angaben macht der Browser den Button so groß, dass die Schrift Platz findet.
-
Hoch- und tiefgestellter Text
Hoch- und tiefgestellter Text
Mit CSS vermeiden Sie ungleiche Zeilenabstände bei hoch- oder tiefgestellten Elementen.
In vielen Fällen sind hoch- oder tiefgestellte Buchstaben im Fließtext erforderlich etwa m2 oder H2O. In HTML erreichen Sie diesen Effekt über <sup> (hoch) und <sub> (tief). Die Browser passen die Zeilenhöhe nicht entsprechend an und das sieht hässlich aus. Mit CSS lässt sich das Problem lösen:
<style type="text/css">
.hoch { vertical-align: super; fontsize:
50%;}
.tief { vertical-align: sub; fontsize:
50%;}
.absatz { line-height: 140%;} </style>
Die Klassen .hoch und .tief versetzen den Text mit vertical-align und reduzieren die Schriftgröße auf 50 Prozent. Die Textabsätze erhalten mit der Klasse .absatz einen vergrößerten Zeilenabstand von 140%. Diese Klassen wenden Sie so an:
<p class="absatz">Wasser ist H<span
class="tief">2</span>O</p>
-
Tippfehler vermeiden
Tippfehler vermeiden
Der Internet Explorer 6.0 reagiert empfindlich auf falsch geschriebene CSS-Regeln vermeiden Sie häufige Fehler.
Wenn eine Datei gemäß HTML-Standard mit einer gültigen Doctype-Zeile inklusive URI beginnt, schaltet der Internet Explorer 6.0 in den Standards Compliant Mode um. Dann legt der Browser die Regeln für CSS sehr streng aus. Was ältere Versionen einwandfrei darstellen, erscheint im IE 6.0 fehlerhaft. Achten Sie besonders auf folgende Punkte:
- Farbangaben in Hexadezimalschreibweise müssen unbedingt mit einer Raute beginnen. body { background-color : FFCC66 } ist falsch, richtig muss es body { background-color : #FFCC66 } lauten.
- Bei Schriftgrößen ist kein Leerzeichen zwischen Größenangabe und Einheit erlaubt. Sie müssen also
p { font-size : 12px}
statt
p { font-size : 12 px}
schreiben.
- Besonders kritisch wird es bei den Namen sowie class- und id-Attributen. CSS unterscheidet Groß- und Kleinbuchstaben. Definieren Sie etwa nav im Stylesheet-Bereich und <div class="Nav"> im HTML-Bereich, wird der IE 6.0 diese Regel nicht anwenden!
-
Animierte Buttons
Animierte Buttons
Ganz ohne JavaScript definieren Sie mit CSS Buttons, die bei Mauskontakt die Darstellung ändern.
Für animierte Buttons in der Navigationsleiste gibt es viele Rezepte. Ganz ohne Java, Java-Script oder Flash funktioniert es mit CSS und der Pseudo-Klasse :hover. Eine CSS-Definition dieser Klasse wird nur aktiv, wenn sich der Mauszeiger über einem Link befindet. Der Kniff ist nun, einem normalen Link die Form eines Buttons zu geben. Das erledigt die folgende CSS-Regel:
a.menue {
display: block;
width: 8em;
height: 1.3em;
padding: 2px;
border-style: solid;
border-width: 1px;
border-color: #00f;
text-align: center;
text-decoration: none; }
Die Besonderheit ist display: block. Damit weisen Sie den Browser an, den Link nicht wie ein normales Wort zu behandeln (Inline-Element), sondern wie einen Absatz (Block-Element). Die nächsten CSS-Eigenschaften legen die Größe des Buttons fest. Die Einheit em bezieht sich auf die aktuelle Schrift, so dass die Buttons sich der Schriftgröße im Browser anpassen. Die restlichen CSS-Befehle sind Standard. Die folgenden CSS-Regeln legen fest, welche Farbe der Link in verschiedenen Situationen hat. Normale oder bereits besuchte Links (:link und :visited) sind blau und haben einen transparenten Hintergrund. Berührt der Mauszeiger einen Link, also den gesamten Link-Absatz, so greift :hover. Die Schrift wird weiß und der Hintergrund blau. Klicken Sie einen Link an (:active), so wechselt die Hintergrundfarbe auf rotbraun:
a.menue:link { color:#00f;
background-color:transparent; }
a.menue:visited { color:#00f;
background-color:transparent; }
a.menue:hover { color:#fff;
background-color:#00f; }
a.menue:active { color:#ffF;
background-color:#a03; }
Die Anwendung ist denkbar einfach. Sie weisen einem normalen Link einfach die Klasse menue zu:
<a class="menue" href="...">Home</a>
Um eine saubere Darstellung zu erreichen, formatieren Sie die CSS-Links mit einer unsichtbaren Tabelle.
-
Mauszeiger verändern
Mauszeiger verändern
Mit der CSS-Eigenschaft Cursor verwenden Sie beim Internet Explorer eine beliebige Bilddatei als Mauszeiger.
Standardmäßig sieht der Mauszeiger bei Windows wie ein Pfeil aus, der zum Beispiel über einem Link zu einer Hand mit ausgestrecktem Zeigefinger wird. Mit der Eigenschaft cursor verändern Sie den Mauszeiger so, wie Sie es wollen. Eine pfiffige Erweiterung des CSSStandards unterstützt derzeit nur der Internet Explorer 6.0:
Sie geben den Namen einer Cursor-Ressourcendatei in den Formaten cur (statischer Mauszeiger) oder ani (animierter Mauszeiger) an:
<img src="limo-vor-downtow-la.jpg"
alt="Limousine in Los Angeles
Downtown"
style="cursor=url(banana.ani)">
Das Beispiel bindet banana.ani als animierten Mauszeiger ein.
-
Texte um Bilder fließen lassen
Texte um Bilder fließen lassen
In HTML erscheinen Texte und Bilder auf einer Webseite einfach nacheinander in der Reihenfolge des Quellcodes. CSS erlaubt es, Bilder in den Textfluss einzufügen.
In dem folgenden Quellcode wird für das <img>-Tag ein Style mit der Eigenschaft float: right für die Klasse symbol definiert. Das sorgt dafür, dass das Bild direkt gegen die linke Kante des Elements gleitet, in das es eingebettet ist. In diesem Fall ist dies das Element <p>, das neben dem Bild den Text enthält. Zusätzlich ist ein Rand gesetzt, um das Bild vom Text abzusetzen. Je nachdem, wie der Anwender das Browser-Fenster aufzieht, erscheint der Text rechts neben dem Bild oder wird, wenn der Platz nicht ausreicht, unter dem Bild fortgesetzt.
<html><head><meta http-equiv=
"content-type"
content="text/html;charset=
iso-8859-1">
<title>Text mit Bild</title>
<style type="text/css" media="screen">
<!-- img.symbol { float: left; margin:
1em}
p { font-size: 1em}--> </style>
</head>
<body bgcolor="#ffff25">
<p>a rose is a rose
<img class="symbol" src="rose.gif"
alt="eine Rose ist eine Rose"
height="180" width="176" border="0.5">
is a rose ... usw ...a rose a rose is
a rose is a rose </p> </body></html>
-
Stilkaskaden
Stilkaskaden
Das C in CSS steht für die Möglichkeit, Stylesheet-Kaskaden zu verwenden, also Abfolgen von Style-Definitionen, die sich ergänzen oder auch widersprechen können. Dass die modernen Browser damit umgehen können, erlaubt es, Stilvorlagen zu erstellen, die für eine Firma etwa bestimmte allgemeine Merkmale für Schriften und Farben festzulegen und diese Festlegungen für bestimmte Seiten einer Website durch konkretere Formatierungsanweisungen zu ergänzen oder auch teilweise zu überschreiben. Dabei werden die übergeordneten Stylesheets durch <link>-Elemente eingebunden, etwa:
<link title="corporate"
href="corporate.css"
rel="stylesheet" media="screen">
<style type="text/css">
h1 {color: white;}
</style>
-
Initiale mit Pseudoselektoren
Initiale mit Pseudoselektoren
Hervorhebungen des ersten Buchstabens oder der ersten Zeile in einem Absatz sind in den Printmedien geläufig. CSS erlaubt diese Effekte auch fürs Web. Normalerweise beziehen sich Stylesheets auf komplette Elemente einer Webseite, die in Tags eingeschlossen sind, etwa Tabellenelemente oder eine Überschrift. Für Textabschnitte stehen aber noch Selektoren zur Verfügung, um auf Teile davon zuzugreifen. In dem folgenden Beispiel stellen wir die Selektoren p:first-letter und p:first-line vor, um den ersten Buchstaben als Initial und die erste Zeile eines Absatzes fett auszugeben.
<html><head><meta http-equiv="contenttype"
content="text/html;charset=iso-
8859-1"><title>CSS-Beispiel</title>
<style type="text/css" media="screen">
p.initial:first-letter { font-size:
36pt; float:left }
p.onepara:first-line { font-weight:
bold }</style></head>
<body bgcolor="#ffffff">
<p class=initial> Stylesheets erlauben
eine detaillierte Formatierung Ihre
Webseiten...
<p class=onepara> Dabei werden drei
Typen unterschieden: ... Klassen-Stile
können einzelnen Elementen
zugewiesen werden...</p>
<p>Leider unterstützen nicht alle
Browser bereits alle CSSEigenschaften!</
p></body></html>
Da üblicherweise nur bestimmte Abschnitte in dieser Form gestaltet werden, sind diese Selektoren in der Regel mit Klassenselektoren kombiniert. Das letzte <p>-Element bleibt deshalb von den Style-Definitionen unberührt.
-
Optimierung des Zeilenabstands
Optimierung des Zeilenabstands
Neben der Schriftart und Schriftgröße hat insbesondere der Zeilenabstand Einfluss darauf, ob Texte gut zu lesen sind.
In der Regel ist der Zeilenabstand, den normales HTML erzeugt, zu niedrig. Er liegt meistens bei 120% der Schriftgröße. Der Durchschuss lässt sich aber auch nicht einfach durch entsprechende Attribute ändern. Hier helfen wieder Style-Definitionen, die den Zeilenabstand exakt definieren können. Eine Faustregel ist, dass der Zeilenabstand das Eineinhalbfache der Schriftgröße haben sollte, bei 10 Punkt also 15 Punkt. Das lässt sich am einfachsten mit Hilfe der relativen Maßeinheit em fixieren, die der jeweiligen Schriftgröße entspricht:
p {font-family: Georgia;
font-size: 10px;
line-height: 1,5em }
Bei großen Schriften sollte der Faktor etwas reduziert werden.
-
Schöne Listen
Schöne Listen
Um Listen gefällig darzustellen, wird häufig noch mit Tabellen und GIF-Abstandhaltern gearbeitet. CSS bietet dafür viel einfachere Lösungen.
Die Aufgabe, eine Liste mit einer schmucken Kopfzeile und eigenen Bullets zu zieren, lässt sich in einem Stylesheet mit wenigen Anweisungen meistern. In dem folgenden Beispiel definieren Sie eine Klasse titel, die zunächst eine durchgezogene solid und sehr feine ein Pixel starke Linie einfügt und zugleich für einen flexiblen Abstand sorgt. Den zweiten Style definieren Sie direkt für das Element <ul> und legen fest, dass anstelle der Standardaufzählungszeichen eine kleine Grafik verwendet wird, die als GIF vorliegt. Die Klasse titel muss dann nur noch dem <h3>-Element als Attribut beigegeben werden.
<html><head>
<style type="text/css" media="screen">
.titel { font: bold, .8em, Verdana;
border-top: solid 1px #666666;
background: #CCCCCC;
padding: 3px }
ul { font: 1em Verdana; list-styleimage:
url(bilder/triangle.gif) }
</style>
</head>
<body bgcolor="#ffffff">
<h3 class="titel">Regionen</h3>
<ul><li> Norden<li> Osten<li>
Süden<li> Westen</ul>
</body></html>
-
Farbige Bildlaufleisten
Farbige Bildlaufleisten
Die Farben der Bildlaufleisten lassen sich an die der Webseite verwendeten Farben anpassen.
Um die Bildlaufleisten für das gesamte Browserfenster einzufärben, definieren Sie einen Style für das <body>-Element:
<style type="text/css"
media="screen">
body {scrollbar-3dlight-color:#aeaeea;
scrollbar-face-color:#ffe08d;
scrollbar-arrow-color:#aedeca;
scrollbar-darkshadow-color:#efbd8e;
scrollbar-highlight-color:#edce0f;
scrollbar-shadow-color:#efbd8e;
scrollbar-track-color:#b19024;
}</style>
Nacheinander verändert der Stil so die 3D-Farbe, die Oberflächenfarbe, die Farbe der Richtungspfeile, der dunklen Schatten, die Farbe für den oberen und linken Rand, für die hellen Schatten und den Bereich, der für die Bewegung der Balkens angeboten wird. Allerdings färbt im Augenblick nur der Internet Explorer die Bildlaufleisten entsprechend ein.
-
Besuchte Links durchstreichen
Besuchte Links durchstreichen
Um die Übersichtlichkeit zu erhöhen, sollten die drei Aggregatszustände von Hyperlinks mit unterschiedlichen Farben ausgezeichnet werden. Benutzerfreundlicher und optisch ansprechender ist es aber, bereits besuchte Links durchzustreichen.
Im Normalfall verhält es sich so, dass Sie Hyperlinks jeweils drei Farben zuweisen: <link>, <alink> und <vlink>. Das Problem daran ist,
dass die anvisierten Farben nicht immer mit dem Seitendesign korrespondieren. Webdesigner stehen dann vor der Wahl, Links entweder nicht HTML-konform zu maskieren oder abenteuerliche Farbkombinationen zu wählen. Alternativ dazu hilft das CSS-Pseudoformat text-decoration:line-through weiter. Denn damit ist es möglich, Texte und somit auch Links durchzustreichen.
Anstatt einen Hyperlink standardmäßig auszuzeichnen <a href="http://www.pc-magazin. de/">PC Magazin</a>, packen Sie die entsprechenden Anweisungen zur Linkauszeichnung in den <head>-Bereich der Seite:
<style type="text/css">
a:link { font-weight:bold;
color:#0000E0; text-decoration:none }
a:active { font-weight:bold;
color:#0000E0; textdecoration:
underline }
a:visited { font-weight:bold;
color:#0000E0; text-decoration:linethrough
}
a:hover { font-weight:bold;
color:#E00000; text-decoration:none }
</style>
Mithilfe dieser CSS-Komponente ist es aber auch problemlos möglich, einen bereits verfolgten Link scheinbar verschwinden zu lassen. Dazu müssen Sie lediglich bei der Farbangabe "a:visited" den gleichen Hexwert einsetzen, den Sie für den Seiten-Background verwenden.
-
Farbige Rahmen und Textkästen
Farbige Rahmen und Textkästen
Zur Abgrenzung von Rahmen und Texten finden sich im CSS-Befehlssatz jede Menge Funktionen. Besonders interessant ist es, Farben und Linienformen miteinander zu kombinieren.
Um in Frames untergebrachte Navigationsleisten oder Linklisten in Szene zu setzen, können Sie auf den CSS-Befehl style="border-Parameter" zurückgreifen. Damit ist es möglich, jede einzelne Seite eines Frames mit einer farbigen Linie zu verzieren. Neben Ausrichtung, Farbe und Stärke dieser Linie können Sie auch das Aussehen bestimmen. Hier stehen Ihnen die Parameter dotted (gepunktet), dashed (gestrichelt), solid (durchgezogen), double (doppelte Linie), groove (Freihand), ridge (plastisch), inset (3D-Effekt innen) und outset (3D-Effekt außen) zur Auswahl. Es genügt, eine Anweisung wie etwa style="border-top: blue 2px dotted" in das <frame>-Tag zu schreiben, um die obere Begrenzung eines Frames mit einer blauen, zwei Pixel breiten, gestrichelten Linie zu verzieren.
-
Ansehnliche Schatteneffekte
Ansehnliche Schatteneffekte
Seitenelemente lassen sich auch ohne die Hilfe eines Grafikprogramms mit Schatten verschönern.
Schatteneffekte, die etwa Logos, Überschriften und Bildern räumliche Tiefe verleihen, sind inzwischen auf fast allen Webseiten anzutreffen. Ressourcen schonend ist es, den Schlagschatten mit CSS zu realisieren. Der Trick: Sie legen einfach ein Element über ein anderes, wobei der in der unteren Ebene platzierte Layer in einer anderen Farbe formatiert und zusätzlich ein wenig verschoben wird. Dafür zuständig sind die Attribute left und top. Das funktioniert mit Text, eingerahmten Elementen, Grafiken und Tabellen. Der Quelltext des Schattens:
<div id="Layer1"
style="position:absolute; z-index:1;
left: 10px; top: 20px; color: #666666;
font-size: 28px; font-family: Verdana,
Arial, Helvetica, sans-serif;">
<b>PC Magazin</b> </div>
Der Quellcode des Textes, mit dem Versatz
left: 7px und top: 17px:
<div id="Layer1"
style="position:absolute; z-index:1;
left: 7px; top: 17px; width: 200px;
color: #000000; font-size: 28px; fontfamily:
Verdana, Arial, Helvetica,
sans-serif;">
<font color="red"><b>PC
Magazin</b></font></div>
-
Hervorheben mit Textmarker
Hervorheben mit Textmarker
In Word gehört der grellgelbe Textmarker zur Grundausstattung. Auch Web-Texte lassen sich durch eine farbige Markierung hervorheben.
CSS erlaubt die farbige Textmarkierung mit dem Tag <span>. Dieses wird direkt in den Lauftext implementiert und mit dem Attribut background versehen.
<span style="color : black;
background: yellow">Die Stadt Venedig
(Venezia)</span> erhielt ihren Namen
nach dem <span style="color : black;
background: green">Lebensraum der
antiken Veneter</span>.
-
Submit-Button
Submit-Button
Submit-Button werden in allen Browsern und Plattformen sehr uneinheitlich dargestellt. Selbst beim Einsatz von Stylesheets sind die Ergebnisse mitunter fatal. Sensiblität ist gefragt.
Wenden Sie für Netscape 4.x am besten keine Stylesheets für Submitbutton und Formfelder an und benutzen hierfür die o.g. CSS-Weiche. Im Bildbeispiel sehen Sie, wie unterschiedlich die Ergebnisse selbst bei Professionals ausfallen. (gesehen im Admin-Bereich bei Strato). Um einen möglicherweise bis zur Unkenntlich- und Unbrauchbarkeit verstümmelten Submit-Button aus dem Weg zu gehen, setzen Sie im Zweifelsfall lieber Grafiken ein.
<input name="submit" type="image"
src="submit-button.gif" width="xx"
height="xx"
border="0" value="Abschicken">
Wenn Sie Submit-Button verwenden wollen, sind Sie nur auf diese Weise sicher, dass der Anwender genau das zu sehen bekommt, was Sie sich vorstellen.
-
Lesbare Texte
Lesbare Texte
Immer noch ist das Internet voll mit unüberschaubaren Textwüsten. Die Augen ermüden schnell beim Lesen und der Besucher surft schnell weiter.
Schaffen Sie dem Besucher Anreize, sich Ihre Texte durchzulesen. Verwenden Sie schmale Spalten, gut lesbare Typo, keine Farben, Einrückungen, Absätze, ausreichend Zeilenabstand und evenzuell Blocksatz. Diese CSS Anweisung übernimmt die Aufgaben für Sie.
<style type="text/css">
<!-- .lesbarertext {
font-family: Verdana, Arial,
Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
color: #000000;
text-align: justify;
text-indent: 8mm;
width: 350px; } --> </style>
<td class="lesbarertext">
<p>Hier steht mein 1. langer
Text...etwa 30 Worte."</p>
<p>Hier steht mein 2. langer
Text...etwa 30 Worte."</p> </td>
-
Formenvielfalt per CSS
Formenvielfalt per CSS
Unter www.csszengarden.com/tr/deutsch können Sie sich anschauen, wie flexibel der Einsatz von Stylesheets sein kann. Auf dieser Homepage können unter Verwendung der immer gleichen vorgegebenen HTML-Datei, eigene, neue StyleSheets eingereicht werden. Wie unglaublich unterschiedlich die Ergebnisse sein können, wird in einer Galerie gezeigt. Sollte die eigene eingereichte Arbeit den Ansprüchen der Betreiber dieser Homepage genügen, wird man in die Galerie aufgenommen.
-
Fontgrößen im Griff
Fontgrößen im Griff
In Abhängigkeit des verwendeten Browsers und Betriebssystems sind Schriften auf einem Computermonitor meistens unterschiedlich groß. Ein altes Problem.
Benutzen Sie deshalb nie den Zeilenumbruch <br> oder den leeren Platzhalter < >, um Ihr Layout zu definieren. Benutzen Sie Layer oder Tabellen und transparente GIFs. Räumen Sie Ihren Texten genügend Spielraum ein, um gegen eine eventuelle kleinere oder größere Darstellung Ihrer Web-Texte auf Monitoren anderer Benutzer gewappnet zu sein. Windows-Systeme benutzen eine Berechnungsgrundlage von 96dpi (Dots per Inch) für die Darstellung von Schriftarten, bei Systemen wie Linux und Macintosh sind es dagegen 72dpi. Vermeiden Sie relative Größenangaben. Verwenden Sie stattdessen Pixel- oder Punktangaben:
<style type="text/css">
<!- -
.pixelfont {
font-size: 14px; }
.punktfont {
font-size: 14pt; }
- ->
</style>
-
Texte sinnvoll einfärben
Texte sinnvoll einfärben
Ansprechende und professionell wirkende Webseiten leben von ihrer Farbgestaltung.
Bei nicht professionell wirkenden Homepages wird allzu häufig zu tief in den digitalen Farbeimer gegriffen. Scheinbar wahllos werden nach persönlichem Geschmack und Laune Farben zusammengewürfelt, die die zu vermittelnden Information auf einer Webseite nicht unterstützen, hingegen Irritationen beim Betrachter hervorrufen. Textinformationen auf einer Homepage machen den größten Teil des Informationsangebots aus. Gerade hier sollte besonders behutsam vorgegangen werden. Texte auf Computermonitoren lassen sich auf Grund deren technischer Merkmale grundzätzlich schwerer lesen, als beispielsweise ein gedruckter Text, wie den, den Sie hier gerade lesen. Die Auflösung gedruckter Texte ist viermal höher als die Darstellung auf einem Monitor. Erschweren Sie dem Leser also nicht unnötig den Aufenthalt auf Ihrer Homepage. Texte treten am besten durch kräftige und dunkle Farben vor hellem, neutralem Hintergrund hervor. Das Ideal wäre Schwarz auf Weiß. Überschriften können sich durchaus durch Farbe und Größe abheben. So setzen Sie Akzente. Vermeiden Sie es, Komplementärfarben für Text und Hintergrund zu benutzen. Ein unangenehemes Flimmern wäre die Folge. Das folgende Stylesheet gibt Ihnen ein Ideal vor, das Sie behutsam Ihren Bedürfnissen anpassen können. Fügen Sie es in den Headbereich Ihrer Homepage ein und rufen das entsprechende Stylesheet z.B. in Ihrer Tabellenzelle auf.
-
Mehrspaltig mit Cascading Style Sheets
Mehrspaltig mit Cascading Style Sheets
Zukünftig sollten Homepages nach den Empfehlungen des WorldWideWeb-Consortiums (W3C), ohne die derzeit noch typischen HTML4.0-Tags auskommen.
Um eine W3C-konforme XHTML-Homepage mittels CSS zu gestalten, müssen Sie künftig eine ganze Menge Besonderheiten beachten. Das Beispiel zeigt Ihnen, wie Sie ein dreispaltiges Weblayout umsetzen könnten. Wichtig ist auf jeden Fall, dass zugunsten einer größeren Flexiblität und Übersicht, Stylesheets von den eigentlichen Web-Inhalten getrennt werden. Im Idealfall speichern Sie Stylesheets als externe Datei, um sie für alle Folgeseiten gleichermaßen und komfortabel einsetzen zu können. Mit dieser Technik gestalten Sie das Layout Ihrer Seiten ohne großen weiteren Aufwand. Leider erreichen es selbst modernste Browser immer noch nicht, eine W3C-konforme Webseite einheitlich darzustellen. Das Beispiel struktur.htm auf der Heft-CD zeigt Ihnen bereits eine typische Struktur eines XHTML-Dokuments.
-
Bild vergrößern
Bild vergrößern
Mit einem einfachen Cascading Style Sheet (CSS) vergrößern Sie ein Bild, ohne eine Datei zu laden.
Wenn Sie per CSS ein Bild, ohne eine weitere Bilddatei zu laden, direkt hochziehen, handelt es sich nicht um den klassischen Rollover, den Sie in einem Fotoalbum verwenden. Zunächst bestimmen Sie die Größe des gezoomten Bildes. Fügen Sie hierzu folgendes CSS in den Head Ihres Webdokuments ein:
<style type="text/css">
a:hover .gross {filter='()';
width : 380px; height : 215px; }
</style>
Im Body fügen Sie wie gewohnt Ihr Bild ein und definieren hierfür einen so genannten Null-Hyperlink (#), indem Sie ihm die Klasse gr oss zuweisen:
<a href="#">
<img class="gross"
src="beeren_rot_klein.jpg" width="138" height="115" border="0">
</a>
Die Bildgröße ist im <img>-Tag definiert. Hier wird auch auf die definierte Klasse verwiesen.
-
Text drehen und vertikal anordnen
Text drehen und vertikal anordnen
Einen besonderen Effekt erzielen Sie, wenn Sie Text auf Ihrer Webseite vertikal anordnen. Erscheint dieser um 90 Grad gedreht, will jeder wissen, wie das geht.
Viele Webdesigner setzen Bilder ein, um vertikalen Text hervorzuheben. Nachteil dieses Verfahrens ist allerdings, dass dadurch unnötig die L adezeit erhöht wird. Es geht auch anders, nämlich mit Cascading Style Sheets (CSS). Der Besucher kann den mit CSS senkrecht angeordneten Text wie gewohnt im Browser markieren, in die Zwischenablage kopieren und weiter verarbeiten. Auf diese Weise können Sie beispielsweise den Impressum-Text oder kurze Zusammenfassungen als Hingucker auf Ihrer Seite platzieren. Fügen Sie in den Head Ihrer HTML-Seite die CSS-Anweisung .senkrechter_text ein:
<style type="text/css">
.senkrechter_text
{
writing-mode: tb-rl;
position: absolute;
right: 8px;
top: 30px;
width: 35px;font: bold 14px arial;
color: #000033;
}
</style>
Verantwortlich für die senkrechte Anordnung des Textes ist die Anweisung
writing-mode: tb-rl;
Bestimmen Sie die absolute Position des Textes mit der Anweisung:
position: absolute;
In diesem Beispiel steht der Text acht Pixel neben dem rechten Browserrand (right: 8px;) und 30 Pixel vom oberen Rand entfernt (top: 30px;). Mit width legen Sie die waagerechte Breite des Textblocks in Pixel fest. Formatieren Sie außerdem in der CSS-Anweisung den Text in Schriftart, Größe, Stil und Farbe (font, color). Beachten Sie: Der senkrechte Text ist fest auf der Seite platziert und kann damit auch andere Seitenelemente überdecken.
-
Farbige Bildlaufleisten
Farbige Bildlaufleisten
Programme benutzen Scroll-Balken, um ein Dokument nach oben oder unten zu verschieben. Diese grauen Bildlaufleisten zeigt auch der Browser.
Scroll-Balken müssen nicht grau bleiben. Sie können die Farbe sämtlicher Balkenelemente selbst bestimmen und somit das Layout Ihrer Webseite unterstreichen. Doch Achtung: Nur der Internet Explorer 5.5 und höhere Versionen unterstützen diese CSS-Anweisung:
<body style="scrollbar-base-color:rgb(0,0,153);
scrollbar-face-color:rgb(0,0,153);
scrollbar-arrow-color:white;
scrollbar-trackcolor:rgb(204,204,204);
scrollbar-highlight-color:white;
scrollbar-3dlight-color:rgb(51,51,51);
scrollbar-shadow-color:lime;
scrollbar-darkshadow-color:black;">
Fügen Sie das style-Attribut in das <body>Tag ein. Die Farben der einzelnen Elemente der Bildlaufleiste können Sie entweder im Hexadezimalcode oder mit dem Standard-Farbnamen definieren. Folgende Parameter stellen Sie ein: scrollbar-base-color bestimmt die Grundfarbe der Bildlaufleiste, scrollbar-face-color färbt die flachen Bereiche in der Bildlaufleiste. scrollbar-arrow-color legt die Farbe der Pfeile an den Enden der Bildlaufleiste fest. Mit scrollbar-track-color färben Sie die Laufleiste, praktisch den Hintergrund der Laufleisten. scrollbar-highlight-color ist der Befehl, um die beweglichen Elemente des Scrollbalkens her vor zuheben. scrollbar-3dlight-color bedient den 3D-Effekt in der Bildlaufleiste. scrollbar-shadow-color ist die innere Schatten-Farbe. scrollbar-darkshadow-color ist die Farbe des äußeren dunklen Schattens.
-
Animierte Buttons
Animierte Buttons
Mit CSS erzeugen Sie Buttons, die sich bei Mausberührung verändern und das ganz ohne JavaScript.
Animierte Buttons erfordern normalerweise einige Zeilen JavaScript und zwei unterschiedliche Bilddateien. Einfacher, schneller und Code-sparend klappt es mit CSS und der Pseudoklasse :hover. Sie definieren zunächst einen Klassenselektor für animierte Links. Das Beispiel definiert die Links als rechteckigen Block mit schwarzer Umrandung und hellgrauer Farbe. Die Angabe display: block; ist erforderlich, weil sonst Mozilla die Breitenangabe ignoriert.
<style type="text/css">
a.menuepunkt{
color: black;
background: silver;
text-align: center;
display: block;
width: 130px;
border: black solid 1px;
padding: 1px;
text-decoration:none;
font: bold 14px arial, sans-serif;
}
a.menuepunkt:hover{
color:white;
background-color:gray; }
</style>
In der Webseite markieren Sie einen solchen Button mit dem Attribut class="menuepunkt":
<a>
< class="menuepunkt" href="#"> Home
</a>
Statt der Raute geben Sie natürlich eine normale Zieladresse für den Link an. Achtung: Beim Ausprobieren können Sie leicht dem Internet Explorer in die Falle gehen. Er zeigt den Hover-Effekt nur dann, wenn der Link das Attribut href enthält.
-
Schatten einfügen
Schatten einfügen
Der Internet Explorer kann ab Version 5.5 beliebige Elemente einer Webseite mit einem Schatten ausstatten.
Die Technik nutzt eine spezielle Funktionssammlung des Internet Explorer, die ab Version 5.5 mit der vorgestellten Syntax verfügbar ist. Diese Filter sind eigentlich für die Bildbearbeitung gedacht, lassen sich als CSS-Eigenschaf ten aber auf beliebige Elemente einer Webseite anwenden. Zunächst definieren Sie im Kopfbereich der Webseite eine CSS-Regel, die im Beispiel den Klassenselektor .schatten benutzt:
<style type="text/css">
.schatten {
background-color: white;
filter:
progid:DXImageTransform.Microsoft. Shadow(direction=135, strength=6);
}
</style>
Das Aussehen des Schattens regeln Sie über zwei Parameter: direction gibt die Richtung des Schattenwurfs in Grad an, 0 ist oben. strength bestimmt, wie lang der Schatten in Pixeln ist. Die Angabe zur Hintergrundfarbe (background-color) ist erforderlich, weil sonst bei einer Tabelle auch der Inhalt einen Schatten erhält, nicht nur der Umriss. Den Klassenselektor .schatten dürfen Sie jetzt auf beliebige Elemente einer Webseite anwenden, zum Beispiel auf Bilder, Tabellen oder einfach Text. Das sieht so aus:
<table class="schatten">
Der Schattenwurf funktioniert ausschließlich mit dem Internet Explorer, schadet aber auch nicht. Andere Browser ignorieren die CSS-Eigenschaft einfach und stellen die Elemente ohne Schatten dar.
Logo rechts außen
Mit CSS platzieren Sie eine Logografik auf einer Webseite am rechten Fensterrand, und zwar ohne Zwischenraum zum Rand:
<img src="logo.gif" style="position:absolute; top:0px; right:0px;">
Aber Achtung, dieses Bild überdeckt im Zweifelsfall andere Elemente der Webseite, wenn das Browserfenster schmal eingestellt ist.
-
Selektiv drucken
Selektiv drucken
Dinge wie die Navigationsleiste sind bei einem Ausdruck eher störend. Über ein spezielles Stylesheet für die Ausgabe blenden Sie einzelne Elemente aus. Zunächst definieren Sie das Stylesheet:
<style type="text/css" media="print"> .verstecken {display: none;} </style>
Durch das zusätzliche Attribut media="print" legen Sie fest, dass die CSS-Regeln aus diesem Bereich nur für den Ausdruck gelten. Das entsprechende Gegenstück für die Darstellung am Monitor lautet media="screen". Die aktuellen Browser unterstützen diese getrennten Stylesheets. Im HTML-Code markieren Sie die Bereiche, die nicht im Ausdruck erscheinen sollen:
<p class="verstecken"> Unsichtbar im Ausdruck </p>
Sie können das Ergebnis leicht im Browser überprüfen. Beim Internet Explorer rufen Sie Datei/Druckvorschau auf, bei anderen Browsern lautet der Menübefehl ähnlich.
-
Stylesheets umschalten
Stylesheets umschalten
Über das Tag link weisen Sie einer HTML-Datei ein externes Stylesheet zu. Bei Mozilla und Opera dürfen Sie mehrere Stylesheets einfügen, zwischen denen der Surfer dann über Ansicht/Stilvorlagen auswählen kann. Ein Untermenü zeigt dann die vorhandenen Stylesheets an. Damit eine externe CSS-Datei in dieser Liste erscheint, müssen Sie ihr mit dem title-Attribut einen Namen geben:
PC Magazin 10/2004 : www.pc-magazin.de <link rel="stylesheet" href="version1.css" type="text/css" title="Version 1"> <link rel="stylesheet" href="version2.css" type="text/css" title="Version 2">
Im Untermenü erscheinen diese beiden Stylesheets als Version 1 und Version 2. Mozilla und Opera verwenden standardmäßig das erste Stylesheet. Der Internet Explorer kann keine Stylesheets wählen.
-
Stylesheet für den Drucker
Stylesheet für den Drucker
Bildschirm- und Druckausgabe sind verschiedene Welten. Darunter leiden Besitzer von Schwarzweiß-Laserdruckern, die farbige Texte oft nur als bleiche Graustufen auf dem Papier sehen. Betreiber farbenfroher Websites erweisen ihren Besuchern deshalb einen großen Gefallen, wenn sie für den Druck ein spezielles Layout anbieten. Mit CSS geschieht dies automatisch. Das Media-Attribut unterscheidet zwischen Bildschirmausgabe (Screen) und Druck (print) sowie einer Ausgabe für Braille-Drucker (embossed):
<link rel="stylesheet"
media="screen"
href="bildschirm.css">
<link rel="stylesheet"
media="print, embossed"
href="druck.css">
Sie benötigen dann auch zwei Stylesheets, von denen das mit dem Namen druck.css speziell auf die Druckausgabe abgestimmt ist.
-
Fußzeile platzieren
Fußzeile platzieren
Mit CSS legen Sie eine Fußzeile an, die am unteren Fensterrand klebt und nicht am Textende.
Mit einem Tabellenlayout ist es kein größeres Problem, eine Fußzeile einzurichten, die am unteren Fensterrand des Browsers klebt, auch wenn der Seiteninhalt das Fenster nicht ganz füllt. Beim Layout mit CSS-Containern ist die Sache nicht ganz so einfach. Legen Sie zunächst drei verschachtelte Div-Bereiche an:
<div id="container">
<div id="inhalt">Inhalt..</div>
<div id="fusszeile">Fuss...</div>
</div>
Die Position der Bereiche legen Sie über CSSRegeln fest. Das große Problem dabei ist, dass ausgerechnet der Internet Explorer die Eigenschaf t position: fixed nicht unterstützt. Deshalb wird die Sache etwas komplizierter:
<style type="text/css">
html, body {height: 100%;margin: 0px;}
#container { position: relative;
min-height: 100%;height: 100%;
voice-family: ,,\"}\",,;
voice-family: inherit;
height: auto; }
html>body #container { height: auto; }
#fusszeile { position: absolute;
background: silver;width: 100%;
bottom: 0px;}
</style>
Im Kern definieren Sie zunächst für die gesamte Webseite (html, body) eine Höhe von 100 Prozent und schalten die Außenränder ab. Das ist für den Internet Explorer erforderlich. Danach legen Sie die minimale Höhe des Containers, also des äußeren Bereichs, auf 100 Prozent (min-height: 100%) fest. Das erkennen die meisten Browser, nur nicht der IE. Der Bereich der Fußzeile klebt mit position: absolute am unteren Rand (bottom: 0px). Was aber soll die unsinnige Angabe zur Sprachausgabe (voice-family) in der Container-Regel? Es handelt sich dabei um den so genannten Box Model Hack, der die nachfolgende CSS-Eigenschaft height: auto nur für den Internet Explorer 5.x sichtbar macht. Ohne diese Angaben und die nachfolgende Regel würde die Fußzeile nicht mit dem IE 5.x zusammen arbeiten. Falls ein Browser mit den Positionsangaben nicht zurechtkommt, klebt die Fußzeile am Ende des Inhaltbereichs nicht schön, aber lesbar.
-
Regeln nur für IE
Regeln nur für IE
Mit dem so genannten Star Hack legen Sie CSSRegeln nur für den Internet Explorer an. Damit verpacken Sie CSS-Konstrukte speziell für den IE.
Inter net Explorer und Mozilla/Netscape trennen bei der Interpretation von CSS-Eigenschaften oft Welten. Was im einen Browser funktioniert, veranlasst den anderen zu seltsamen Reaktionen. Eine Lösung zu suchen, die in beiden Browsern funktioniert, ist umständlich und in vielen Fällen schlichtweg oft nicht machbar. Statt dessen definieren Sie getrennte CSS-Regeln für die verschiedenen Browser. Der Weg führt über den Universalselektor Stern (*). Daher trägt dieser Trick auch den Namen Star Hack. Die nachfolgende Regel erkennt nur der Internet Explorer:
* html body div#ie { background: blue; color: white; }
Nach CSS-Standard ist dieser Selektor ungültig, der Internet Explorer akzeptiert diese falsche Schreibweise trotzdem. Dabei spielt es keine Rolle, ob der IE im Standards-Compliant-Mode oder im Quirks-Mode arbeitet. Die Regel betrifft den Bereich namens ie:
<div id="ie"> NUR Internet Explorer </div>
Den Text geben zwar alle Browser aus, die Formatier ung mit blauem Hintergrund und weißer Schriftfarbe erscheint aber nur im Internet Explorer.
-
Zellenhintergrund zentrieren
Zellenhintergrund zentrieren
Draußen vor der Tür: Nur der Internet Explorer akzeptiert die CSSRegel (oben), Mozilla übergeht sie. Jede Zelle in einer Tabelle kann mit CSS ein Hintergrundbild haben. So erscheint das Bild, etwa ein Logo, zentriert:
<td style="background:url
(bild.jpg) no-repeat center
center #fff;">
-
Zoomfaktor einstellen
Zoomfaktor einstellen
Der Internet Explorer ab 5.5 kann fast alle Teile einer Webseite wie Bereiche, Bilder oder auch Formularelemente nach Belieben vergrößern oder verkleinern. Dazu fügen Sie einfach die CSS-Eigenschaft zoom ein:
<input type="text" style="zoom: 200%;">
Das vergrößert ein Texteingabefeld samt Inhalt auf 200 Prozent. Statt einer Prozentangabe sind Fließkommazahlen wie 1.5 für 150 Prozent erlaubt. Der Zoomfaktor bezieht sich dabei immer auf die Standardgröße des Elements.
-
Wort- und Zeichenabstand
Wort- und Zeichenabstand
Mit CSS lassen sich interessante Buchstaben-Spielereien realisieren. Variieren Sie den Wort- und Zeichenabstand, um bestimmte Textstellen hervorzuheben. Fügen Sie folgendes Stylesheet in Ihr HTML-Dokument ein:
<style> <!-- .hervorheben { word-spacing:20; letterspacing:10; } --> </style>
Während word-spacing den Abstand zwischen einzelnen Wörtern definiert, legt letterspacing den Abstand zwischen den einzelnen Zeichen fest. Weisen Sie diese Formatierung einer Textstelle zu:
<p class="hervorheben"> Viel Spaß beim Schmökern! </p>
-
Visueller Link zur Hilfe
Visueller Link zur Hilfe
Auf vielen Webseiten findet man Hyperlinks zu Seiten, die weitere Informationen und Hilfe bieten. Diese unterstützende Funktion können Sie auch visualisieren: Hier genügt ein kleiner CSS-Eintrag und der Cursor verwandelt sich in einen Pfeil mit Fragezeichen, wenn er über dem Hyperlink steht:
<style type="text/css"> <!-- a{ cursor: help; } --> </style>
-
Layout für Spalten-Design I
Layout für Spalten-Design I
Seiten als klassische Dreispalter zu gestalten wird mit CSS fast zum Kinderspiel.
Design mit Tabellen ist nach wie vor populär. Aufgrund fehlerhafter CSS-Render-Engines der Browser war das lange Zeit die einzig sichere Methode, um Websites allen Besuchern fehlerfrei zu präsentieren. Inzwischen hat sich jedoch einiges getan, und mit IE 6 und dem Firefox sind nun Browser auf dem Markt, die CSS weitgehend richtig interpretieren. Mutige Webdesigner können es also wagen, das klassische dreispaltige Seitenlayout je eine Spalte fester Breite links und rechts und dazwischen eine Spalte, die sich der Fensterbreite anpasst in einem Stylesheet umzusetzen. Zunächst definieren Sie den Seitenhintergrund, dann spannen Sie eine Box wie für einen Banner und die Navigation über die Seite:
body { margin:10px 10px 0px 10px;...
Nun definieren Sie die linke Spalte mit einer festen Breite von 150 Punkten und einem Abstand von 100px zum oberen Bildrand:
#links { position: absolute;.... background:#ffffff; border:1px solid #000000; }
Das gleiche machen Sie für die rechte Spalte vom rechten Bildschirmrand aus:
#rechts { position: absolute;....
Dazwischen findet die veränderliche Spalte ihren Platz. Die Abstände zum rechten und linken Rand legen Sie per margin fest. Und auch nach oben kann man nicht mit absoluten Werten arbeiten. Der Margin-Wert bezieht sich hier aber auf den Abstand zur Banner-Box, nicht zum oberen Bildrand:
#mitte { margin-left: 170px;....
Beachten Sie bei dieser Layout-Methode, dass die verwendeten Elemente nicht über die Dimensionen der Bereiche hinausgehen. Ein ungewollter Umbruch in der Bannerbox oder ein zu breites Element in der mittleren Spalte zerstört das Layout, was bei Tabellen ähnlich ist.
-
Layout für Spalten-Design II
Layout für Spalten-Design II
Mit kleinen Änderungen gestalten Sie ein variables Drei-Spalten-Layout.
Die Flexibilität von CSS lässt sich leicht nutzen, um weitere Layoutvarianten zu erzeugen. Neben der flexiblen mittleren Spalte können Sie auch die Kombinationen Links/Mitte beziehungsweise Mitte/Rechts fest und die jeweils verbleibende Spalte variabel gestalten. Die zweite Variante mit variabler linker Spalte rendert jedoch nur der Firefox fehlerfrei. Die Überlegenheit der Mozilla-Engine beim Rendern von CSS besteht also nach wie vor. Die in beiden Browsern unproblematische Variante mit einer variablen rechten Spalte erhalten Sie, wenn Sie die mittlere Spalte wie die linke im vorhergehenden Beispiel definieren und den Wert für left auf 170px setzen. Die rechte Spalte benötigt folgende Werte:
#rechts { margin-left: 330px;
Wollen Sie die linke Spalte variabel und die übrigen mit fester Breite versehen, definieren Sie die rechte Spalte wie im ersten Beispiel. Die mittlere orientiert sich am rechten Bildrand und ist eine Kopie der rechten mit der Änderung von right auf 170px. Die linke Spalte verlangt einen absoluten Wert für den Abstand vom oberen Bildrand, den Abstand vom rechten Bildrand halten Sie per margin flexibel. Damit kommt der Firefox klar, der Internet Explorer ignoriert die Margin-Anweisung und nutzt für die linke Spalte den kompletten Bildschirm.
-
Windows-Schriften einsetzen
Windows-Schriften einsetzen
Über CSS-Werte verwendet der Browser die Schriften, die der Surfer als Standard einstellt.
Über die Eigenschaft font stellen Sie in CSS die Schrif tart für Text ein. Dabei legt CSS vordefinierte Werte fest, die Systemschriftarten entsprechen. Unter Windows stellen Sie diese Schrif tarten über die Desktop-Eigenschaften ein. So passen Sie eine Webseite der Umgebung des Surfers an. Das funktioniert auch bei Linux-Desktops oder Macintosh.
-
Stylesheets auswählen
Stylesheets auswählen
Weisen Sie einer Webseite mehrere Stylesheets zu, unter denen der Anwender dann im Browsermenü auswählen kann.
Nicht alle Surfer können sich für roten Text auf schwarzem Hintergrund begeistern. Wenn Sie solche Einstellungen in externe CSS-Dateien auslager n, können Anwender von Mozilla, Firefox, Netscape sowie Opera 7 zwischen Alter nativen wählen. Dazu legen Sie mehrere Dateien mit den unterschiedlichen CSS-Angaben an. Diese binden Sie dann ganz normal in die HTML-Datei ein:
<link rel="stylesheet" href="version1.css" type="text/css" title="Darstellung 1: Schwarzweiß">
Entscheidend ist das Attribut title. Den Text verwendet der Browser später als Menüpunkt. Sind mehrere link-Tags mit diesem Attribut vorhanden, so benutzt der Browser standardmäßig die CSS-Datei aus dem ersten Tag. Die title-Texte aller link-Tags erscheinen im Menü Ansicht/Webseiten-Stil (Mozilla/Firefox) beziehungsweise Ansicht/Seitendarstellung (Opera 7). Aber was passiert bei Browsern wie dem Internet Explorer, die eine Stylesheet-Auswahl nicht unterstützen? Diese binden in der Reihenfolge der link-Tags die externen Stylesheets ein. Dabei werden dann alle Angaben aus den Stylesheets kombiniert.
-
Mehrere Klassen anwenden
Mehrere Klassen anwenden
Über einen Klassenselektor weisen Sie einem Element in HTML mehrere CSS-Klassen zu.
Um CSS-Eigenschaften einem bestimmten Bereich in einer Webseite zuzuordnen, ist der Klassenselektor erste Wahl. Eine CSS-Regel gilt dann nur bei den Tags, die mit dem Attribut class="name" ausgestattet sind. Den Namen der Klasse legen Sie selbst fest. Die CSS-Regel müsste im Beispiel so aussehen:
.name {color: green;}
Beachten Sie den Punkt vor dem Namen. Oft wäre es nützlich, einem Tag nicht nur eine CSS-Regel, sondern mehrere zuzuweisen. Dann können Sie mehrfach benötigte CSS-Eigenschaf ten zusammenfassen und erhalten kürzere und übersichtlichere Stylesheets. Zur Kombination geben Sie einfach mehrere Klassennamen durch ein Leerzeichen im Attribut an:
<p class="absatz vorspann">
Auf diesen Absatz wendet der Browser die CSS-Regeln .absatz und .vorspann an. Das funktioniert mit allen modernen Browsern, außen vor bleiben lediglich Internet Explorer 5.0 und Netscape 4. Diese ignorieren dann einfach das komplette class-Attribut, wenden also gar keine CSS-Regel an. Der Marktanteil dieser Browser liegt mittlerweile aber im Promillebereich. Beachten Sie, dass die Browser bei der Auswertung der CSS-Regeln das class-Attribut von links nach rechts auswerten. Beispielsweise legen Sie in der ersten CSS-Regel .absatz die Schrif tgröße auf 1.1em fest, in der Regel liegt .vorspann aber auf 1.5em. Im Beispiel class="absatz vorspann" ist die Schrift dann 1.5em groß. Mit class="vorspann absatz" wäre die Schriftgröße dagegen 1.1em. Diese Kaskadierung funktioniert genau so, als würden Sie mehrere externe Stylesheets einbinden. Bei umfangreichen CSS-Regeln wird die Kaskadierung schnell unübersichtlich. Sie sollten also die Aufteilung der einzelnen CSSEigenschaften vorher sorgsam planen.
-
Vererbung beachten
Vererbung beachten
Achten Sie beim Einsatz von CSS auf die Vererbung an untergeordnete Elemente.
Eine oft nicht beachtete CSS-Eigenschaft folgt in einer Webseite einer Hierarchie. Die Schriftart sowie rechter und linker Rand im <body>Tag gelten für die ganze Web-Seite:
<body style="font:20pt Arial, sansserif; margin-left: 4em; margin-right: 4em;">
So können Sie bei fast allen Tags mit dem style-Attribut eigene CSS-Angaben festlegen. Diese Angaben gelten dann nur für den jeweiligen Bereich. So legen Sie für einen Abschnitt mit <p>, eine Überschrift mit <h2> oder eine Tabelle zum Beispiel eine andere Schrift fest:
<p style="font: 10pt;"> Kleinere Schrift </p>
Diese Einstellung gilt nur für diesen Bereich, danach greifen wieder die Angaben aus dem <body>-Tag. Externe CSS-Dateien, die Sie per <link>-Tag einbinden, stehen in der Hierarchie an oberster Stelle.
-
Seitenrand abstellen
Seitenrand abstellen
Mit CSS lassen Sie den schmalen Abstand zwischen Webseite und Fensterrand verschwinden.
Je nach Layout kann der schmale Abstand zwischen Webseite und Fensterrand des Browsers sehr störend sein, zumal die verschiedenen Browser unterschiedlich breite Ränder verwenden. In HTML stellen Sie die Ränder so ab:
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
Die ersten beiden Attribute stellen beim Internet Explorer den linken und oberen Rand auf eine Breite von 0 Pixel ein. Neuere Browser wie Firefox oder Opera reagieren ebenfalls darauf. Ältere Browser wie Netscape 4.x akzeptieren die zwei anderen Attribute, sie erzielen denselben Effekt. Leider entsprechen alle diese Attribute nicht dem HTML-Standard, deshalb ist eine Lösung mit CSS besser:
<style type="text/css"> body { padding : 0px; margin : 0px; } </style>
Achten Sie darauf, dass dann auch normaler Text direkt am Seitenrand klebt, Sie müssen ihn dann zum Beispiel als Absatz (<p>...</p>) einfassen, damit Sie den Abstand separat regeln können.
-
Ausdruck formatieren
Ausdruck formatieren
Ein paar CSS-Angaben optimieren Webseiten für den Ausdruck: Explizit markierte Elemente sind auf dem Papier dann nicht sichtbar, etwa die Navigationsleiste oder ein Bild. Dazu definieren Sie zunächst ein Stylesheet:
<style media="print" type="text/css"> .nichtdrucken {display:none;} </style>
Jedes Element auf der Webseite, das Sie mit class="nichtdrucken" markieren, verschwindet im Ausdruck und sogar in der Druckvorschau.
-
Kindselektor-Hack
Kindselektor-Hack
Mit einem CSS-Hack verhindern Sie, dass der IE bei position: fixed das CSS-Layout zerstört.
Sie wollen mit position: fixed einen Bereich an einer bestimmten Position festnageln, auch wenn der Anwender die Webseite mit den Rollbalken verschiebt. Das ist zum Beispiel für eine Navigationsleiste ideal, da sie damit immer sichtbar bleibt. Leider ignoriert der Internet Explorer in allen Versionen den Wert fixed und bringt das ganze Layout durcheinander. Der zweite Bereich liegt nicht neben dem ersten, sondern beginnt erst darunter. Mit Opera und Mozilla/Netscape funktioniert dagegen alles einwandfrei. Die Lösung: Der Internet Explorer kennt zwar fixed nicht, wohl aber den Wert absolute. Damit platzieren Sie den Navigationsbereich an der gewünschten Stelle. Beim Scrollen verschwindet die Navigation zwar, aber das Layout bleibt erhalten. Zunächst definieren Sie die CSS-Regel mit position: absolute, die alle Browser (außer Netscape 4) verstehen. Dann fügen Sie eine weitere Regel mit dem Kindselektor an, die diesen Bereich auf position: fixed umstellt. Weil der IE den Kindselektor nicht kennt, ignoriert er die Änderung:
<style type="text/css"> .navi{position: absolute; left: 10px;background: lightblue; border: 1px dotted black; width: 140px;padding: 10px;} body>.navi{position: fixed;} .text{background: #FFFFE1; margin-left: 150px;border: 1px dotted black;padding: 10px;} </style>
Der Selektor body>.navi entspricht dem CSSStandard und verursacht keine Probleme.
-
Dynamische Bildgrößen
Dynamische Bildgrößen
Mit CSS-Werten zur Bildgröße passen Sie die Ausmaße von Bildern an die aktuelle Schriftgröße im Browser an.
Die Größe von Bildern in Webseiten ist normaler weise fix vorgegeben. Ohne weitere Angaben übernimmt der Browser einfach die Originalgröße in Pixeln aus der Bilddatei. Mit den Attributen width und height im <img>-Tag geben Sie abweichend davon Bildgrößen in Pixeln an. Prozentwerte sind zwar auch erlaubt, doch ist das Ergebnis relativ zur Größe des direkten Elternelements, nicht zur Originalgröße. Daher sind Ergebnisse mit diesen Angaben ziemlich unvorhersehbar.
<img src="tor.jpg" width="50%" height="50%">
Die 50 Prozent im Beispiel beziehen sich auf die gesamte Webseite. Dadurch wird sogar das Seitenverhältnis des Bildes verzerrt. Einen Ausweg bietet CSS an, hier sind Werte auch relativ zu anderen Eckdaten einer Webseite erlaubt. So verwendet Firefox standardmäßig eine kleinere Grundschrift als der Internet Explorer. Bilder im Fließtext sehen entweder klobig oder winzig aus. Die Einheit em entspricht der Höhe beziehungsweise Breite des Buchstabens ,,m" der Standardschrift. Weil die Größenangaben für jedes Bild meist individuell sind, ist es sinnvoll, diese direkt in das Bild-Tag einzufügen:
<img src="tor.jpg" style="height: 10.5em; width: 19.3em;">
Dabei gilt es natürlich darauf zu achten, das Seitenverhältnis des Bildes nicht zu verändern. Seine Stärken spielt das Verfahren vor allem bei Bildern aus, die in den Fließtext eingebettet sind, zum Beispiel kleine Logos oder Illustrationen. Der Nachteil ist, dass die Skalierung dur ch den Browser oft verwaschene Pixel oder Treppeneffekte an glatten Kanten erzeugt. Hier müssen Sie abwägen.
-
Keine Zahlen in der Klasse
Keine Zahlen in der Klasse
Klassennamen mit einer Zahl am Anfang führen zu schwer auffindbaren Fehlern.
Für die Formatierung mit CSS-Regeln kommt meistens der Klassenselektor zum Einsatz. Die entsprechende Regel wirkt dann nur bei den HTML-Tags, die im Attribut class=" " den entsprechenden Wert aufweisen. Ein kleines Beispiel mit einem Fehler:
<html><head><style type="text/css"> p.0absatz { color: blue; border-left: 2px dashed blue; padding-left: 5px;} </style></head>
Die zugehörige Stelle im HTML-Code sieht dann etwa so aus:
<p class="0absatz"> Ein hervorgehobener ... </p>
Im Internet Explorer und bei Opera 7 funktioniert das. Nur Mozilla Firefox ignoriert die Formatierung des Absatzes komplett, was wie ein typischer Browserfehler aussieht. Doch es handelt sich um fehlerhaften HTML-Code. Laut Standard darf eine Klasse nicht aus einer Ziffer bestehen oder damit beginnen. Den Klassenselektor p.absatz (verständlicher p.wichtig), verstehen alle Browser. Ergänzen Sie das Beispiel um die Doctype-Deklaration, so ignorieren IE 6 und Opera 7 den Klassenselektor, weil sie in den Standardmodus schalten.
-
Punkt statt Komma
Punkt statt Komma
In CSS-Deklarationen sind als Wert neben ganzen Zahlen auch Gleitkommazahlen erlaubt. Mit line-height: 1.5 em legen Sie etwa eine Zeilenhöhe fest, die das 1,5-fache des Buchstabens ,m" der Standardschrift beträgt. Beachten Sie, dass das Gleitkomma der englischen Schreibweise entsprechend ein Punkt (.) ist. Mit einem Komma ignorieren neuere Browser die komplette Deklaration.
-
Keine Scrollbalken
Keine Scrollbalken
Sie wollen die Rollbalken für die komplette Webseite abstellen, so wie das bei Frames möglich ist. Mit HTML lässt sich da nichts machen, eine einzige CSS-Eigenschaft reicht aber aus: Lästiger Abstand: Leerzeichen und Umbrüche an der falschen Stelle erzeugen Spalten im Layout.
<style type="text/css"> html, body {overflow: hidden} </style>
Dadurch verschwinden die Balken, auch wenn das Browserfenster zu klein zur Anzeige ist. Der Haken: Kann ein Besucher das Browserfenster nicht größer machen, so wird er nie die ganze Webseite sehen.
-
Zeile einrücken und große Initialen
Zeile einrücken und große Initialen
Schöne Webseiten rücken die erste Zeile eines Absatzes ein und heben die Initiale hervor.
Soll jeder Absatz eingerückt werden, definieren Sie ein Stylesheet für das Tag <p>. Per Parameter text-indent geben Sie den Einzug an. Den numerischen Wert definieren Sie in Pixel (px), Punkt (pt), Millimeter (mm) oder Zentimeter (cm). Pixelwerte sind vom Ausgabegerät abhängig. Relative Angaben erfolgen in %, em oder ex. Um den ersten Buchstaben eines Absatzes hervorzuheben, definieren Sie für eine CSS-Klasse die gewünschten Formatierungen. Beispielsweise wird hier sehr oft die Schrif t größer (font-size: 220%;), fetter (fontweight: bold;) und bunter (color : #FF0000;) als der übrige Text dargestellt.
<style type="text/css"> <! p {text-indent: 33px; font-family: Arial, Helvetica, sansserif; font-size: 12px; } .initial { font-size: 220%; font-weight: bold; color: #FF0000; } > </style>
Und so binden Sie die CSS-Anweisung im <body>-Tag ein:
<p> <span class="initial">s</span>it amet....</p>
-
Block zentrieren
Block zentrieren
Ein Blockelement zentrieren Sie mit zwei CSS-Eigenschaften auf der Webseite.
Ein Webseitenlayout mit fester Breite, etwa 600 Pixel, muss nicht am linken Browserrand kleben. Mit zwei CSS-Eigenschaften platzieren Sie einen Bereich immer in der Seitenmitte mit gleichen Abständen nach links und rechts:
.inhalt { width: 600px; margin-left: auto; margin-right: auto; }
Entscheidend ist der Wert auto für die margin-Eigenschaf ten. Im HTML-Bereich legen Sie einen Bereich an, der sämtliche Inhalte der Webseite aufnimmt, die zentriert werden sollen:
<div class="inhalt"> ... Inhalt ... </div>
Beachten Sie für einen Test, dass zumindest der IE 6 sehr pingelig ist. Ohne explizite Breitenangaben für den Bereich zentriert er nichts. Außerdem müssen Sie über eine vollständige Doctype-Deklaration in der ersten Zeile der HTML-Datei dafür sorgen, dass der IE im standardkonformen Modus arbeitet, zum Beispiel:
<!DOCTYPE HTML PUBLIC ,,-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
Andere Browser wie Firefox sind toleranter.
-
Hover-Effekt und IE
Hover-Effekt und IE
Der Internet Explorer unterstützt die Pseudoklasse :hover nur bei Links.
Über CSS und die Pseudoklasse :hover lassen sich einfach Mouseover-Effekte ganz ohne JavaScript erzielen. Dabei ändert sich zum Beispiel die Farbe oder eine Grafik beim Überfahren mit der Maus. Das Beispiel färbt etwa in einer Tabelle jede Zeile beim Überfahren mit der Maus anders ein. Das erleichtert gerade bei breiten Tabellenspalten die Übersicht:
.markieren { background-color: silver; } .markieren:hover { background-color: gray; }
Die Tabellenzeilen im HTML-Code müssen nur auf die Klasse markieren Bezug nehmen:
<tr class="markieren"> <td>Spalte 1</td> <td>Spalte 2</td> </tr>
Das Verfahren entspricht zwar den W3C-Standards und funktioniert mit Firefox, Opera und viele anderen Browsern, hat aber einen Haken: Der Internet Explorer verweigert sich. Er akzeptiert entgegen den W3C-Standards :hover ausschließlich bei Links (Tag <a>). Da es wiederum gegen die Standards wäre, eine ganze Tabellenzeile als Link zu markieren, weil keine Blockelemente in Links erlaubt sind, bleibt der IE außen vor. Die einzige Alternative ist, JavaScript und zwei Event-Handler einzusetzen. Die Definition einer Tabellenzeile sieht so aus:
<tr onMouseOver= "style.backgroundColor='gray'" onMouseOut= "style.backgroundColor='silver'">
Zusätzlich müssen Sie noch per Stylesheet die Hintergrundfarbe der Tabellenzeilen wie bei der CSS-Lösung entsprechend setzen. Optisch ergibt sich kein Unterschied zur CSS-Lösung, alles funktioniert beim Überfahren mit der Maus. Sie können sogar beide Lösungen sinnvoll kombinieren, ohne dass Schwierigkeiten auftreten. Der Haken: Viele Nutzer, gerade des Internet Explorers, schalten aus Sicherheitsgründen JavaScript ab.
-
Externe Links markieren
Externe Links markieren
Mit einem Selektor aus dem künftigen Standard CSS3 markieren Sie bei Mozilla Firefox externe Links ganz automatisch.
Ein Projekt mit vielen internen und externen Links soll übersichtlicher werden: Die Surfer sollen sofort erkennen können, ob ein Link zu einer externen Adresse führt oder innerhalb der Site verzweigt. Eine Änderung aller Links von Hand ist mühsam, selbst wenn ein Editor, wie Dreamweaver, projektweit suchen und ersetzen kann. Eine einfache Lösung bietet CSS 3 in Verbindung mit Mozilla Firefox an. Das W3-Consortium arbeitet schon geraume Zeit an CSS 3, fertig ist der Standard aber noch nicht. Die Erweiterung der CSS-Selektoren ist seit 2001 als Entwurf verfügbar, die Mozilla-Entwickler haben bereits etliche Details daraus übernommen. Den Attributselektor [] gibt es bereits in CSS 2, CSS 3 ist aber als Selektor für Teilzeichenketten vorbehalten. Der Selektor
a[href^="http:"]
selektiert alle Links, deren Zieladresse (href) mit ?http:? beginnt, also alle externen Links. Diese Zeile färbt alle externen Links rot ein:
a[href^="http:"] { color: red; }
Mit mehr Nutzen markieren Sie die Links mit einem besonderen Symbol, dann bleiben nämlich die Standardfarben für Links erhalten. Dazu fügen Sie über die CSS-Regel eine Hintergrundgrafik für den Link ein und verschieben den Text ein wenig nach rechts.
a[href^="http:"] { background: url(extern.gif) left center no-repeat; padding-left: 15px; }
Der Link erhält damit ein Hintergrundbild extern.gif, das vor dem Text steht und nicht wiederholt wird. Damit der Text das Bild nicht überdeckt, baut padding-left einen Abstand von 15 Pixel zum linken Rand ein. Um ein komplettes Projekt mit beliebig vielen Links umzustellen, genügt es, die CSS-Regel einzusetzen. Haben Sie ein zentrales externes Stylesheet, reicht schon eine einzige Änderung. Nach dieser Methode können Sie dann auch leicht andere Protokolle wie FTP-Downloads besonders markieren. Browser ohne diese CSS 3-Unterstützung zeigen weiterhin ganz normale Links an.
-
Farben in CSS
Farben in CSS
Bei CSS können Sie Farben wie in HTML mit den RGB-Werten in hexadezimaler Schreibweise wie #FF8040 für Orange verwenden. Die meisten Menschen können sich aber dezimale Zahlen besser vorstellen. Dafür verwenden Sie die Schreibweise rgb(127,0,255). Sie tragen den Rot-, Grün- und Blauanteil als Wert zwischen 0 und 255 ein. Alternativ dürfen Sie auch Prozentwerte zwischen 0 und 100 eintragen. Als komplette CSS-Deklaration sieht das dann zum Beispiel so aus:
color: rgb(20%50%,7%)
-
Tabellen formatieren
Tabellen formatieren
HTML 4.0 sieht für Tabellen eine Aufteilung in Kopf (<theader>), Körper (<tbody>) und Fuß (<tfooter>) vor. Aktuelle Browser verarbeiten die Angaben problemlos. In einer Tabelle dürfen Sie auch mehrere tbody-Elemente einsetzen, die jeweils einen Block von Tabellenzeilen zusammenfassen. Damit können Sie leicht diese Blöcke mit CSS-Eigenschaften einheitlich formatieren, etwa für Zwischenüberschriften.
-
Mäander als Kopfschmuck
Mäander als Kopfschmuck
Mit einer CSS-ID lässt sich leicht ein fortlaufendes Ornament erzeugen.
Seit der Antike werden die an Flussschlingen erinnernde Mäander gerne zur Dekoration verwendet. Für ein Mäanderband auf einer Webseite reicht ein rechteckiges Element als Ausgangsbild. Dann definieren Sie die CSS-ID #bildstr eifen für eine <div>-Ebene, die der Ebene das Ausgangsbild als Hintergrund zuordnet. Zusätzlich geben Sie an, dass das Hintergrundbild so oft wiederholt wird, wie es die aktuelle Fenstergröße erlaubt. Der Zusatz repeat-x beschränkt die Wiederholung auf die horizontale Richtung. Die ID definieren Sie so:
#bildstreifen { margin-top: 1px; margin-bottom: 15px; height: 50px; background-image: url(maeander.jpg); background-repeat: repeat-x }
Diesen ID-Stil schreiben Sie mit der Zeile <div id="bildstreifen"> </div> in den Kopf der Seite.
-
Bilderalben
Bilderalben
Ebenen sind die Alternative zum häufig verwendeten Tabellenlayout.
Um Bilder mit Legenden auf einer Seite anzuordnen, konstruieren viele nicht ohne Mühe Tabellenlayouts. Es geht auch ohne, wenn Sie Ebenen mit CSS einsetzen. Dazu definiert das Beispiel drei CSS-Klassen:
.bildbox {float: left; text-align: center; background-color: #ffdab9 }
.bildbox img { margin: 8px; height: 240; padding: 3; width: 170
}
.bildbox h5 { width: 170px; margin: 1em; padding: 3px; border: ridge 1px teal }
Der kombinierte Selektor .bildbox img sorgt dafür, einzig den <img>-Tags, die sich in der mit der Klasse .bildbox ausgezeichneten <div>-Ebene befinden, dieselben Abmessungen und Randeinstellungen zuzuweisen. Bildunterschriften gestalten Sie ebenfalls mit dem kombinierten Selektor .bildbox h5. Einige Beispiele verwenden diese Styles:
<div class="bildbox"><a href="#b1"> <img src="pferd1.jpg" alt="April" /> </a><br> <h5>April</h5></div> <div class="bildbox"><a href="#b2"> <img src="pferd2.jpg" alt="Joy" /></a><br> <h5>Joy</h5></div> <div class="bildbox"><a href="#b3"> <img src="pferd3.jpg" alt="Sunny" /></a><br> <h5>Sunny</h5></div>
Anders als bei einem Seitendesign, das die Bilder in die Zellen einer Tabelle einfügt, reagiert diese Seite flexibel auf eine Änderung der Fensterbreite. Abhängig vom vorhandenen Platz zeigt der Browser die Fotos in einer oder in mehreren Zeilen an.
-
Tabellen- und Ebenendesign
Tabellen- und Ebenendesign
Die neue Version von Adobe GoLive CS2 kann einfach die Seiten, welche ein Tabellendesign aufgebaut hat, automatisch in ein Design auf der Basis von CSS-Ebenen übersetzen. Damit steht dem Webdesigner die ganze Bandbreite der Formatierungsvielfalt von CSS zur Verfügung. Das kann etwa beim Entwurf von ansprechenden Formularen sehr hilfreich sein. Für eine solche Transformation markieren Sie einfach eine komplette Tabelle in der LayoutAnsicht, um sodann den Kontextmenü-Befehl in CSS-basiertes Raster konvertieren zu verwenden. Notfalls ist sogar mit der Option in tabellenbasiertes Raster konvertieren der umgekehrte Weg gangbar.
-
Auch für XML-Daten
Auch für XML-Daten
Schlichte XML-Daten lassen sich mit CSS in Form bringen.
Wenn Sie in einer Webseite beispielsweise eine Teilnehmerliste anzeigen wollen, bietet es sich an, dafür ein XML-Dokument zu verwenden. Mit einem Link wie
<a href="Teilnehmer.xml"> Teilnehmerliste
</a>
lässt sich die Liste anzeigen. Damit nun keine formlose Liste erscheint, ordnen Sie dem XMLDokument nun eine CSS-Datei zu:
<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="liste.css"?> <teilnehmerliste> <teilnehmer> <name>David Kern</name> <m davidkern@allways.de</teilnehmer> ... </teilnehmerliste>
Das folgende CSS-Stylesheet legt die Formate für die einzelnen Elemente fest.
teilnehmerliste { font-face: Verdana, Arial; font-size: 12px; color: #000000 } teilnehmer { display: block; margin: 10px; padding-top: 3px; width: 180px; background-color: #c0c0c0; border: 1px solid #ff00ff } name { padding-left: 3px; font-weight: bold } mail { margin-top: 3px; padding: 3px; display: block
}
Elementattribute kann CSS nicht anzeigen, dafür müssten Sie XSL-Stylesheets einsetzen.
-
3D-Formularfelder
3D-Formularfelder
Formulare fragen häufig nach Benutzerdaten. Je besser Sie das Formular gestalten, umso eher bekommen Sie Antwort.
Es zählt der richtige Pepp: Sehr interessant wirken Formularfelder in einer interessanten 3D-Optik. Dabei werden die Ränder des input-Textfeldes mit CSS formatiert. Während die rechte und untere Seite farblich hervorgehoben werden, erscheint der linke und obere Teil des Feldes in Weiß und wird je nach Hintergrund nahezu unsichtbar. Das ist das ganze Geheimnis des dreidimensionalen Schatteneffektes. Und so sieht der Code aus:
<style type="text/css">
<!-
input {
border-top-width: 0px; border-top-color: #FFFFFF; border-top-style: solid; border-right-width: 1px; border-right-color: #000000; border-right-style: solid; border-left-width: 0px; border-left-color: #FFFFFF; border-left-style: solid; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #000000;
}
-->
</style>
CSS definiert das Aussehen aller vier Textfeld-Ränder. Sie können die Angaben Ihren Wünschen an- Texteingabefelder glänzen mit passen. Rahmenstärken von ei- unterschiedlichen Rändern und farbigem Hintergrund. nem oder zwei Pixeln wirken am elegantesten. Probieren Sie auch andere Farbtöne, die Sie als Hexadezimalcode oder mit den entsprechenden RGB-Werten angeben können. Zudem können Sie den Rahmen in einem anderen Stil präsentieren wie in solid: durchgezogen, double: doppelt durchgezogen, dotted: gepunktet, dashed: gestrichelt, sowie in verschiedenen 3D-Effekten wie groove:, ridge:, inset: oder outset:. Außerdem können Sie die CSS-Kurzschreibweise verwenden oder die CSS-Anweisung direkt in das HTML-Tag einfügen. Das Beispiel:
<input type="text" name="textfield"
style="border-top: 0px solid white;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left:0px solid white;">
Diese Schreibweise sollten Sie ohnehin vorziehen, wenn der Submit-Button nicht automatisch auch die 3D-Optik erhalten soll. Soll zudem der Text nicht direkt an den linken Rand des Eingabefeldes stoßen, geben Sie text-indent: 12px; ein.
-
Webseite für den Druck vorbereiten
Webseite für den Druck vorbereiten
Viele User drucken Webseiten aus, um den Text auf Papier zu lesen. Bieten Sie daher Text per Print mit CSS 2.0 an, um den Ausdruck zu optimieren.
Definieren Sie den Selektor @page,für den Sie unterschiedliche Attribute festlegen. Bestimmen Sie zunächst die Seitengröße mit size. Soll der User die Seite im Querformat ausdrucken, verwenden Sie den Wert landscape. Um einen Ausdruck im Hochformat DIN-A4 zu erhalten, hinterlegen Sie stattdessen die Werte für die Papierbreite und -höhe, nämlich 21.0cm und 29.7cm. Achten Sie auf die korrekte Reihenfolge: Zuerst die Breite und dann die Höhe! Zwischen den Ziffern und der Maßeinheit darf kein Leerzeichen stehen. Auch müssen Sie für die Dezimalstelle den Punkt verwenden. Die vier Seitenränder bestimmen Sie entweder einheitlich mit margin, oder Sie legen für jede Seite einen separaten Abstand mit margintop, margin-bottom, margin-left und margin-right fest. Soll vor jeder Haupt-Überschrift <h1> automatisch ein Seitenumbruch erfolgen, ergänzen Sie Ihr Stylesheet durch die CSS-Anweisung: pagebreak-before:always;. Leider interpretieren noch nicht alle Browser diese CSS-Anweisungen.
<!--
size: 21cm 29.7cm;
margin-top:2.5cm;
margin-bottom:2.5cm;
margin-left:3.5cm;
margin-right:2cm;
}
h1 {
page-break-before:always;}
-->
</style>
-
Tabellenzelle mit Scrollbalken
Tabellenzelle mit Scrollbalken
Ist der Inhalt einer Tabellenzelle zu umfangreich, wird normalerweise die Zellgröße automatisch angepasst, was das komplette Seitenlayout durcheinander bringen kann.
Um dies zu verhindern, können Sie Scrollbalken in einzelne Zellen einfügen, so dass der User trotz deren fixen Größe den kompletten Inhalt erfassen kann: overflow : auto. Damit die Scrollbalken direkt am Zellrand platziert sind, setzen Sie den Inhalt in das Tag <div> und legen hierfür eine Breite und Höhe von jeweils 100 Prozent fest:
<div style="width:100%; height:100%; overflow: auto;">.
-
Euro-Zeichen richtig kodieren
Euro-Zeichen richtig kodieren
Häufig wird das Euro-Zeichen im Browser nicht korrekt dargestellt und es erscheinen stattdessen seltsame Buchstabenkombinationen.
Grund hierfür ist die falsche HTML-Codierung dieses Symbols. Je nach Browser und Spracheinstellung kann es bei dem Code € zu diesen seltsamen Darstellungsformen kommen. Gehen Sie auf Nummer sicher, und verwenden Sie stattdessen €.
-
Box mit Schatten
Box mit Schatten
Ohne absolute Positionierung erzeugen Sie für beliebige Bereiche einen Schatteneffekt.
Durch den Verzicht auf absolute Positionierung kann der Bereich samt Schatten im normalen Textfluss mitschwimmen. Dazu legen Sie im HTML-Code direkt aufeinander folgend zwei Bereiche mit <div> an.
<div id=''schatten''></div>
<div id=''box''>
Box mit Schatten
</div>
Der erste Bereich soll den Schatten anzeigen und erhält daher eine dunkle Hintergrundfarbe, im Beispiel gray. Der zweite Bereich enthält Text, ein Menü oder einen anderen gewünschten Inhalt. Beide Bereiche sind über das id-Attribut individuell markiert und haben durch CSS-Eigenschaften identische Abmessungen.
#schatten{
background-color: gray;
width: 120px;
height: 220px;
margin-left: 10px;
}
#box{
position:relative;
top: -230px;
width: 120px;
height: 220px;
background-color: yellow;
border: 1px solid black; }
Damit der zweite Bereich über dem ersten liegt, setzen Sie mit position: relative die relative Positionierung von CSS ein. Die Bereiche sind im Beispiel 220 Pixel hoch, also muss der zweite Bereich 220 Pixel plus Versatz nach oben geschoben werden. Das erreichen Sie mit der CSS-Eigenschaft top:-230px. Der zweite Bereich beginnt damit zehn Pixel über dem Schatten. Bei anderen Bereichsgrößen müssen Sie den Wert natürlich entsprechend anpassen. Sie verschieben den Schatten nach rechts mit dem Befehl margin-left: 10px. Ein Problem dieser Technik sei nicht verschwiegen: Die Browser passen die Ausmaße eines Bereichs an den Inhalt an. Enthält der zweite Bereich zum Beispiel zu viel Text, so verlängert der Browser den Bereich. Der Schattenbereich behält aber seine Größe, so dass er unter Umständen ganz verdeckt wird.
-
Horizontal zentrieren
Horizontal zentrieren
Mit zwei CSS-Eigenschaften zentrieren Sie einen Bereich sicher auf der Webseite. Wenn Sie ein Layout mit einem im Browserfenster zentrierten CSSBereich haben wollen, führt der offizielle Weg über die Eigenschaft margin. Wenn Sie den Bereich mit <div id=''inhalt''> Text </div> definieren, legen Sie im Stylesheet den Rand (margin) fest: #inhalt {border:1px solid black;width: 400px;margin: auto;} . Der Wert auto bedeutet, dass der Browser den Abstand zwischen Bereich und Umgebung festlegen darf. Dabei versucht er, den Abstand auf beiden Seiten gleich zu halten der Bereich wird zentriert. Das entspricht dem CSS-Standard, der mit Firefox und Opera funktioniert, nur nicht mit dem Internet Explorer. Der IE 6.0 zeigt die Webseite nur korrekt, wenn Sie mit einer Doctype-Deklaration am Anfang der HTML-Datei den Standard-Modus aktivieren, etwa so:
<!DOCTYPE HTML PUBLIC
`'-//W3C//DTD HTML 4.01 Transitional//EN'' `'http://www.w3.org/TR/html4/loose.dtd''>
Ohne diese Zeile, klebt der Bereich am linken Fensterrand. Ältere IE-Versionen kennen dies nicht. Die Lösung: Legen Sie eine CSSRegel für das body-Tag an, das mit text-align: center den Inhalt der Webseite zentriert. Durch die Vererbung der Eigenschaften betrifft das dann auch den div-Bereich. Um das zu verhindern, legen Sie für diesen Bereich eine Ausrichtung am linken Rand fest (textalign: left). Dies Stylesheet (siehe Heft-CD) bringt für Browser, die den Standard einhalten, leider wiederum Schwierigkeiten. Denn diese Lösung mit text-align funktioniert in den Standard-konformen Browsern nicht. Hier müssten Sie die CSS-Regel nicht body, sondern html zuweisen. Besser ist es also, margin: auto und die body-Regel wie im Beispiel zu kombinieren.
-
Selektor-Übersetzung
Selektor-Übersetzung
Die Bedeutung eines komplexen CSS-Selektors mit mehreren Elementen zu entschlüsseln, ist nicht immer einfach.
Unter der Adresse http://gallery.theopalgroup.com/selectoracle tragen Sie bei Selectoracle eine CSS-Regel in ein Formular ein. Die Erklärung erfolgt als englischer beziehungsweise spanischer Klartext. Zu body > ol > li p kommentiert Selectoracle mit ,,Selects any p element that is a descendant of a li element that is a child of an ol element that is a child of a body element."
-
Mehrspaltensatz
Mehrspaltensatz
Mehrspaltiges Layout mit Textumbruch am Ende einer Spalte macht CSS 3 mit Leichtigkeit. Firefox 1.5 unterstützt die Technik bereits jetzt.
Längere Textzeilen sind nur schwer zu lesen, deshalb nutzen Zeitungen und Zeitschriften mehrere Textspalten. Auf Webseiten ist der Effekt nur sehr aufwändig zu erreichen, denn der Browser muss selbst für den Textumbruch von einer Spalte zur nächsten sorgen. Ändert sich die Schriftgröße oder die Größe des Browserfensters, muss der Browser den Umbruch anpassen. Das W3C hat für die Version 3 von CSS entsprechende Eigenschaften vorgesehen. Derzeit ist der Standard aber noch nicht fertig, sondern liegt nur als Arbeitspapier vor. Trotzdem kennt Mozilla Firefox 1.5 bereits einige dieser Eigenschaften, allerdings mit dem Vorspann -moz für browser-eigene Erweiterungen. Ein Beispiel für drei Spalten mit 10em Breite und 2em Abstand:
spalten {
border: 1px solid black;
-moz-column-count: 3; -moz-column-gap: 2em;
-moz-column-width: 10em;
text-align: justify; }
Die Regel lässt sich zum Beispiel auf einen Absatz oder besser einen div-Bereich anwenden. Über drei Eigenschaften legen Sie die Anzahl der Spalten (-moz-column-count) sowie deren Breite (-mozcolumn-width) und Abstand (-moz-column-gap) fest. In Verbindung mit Blocksatz (text-align: justify) kann das Ergebnis durchaus überzeugen: Je nach Fensterbreite passt Firefox 1.5 die Darstellung an. Wird das Fenster zu schmal, so verringert der Browser automatisch die Anzahl der Spalten. Der Spaltensatz ist ein interessanter Effekt, den andere Browser schlicht ignorieren. Wer die W3C-Standards nicht zu 100 Prozent erfüllen muss, kann FirefoxAnwendern demnächst mit Erscheinen der Final der Version 1.5 zusätzlichen Lesekomfort gönnen.
-
Scrolling deaktivieren
Scrolling deaktivieren
Scrollbalken im Browserfenster sind manchmal unerwünscht. Also schalten Sie diese einfach ab.
Mit CSS ist es einfach, Scrollbalken zu beseitigen. Für Frameseiten ist es ein alter Hut. Das Attribut scrolling=no deaktiviert die Scrollbalken in einem Frame und scrolling=auto aktiviert diese. Aber das funktioniert nicht für normale Seiten und ist lange nicht so flexibel wie sein CSS-Gegenstück. Doch mit dieser Zeile erreichen Sie dennoch das Ziel:
<body style=?overflow: hidden?>
-
Auswahlliste mit Bildern
Auswahlliste mit Bildern
Bei Firefox & Co. fügen Sie per CSS Bilder in die Auswahllisten innerhalb von Formularen ein.
Mit CSS lassen sich die Optionen in einer Auswahlliste um eine Grafik ergänzen. Das erleichtert zum Beispiel bei einer Länderliste die Übersicht beträchtlich und verschafft Ihrer Site einen individuellen Touch. An der Auswahlliste müssen Sie nichts verändern, im Beispiel sieht die Definition so aus:
<select size="1">
<option value="rot"> Rot</option>
<option value="gelb"> Gelb</option>
<option value="gruen"> Grün</option>
<option value="blau"> Blau</option>
</select>
Jede Option hat ein value-Attribut, was für die Auswertung eines Formulars unerlässlich ist. Ungewöhnlich sind nur die zwei Leerzeichen nach der schließenden Klammer von <option>. Anders als im normalen HTML-Code bleiben diese Leerzeichen erhalten. Sie sorgen für einen kleinen Abstand zum vorangestellten Bild. Die CSS-Regeln manipulieren einzelne Optionen, die Auswahl trifft der Attributselektor. Der Selektor
option[value=gruen]
erfasst nur die <option>-Elemente, die das Attribut value mit dem Wert gruen haben. Um das Bild einzufügen, nutzen Sie das CSSPseudoelement :before, welches Inhalte erzeugt. Am Beispiel eines grünen Rechtecks sieht das so aus:
option[value=gruen]:before {content: url("gruen.gif");}
Das Schlüsselwort content gibt an, was eingefügt werden soll, nämlich die Grafikdatei gruen.gif. Fügen Sie diese Zeile in ein Stylesheet am Seitenanfang ein, so gilt die Definition für alle Auswahllisten auf der Webseite. Nach dem gezeigten Muster legen Sie für jede Grafik, die Sie einfügen wollen, eine eigene CSS-Regel an. Das klappt nur mit Firefox & Co, andere Browser wie der Internet Explorer oder Opera ignorieren die Angaben und zeigen ganz normale Listen an. Da die CSS-Eigenschaften dem Standard entsprechen, spricht trotzdem nichts gegen einen Einsatz.
-
Inline-Frame simulieren
Inline-Frame simulieren
Die Nachteile von Inline-Frames vermeiden Sie mit dem Einsatz von CSS.
Sie wollen auf der Webseite einen Bereich definierter Größe haben, in dem ein längerer Text per Bildlaufleiste absatzweise sichtbar ist? Statt der umstrittenen IFrame-Technik von HTML nutzen Sie dafür einige Zeilen CSS. Zunächst aber definieren Sie die drei wie russische Püppchen ineinander verschachtelten Bereiche in HTML:
<div class="frame">
<div class="rahmen">
<div class="frameinhalt"> ... Text ...
</div> </div> </div>
Der äußere div-Bereich mit der Klasse frame nimmt die weiteren Bereiche auf. Damit ein sauberer Abstand zur umgebenden Webseite entsteht, ist darin ein Bereich für den Rahmen definiert. Ganz innen schließlich gibt es einen Bereich für den Inhalt des IFrames, der etwa den Text aufnimmt. Drei CSS-Regeln mit Klassenselektor füllen den IFrame mit Leben:
.frame {
width: 420px; height: 220px; background: #D0FFFF;
}
.rahmen {
padding: 10px;
}
.frameinhalt {
overflow: auto; width: 400px; height: 200px;
}
Der äußere Bereich legt die Breite (width) und Höhe (height) des Frames fest. Zudem definieren Sie hier eine Hintergrundfarbe (background). Die CSS-Regel für den zweiten Bereich hat wie erwähnt nur eine Aufgabe. Sie sorgt mit padding für einen Abstand zwischen äußerem und innerem Rahmen. Verzichten Sie auf diesen Zusatzbereich und tragen Sie padding gleich bei .frame ein, so ist das Ergebnis nicht überzeugend. Die Browser halten dann zwar links und rechts Abstand, beim Scrollen klebt der Text aber oben und unten direkt am Rand. Der .frameinhalt schließlich sorgt mit overflow: auto für die Bildlaufleiste. Die ist aber nur sichtbar, wenn der Text tatsächlich nicht Platz hat. Die Breite des inneren Bereichs ist leicht zu berechnen: der Wert des äußeren Bereichs (420 Pixel) minus zweimal den Abstand (2x10 Pixel) für links und rechts, macht 400 Pixel. Analog sieht es bei der Höhe aus.
