PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Brauch dringend Hilfe Betreff CSS und W3C *narf*


nemesiz
2006-08-01, 14:06:44
Und zwar bekomme ich mein CSS nicht Valid.

Hier die Fehler

Zeile: 1 Kontext : ���
Einlese-Fehler - ���@import url(layout.css); was ist hier bitte falsch?



Zeile : 20 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #navigation
Zeile : 40 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben : #footer
Zeile : 50 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : #masthead p
Zeile : 68 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : #navigation a
Zeile : 78 (Level : 1) Gleiche Farbe für background-color und border-right-color : #navigation a:hover
Zeile : 78 (Level : 1) Gleiche Farbe für background-color und border-left-color : #navigation a:hover
Zeile : 78 (Level : 1) Gleiche Farbe für background-color und border-top-color : #navigation a:hover
Zeile : 84 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : #footer p
Zeile : 89 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : #footer a
Zeile : 93 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : #footer a:hover
Zeile : 98 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : a
Zeile : 102 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : a:hover


Ihr validiertes Cascading Style Sheet:���body {
color : black;
font-size : 13px;
font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
background-color : #000000;
}
#container {
width : 620px;
margin : 0 auto;
border-top : 10px double #000000;
background-image : url('../images/logo/123.gif');
}
#masthead {
text-align : right;
background-color : transparent;
width : 620px;
}
#navigation {
background-color : #545454;
overflow : hidden;
}
#column_l {
width : 385px;
margin : 0;
padding : 0 15px 0 25px;
}
#column_r {
width : 192px;
margin : 0;
float : left;
padding : 4px;
position : static;
}
#footer {
width : 620px;
text-align : center;
background-color : #666666;
padding-top : 5px;
padding-bottom : 5px;
}
#masthead img {
float : left;
}
#masthead p {
font : oblique normal bolder 30px serif;
color : #fff;
margin : 10px 10px 0;
}
#column_r p {
font-size : 11px;
margin : 7px;
}
#navigation ul {
list-style-type : none;
width : 100%;
margin : 0;
padding : 0;
}
#navigation li {
float : left;
}
#navigation a {
color : #fff;
text-decoration : none;
display : block;
padding : 5px;
border : 1px solid #c9c9c9;
}
#navigation a:hover {
color : #000;
text-decoration : none;
border : 1px solid #a9a9a9;
background-color : #a9a9a9;
}
#footer p {
font-size : 11px;
line-height : 14px;
color : #fff;
margin : 1px;
padding : 1px;
}
#footer a {
color : #fff;
text-decoration : underline;
}
#footer a:hover {
color : #fff;
text-decoration : none;
}
a {
color : #036;
text-decoration : underline;
}
a:hover {
color : #808080;
text-decoration : underline;
}
.style_bold {
font-weight : bold;
}
.style_italic {
font-style : italic;
}

darph
2006-08-01, 16:26:43
@import:url("url"); Anführungszeichen. Es fehlt der Kontext. @import url(format.css) screen;

Und ansonsten steht's ja da: Wenn du background-color setzt, mußt du auch color setzen, weil du nicht wissen kannst, in welcher Farbe der Browser den Text als Fallbackfarbe anzeigt, wenn nichts anderes angegeben ist.

Ansonsten bist du auch reichlich inkonsistent. Mal schreibst du volle Farbangaben (#0000000), mal nutzt du die (komplett unnötige und Fehler provozierende) Kurzschreibweise (#036 - mal ernsthaft: Was bringt eine 3-Zeichen-Ersparnis?).

Mal schreibst du ganz ohne Anführungszeichen (@import url(layout.css);), mal verwendest du doppelte (font-family : "Trebuchet MS",...) und mal einfache (background-image : url('../images/logo/123.gif');).

Würde mich nicht wundern, wenn das den einen oder anderen Client verwirrt. Gerade das scheinbar zufällige Wechseln der Farbangaben... schreib doch ab Besten immer ausführlich. Drei Zeichen werden nun gewiß nicht deinen Trafficrahmen sprengen und du kannst sicher sein, daß jeder Client, der CSS kann, das auch versteht.

.style_bold {
font-weight : bold;
}
.style_italic {
font-style : italic;
}
Wieso inhaltsleere Tags nehmen? Nimm dafür doch strong und em

nemesiz
2006-08-01, 17:21:31
<-- aaaanfänger aber ich versuche mal zu verstehen was du da schreibst :-)

