Klicktipps.de

Klicktipps®

Antworten auf Fragen, die das Leben stellt...


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 Homepage-Seiten weitgehend getrennt werden. Dies geht natürlich am einfachsten bei neu zu bauenden Seiten. Hier ein paar Empfehlungen, Links und Tipps:




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 die 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 CSS ist für Kommentare nur /* ... */ erlaubt.
zum Seitenanfang



CSS und Farben

Insgesamt ist zu beobachten, dass Homepageseiten früher meist recht bunt waren, aber in den letzten Jahren ist die Farbgebung eher dezent geworden.
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 z. B. 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 unterschiedlichen 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 Elementen 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:

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 !important; } /* Bereiche mit class="keindruck" ausblenden */ .keindruck{ display:none !important; } }

kann man große Bereiche, die im Ausdruck einer Seite unnötig oder uninteressant sind, ausblenden. Mit dem Befehl "!important" wird die Priorität dieses CSS-Befehls hochgesetzt. Dadurch wird sichergestellt, dass der Befehl auch tatsächlich ausgeführt wird. Im Firefox können mit "Rechtsklick>Element untersuchen" auch schnell CSS-Befehle getestet werden.

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; } }

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) Homepage-Seiten verteilt, sondern möglichst zentral definiert, spart man viel Arbeit bei der Fehlersuche und bei späteren Änderungen.
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





© 03/2020
© 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.