Up Down Left Right Tarkus-OnLine.de / WebDesign / Tipps / CSS
WebDesign 4.1   TIPPS - Formatierung mit CSS
 
Ich setze an dieser Stelle die Grundlagen für die Erstellung von CSS-Formatierungen als bekannt voraus und werde daher lediglich beschreiben, wie und warum ich meine eigenen CSS-Anweisungen genau so angelegt habe, wie sie zur Zeit sind. Basis-Wissen (und mehr!) über CSS findet man zum Beispiel bei CSS Dokumentation Externe Seite in neuem Fenster, CSS 4 You Externe Seite in neuem Fenster und natürlich bei SelfHTML Externe Seite in neuem Fenster.
 
Hauptgrund für den Einsatz von CSS war für mich die schnelle Design-Anpassung durch zentrale CSS-Dateien. Zug um Zug lernte ich auch die komplexeren Möglichkeiten gegenüber purem HTML schätzen.
Flower Graphic By Tarkus
 
Up Down Top   4.1.01   Browser-Probleme
 
Obwohl CSS-Anweisungen mittlerweile die HTML-Anweisungen für die Formatierung von Fonts (und anderen Elementen) abgelöst haben sollten, tun sich einige Browser immer noch schwer damit und interpretieren sie (vorsichtig ausgedrückt) "etwas" eigenwillig. Es ist also anzuraten, die vermeintlich fertige Seite mit verschiedenen Browsern zu prüfen.
 
In Fällen, in denen die Darstellung zu sehr unter solchen (Fehl-) Interpretationen leidet, empfiehlt sich eher der Verzicht auf die eine oder andere Funktion, wogegen es Ansichtssache ist, ob man kleine Schönheitsfehler in Kauf nimmt.
 
 
Beispiel: Einige Bilder in meiner Galerie sollten eigentlich farblich umrahmt sein. Manche älteren Browser umrahmen die Bilder jedoch meist nicht, sondern setzen stattdessen kleine quadratische Rahmen unter(!) die Bilder. Das sieht zwar nicht schön aus, ist jedoch meines Erachtens ein tolerierbarer Schönheitsfehler, der mit diesen Browser-Versionen ohnehin nach und nach aussterben wird.
 
 
Tipp: Manche Browser ignorieren komplexe CSS-Anweisungen vollständig, wenn sie einzelne Anweisungen darin nicht "verstehen". In solchen Fällen empfiehlt es sich, die Anweisungen zu splitten. Das heißt, dass man dieselbe Funktion zweimal nacheinander definiert. Einmal mit den für alle Browser verständlichen Anweisungen, und einmal mit den Anweisungen, die von manchen Browsern nicht akzeptiert werden. Auf diese Art wird zumindest ein Teil der Formatierung von diesen Browsern korrekt wiedergegeben.
 
Flower Graphic By Tarkus
 
Up Down Top   4.1.02   Seiten übergreifende CCS-Dateien
Substitute symbol (Abschnitt überarbeitet 2004-05-10)
 
Mit zentralen CSS-Dateien, die im head-Bereich jeder Inhalt-Seite aufgerufen werden, hat man die Möglichkeit, einheitliche Formatierungen für alle Seiten festzulegen, so dass Design-Änderungen nicht mehr mühselig auf jeder einzelnen Seite vorgenommen werden müssen, sondern nur noch eine (oder einige wenige) CSS-Dateien editiert werden müssen.
 
 
Die Formatierung der mittlerweile 3-stelligen Seitenzahl des Internet-Bereiches Tarkus-OnLine basiert auf nur wenigen CSS-Dateien. Das sind zur Zeit (2005-08):
 
- Basis-Datei für alle Seiten
aniclock.gif 4,857 Bytes - UpLoad vom 2010-12-15 - 10:35 - CET
 
- Ergänzungs-Datei für Menü-Leisten
aniclock.gif 653 Bytes - UpLoad vom 2013-08-11 - 22:59 - CEST
 
- Ergänzungs-Datei für das Haupt-Menü
aniclock.gif 599 Bytes -UpLoad vom 2007-11-24 - 02:10 - CET
 
- Ergänzungs-Datei für Rahmen
aniclock.gif 423 Bytes - UpLoad vom 2010-09-13 - 10:37 - CEST
 
- Ergänzungs-Datei für rote Seiten
aniclock.gif 1,579 Bytes - UpLoad vom 2007-10-06 - 18:42 - CEST
 
- Ergänzungs-Datei für graue Seiten
aniclock.gif 2,244 Bytes - UpLoad vom 2007-10-27 - 15:18 - CEST
 
- Ergänzungs-Datei für den Internet Explorer
aniclock.gif 860 Bytes - UpLoad vom 2008-02-04 - 12:51 - CET
 
