nicht angemeldet
Moin, Thomas!
Jetzt hätte ich gerne gewusst, ob mein Code auch "sauber" ist. Also kein Pfusch ist, dem Standard entspricht und keine Fehler enthalten sind.
Es gibt einen Punkt, der vielleicht nicht oberwichtig erscheinen mag, auf den es aber vielleicht irgendwann einmal ankommt: Die Groß-Kleinschreibung.
CSS selbst macht keine Aussagen, ob ein Selektor groß oder klein geschrieben werden muß, sondern bezieht sich auf die Vorgaben, die die zu formatierende Sprache da macht.
HTML ist da nicht wirklich eindeutig, d.h. es gibt sowohl Attribute, die case-insensitive sind (wie auch alle Tagnamen), als auch solche, die case-sensitive sind - manchmal auch abhängig von den Elternelementen, in denen sie sich befinden - als auch solche, bei denen das in HTML selbst gar nicht so genau definiert ist, und wo es dann wiederum auf weitere externe Faktoren ankommt.
XHTML hingegen ist aufgrund seiner Abstammung von XML da rigoroser: Alles ist case-sensitive, und alles ist deswegen komplett klein zu schreiben.
Jetzt zu dir:
Ein großgeschriebenes A für Links im CSS-Selektor:
.startseite A, .bilder A { }
Aber ein kleingeschriebenes a als Elementbezeichner des Links im (X)HTML-Code:
<td class="startseite"><a href="http://www.ard.de">Startseite</a></td>
Sowas ist ungünstig. Interpretiert dein Browser deine Auszeichnung als HTML, dann ist auch der CSS-Selektor case-insensitive, und das A matcht auf das <a>.
Nutzt du hingegen XHTML (und zwar im wirklichen XHTML-Modus, d.h. der Browser benutzt seinen strengen XML-Parser und wird nicht durch den Mime-Typ "text/html" in den weichen HTML-Modus gezwungen), dann sollte der CSS-Selektor case-sensitive sein, und das A matcht nicht mehr auf das <a>. Zumindest in Browsern, die die Dinge ernst nehmen und streng vorgehen.
Aber es hätte auch noch schlimmer kommen können: Hättest du umgekehrt das a ins CSS geschrieben, und den Link mit <A> ausgezeichnet, dann würden weder das CSS auf den Link angewandt, noch würde das <A> in XHTML überhaupt zu einem Link werden...
Deshalb der gute Rat: Alles immer kleinschreiben, alle Tags, Selektoren, Attributbezeichner, Attributwerte (sofern das sinnvoll ist - bei Alternativtexten für Bilder natürlich nicht). Gilt auch für Dateinamen und URL-Bestandteile. Dann stößt man auf die wenigsten Probleme.
Weiter würde ich empfehlen, im CSS ausführlichere Selektoren zu wählen. Du hast deiner Tabelle (die dir ja schon ausgetrieben wurde) eine schöne, beschreibende Klasse ".navi" drin. Nutze sie auch in den weiteren von dir aufgeführten Selektoren:
.navi .startseite a {}
.navi .startseite a:hover {}
Durch diese ausführlichere Beschreibung ersiehst du im CSS auf einen Blick, dass du mit diesen Selektoren gerade die Navigation formatierst, und nicht irgendeinen Link im Contentbereich. Das mag für diese kleine, übersichtliche CSS-Datei noch kein Problem darstellen, aber wenn du die Nutzung von CSS wirklich ernst nimmst, dann wächst deine CSS-Datei durchaus auf über 1000 Zeilen an - und in so einem Dokument kommt es ganz entscheidend darauf an, dass du den Überblick auch dann behältst, wenn du die Datei mal einen Monat lang nicht gesehen hast.
Als abschließende Ergänzung: Sofern du nicht planst, mehrere dieser .navi-Tabellen bzw. -Listen einzusetzen, würde ich anstelle einer Klasse lieber eine ID verwenden. IDs haben in der Gewichtung der Selektoren eine höhere Priorität, und außerdem kann man allein an der Verwendung einer ID erkennen, dass es sich dabei wohl um eines der wenigen Hauptbestandteile der Seiten handeln muß - eine Navigation kommt ja üblicherweise nur einmal pro Seite vor, genauso wie ein Content-Bereich, ein Header, ein Footer oder eine Meta-Spalte. Durch die Verwendung der ID auch in den CSS-Selektoren wird dein Stylesheet fast von alleine gegliedert, d.h. die Formatierung der einzelnen Hauptbestandteile wird direkt offenbar.
- Sven Rautenberg
"Love your nation - respect the others."