Mein Code: anständig und sauber?

[Steffanie]

Hallo!

Ich habe mir folgenden Code für eine Navi-Leiste programmiert, der im Firefox und IE7 auch wunderbar funktioniert. Jetzt hätte ich gerne gewusst, ob mein Code auch "sauber" ist. Also kein Pfusch ist, dem Standard entspricht und keine Fehler enthalten sind.

Vielen Dank für eure Kritik!
Grüße Thomas

Mein CSS:

.navi {
 width:200px;
}
.startseite A, .bilder A {
 display:block;
 width:190px;
 text-decoration:none;
 color:#FFFFFF;
 background-color:#0099FF;
 padding:5px;
}
.startseite A:hover {
 display:block;
 width:190px;
 text-decoration:none;
 color: #33FF66;
 background-color: #CC6633;
}
.bilder A:hover {
 display:block;
 width:190px;
 text-decoration:none;
 color: #FFCC66;
 background-color: #990066;
}

Die HTML-Tabelle:

<table class="navi" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="startseite"><a href="http://www.ard.de">Startseite</a></td>
  </tr>
  <tr>
    <td class="bilder"><a href="http://www.ard.de">Bilder</a></td>
  </tr>
</table>

[Makk]

Hallo,

dafuer gibt es den CSS-Validator:
http://jigsaw.w3.org/css-validator/#validate-by-input

Gruss,
Makk

[romy]

Hi Makk,

dafuer gibt es den CSS-Validator:
http://jigsaw.w3.org/css-validator/#validate-by-input

Der leider aber nichts über logische Fehler aussagt, bzw. einschätzen kann, on Elemente und Formatierungen sinnvoll eingesetzt und in Zusammenhang gesetzt wurden.

ciao
romy

[Steffi]

Hallo Makk,

dafuer gibt es den CSS-Validator:
http://jigsaw.w3.org/css-validator/#validate-by-input

Danke, soweit habe ich ihn schon geprüft. Mir ging es eher darum, wie Romy schon bemerkte, ob logische Fehler vorhanden sind, oder ob man irgendwas besser "einfach besser" machen kann.

Gruß Steffi.

[Bobby]

Moin

folgendes fällt mir auf: da :hover nur eine Pseudeklasse ist und Eigenschaften durchaus vererbt werden, braucht man sich wiederholende Eigenschaften nicht nochmals zu benennen. Außerdem würde ich die Elemente wie z.B. in XHTML gefordert klein schreiben (a statt A). Besser wäre:

.navi
{
 width:200px;
}
.startseite a, .bilder a
{
   display:block;
   width:190px;
   text-decoration:none;
   color:#FFFFFF;
   background-color:#0099FF;
   padding:5px;
}

.startseite a:hover
{
   color: #33FF66;
   background-color: #CC6633;
}

.bilder a:hover
{
   color: #FFCC66;
   background-color: #990066;
}

Zum HTML-Teil... Lasse bitte TAbellen für Navigation oder für Seitenlayout weg. Das bringt nur unannehmlichkeiten.

Gruß Bobby

[Steffi]

Hallo Bobby,

danke für den Tip zur Verschlankung!

Zum HTML-Teil... Lasse bitte TAbellen für Navigation oder für Seitenlayout weg. Das bringt nur unannehmlichkeiten.

Ich weiß, hierfür sind z.B. Listen per CSS formatiert die viel bessere Art. Nur möchte ich bei dieser Navigation erreichen, dass jede Zelle beim Hover eine andere Farbe erhält. Deshalb mit dieser Tabelle...

Gruß Thomas

[Harlequin]

Yerf!

Ich weiß, hierfür sind z.B. Listen per CSS formatiert die viel bessere Art. Nur möchte ich bei dieser Navigation erreichen, dass jede Zelle beim Hover eine andere Farbe erhält. Deshalb mit dieser Tabelle...

Weshalb sollte das mit einer Liste nicht gehen? Table wird zu UL, TR entfällt und die TDs werden zu LIs und können ihre Klasse behalten.

Gruß,

Harlequin

[Bobby]

Moin

Ich weiß, hierfür sind z.B. Listen per CSS formatiert die viel bessere Art. Nur möchte ich bei dieser Navigation erreichen, dass jede Zelle beim Hover eine andere Farbe erhält. Deshalb mit dieser Tabelle...

Warum sollte das nicht mit listen funktioinieren? Man kann doch auch ul und li-Elementen classen und IDs zuweisen.

Um mal bei deinem Beispiel zu blaiben:

.navi
{
 width:200px;
}
.startseite a, .bilder a
{
   display:block;
   width:190px;
   text-decoration:none;
   color:#FFFFFF;
   background-color:#0099FF;
   padding:5px;
}

.startseite a:hover
{
   color: #33FF66;
   background-color: #CC6633;
}

.bilder a:hover
{
   color: #FFCC66;
   background-color: #990066;
}

<ul class=navi">
    <li class="startseite">
        <a href="http://www.ard.de">Startseite</a></td>
    </li>
    <li class="bilder">
        <a href="http://www.ard.de">Bilder</a></td>
    </li>
</ul>

natürlich muss das Element UL noch entsprechend per CSS modifiziert werden. Aber die Liste wäre sauberer als die Tabelle.

Gruß Bobby

[Bobby]

Moin

<ul class=navi">

Eh wieder jemand meckert.
Es muss natürlich

<ul class="navi">

lauten.

Gruß Bobby

[Steffi]

OK, vielen Dank! Dann muss ich das doch mal austesten!

Gruß Steffi

[Sven Rautenberg]

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