Die Basis-Datei enthält die kompletten Formatierungen, die für die Seiten-Darstellung erforderlich sind. Die Ergänzungs-Dateien enthalten lediglich die für besondere Seiten bzw. Browser erforderlichen Unterschiede und werden dort zusätzlich (ggf. mehrere) im Anschluss an die Basis-Datei aufgerufen.
 
 
Beispiel:
Die Basis-CSS-Datei für meine Inhalt-Seiten wird auch auf den roten Seiten aufgerufen, gefolgt von dem Aufruf der ergänzenden CSS-Datei für rot. In letzterer werden den Elementen lediglich andere Farben zugewiesen. Der Haupt-Teil der Formatierung wird also der Basis-Datei entnommen. Änderungen der Basis-Datei wirken sich somit auch auf die roten Seiten aus, ohne die Änderung hierfür erneut durchführen zu müssen.
 
Ähnlich wurden die für die Menüs und Rahmen erforderlichen geringfügigen Unterschiede zur Basis-Formatierung in entsprechenden Ergänzungs-Dateien definiert, die zusätzlich zur Basis-Datei aufgerufen werden.

 
Flower Graphic By Tarkus
 
Up Down Top   4.1.03   Geliehene Internet-Seiten
 
Ein weiterer Vorteil von CSS-Dateien ist, dass man damit (in Grenzen) auch Einfluss auf das Design fremder Internet-Seiten nehmen kann, die man in die eigenen Internet-Seiten einbindet. So habe ich zum Beispiel bei externen Gästebüchern den Aufruf einer meiner CSS-Dateien einfach irgendwo in den Kopf-BereichInfo eingebunden. Auf diese Art passt sich das Gästebuch automatisch den Änderungen meiner Internet-Seiten an, ohne dass ich dazu die Konfigurations-Seite des Betreibers aufrufen muss.
 
Flower Graphic By Tarkus
 
Up Down Top   4.1.04   Erhabenes
 
Ein interessanter Effekt ist die Umkehrung der Kanten-Farben.
 
Beispiel: Die HR-Anweisung (Trennlinie) ist normalerweise so aufgebaut, dass bei etwas dickerer Darstellung die obere und linke Kante dunkler und die untere und rechte Kante heller als der Hintergrund dargestellt wird, so dass es aussieht, als sei die Trennlinie eingeprägt. In meinen CSS-Dateien habe ich diesen Befehl genau andersherum definiert, wodurch die Trennlinien erhaben wirken. Siehe hier:
Ähnlich stellt sich auch die Überschrift der einzelnen Seiten dar. Ist halt mal was Anderes. :o)
 
Flower Graphic By Tarkus
 
Up Down Top   4.1.05   Schalter
 
Anfangs bestand mein Haupt-Menü aus grafischen Schaltern (gif-Bilder), deren Mouse-over-Effekt ich per Java-Skript gesteuert habe.
 
In der aktuellen Version sind die Schalter "nur" noch reine Text-Verweise, denen ich mit CSS-Anweisungen die Schalter-Gestalt aufzwinge, zum Beispiel (vereinfacht) so:
 
a:link , a:visited {
color : #eef; background-color : #558;
border : 1px solid; border-color : #88b #225 #225 #88b;
}
a:hover , a:active {
color : #558; background-color : #eef;
}

Das sieht dann so aus: Test-Schalter
 
Dies verkürzt die Menü-Skripte erheblich, ist nicht mehr auf Javascript angewiesen und erspart zudem das Laden der gesamten Bild-Dateien. Die Reaktions- und Ladezeiten sind seitdem also noch deutlich kürzer geworden.
 
Flower Graphic By Tarkus
 
Up Down Top   4.1.06   Blocks
Substitute symbol (Neuer Tipp 2003-10-19)
 
Auf diesen Seiten hier stelle ich Skript-Beispiele in Blocks dar. Hierzu definiere ich in den CSS-Dateien eine Klasse mit Namen "block", die sich vom restlichen Hintergrund farblich dezent abhebt mit Kanten-Farben, welche die Blocks erhaben erscheinen lassen:
 
.block {
background-color : #363; padding : 3px;
border : 1px solid; border-color : #696 #141 #141 #696;
}

Innerhalb der HTML-Seiten rufe ich diese Klasse dann auf:
 
<div class="block">
Inhalt des Blocks
</div>

Das sieht dann so aus:
 
Inhalt des Blocks
 
Flower Graphic By Tarkus
 
Up Down Top   4.1.07   Rahmen
Substitute symbol (Neuer Tipp 2003-10-19)
 
Eine erweiterte Variante der Blocks (siehe oben) sind die Rahmen. Hierzu definiere ich zusätzlich zur Klasse "block" eine weitere Klasse mit Namen "noblock", mit derselben Hintergrund-Farbe wie die eigentliche Seite und mit Kanten-Farben, welche diese "NoBlocks" vertieft erscheinen lassen:
 
.block { background-color:#363; padding : 3px;
border : 1px solid; border-color : #696 #141 #141; #696;
}
.noblock { background-color:#474; padding : 3px;
border : 1px solid; border-color : #141 #696 #696 #141;
}

