CSS & Javascript
Stilwechsel

DeveloperIT-ProjekteSoftware

Ein Spaltenlayout mit CSS muss kein starres Format sein. Ein Stylesheet lässt sich mit Javascript anpassen. Internet Professionell zeigt, wie Sie den Wechsel interaktiv gestalten.

Layout nach Wahl

CSS & Javascript

Der konsequente Einsatz von CSS erlaubt es, den Inhalt einer Website von der Struktur nahezu vollständig zu trennen. Indem Formatierung und Layout in eigenen CSS-Dateien festgelegt werden, ist es nicht nur möglich, für die verschiedenen Browser unterschiedliche CSS-Dateien zu laden, sondern die Dateien auch nach Belieben zu wechseln. Mit Hilfe von Cookies können Sie dem Anwender dann sogar anbieten, dass beim erneuten Besuch sein favorisiertes Layout erscheint.

In diesem Workshop erfahren Sie, wie sich Stylesheets mit Javascript wechseln lassen. Der Schwerpunkt soll aber auf der Erstellung des Layouts mittels CSS liegen. Internet Professionell zeigt Ihnen, wie Sie ein Layout mit Spalten alleine mit CSS realisieren. Mit den hier gegebenen Anregungen gelingt es Ihnen dann sicher schneller und besser, eigene Ideen und Vorstellungen in die Tat umzusetzen.

Die Berücksichtigung des Internet Explorers verursacht allerdings mitunter einen erheblichen Mehraufwand. Weil die einzelnen Versionen dieses Browsers CSS ziemlich verschieden interpretieren, gibt es sogar regelrechte CSS-Browserweichen. Die Beispiele auf der Heft-CD sind daher so gestaltet, dass sie sowohl von standardkonformen Browsern als auch vom Internet Explorer 6 fehlerfrei dargestellt werden.


Externe Stylesheets einbinden

CSS & Javascript

Um ein externes Stylesheet standardmäßig beim Aufruf des HTML-Dokuments zu laden, notieren Sie im Head das folgende Link-Element:

Dies ist die gängige Methode, um externe CSS-Dateien zu referenzieren. Sie können pro HTML-Datei viele dieser link-Tags notieren, mit denen andere logische Verknüpfungen zu weiteren Dateien herstellbar sind. Um diese brauchen Sie sich aber hier nicht zu kümmern.

Da das obige Stylesheet immer geladen wird, sollten sich darin nur wenige allgemeine Anweisungen befinden, die für jede Darstellung zutreffen, etwa dass von allen Elementen ein gewisser Abstand zu den Fensterrändern einzuhalten ist. Für die genaue Festlegung des Layouts legen Sie eine oder mehrere CSS-Dateien an, die Sie jeweils mit einem title-Attribut referenzieren:

Durch die Namen im title-Attribut können Sie die Dateien im Skript klar unterscheiden. Außerdem lässt sich damit auf die link-Tags in der beabsichtigten Weise zugreifen.


Einfach umschalten

CSS & Javascript

Die Funktion zum Umschalten auf ein anderes Stylesheet ist relativ einfach:


function useStyle(num) {
var linkname = "layout" + num;
var styleArray = document.getElementsByTagName("link");
for(var i = 0; i < styleArray.length; i++) {
if(styleArray[i].getAttribute("title") == linkname) {
styleArray[i].disabled = false;
}
else if(styleArray[i].getAttribute("title")) {
styleArray[i].disabled = true;
}
}
return false;
}

Die Funktion aktiviert jene CSS-Datei, deren Nummer ihr beim Aufruf übergeben wird. Gleichzeitig werden alle anderen deaktiviert. Um der Funktion nur die Nummer der jeweiligen Datei zu übergeben, lassen Sie sich den im title-Attribut vergebenen Namen von linkname zusammensetzen.

Die Methode getElementsByTagName() speichert die vorhandenen link-Tags in einem Array. Dieses wird dann mit einer for-Schleife durchgezählt und über die Eigenschaft disabled manipuliert. Um nicht unbeabsichtigterweise auch noch andere vorhandene link-Tags auszuschalten, beschränkt sich die Manipulation auf jene Tags, die ein title-Attribut aufweisen.

Weil die Funktion mit einer return-Anweisung aufgerufen wird, sollte sie am Ende auch einen return-Wert zurückgeben.


Layout mit CSS

CSS & Javascript

