Alle unsere Tipps (Home)
Übersicht Buch- und Hobby-Tipps


CSS-Tipps

Irgendwann habe ich begriffen, dass ich Homepages für meine Kunden und mich wesentlich einfacher bauen, ändern und erweitern kann, wenn ich zunächst ihr Aussehen plane und diese Gestaltung dann möglichst konsequent mit CSS umsetze. Hierdurch kann Aufbau und Inhalt von Homepageseiten weitgehend etrennt werden.
Dies geht natürlich am einfachsten bei neu zu bauenden Seiten. Ein Seitenaufbau mit Hilfe von Tabellen ist damit nicht mehr nötig und nicht mehr zeitgemäß.
Seiten, die aus älteren Zeiten stammen (in denen manche Browser die seltsamsten Sachen mit den Seitenaufbau machten), werden von mir erst nach und nach in einen modernen Aufbau mit CSS umgestaltet. Daher tauchen auch in den Klicktipps-Seiten noch manchmal mehr Tabellen als nötig auf, oder Schriftgrößen sind fest in pt bzw. px statt in em oder % definiert.
Aber ich arbeite daran und lerne ständig dazu. In dieser Seite stelle ich hier ein paar Empfehlungen, Links und Tipps vor:




Bücher

Die vermutlich preiswerteste und beste Literatur, mit der man sich einem Computer-Thema nähern kann, sind die Hefte von KnowWare, z. B. Homepages mit HTML und CSS. KnowWare. Ich habe selbst viel daraus gelernt und viele Leute mit diesem Tipp glücklich gemacht.
Die Hefte sind locker und verständlich geschrieben und vermitteln rasch das Wichtigste.
 
Jetzt lerne ich CSS: Webdesign mit Cascading Style Sheets.
Das Buch, mit dem ich CSS gelernt und begriffen habe.
Auch sehr gut und anschaulich:
Das große Little Boxes-Buch: Webseiten gestalten mit HTML & CSS.
 
Modernes Webdesign mit CSS: Schritt für Schritt zur perfekten Website - aktuell zu CSS3.
Das zur Zeit vermutlich beste deutsche CSS-Buch.
Man staunt, was alles ohne JavaScript und ohne sonstige seltsame Methoden möglich ist.
 



zum Seitenanfang


CSS-Tipps und -ideen

Zu CSS kann man in Büchern und im Internet schon sehr viel lesen. Deswegen schreibe ich nun nicht noch eine Anleitung dafür oder ein weiteres Tutorial. Hier gibt es ein paar Tipps zu Problemen oder Fragen, nach deren Lösung ich zum Teil selbst (lange) gesucht habe und die vielleicht für andere Webmaster interessant sein könnten.

Die Beispiele enthalten zur besseren Übersichtlichkeit oft mehr Blanks als für dei Funktion nötig. Solche Blanks erleichtern in vielen Fällen die Lesbarkeit und damit 'Änderbarkeit'; Stichwort: "Servicefreundliches Programmieren".
Viel Spaß beim Benutzen! - und lassen Sie sich dadurch zu eigenen Experimenten und Ideen anregen:
zum Seitenanfang



Kommentare im CSS

Es ist gut, das was man aufgebaut hat, zu kommentieren. Dies hilft besonders, wenn man ein Programm oder eine Homepage nach Monaten ändern oder erweitern muss.
In vielen Programmiersprachen können einzeilige Kommentare mit // gekennzeichnet werden, und ein- oder mehrzeilige Kommentare können zwischen /* und */ geschrieben werden.

In CSS ist aber nur /* ... */ erlaubt.
Wenn man // benutzt, funktionieren nachfolgende CSS-Anweisungen nicht.
zum Seitenanfang



CSS und Farben

Insgesamt ist zu beobachten, dass Homepageseiten vor 2005 meist recht bunt waren, aber sich seitdem eher zu sehr dezenter Farbgebung entwickeln.
Farben können z. B. für Schrift, Hintergrund, Linien usw. angegeben werden. Es sind drei Versionen für Farbangaben möglich; hier z. B. als Hintergrund und Rahmen für eine "blaue Box":

/* hellblaue Box mit grauem Rand; drei gleichwertige Farbangaben */ .box-hellblau-rechts{ background-color: #ddddff; border: 1px solid #bbbbbb; /* gleichwertige Alternativen: background-color: #ddf; border: 1px solid #bbb; background-color: rgb(221,221,255); border: 1px solid rgb(187,187,187); */ float: right; margin: 15px 15px 15px 5px; padding: 5px; FONT-SIZE: 75%; text-align: center; }

Ergebnis:
blaue
Box

Die dreistellige Kurzangabe, die Sie als zweite Version sehen, ist nur dann möglich, wenn für alle drei Farben, Rot, Grün und Blau, jeweils doppelte Zeichen vorhanden sind. Für #ffffe5 ist also keine Kurzangabe möglich.

Farben sind Geschmacksache. Ein Programm wie z. B. Color Schemer erzeugt (fast) immer harmonische Farb-Zusammenstellungen.

Mit Programmen wie Color-Manager oder ColorPic kann man ganz komfortabel mittels einer "Lupe" den Farbwert eines Pixels auf dem Bildschirm erfassen. Er wird in das RGB-, CMY- und andere Farbformate umgerechnet und kann somit vielseitig verwendet werden.

Normalerweise wird in einer CSS-Datei alles für body{}, h1, h2, h3{}, P{}, b{} usw. hübsch nacheinander festgelegt. Da sich im CSS aber am ehesten etwas an den Farben und Hintergründen ändert, kann es die Arbeit erleichtern, wenn man alles, was mit Farbe und Hintergrundbildern zusammenhängt schon mal am Anfang definiert und die weiteren Angaben für Größen usw. erst später folgen lässt.

Achten Sie bei der Farbgebung Ihrer Seiten darauf, dass Sie mit gutem Kontrast und deutlich untershiedlichen Farben arbeiten. Das ist ein wichtiger Beitrag dazu, dass Ihre Seiten "barrierefrei" (= für Menschen mit (Seh-)Behinderungen geeignet) werden.
zum Seitenanfang



Verstellbare Schriftgrößen

In manchen Seiten sieht man, dass z. B. in drei Stufen verstellbare Schriftgrößen angeboten werden. Dies ist für sehbehinderte Menschen zwar hilfreich (Stichwort "Barrierefreiheit"), aber eigentlich überfüssig, da diese Manschen wissen, da sie in Ihrem Browser mit 'Strg und Mausrad' oder 'Strg und Plustaste' bzw. 'Strg und Minustaste' die aktuelle Ansicht zoomen können.
Dieses Zoomen funktioniert in älteren Browsern allerdings nur, wenn die Schriftgrößen nicht fest mit pt bzw. px sondern variabel mit em oder % definiert sind. Wenn man die Breiten von Boxen und anderen Elemanten mit Rahmen auch variabel definiert, werden unschöne Effekte beim Zoomen gleich mit abgestellt: Die Boxen können beim Zoomen der Schrift "mitwachsen".
Die Definition von Schriftgrößen könnte damit folgendermaßen aussehen:

body { font-family: Verdana,Arial,Helvetica,Sans-Serif; font-size: 100.1%; } h1{ font-size: 1.6em; } h2{ font-size: 1.4em; } h3{ font-size: 1.2em; } h4{ font-size: 1.1em; margin-top: 5px; } #hauptinhalt { font-size: 0.8em; } #header{ font-size: 1.2em; font-weight: bold; } #header h1{ font-size: 2.0em; } #footer{ font-size: 0.8em; } /* hellblaue Box mit grauem Rand; feste Breite */ .box-hellblau{ background-color: #ddddff; border: 1px solid #bbbbbb; margin: 10px; padding: 5px; width: 30em; }

Die 100.1% bei body werden angegeben, um Fehler bei diversen alten Browsern zu vermeiden.
Weitere Informationen zur variablen Schriftgröße finden Sie z. B. bei: www.1ngo.de/web/em.html.
zum Seitenanfang



Unterschiedliche Bildschirmgrößen

Haben Sie sich Ihre Homepage schon mal auf Computern mit unterschiedlicher Bildschirmgröße und Auflösung angesehen? Bei quirktools.com/screenfly können Sie einen groben Eindruck bekommen, wie Ihre Homepage auch auf sehr kleinen oder sehr großen Bildschirmen aussehen könnte.
Auch ein Zoomen mit 'Strg und Mausrad' oder 'Strg und Plustaste' bzw. 'Strg und Minustaste' oder ein Verkleinern des Fensters, in der Ihre Homepage angezeigt wird, kann schon interessante Erlebnisse vermitteln.

Mögliche Probleme auf großen Bildschirmen:
Mögliche Probleme auf kleinen Bildschirmen:

In der Statistik von www.webhits.de können Sie sehen, welche Bildschirmauflösungen am häufigsten vorkommen (und welche Browser am häufigsten verwendet werden). Wenn Sie den Zähler von www.hitmaster.de in Ihrer Homepage benutzen, erhalten Sie noch detailliertere Statistiken Ihrer Seitenbesucher.
Wie auch immer: Sie müssen ihre Homepage so auslegen, dass sie in möglichst allen Bildschirmgrößen möglichst gut aussieht.

Ihr Ziel sollte sein, dass Ihre Homepage zumindest im Bereich von 800 x 600 Pixeln bis hin zu größtmöglichen Auflösungen einigermaßen gut aussieht.

Mögliche Maßnahmen hierzu:
Unten in dieser Seite wird beschrieben, wie man das Problem, dass in älteren Browsern die Befehle min-width und max-width fehlen, lösen könnte.
zum Seitenanfang



Unterschiedliche Browser

Jeder Browser arbeitet etwas anders. Wenn Sie Homepages entwickeln, sollten Sie sich daher mindestens den Internet Explorer, Firefox und Chrome installieren, um prüfen zu können, ob Ihre Homepage-Seiten auf allen Browsern einigermaßen gleich aussehen.
Schauen Sie auch, ob für Sie in Ihrer Umgebung Computer mit älteren Browser-Versionen erreichbar sind. Sehen Ihre Seiten auch dort einigermaßen gut aus?
Mit Utilu IE Collection kann man viele alte Versionen des Internet Explorers simulieren.

Ein paar Ideen dazu, wie man Seiten für ältere Browser kompatibel macht, stehen unten in dieser Seite bei 'Probleme mit alten Browsern'.
zum Seitenanfang



Papier beim Drucken sparen

Hassen Sie es auch, dass beim Ausdruck von Homepages so viel Papier unnötig bedruckt wird und damit Geld und natürliche Ressourcen verplempert werden? Haben Sie Ihre eigenen Seiten schon mal als Ausdruck gesehen, oder zumindest mit Datei/Druckvorschau geprüft? Sind Ihre Ausdrucke optimiert?
Bei www.baummord.de wird kurz und einfach erklärt, wie Abhilfe geschaffen werden kann. Hier noch ein paar Ergänzungen:

Mit CSS-Befehlen wie z. B.

@media print{ /* Bereiche standardmäßig ausblenden */ #navigation, #werbung, #werbung2, #seitenkopf, fusszeile{ display:none; } /* Bereiche mit class="keindruck" ausblenden */ .keindruck{ display:none; } }

kann man große Bereiche, die im Ausdruck einer Seite unnötig oder uninteressant sind, ausblenden.

Hiermit sind die Möglichkeiten aber noch nicht zu Ende: Bereiche, die nur für den Druck wichtig sind, z. B. ein Copyright-Vermerk oder eine alternative Kopfzeile könnten für den Betrachter am Bildschirm ausgeblendet und für den Druck eingeblendet werden.
Gleichzeitig können eine auf Papier gut lesbare Schriftart und geeignete Schriftgrößen festgelegt werden:

#seitenkopfdruck, #copyvermerk{ display:none;} @media print{ BODY{ font-family: Georgia, "Times New Roman", serif; font-size: 10pt; } h1{ font-size: 16pt; } h2{ font-size: 14pt; } h3{ font-size: 11pt; } #seitenkopfdruck, #copyvermerk{ display:block; text-align: center; } #copyvermerk{ font-size: 0.8em; } }

Diese Technik wird z. B. hier bei KlickTipps, bei gesunder-kreis-bergstrasse.de oder bei bg-verkehr.de/aktuell intensiv eingesetzt.
zum Seitenanfang



Größere Bereiche zum Link machen - "anklickbar" machen

Manchmal möchte man, dass nicht nur ein Stück Text oder eine kleine Grafik zum Link wird, sondern dass ein ganzer p- oder div-Bereich angeklickt werden kann. Hierzu könnte z. B. eine CSS-Klasse "extrabox" definiert werden:

.extrabox{ background-color: #dfd; border: 1px solid #f00; width: 15em; margin: 15px 15px 15px 5px; padding: 8px; FONT-SIZE: 90%; text-align: center; font-style: italic; font-weight: bold; text-decoration: none; /* Cursor ändern: */ cursor: pointer; }

Die Klasse "extrabox" wird dann im Verlauf der Seite benutzt. Das Linkziel wird mit Hilfe von JavaScript über onClick definiert:

<div class="extrabox" onclick="self.location.href='php-tipps.php';" > Die ganze Box <br> kann angeklickt <br> werden. </div>

Die ganze Box
kann angeklickt
werden.


Mit PHP (siehe PHP-Tipps - Zeitraum von/bis) könnte sogar noch gesteuert werden, von wann bis wann diese Extrabox zu sehen ist.
zum Seitenanfang



CSS in HTML-Seiten einfügen

Selbstverständlich kann man für jede HTML-Seite in ihrem <head></head>-Bereich das CSS einzeln festlegen oder sogar in jedem HTML-Tag (siehe selfhtml.org). Einfacher und für späteres Ändern wesentlich praktischer ist es, alle CSS-Definitionen in eine zentrale .ccs-Datei zu schreiben. Man könnte sie z. B. mein.css nennen.
Ein Link zu mein.css wird in jeder HTML-Seite, im <head></head>-Bereich eingefügt. Dort könnte man auch zu einer Datei verweisen, in der Korrekturen für alte Browser vorgenommen werden.

<!-- Zentral definiertes CSS --> <link rel="stylesheet" type="text/css" href="mein.css"> <!-- Korrekturen für alte Internet-Explorer (Version 6 und früher) --> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="mein_ie6.css" > <![endif]-->

In jeder einzelnen Seite muss dann nur noch das an CSS stehen, was speziell dort gebraucht wird.

Zusätzlich könnte man diese Befehle und alles, was sonst noch in allen Seiten einer Homepage gleich ist (z. B. die meisten meta-tags), in eine Datei auslagern und (falls man PHP zur Verfügung hat) mit include in jede Seite einbinden. Die wichtigsten Änderungen oder Erweiterungen können dann zentral durchgeführt werden.

Fazit: Wenn man CSS-Anweisungen, sonstige Formatierungen und Anderes nicht über alle (oder mehrere) Homepageseiten verteilt, sondern möglichst zentral definiert, spart man viel Arbeit bei der Fehlersuche und bei späteren Änderungen.
zum Seitenanfang



Probleme mit alten Browsern (z. B. Internet-Explorer ≤ Version 6)

Schauen Sie sich Ihre eigenen Homepageseiten auch mal mit einem älteren Browser z. B. Internet Explorer 6 an: Manche Internet-Benutzer haben nichts Anderes. Ihre eigene Homepage solte auch mit alten Browsern noch einigermaßen gut aussehen!
Utilu IE Collection kann viele alte Versionen des Internet Explorers simulieren.

Wie man eine Datei mit Korrekturen durch <!--[if lte IE 6]> ... <![endif]--> einfügt, ist im obigen Abschnitt 'CSS in HTML-Seiten einfügen' gezeigt.
In den nächsten Abschnitten folgen ein paar Beispiele für spezielle Korrekturen.

Beste "Methode" zum Vermeiden von Problemen mit unterschiedlichen oder älteren Browsern:
Programmieren Sie Ihre Seiten so einfach wie möglich!
zum Seitenanfang



Darstellung von .png-Dateien in alten Browsern

In .gif-Bildern kann man Bereiche definieren, die transparent (durchsichtig) sein sollen. Damit hat eigentlich kein Browser Probleme. Beim später entwickelten .png-Dateiformat können ganze Bilder als teilweise transparent (durchscheinend) definiert werden. So mit sind Bilder oder Bildbereiche mit einem beliebgen Prozntsatz an Transparenz herstellbar. Ältere Browser (z. B. Internet-Explorer ≤ Version 6) können diese Art Transparenz nicht anzeigen.

Um dennoch Bildbereiche transparent oder teilweise transparent werden zu lassen, könnte man beim Internet-Explorer (ab 4.0) mit filter:Alpha() arbeiten.

In einfachen Fällen (wenn nur ein Bereich einfarbig und dabei halbtransparent abgedeckt werden soll, könnte man auch das .png-Bild  durch ein .gif-Bild  ersetzen, bei dem die Transparenz dadurch simuliert wird, dass jedes zweite Pixel durchsichtig ist. In diesem Text wurden beide Bilder als Hintergrund verwendet.
So etwas könnte mit Hilfe einer Datei 'mein_ie6.css' festgelegt werden, wie es im obigen Abschnitt 'CSS in HTML-Seiten einfügen' beschrieben ist.
zum Seitenanfang



Fehlendes min-width und max-width in alten Browsern

Im Internet Explorer < Version 8 sind die Befehle min-width und max-width noch unbekannt. (siehe selfhtml.org)

In vielen Fällen hilft es vermutlich schon, für alte Internet-Explorer eine feste Seitenbreite vorzugeben, z. B.:

body{ width: 900px; margin: 0px auto; }

Diese Festlegungen könnte man z. B. in eine Datei 'mein_ie7.css' schreiben. Das Browser-abhängige Einfügen dieser Datei mit <!--[if lte IE 7]> ... <![endif]--> ist im Abschnitt 'CSS in HTML-Seiten' beschrieben.
Diese Konstruktion wird im head-Bereich der Homepage untergebracht.

Wenn die Breite des body nicht so statisch festgelegt sein soll, könnte man erst mal mit einer JavaScript-Funktion die aktuelle Fensterbreite ermitteln und dann eine passende Breite für den body berechnen und ausgeben.
In 'Fensterbreite passend zur Bildschirmbreite einstellen' finden Sie eine entsprechende Funktion. Die Frage ist allerdings, ob Seitenbesucher es - falls sie es überhaupt bemerken - gerne haben, dass man ihnen die Größe eines Bildschirmfensters verstellt.

In Zukunft wird man bei modernen Browsern und ab css3 die Bildschirmgröße abfragen können. Je Bildschirmgröße kann dann eine andere .css-Datei ausgewählt oder dazugeschaltet werden.
zum Seitenanfang



Hilfe! Mein CSS funktioniert nicht!" (häufigste CSS-Fehler)

Auch das schönste CSS funktioniert manchmal nicht - und man sucht und sucht und sucht. ...
Die häufigsten Ursachen und Fehler sind folgende:

Tipp: Testen Sie Ihr CSS doch mal mit einem CSS-Validator, z. B. mit dem W3C CSS Validierungsdienst



zum Seitenanfang

Links

zum Seitenanfang




© Klicktipps® (www.Klicktipps.de):
Dieser Ausdruck ist nur für den eigenen Gebrauch freigegeben.
Eine Vervielfältigung ist nicht gestattet und auch wenig sinnvoll,
da sich der Inhalt durch Aktualisierungen häufig ändert.