Innerhalb der HTML-Seiten rufe ich dann zunächst die Klasse "block" auf und innerhalb dieser die Klasse "noblock":
 
<div class="block">
<b>Titel des Rahmens</b>
<div class="noblock">
Inhalt des Rahmens
</div>
</div>

Das sieht dann etwa so aus:
 
Titel des Rahmens
Inhalt des Rahmens
 
 
Zusätzliche Vertiefungen innerhalb eines Rahmens hebe ich etwas hervor durch leicht abweichende Farb-Zuweisungen für solche ineinander verschachtelten NoBlocks.
 
.noblock .noblock {
background-color : #558; border-color : #114 #77a #77a #114;
}
(Das obige Feld ist selber bereits ein Beispiel für diesen Effekt.)
 
Flower Graphic By Tarkus
 
Up Down Top   4.1.08   Senkrechte Schrift
Substitute symbol (Neuer Tipp 2004-11-13)
 
Will man die Fensterhöhe nicht durch eine oben liegende Titelzeile einschränken, kann man den Titel auch in senkrechter Schrift als Rand oder Trennbalken setzen. Da senkrechte Schrift aber normalerweise nicht möglich ist, behilft man sich in solchen Fällen meist mit einer Grafik, auf welcher die Schrift senkrecht dargestellt ist.
 
 
Zumindest für den Internet Explorer gibt es aber eine CSS-Variante, mit der echte senkrechte Schrift möglich ist. Zunächst muss die Schrift definiert werden (abgedunkelte Angaben nur, falls die Definition im Header der HTML-Datei stehen soll, statt in einer eigenen CSS-Datei) :
 
<style type="text/css">
<!--

#verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}

//-->
</style>
 
Innerhalb der HTML-Seiten kann man dann die ID "verticaltext" einsetzen (Statt der ID "#verticaltext" könnte man zum Beispiel auch die Klasse ".verticaltext" definieren und im Folgenden mit "class=" statt "id=" aufrufen, usw.):
 
<b id="verticaltext">  Vertikaler Text  </b>

Das sieht dann etwa so aus:
 Vertikaler Text 
Sollte der Text nicht von unten nach oben, sondern umgekehrt laufen und statt am linken am rechten Rand erscheinen, ist im Browser evtl. ActiveX deaktiviert. Da man als Webmaster hierauf keinen Einfluss hat, sollte man also darauf achten, dass die Darstellungs-Richtung und die Postion nicht ausschlaggebend sind.
 
 
Für andere Browser bietet es sich an, denselben Text als Alternativ-Grafik im transparenten GIF-Format darzustellen, die ungefähr der für den Internet Explorer gewählten Schrift entspricht. Hierzu kann man sich zum Beispiel folgender einfacher Browser-Weiche bedienen:
 
<!--[if gte IE 6]>
      <b id="verticaltext"> Wolfsspitze von der Römerroute </b>
     <span style="display: none; ">
<![endif]-->
<IMG SRC="titelvertikal.gif">
<!--[if gte IE 6]>
     </span>
<![endif]-->
Dieses Beispiel befindet sich zur Zeit (Nov.2004) auf unserer Zwinger-Seite Wolfsspitze von der Römerroute, wo der Titel die Inhalt-Seite und die Menü-Leiste trennt.
 
Die Abfrage <!--[if gte IE 6]> versteht nur der Internet Explorer. Die Angabe "gte 6" besagt, dass es nur für den Internet Explorer ab Version 6 gilt. Alles was zwischen <!--[if gte IE 6]> und <![endif]--> steht, wird also nur vom Internet Explorer ab Version 6 ausgeführt. Für alle anderen Browser sieht es aus wie ein Kommentarblock ohne jede Bedeutung.
 
Im obigen Beispiel wird also nur ab Internet Explorer 6 der Text "Wolfsspitze von der Römerroute" angezeigt. Alle anderen Browser zeigen das Bild "titelvertikal.gif" an.
 
Um zu vermeiden, dass der Internet Explorer 6 dieses Bild ebenfalls anzeigt (zusätzlich zum Text), muss für diesen die Bild-Ausgabe unterdrückt werden, indem man zum Beispiel vor das erste <![endif]--> noch ein <span style="display: none; "> setzt.
 
Damit das abschließende </span> von anderen Browsern nicht gesehen wird, steht es auch wieder zwischen <!--[if gte IE 6]> und <![endif]-->.
 
Flower Graphic By Tarkus
 
Up Down Top   4.1.99   Fazit
 
Sämtliche Seiten meines Internet-Bereiches erscheinen in gleichem Design, das auf nur einer Handvoll CSS-Dateien basiert.
 
Flower Graphic By Tarkus
 
site-reload-mini.gif Reload Private WebSite by Ulli U. alias Tarkus © 1998-2024
ICRA
www.tarkus-online.de/webdesign_tipps_css.shtml
32,521 bytes saved on 2013-08-11 at 22:39 (CEST)
Impressum, Kontakt, Rechtliches siehe siehe rechts © K I D e-Mail