mal schaun wie weit ich komme

also oki ich schreib mal ausführlich mal kurzform. soweit klar.
auch dass ich bei der farbangabe der schirft die hintergrundfarbe vergessen habe ist klar.

aber was hats nochmal mit dem ersten fehler auf sich? was muss ich da ändern? beachte.. ist erst meine 2te seite.

Marscel
2006-08-01, 19:04:16
Dein CSS, das irgendwo im <style>-Tag steht.
@import url(layout.css);

Richtig wäre
@import url(layout.css) screen;

IceLord
2006-08-01, 19:30:38
(komplett unnötige und Fehler provozierende) Kurzschreibweise
Wieso Fehler provozierend? Ich nutze immer die Kurzschreibweise 4096 Farben reichen mir vollkommen und ich muss weniger tippen.

nemesiz
2006-08-01, 19:31:32
Dein CSS, das irgendwo im <style>-Tag steht.
@import url(layout.css);

Richtig wäre
@import url(layout.css) screen;

nein auch das nimmt er als fehler. ich denke es geht dem W3C darum dass er das File nicht importieren kann.
Klar ich lade ja nur die sytel3.css hoch.

Naja habe jetzt das layout und style zusammengefügt.

Probleme machen mir aber die Warnungen.
Ich hab Color und Background Color drin stehen und trotzdem kommt
z.B. Zeile : 93 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : #footer a:hover

Marscel
2006-08-01, 19:59:23
Probleme machen mir aber die Warnungen.
Ich hab Color und Background Color drin stehen und trotzdem kommt
z.B. Zeile : 93 (Level : 1) Sie haben keine Hintergrundfarbe zu der Vordergrundfarbe angegeben : #footer a:hover

Ignorier das.

darph
2006-08-01, 20:56:41
Wieso Fehler provozierend? Ich nutze immer die Kurzschreibweise 4096 Farben reichen mir vollkommen und ich muss weniger tippen.Naja. #123 steht ja für #112233, richtig?

Es gibt Clients, die wissen das. "Wenn drei Zeichen, dann verdoppele alle". Soweit, so gut. Was aber, wenn ein Client da verwirrt wird, insbesondere wenn in der Zeile davor beispielsweise #998877 stand? Dann interpretiert der das möglicherweise als #123000 - ein ganz anderer Wert oder er ignoriert womöglich es ganz, weil syntaktisch nicht wie erwartet. Fehlinterpretation ist zugegebenermaßen unwahrscheinlich - aber warum es riskieren? Wer weiß, mit was für abenteuerlichen Clients einer die Seite besucht? Es soll ja auch Leute geben, die mit dem Browser auf ihrem Mobile Phone unterwegs sind.

Drei Zeichen sind ja nun wirklich keine große Herausforderung. Wem das zu viel arbeit ist.... ja, nun. Es gibt weniger anstrengende Hobbies. ;) Jedenfalls ist das nun wirklich kein Argument, imho. Wenn drei Zeichen Klarheit schaffen, sollte man das schon nutzen.

DanMan
2006-08-01, 21:32:59
Ignorier das.
Jo. Sind nur Warnungen. Soll heißen: schlechter Code, aber nicht ungültig.

MadMan2k
2006-08-01, 22:51:55
Jo. Sind nur Warnungen. Soll heißen: schlechter Code, aber nicht ungültig.
nicht mal errors sagen was aus. ich hab ein paar wegen mozilla spezifischer sachen.
laut spezifikation sollen diese von anderen clients einfach ignoriert werden. laut css validator ist das ein fehler... :rolleyes:

nemesiz
2006-08-01, 22:54:54
naja habs jetzt gemacht. komisch irgendwie kommt trotz valid css keine seite mit einer erfolgreichmeldung wie bei html. früher gabs das.

naja egal. beides valid und die seite funzt auch. naja paar sachen nicht ganz so wie ich will (wieso ist X nicht mehr an Position Y wenn ich Z lösche) ..aber was solls.

Für den Anfang reichts mir.

darph
2006-08-01, 23:17:18
nicht mal errors sagen was aus. ich hab ein paar wegen mozilla spezifischer sachen.
laut spezifikation sollen diese von anderen clients einfach ignoriert werden. laut css validator ist das ein fehler... :rolleyes:Ja, nun. Was haben wir alle geschrien, man solle doch keine IE-spezifischen Sachen verwenden, sondern validen Code schreiben.

nemesiz
2006-08-02, 00:22:07
Ja, nun. Was haben wir alle geschrien, man solle doch keine IE-spezifischen Sachen verwenden, sondern validen Code schreiben.
bin ich nun ein böser anfänger weil ich meinen 2ten webseiten versuch mit Expression gemacht habe? *G*

MadMan2k
2006-08-02, 01:08:59
Ja, nun. Was haben wir alle geschrien, man solle doch keine IE-spezifischen Sachen verwenden, sondern validen Code schreiben.
das was ich jetzt mozilla only mache kommt später als css3 überall.

IceLord
2006-08-02, 01:19:15
das was ich jetzt mozilla only mache kommt später als css3 überall.
Mit '-moz-' vorne dran wird's aber immer Mozilla-spezifisch sein.;)

MadMan2k
2006-08-02, 01:36:26
Mit '-moz-' vorne dran wird's aber immer Mozilla-spezifisch sein.;)
was heute -moz-opacity heisst. steht als opacity im css3 draft drin ;)

darph
2006-08-02, 10:33:02
Bis es aber soweit ist, ist es aber nunmal ein Fehler, weil es nicht Teil der aktuell gültigen Spezifikation ist. Und Sachen einzubauen, die eben nicht Teil dieser Spezifikation sind, führt zu einem nicht validen Dokument.

Natürlich kannst du das einfach ignorieren, no harm done. Aber zu behaupten der Validator wäre schlecht, weil er das als Fehler anstreicht, ist trotzdem falsch, denn noch ist es ein Fehler.

MadMan2k
2006-08-02, 12:36:38
Bis es aber soweit ist, ist es aber nunmal ein Fehler, weil es nicht Teil der aktuell gültigen Spezifikation ist. Und Sachen einzubauen, die eben nicht Teil dieser Spezifikation sind, führt zu einem nicht validen Dokument.
die spezifikation schreibt vor alle unbekannten properties zu ignorieren. ich darf da also alles mögliche reinschreiben, da es noch innerhalb der spezifikation ist.
es sollte höchstens ein warning geben.

die background warnings sind übrigens auch ungerechtfertigt: die eigenschaften werden implizit deklariert. sprich wenn du ein <strong> hinschreibst hat es automatisch die Eigenschaften "font-weight: bold" und "color: inherit" wenn du jetzt nur die HG farbe deklarierst hast du also immernoch die schriftfarbe vom elternelement und diese wird bei html auf schwarz gesetzt...

DanMan
2006-08-02, 14:48:59
was heute -moz-opacity heisst. steht als opacity im css3 draft drin ;)
Opacity funtioniert in Mozilla und Opera schon jetzt. Wenn du aber -moz-opacity schreibst, dann funzts nur im Mozilla.

MadMan2k
2006-08-02, 15:03:42
Opacity funtioniert in Mozilla und Opera schon jetzt. Wenn du aber -moz-opacity schreibst, dann funzts nur im Mozilla.
ich weiß darum hab ichs als Beispiel gewählt. ich selbst schreib natürlich opacity :)

DanMan
2006-08-03, 19:06:30
ich weiß darum hab ichs als Beispiel gewählt. ich selbst schreib natürlich opacity :)
Dann is ja allet dufte. :smile: