Antworten auf deine Fragen:
Neues Thema erstellen

HTML-File missachtet CSS-Syntax

Biernase

Nicht mehr ganz neu hier

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

undefined

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>.......................
 
Zuletzt bearbeitet:

attrip

Typographin

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

Nicht mehr ganz neu hier

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.
 
Zuletzt bearbeitet:

cebito

undefined

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

Nicht mehr ganz neu hier

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.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.450
Mitglieder
67.557
Neuestes Mitglied
Charal
Oben