Externe CSS-Dateien machen es Ihnen leicht, das Erscheinungsbild Ihrer gesamten Website einheitlich zu gestalten. Denn in nur einer Datei können Sie die Formatierung für alle HTML-Dokumente festlegen.

Werden in dieser Datei Formate, Farben oder Positionen verändert, können Sie damit das Aussehen der kompletten Site modifizieren. Durch die Verwendung von CSS zur Formatierung leisten Sie zudem einen nicht geringen Beitrag zur Benutzerfreundlichkeit Ihrer Site.

Es werden hier nur einige Definitionen für das Menü der Beispielseiten erläutert und Hinweise zum Layout mit mehreren Spalten gegeben:


#menu {
text-align: right;
font-size: 0.8em;
float: right;
width: 16em;
border: 1px solid #C0C0C0;
background-color: #F7EAFF;
}

Es empfiehlt sich, die Elemente im HTML-Teil mit aussagekräftigen Individual- und Klassenattributen zu versehen, damit sie möglichst detailliert ansprechbar sind. Auch wenn Sie dann für ein benanntes Element keine besondere Formatierung benötigen, ist das nicht weiter schlimm.

Bei #menu handelt es sich um ein Individualformat für das div-Element mit der ID menu. Es enthält in der Hauptsache Links. Mit text-align können Sie die horizontale Ausrichtung von Blockelementen und Fließtext festlegen. Neben left, right und center steht Ihnen der Wert justify zur Verfügung, mit dem sich Text als Blocksatz ausrichten lässt. Auf das Zentrieren von Elementen wird später im Artikel eingegangen.


Relative Größenangaben

CSS & Javascript

Um die Seite skalierbar zu halten, sind relative Angaben zu bevorzugen. Die Einheit em ist eine relative Größenangabe, die sich auf die Schriftgröße des Elements bezieht. Im Regelfall entspricht 1em 100 Prozent. Wenn Sie die Schriftgröße allerdings selbst mit dieser Einheit bestimmen, bezieht sich die Einheit auf die Schriftgröße des Elternelements. Werden alle Schriftgrößen mit dieser Einheit bestimmt, bezieht sie sich auf die im Browser eingestellte Größe. Die Schlüsseleigenschaft zur seitlichen Ausrichtung heißt float. Ihr lassen sich nur die Werte left, right und none zuweisen. Es gibt also keine oben oder unten gefloateten Elemente. Ein rechts gefloatetes Element wird rechts angeordnet, wodurch es vorhandener Text links umfließt. Der Umfluss wird mit den Angaben clear: right oder clear: left für die jeweilige Seite oder mit clear: both für beide Seiten beendet.

Gefloatete Elemente befinden sich außerhalb des Textflusses und werden automatisch zu Block-Elementen. Das sind Elemente, die im Gegensatz zu inline-Elementen einen Zeilenumbruch erzeugen. Erscheint bei Ihren Tests das gefloatete Element unterhalb der vorgesehenen Position, hilft es mitunter schon weiter, seine Reihenfolge im HTML-Dokument zu ändern. Ansonsten sollten Sie wissen, dass gefloatete Elemente immer nach dem letzten vorausgehenden Blockelement angeordnet werden. Prüfen Sie deshalb zunächst, ob Sie nicht die Position oder die Abmessungen dieses Elements verändern müssen, damit das gefloatete Element seine eigentliche Position einnehmen kann.

Geben Sie keine Höhe an, dann richtet sich diese nach dem Inhalt. Einem gefloateten Element müssen Sie jedoch mindestens eine Breite zuweisen. Wenn der Platz nicht ausreicht, kann es daher vorkommen, dass es andere Elemente überlappt. Bei mehreren nebeneinander liegenden Elementen ist es deshalb sinnvoll, für mindestens eines davon keine Breite festzulegen, also die Darstellung der Breite dieses Elements dem Browser zu überlassen.

Damit es zu keiner Verzerrung der Abstände kommt, notieren Sie für dieses Element einen Außenabstand. Die Abstände werden dann durch dieses nicht gefloatete Element ausgeglichen, wodurch das gewünschte Layout erhalten bleibt. Denn Sie können ja nicht wissen, mit welcher Auflösung und Schriftgröße der Anwender die Seite betrachtet. Sie sollten deshalb daran denken, Ihre Seite auch mit unterschiedlicher Schriftgröße und mit verschieden großen Browserfenstern zu testen.


Erscheinungsbild von Links

CSS & Javascript

Die Formatierung lässt sich noch weiter verfeinern, indem Sie die Definitionen für Elemente verschachteln. Die folgende Angabe gilt nur für a-Elemente innerhalb des div-Tags mit der ID menu:


