Validation meiner CSS fehlerhaft? Versteh ich nicht @ tutorials.de: Tutorials, Forum & Hilfe

josDesign · 06.08.06 22:44

Hallo!

Ich bekomm beim Validator meiner CSS folgenden Fehler:

Code :

Fehler
URI : file://localhost/TextArea
 
    * Zeile: 10
 
      Parse error - Unrecognized : <style type="text/css"> <!-- body { font-family:Verdana; font-size:12px; background-color:white; text-align:center; }

Was stimmt da nicht?

Hier die gesamte CSS:

HTML-Code:

<style type="text/css">
<!--

body 
{
 font-family:Verdana;
 font-size:12px;
 background-color:white;
 text-align:center;
}

h1 {font-size:18px;color:#000000;margin:0px;}
h2 {font-size:14px;color:#000000;margin:30px 0px 0px 0px;}
h3 {font-size:13px;color:#000000;margin:25px 0px 0px 0px;}
h4 {font-size:14px;color:#000000;}
p {margin-top:0px;}

/* Für Quellcode-Beispiele im Text */
code
{
 font-size:14px;
 color:#0000cc;
}

/* Der Kasten mit dem Quellcode */
pre
{
 font-size:14px;
 color:#0000cc;
 padding:5px;
 border:1px dotted #999999;
 background-color: #fdfdfd;
 width:500px;
 margin:20px 0px 20px 20px;
 
}

p a:link, p a:visited, p a:active, p a:hover
{ 
  text-decoration:underline;
  font-weight:bold;
  color:#333333;
  font-size:12px;
}
p a:hover {
  color:#fcc300;

}
p a:active
{ 
  color:#fcc300;
}

/* Die Hyperlinks im Menü */
a.menu:link, a.menu:visited
{ 
  color:#cecfc6;
  text-decoration:none;
  font-weight:bold;
  font-size:12px;
}
a.menu:active 
{ 
  color:#eeeeee;
}
a.menu:hover{
  color:#fcc300;
}
/* Die Titelzeile */
#title {
height:75px;
padding:5px;
text-align:center;
background-color:black;
background-image:url(logo.gif);
background-position:right;
background-repeat:no-repeat;
}

/* Das Menü */
#menu {
color:#ffffff;
background-color:#868789;
text-align:right;
padding:2px 0px;
}

/* Der Inhalt */
#content {
border-top:1px solid #000000;
background-color:#f8f8f8;
padding:10px 20px;
color:#000000;
}
#footer {
color:#999999;
background-color:#f8f8f8;
font-size:9px;
text-align:right;
padding:2px 0px 0px 0px;
border-top:dotted 1px #999999;
background-image:url(Typo3_little.gif);
background-position:left;
background-repeat:no-repeat;
height:20px;
margin-top:50px;
}

/* DIVbox für Brotkrümelnavigation */
#breadcrumb {
font-size:9px;
color:#868789;
}
/*  Brotkrümelklasse  */
a.breadcrumbmenu {
text-decoration:none;
font-size:9px;
text-transform:uppercase;
color:#868789;
font-weight:normal;
}
a.breadcrumbmenu:hover {
color:#fcc300;
}
#breadcrumbBarriere {
display:none;
}
#menuBarriere {
display:none;
}
#untermenuBarriere {
display:none;
}
#footerBarriere {
display:none;
}
#infoBarriere {
display:none;
}
-->
</style>

Wäre für jede Hilfe dankbar!

ripkens · 06.08.06 22:53

Wenn das ein CSS file ist, dann bitte

Code :

1 2	<style type="text/css"> <!--

und

-

Code :

1 2	-> </style>

entfernen, das kommt nur rein wenn es innerhalb HTML vorkommt.

Marcus

cngs · 06.08.06 23:29

Ich nehme mal an dass du das aus einer Html-Seite hinauskopiert hast, denn bei der Fehlermeldung steht Zeile 10. Kannst du bitte den Header der HTML-Datei auch posten?

