CSS Code validieren

Status
Nicht offen für weitere Antworten.

son gohan

Erfahrenes Mitglied
Hallo,

ich habe heute zum ertsen mal meine css Datei validiert und gleich hunderte Fehler bekommen, jetzt bin ich ziemlich baf und bitte jemanden um Hilfe.

Am meisten bekomme ich diese Fehlermeldung: "font-family: Es wird empfohlen, daß Sie eine generische Familie als letzte Alternative angeben"

Leider habe ich noch überhaupt keine Erfahrungen mit css und validieren, wobei ich im Gegenteil bei meinen HTML Seiten nur noch validen Code habe.

Ich denke mit eine wenig unterstüzung kann ich dann demnächst auch meine css Dateien selber validieren, vielen dank im Voraus. Hier mal ein paar Beispiele aus meinem Test:

HTML:
Fehler: 
 
Zeile: 230 Kontext : #suche Ungültige Nummer : cursorhand ist kein cursor-Wert : hand 
 
Zeile: 230 Kontext : #suche Einlese-Fehler - opacity=70) 
 
Zeile: 320 Kontext : #weitere2 Die Eigenschaft font-familiy existiert nicht : arial 
 
Zeile: 322 Kontext : #obenunten Die Eigenschaft font-familiy existiert nicht : arial 
 
Zeile: 324 Kontext : .obenunten2 Die Eigenschaft font-familiy existiert nicht : arial 
 
Zeile: 340 Kontext : #rahmen1 Einlese-Fehler - solid #0000DF 
 
Zeile: 396 Kontext : #obenunten2 Die Eigenschaft font-familiy existiert nicht : arial 
 
Zeile: 400 Kontext : #hinweis Die Eigenschaft text-algin existiert nicht : center 
 
Warnungen:
 
 
Line : 54 font-family: Es wird empfohlen, daß Sie eine generische Familie als letzte Alternative angeben Line : 79 font-family: Es wird empfohlen, daß Sie eine generische Familie als letzte Alternative angeben Line : 
 
Ihr validiertes Cascading Style Sheet:
 
#topmenu 
{ position : absolute; left : 10px; top : 59px; width : 100%; height : 52px; z-index : 6; margin : 0; padding : 0; border : 0 solid #006699; } 
 
#hlistmenu { margin-top : 40px; margin-left : 0; padding-left : 0; text-align : left; } 
 
#hlistmenu li { display : inline; list-style-type : none; } #hlistmenu a { padding : 5px 10px; margin-right : 20px; } 
 
#hlistmenu a:link , #hlistmenu a:visited { padding : 5px 10px; border-bottom : 1px solid #005f00; border-left : 8px solid #005f00; text-decoration : none; color : #000000; font-weight : bold; font-size : 12px; font-family : arial; } 
 
#hlistmenu a.active:link , #hlistmenu a.active:visited { padding : 5px 10px; border-bottom : 1px solid #005f00; border-left : 8px solid #005f00; color : #102b44; } 
 
#hlistmenu a:hover { padding : 5px 10px; border-bottom : 1px solid #005f00; border-left : 8px solid #005f00; text-decoration : underline; color : #000000; font-weight : bold; font-size : 12px; font-family : arial; } 
 
#leftmenu { position : absolute; left : 10px; margin : 0; padding : 0; top : 5px; bottom : 50px; width : 120px; z-index : 4; } 
 
* html #leftmenu { height : 100%; top : 0; bottom : 0; margin : 0; padding : 0; border-top : 5px solid #fff; border-bottom : 50px solid #fff; color : #000000; font-size : 11px; font-family : arial; } #vlistmenu { margin-left : 0; padding-left : 0; } 
 
#vlistmenu li { list-style-type : none; margin : 0 0 3px; } 
 
#obenunten2 { margin : 0; padding : 3px; font-size : 13px; color : #000000; background : transparent; border-top : 1px solid #007f00; border-bottom : 1px solid #007f00; width : 710px; font-size : 17px; color : #000000; } 
 
#empfehlungenrahmen { width : 690px; border : 0 solid #007f00; margin-top : 20px; text-align : left; } 
 
#hinweis { font-family : arial; font-size : 12px; color : #4f4f4f; width : 400px; } 
 
#leftright { padding : 0; border-left : 1px solid #009f00; border-right : 1px solid #009f00; } 
.grun1 { float : left; background-color : #1fa30c; width : 175px; height : 20px; } 
.grun2 { float : left; background-color : #24be0e; width : 175px; height : 20px; }
.grun3 { float : left; background-color : #2de712; width : 175px; height : 20px; } 
.grun4 { float : left; background-color : #2bf307; width : 175px; height : 20px; } 
.grun5 { float : left; background-color : #1fa30c; width : 175px; height : 60px; } 
.grun6 { float : left; background-color : #24be0e; width : 175px; height : 60px; } 
.grun7 { float : left; background-color : #2de712; width : 175px; height : 60px; } 
.grun8 { float : left; background-color : #2bf307; width : 175px; height : 60px; } 
.grun11 { float : left; background-color : #1fa30c; width : 175px; height : 40px; } 
.grun12 { float : left; background-color : #24be0e; width : 175px; height : 40px; } 
.grun13 { float : left; background-color : #2de712; width : 175px; height : 40px; } 
.grun14 { float : left; background-color : #2bf307; width : 175px; height : 40px; } 
#quelle { text-decoration : none; color : #007f00; font-size : 10px; font-family : arial; } 
.ae { float : left; background-color : #005f00; width : 179px; height : 20px; color : #ffffff; font-size : 14px; font-family : arial; font-weight : bold; vertical-align : middle; padding-top : 2px; margin : 1px; } 
.fk { float : left; background-color : #95e199; width : 179px; height : 20px; color : #000000; font-size : 14px; font-family : arial; font-weight : bold; vertical-align : middle; padding-top : 2px; margin : 1px; } 
.beratung4 { float : left; width : 240px; border : 1px solid #007f00; text-align : left; font-size : 14px; font-family : arial; font-weight : bold; } 
A:link { text-decoration : none; color : #000000; font-size : 13px; font-family : arial; } A:visited { text-decoration : none; color : #000000; font-size : 13px; font-family : arial; } A:active { text-decoration : none; color : #000000; font-size : 13px; font-family : arial; } A:hover { text-decoration : underline; color : #005f00; font-size : 13px; font-family : arial; } A.grun:link { text-decoration : none; color : #007f00; font-size : 13px; font-family : arial; } A.grun:visited { text-decoration : none; color : #007f00; font-size : 13px; font-family : arial; } A.grun:active { text-decoration : none; color : #007f00; font-size : 13px; font-family : arial; } A.grun:hover { text-decoration : underline; color : #007f00; font-size : 13px; font-family : arial; }
 
Okay, dann helfen wir mal. ;)

Schriftfamilien sind z. B. serif, sans-serif, monospace (bin mir aber beim letzten nicht sicher, ob das so heisst): Das wird empfohlen, weil z. B. wenn du Arial angibst, kannst du nicht bestimmen, was auf Linux-System angezeigt wird. Mit sans-serif hingegen wird auf allen Systemen eine serifenloser (und damit mehr oder weniger Arial-ähnliche) Schriftart angezeigt.

2. cursorhand gibt's nicht. Alle gültigen Cursor findest du hier: http://de.selfhtml.org/css/eigenschaften/anzeigefenster.htm#cursor.

Dann hast du da ein =, wo vermutlich ein : hingehört.

Desweiteren heisst es family, nicht familiy. ;)

Bei Zeilen 340 fehlt, so denke ich mal, noch eine Pixelangabe.

Und dann heisst es ausserdem noch text-align, nicht text-algin.

So, ich hoffe mal, du siehst jetzt klarer. Waren ja alles keine gröberen Fehler, sondern kleine Unachtsamkeiten. ;)
 
Hallo,


was mache ich dann mit meinen Schriftarten, soll ich einfach noch die Möglichkeit der anderen Schriftarten bei allen danebenschreiben, damit die Datei valide wird, oder muss ich etwa alle schriften komplett ändern?

Wie schreibe ich es für den Fall das ich einfach zusätzliche Schriftarten anbiete, ich will aber das arial als erste Auswahl geht, ich würde es ja so schreiben:

font-family:arial;ms sans serif,helivectra;
Die anderen Sachen waren ja wirklich nur Kleinigkeiten, da bin ja froh:)
 
SelfHTML beschreibt auch, wie das mit den Schriftarten funktioniert.
Die erste, die Du angibst ist erste Wahl, dann mit Komma getrennt schreibst Du die nächste. Die wird genommen, falls die erste auf dem System nicht vorhanden ist. Als letztes gibst Du eine generische Schriftart an. Wenn also keine der expliziten Schriftarten vorhanden ist, wird die entsprechende Schriftart des Systems bzw. des Browsers genommen, die der generischen Familie entspricht. Schriftarten, die Leerzeichen enthalten (z.B. Times New Roman) schreibt man am besten in Hochkommata.
SelfHTML hat gesagt.:
Folgende generische Schriftfamilien sind fest vordefiniert - diese Angaben können Sie also neben Schriftartnamen benutzen:
serif = eine Schriftart mit Serifen,
sans-serif = eine Schriftart ohne Serifen,
cursive = eine Schriftart für Schreibschrift,
fantasy = eine Schriftart für ungewöhnliche Schrift,
monospace = eine Schriftart mit dicktengleichen Zeichen.

Gruß hpvw
 
Hallo,

vielen Dank für die Hilfe. Ich habe jetzt bei Selfhtml gesehen, das die dort pt als Angabe für die Schriftgröße angeben, ich habe aber bis jetzt immer px genommen ist das schlimm mach das einen Unterschied und was nimmst du für Angaben?

gruß
feh
 
Was Du nimmst hängt ganz davon ab, wie Du Deine Seite gestalten. Darf sich die Schriftgröße ändern oder gibst Du eine feste Schriftgröße vor?
Hier habe ich was für Dich, da kannst Du nachlesen, was es für Angaben gibt und wofür sie stehen: font-sizeIch nutze auf meiner Seite übrigens "em" für die schriftgrößen.

redlama
 
Man kann für Schriften px oder pt nehmen.
Ich nehme immer px, weil man es damit feiner justieren kann.
 
Hallo,

Danke, das wuste ich ja auch noch nicht, aber ist auch kein Wunder wen man nicht Selfhtml durchliest.

Da ich mich an die Pixel Angaben gewöhnt habe, verwende ich Sie dann lieber auch weiter, da es anscheinend nicht schlimm ist und überall funktioniert.

gruß
feh
 
elmyth hat gesagt.:
... Ich nehme immer px, weil man es damit feiner justieren kann.
Das geht aber nur im IE sicher. Im Firefox können User auch px-Angaben vergrößern und verkleinern.
Man sollte also auch bei px-Angaben darauf achten, dass das Layout sich mitvergrößern kann.
Ich halte es wie redlama und bevorzuge em, auch für Breitenangaben von zum Beispiel einem Navigations-div oder Höhenangaben von Zeilenhöhen. Dann wird das Layout nämlich mitvergrößert.
Man kann sich kaum vorstellen, wie häßlich einige Seiten bei mir aussehen, weil sie aus Designgründen z.B. Schriftgrößen von 10 px nehmen und ich sie vergrößere.

Gruß hpvw
 
Zuletzt bearbeitet von einem Moderator:
Ich schließe mich der Meinung der Vorredner an, Schriftgrößen sollten nicht in absoluten Längeneinheiten angegeben werden.

Anfangs scheint das Arbeiten mit absoluten Längeneinheiten einfacher zu sein, da es berechenbarer einheitlicher ist. Doch wenn man sich erst einmal mit Themen wie Benutzbarkeit (Usability) oder Zugänglichkeit (Accessibility) beschäftigt, sieht man schnell ein, dass relative Längeneinheiten oder Größen flexibler und benutzerfreundlicher sind.
 
Status
Nicht offen für weitere Antworten.
Zurück