HTML-File missachtet CSS-Syntax

Biernase · 04.09.2010

Die index.html der Seite, die ich gerade im aufbauen bin, missachtet die Syntax des CSS-Files.

Die Index.html

Code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Beispielseite</title>
    <style type="text/css" rel="stylesheet" href="styles/style.css" media="screen"/></style>
  </head>
  <body>
    <div id="container">
      <div id="header">
        <h1><a href="index.html" title="Zur Startseite"></a></h1>
        <blockquote>
          <h2>Beispieltext</h2>
          <p>Beispieltext</p>
        </blockquote>
        <ul id="navi">
          <li><a href="philosophie.html" title="Philosophie" id="philosophie">Philosophie</a></li>
          <li><a href="leistungen.html" title="Leistungen" id="leistungen">Philosophie</a></li>
          <li><a href="referenzen.html" title="Referenzen" id="referenzen">Philosophie</a></li>
          <li><a href="kontakt.html" title="Kontakt" id="kontakt">Philosophie</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

Das dazugehörige CSS-File

Code:

@charset "UTF-8";

/* -------------------------------------------------------------------------------------- */
/* ---------------------------------------| Reset |------------------------------------- */
/* -------------------------------------------------------------------------------------- */

* {
  margin:0;
  padding:0;
  }
  
ul, ol, dl { list-style:none; }

/* -------------------------------------------------------------------------------------- */
/* -----------------------------------| Global Tags |--------------------------------- */
/* -------------------------------------------------------------------------------------- */

html {
  height:100%;
  background:#47382e;
  }
  
body {
  height:100%;
  background:url(../images/bg-body.jpg) 0 0 repeat-x;
  font-family:Tahoma, Arial, sans-serif;
  font-size:12px;
  }

/* -------------------------------------------------------------------------------------- */
/* ----------------------------------| Global Classes |------------------------------ */
/* -------------------------------------------------------------------------------------- */

.clear {
	float:none;
	clear:both;
  }

/* -------------------------------------------------------------------------------------- */
/* ------------------------------------| Container |--------------------------------- */
/* -------------------------------------------------------------------------------------- */

#container {
  position:relative;
  width:800px;
  margin:0 auto; 
  }

/* -------------------------------------------------------------------------------------- */
/* --------------------------------------| Header |----------------------------------- */
/* -------------------------------------------------------------------------------------- */

#header {
  position:relative;
  width:800px;
  height:264px;
  background:url/../images/logo.jpg] 0 0 no-repeat;
  }
  
/* -------------------------------------| Branding |----------------------------------- */

#header h1 a {
  position:relative:
  text-indent:-9999px;
  }

/* ---------------------------------------| Claim |------------------------------------- */

#header blockquote {
  position:relative:
  text-indent:-9999px;
  }

/* -------------------------------------------------------------------------------------- */
/* --------------------------------| Navigation Main |----------------------------- */
/* -------------------------------------------------------------------------------------- */

ul#navi {
  position:absolute;
  top:264px;
  background:url(../images/bg-navijpg) 0 0 no-repeat;
  }
  
ul#navi li {
  float:left;
  text-indent:-9999px;
  }
  
ul#navi li a {
  background:url(../images/menu-complete.jpg) no-repeat;
  height:47px;
  display:block;
  }

Ich konnte keinen Fehler finden, der dafür verantwortlich sein könnte.

cebito · 04.09.2010

AW: HTML-File missachtet CSS-Syntax

Wie wärs fürs erste mit validieren?

Code:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
[B][COLOR=Red]<!-- und <html> weglassen  --> [/COLOR][/B]
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Beispielseite</title>
    <[B][COLOR=Red]link[/COLOR][/B] type="text/css" rel="stylesheet" href="style.css" media="screen"/>[B][COLOR=Red]<!-- und </style> weglassen  --> [/COLOR][/B]
  </head>
  <body>.......................

attrip · 04.09.2010

AW: HTML-File missachtet CSS-Syntax

wenn es ein externes Stylesheet ist, müsste doch ein <link … bei der style-Angabe eingefügt werden

Biernase · 04.09.2010

AW: HTML-File missachtet CSS-Syntax

Auf diese Dinge hatte ich nicht geachtet. Ich hatte mich auf den Code konzentriert, den ICH SELBST getippt hatte. Der Kopf und das CSS-Import sind fertige Tag-Snipes, über die diverse Programme verfügen. Das Programm, das ich verwende, hatte da offenbar einen Fehler mitgeliefert. Jetzt sieht das schon besser aus, zumindest halbwegs. Danke.

Das Logo wird noch nicht angezeigt.

Einmal zum Vergleich: Code 1 (body) und Code 2 (#header)

Code:

body {
  height:100%;
  background:url(../images/bg-body.jpg) 0 0 repeat-x;
  font-family:Tahoma, Arial, sans-serif;
  font-size:12px;
  }

Code:

#header {
  position:relative;
  width:800px;
  height:264px;
  background:url(../images/logo.jpg] 0 0 no-repeat;
  }

Die CSS-Passage, in der die Grafik angegeben ist, ist abgesehen von dem"repeat"-Teil identisch. Dennoch wird die <body>-Grafik angezeigt, die <#header>-Grafik jedoch nicht.

cebito · 04.09.2010

AW: HTML-File missachtet CSS-Syntax

In deiner obigen css steht es für #header aber so drin:

Code:

background:url[B][COLOR=Red]/[/COLOR][/B]../images/logo.jpg[B][COLOR=Red]][/COLOR][/B] 0 0 no-repeat;

Auch in deinem jetzigen Beispiel solltest du die eckige Klammer hinter .jpg durch eine schließende runde Klammer ersetzen

Biernase · 04.09.2010

AW: HTML-File missachtet CSS-Syntax

Danke dir.

Und was sagst Du dazu? Diese Grafiken werden ebenfalls nicht angezeigt. (Die Klammern habe ich extra noch einmal kontrolliert

)

Code:

ul#navi {
  position:absolute;
  top:295px;
  background:url(../images/bg-navi.jpg) 0 0 no-repeat;
  border:2px #fff solid;
  }

ul#navi li a {
  background:url(../images/menu-complete.jpg) no-repeat;
  height:52px;
  display:block;
  border:2px #000 solid;
  }

Die border habe nur hinzugefügt, um zu testen, ob die Tags überhaupt angezeigt werden (was der Fall ist). Nur sind die Tags ohne Inhalt, da die Grafiken fehlen. Findest Du da auch den Fehler?

EDIT:
Fehler gefunden.