Gumbo · 06.08.06 23:47

Ein CSS-Validator kann selbstverständlich nur CSS-Code prüfen. Doch die von Ripkens schon erwähnten Abschnitte sind eindeutig kein CSS sondern eher HTML. Daher die Fehlermeldung.

josDesign · 06.08.06 23:59

OK, hmmm
Hier mal der gesamte Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="Josef Florian Glatz" />
<meta name="description" content="josDesign.at - Josef Florian Glatz. Hobbyfotograf und Hobby-Web- und Grafikdesigner" />
<meta name="keywords" content="Fotografie, Webdesign, Austria, Krumbach, 2851, Glatz, Josef Glatz, Tabellenloses Layout, ohne Tabellen, Gestaltung ohne Tabellen, tabellenloses Design, div zentrieren" />
<title>josDesign.at</title>
<!--  ###DOCUMENT_HEAD### start  -->
<style type="text/css">
<!--

body {
 font-family:Verdana;
 font-size:12px;
 background-color:white;
 text-align:center;
}

h1 {font-size:18px;color:#000000;margin:0px;}
h2 {font-size:14px;color:#000000;margin:30px 0px 0px 0px;}
h3 {font-size:13px;color:#000000;margin:25px 0px 0px 0px;}
h4 {font-size:14px;color:#000000;}
p {margin-top:0px;}

/* Für Quellcode-Beispiele im Text */
code {
 font-size:14px;
 color:#0000cc;
}

/* Der Kasten mit dem Quellcode */
pre 
{
 font-size:14px;
 color:#0000cc;
 padding:5px;
 border:1px dotted #999999;
 background-color: #fdfdfd;
 width:500px;
 margin:20px 0px 20px 20px;
 
}

p a:link, p a:visited, p a:active, p a:hover
{ 
  text-decoration:underline;
  font-weight:bold;
  color:#333333;
  font-size:12px;
}
p a:hover {
  color:#fcc300;

}
p a:active
{ 
  color:#fcc300;
}

/* Die Hyperlinks im Menü */
a.menu:link, a.menu:visited
{ 
  color:#cecfc6;
  text-decoration:none;
  font-weight:bold;
  font-size:12px;
}
a.menu:active 
{ 
  color:#eeeeee;
}
a.menu:hover{
  color:#fcc300;
}
/* Die Titelzeile */
#title {
height:75px;
padding:5px;
text-align:center;
background-color:black;
background-image:url(logo.gif);
background-position:right;
background-repeat:no-repeat;
}

/* Das Menü */
#menu {
color:#ffffff;
background-color:#868789;
text-align:right;
padding:2px 0px;
}

/* Der Inhalt */
#content {
border-top:1px solid #000000;
background-color:#f8f8f8;
padding:10px 20px;
color:#000000;
}
#footer {
color:#999999;
background-color:#f8f8f8;
font-size:9px;
text-align:right;
padding:2px 0px 0px 0px;
border-top:dotted 1px #999999;
background-image:url(Typo3_little.gif);
background-position:left;
background-repeat:no-repeat;
height:20px;
margin-top:50px;
}

/* DIVbox für Brotkrümelnavigation */
#breadcrumb {
font-size:9px;
color:#868789;
}
/*  Brotkrümelklasse  */
a.breadcrumbmenu {
text-decoration:none;
font-size:9px;
text-transform:uppercase;
color:#868789;
font-weight:normal;
}
a.breadcrumbmenu:hover {
color:#fcc300;
}
#breadcrumbBarriere {
display:none;
}
#menuBarriere {
display:none;
}
#untermenuBarriere {
display:none;
}
#footerBarriere {
display:none;
}
#infoBarriere {
display:none;
}
-->
</style>
<!--  ###DOCUMENT_HEAD### stop  -->
</head>
<body><!--  ###DOCUMENT_BODY### start  -->
<div id="infoBarriere"><b>Dies ist die barrierefreie Textversion meiner Homepage:</b></div>
<!--  Gesamter Inhalt  -->
<div style="width:760px;margin:0px auto;text-align:left;padding:10px">