#menu a {
color: #5D5CA0;
display: list-item;
list-style-type: square;
margin: 0 2em 0 1.6em;
padding: 0.4em;
border: 1px solid #F8FDEB;
}

Die CSS-Eigenschaft display gestattet es, die Art der Darstellung anzugeben. Sie können beispielsweise festlegen, ob das Element als Blockelement, als Inline-Element oder überhaupt nicht dargestellt werden soll. Der Wert none sorgt dafür, dass für ein ausgeblendetes Element auch kein Platz freigehalten wird. Mit display lässt sich sogar eine Aufzählungsliste, die zu den Blockelementen gehört, als Inline-Element und damit in einer Zeile darstellen.

Äußerst wichtig sind die Attribute margin und padding, mit denen die Außen- und Innenabstände von Elementen angegeben werden. Die Eigenschaften lassen sich mit -top, -left, -right und -bottom für jede Kante eigens festlegen, oder Sie können ihnen bis zu vier Werte zuweisen.

Wird nur ein Wert angegeben, dann erhalten alle vier Ränder den gleichen Abstand. Geben Sie zwei Werte an, dann steht der erste für oben und unten, der zweite für rechts und links. Etwas schwieriger zu merken ist die Angabe von drei Werten: Hier steht der erste für oben, der zweite für rechts und links und der dritte für unten. Bei vier Werten ist immer auszugehen von der Reihenfolge im Uhrzeigersinn: oben, rechts, unten, links. Bitte achten Sie auf die Einheit, die Sie jeweils mit angeben. Einzig der Wert 0 benötigt keine Einheit.


Pseudoformate

CSS & Javascript

Als Pseudoformate für Links werden all jene Formate bezeichnet, mit denen das Aussehen der verschiedenen Zustände von a-Elementen beeinflussbar ist. Das sind hauptsächlich die folgenden: :link für nicht angeklickte Links, :visited für bereits angeklickte Links, :hover für Links, über denen sich der Mauszeiger befindet, :active für Links während des Anklickens. Daneben gibt es noch das Pseudoformat :focus für Links, die mit der Tabulatortaste angewählt werden.

Schon auf Grund dieser reichhaltigen Differenzierungen ist leicht vorstellbar, dass sich damit Effekte erzielen lassen, die vordem nur mit Javascript realisierbar waren. Ganz einfach zu definieren sind zum Beispiel Rollover-Effekte, indem Sie nur für :hover andere Farbangaben verwenden:


#menu a:hover {
color: #666;
background-color: #60F;
text-decoration: underline;
}

Die üblichen RGB-Farbangaben bestehen immer aus Wertepaaren. Wenn beide Werte eines Paares gleich sind, brauchen Sie nur einen davon angeben. #60F steht daher für #6600FF. Neben der Eigenschaft text-decoration stehen Ihnen noch font-style, font-weight und weitere Möglichkeiten der Schriftformatierung zur Verfügung. Natürlich lassen sich in alle Formate auch Grafiken einfügen.


Zentrieren

CSS & Javascript

Auch ein horizontal zentrierter Text gehört zu den zahlreichen reizvollen Anwendungsmöglichkeiten. Eines der Listings auf der Heft-CD soll als Beispiel dienen:


div#main {
width: 50%;
text-align: justify;
margin: auto;
padding: 1em 0;
}

Das div-Element mit der ID main enthält Text, der in der Seitenmitte zentriert und dort als Blocksatz ausgerichtet werden soll. Mit margin: auto sollte der Abstand für den rechten und linken Außenrand auf gleiche Werte gesetzt werden, so dass das Element zentriert wird. Sie müssen natürlich eine Breite für das Element angeben, weil die Werte sonst nicht berechenbar sind. Auch wenn sie nicht gerade intuitiv ist, ist dies die normale, standardkonforme Angabe.

Der Internet Explorer benötigt dafür allerdings die Angabe text-align: center im body-Selektor. Damit wird gleichsam alles zentriert, was keine andere Ausrichtungsdefinition erhält. Wenn nun etwa ein zentriertes Element einen Außenabstand nach oben oder unten einhalten soll, hilft hier einfach eine Angabe wie margin: 1em auto 1.2em weiter. Oder Sie können den Abstand – wie in der Definition oben – mit der Eigenschaft padding ausgleichen.

Alle Listings zum Workshop finden Sie auf der Heft-CD und unter listings.internet-pro.de.