<!--  Titelzeile  -->
<h1 id="title"><!--  ###UBERSCHRIFT### start  -->josDesign.at - Hobbiefotografie: Über<!--  ###UBERSCHRIFT### stop  --></h1>

<!--  Menüüberschrift Barriere -->
<div id="menuBarriere"><b>Hauptmen&uuml;:</b></div>
<!--  Menü  -->
<div id="menu"><!--  ###MENU1### start -->
<a class="menu" href="#">&Uuml;ber</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Feinstes</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Augenblicke</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Specials</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Tutorials</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Hotlinks</a>&nbsp;&nbsp;|&nbsp;&nbsp;
<a class="menu" href="#">Events</a>&nbsp;&nbsp;&nbsp;&nbsp;<!--  ###MENU1### start --></div>
<!--  Untermenü Barriere  -->
<div id="untermenuBarriere"><p><b>Untermen&uuml;:</b><br /><!--  ###MENU1_1B### start  --><a href="#">&Uuml;ber Mich</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Mein Equipment</a>&nbsp;&nbsp;|&nbsp;&nbsp;<!--  ###MENU1_1B### stop  --></p></div>
<!-- Inhalts DIV -->
<div id="content">
<!--  Brotkruemelnavigation  -->
<div id="breadcrumbBarriere"><br /><p><b>Aufenthaltsort:</b></p></div>
<div id="breadcrumb"><!--  ###BREADCRUMB### start--><a href="#" class="breadcrumbmenu">home</a>&nbsp;>&nbsp;<a href="#" class="breadcrumbmenu">über</a><!--  ###BREADCRUMB### stop--></div><!--  ###CONTENT### start  -->Lorem Lipsum<!--  ###CONTENT### stop  --></div>
</div>
</div>
</div>
<!--  ###DOCUMENT_BODY### stop  -->
</body>
</html>

Maik · 07.08.06 06:10

Ich empfehle dir hierzu das Kapitel SELFHTML: Unterschiede zwischen XHTML und HTML / Unterschied: Inhalt von Script- und Style-Bereichen.

Demnach muß in einem XHTML-Dokument der Style-Bereich in einem CDATA-Abschnitt ( <![CDATA[ ... ]]> ) notiert werden. Damit manche Browser dies nicht als Javascript-Code oder CSS interpretieren, werden sie von einem Kommentar umschlossen:

HTML-Code:

<style type="text/css">
  /* <![CDATA[ */

  ...

  /* ]]> */
</style>

josDesign · 07.08.06 08:13

OK, Danke!

Aber auf der Seite steht nicht ob man dann dennoch die Kommentare "" schreiben muss?!

Mit bsetem Dank im Vorraus
jos

Maik · 07.08.06 08:16

Der HTML-Kommentar  wird eben durch den CDATA-Abschnitt ersetzt.

Alternativ hierzu könntest du auch vollständig auf den Kommentar verzichten, oder das Stylesheet in eine externe CSS-Datei auslagern.

josDesign · 07.08.06 08:17

Ah, OK! Da Stylesheet werde ich erst mit Typo3 dynamisch auslagern. Danke vielmals!

Maik · 07.08.06 08:29

Gern geschehen, und bitte vergesse nicht, das gelöste Thema als erledigt zu markieren.

Gumbo · 07.08.06 11:01

Der Umstieg von HTML auf XHTML ist eben etwas komplexer als bloß alle Attributwerte in Anführungszeichen zu setzen und leere Elemente direkt im Start-Tag zu schließen. Daher hier mal die Standardlektüre:

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Ich versteh es nicht

Ich versteh Dreamweaver nicht mehr/noch nicht...

Versteh ich nicht

Ich versteh TIMESTAMP nicht!

Ich versteh das nicht

E-Mail:

Abonnieren Abbestellen