zentrale css-Datei wird nicht erkannt

[heiner]

Hallo zusammen,

wie bei selfhtml erstklassig beschrieben habe ich versucht, mit einem link auf eine centrale css-datei zu verweisen. Leider wird diese nicht erkannt.

anbei der quelltext:
<link rel="stylesheet" type="text/css" href="vorgaben.css">
Die Datei liegt unter dem gleichen Namen im selben Ordner.

Anbei noch der Inhalt der Datei (von hier kopiert und ein bisschen drin geändert, aber ohne irgendeine Auswirkung auf mein Dokument)

h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {
 font-family:Helvetica,sans-serif; }

h1, h2, h3, h4 { font-size:9px; margin-bottom:18px; }

p,ul,ol,li,div,td,th,address,blockquote { font-size:9px; }

li { margin-top:0px; }

pre { font-family:Helvetica,; font-size:9px; color:#000000; }

code,kbd,tt { font-family:Helvetica,; font-size:9px; color:#000000; }

var { font-style:normal; color:#0000C0; }

blockquote,cite { font-style:italic; }

.xmpcode { border-width:10px; border-style:solid; border-color:#EEEEEE; background-color:#FFFFE0; }

.text {  font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; font-weight: normal; font-variant: normal; text-decoration: none; font-style: normal;}

.Menue { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; font-weight: normal; font-variant: normal; text-decoration: none; color: #181918}

a:link { color:#666666; text-decoration:none; }

a:visited { color:#666666; text-decoration:none; }

a:hover { color:#000000; text-decoration:none; }

a:active { color:#000000; text-decoration:none; }

a.an { text-decoration:none; }

.unicode { font-size:9px; font-family:Arial Unicode MS,Arial,sans-serif }

ins { color:#009900; font-weight:bold; text-decoration:none; }

del { color:#990000; font-weight:bold; text-decoration:line-through; }

Firefox, Opera und Safari zeigen alle das gleiche an, nämlich keinen Einfluss des vorgaben-Dokuments auf das html-dokument. Weiß jemand Rat?

Grüße
heiner

[Patrick Andrieu]

Hallo heiner!

anbei der quelltext:
<link rel="stylesheet" type="text/css" href="vorgaben.css">
Die Datei liegt unter dem gleichen Namen im selben Ordner.

Hm, Groß-/Kleinschreibung stimmt? Vorgaben.css != vorgaben.css

Viele Grüße aus Frankfurt/Main,
Patrick

[heiner]

Hi Patrick,
mehrfach geprüft – stimmt. Trotzdem Danke.

[Patrick Andrieu]

Hallo heiner!

Wird der Inhalt der CSS-Datei beim direkten Aufruf im Browser angezeigt:

http://www.example.org/vorgaben.css

Wenn nicht, ist die Datei doch nicht vorhanden, wenn ja, wirst Du uns mehr verraten müssen, z.B. wo man sich das anschauen kann.

Viele Grüße aus Frankfurt/Main,
Patrick

[heiner]

ich hatte bis jetzt offline getestet. Müssen die Dateien dazu online sein?

Mit dem content type bin ich nicht sicher, ob ich alles richtig gemacht habe. Ich hatte zum Testen die css-datei von hier genommen, konnte aber keinen Einfluss auf mein Dokument feststellen.

grüße

[heiner]

nachtrag:

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

liegts daran?

[Patrick Andrieu]

Hallo heiner!

ich hatte bis jetzt offline getestet. Müssen die Dateien dazu online sein?

Zum Testen: nein.
Damit wir uns das anschauen: ja.

;)

Mit dem content type bin ich nicht sicher, ob ich alles richtig gemacht habe.

Für Offline-Tests auf einem Windows-PC brauchst Du dich darum nicht zu kümmern. MudGuard ging wie ich von einem Online-Problem aus. Auf dem Windows-PC hat auch die Groß-/Kleinschreibung keinen Einfluss, dennoch solltest Du Dateinamen grundsätzlich klein schreiben, um 404-Errors nach dem Hochladen auf einem Webserver zu vermeiden.

Ich hatte zum Testen die css-datei von hier genommen, konnte aber keinen Einfluss auf mein Dokument feststellen.

Welche Datei spielt erstmal keine Rolle. Meine letzte Frage lässt sich übrigens auch offline überprüfen:

Was passiert, wenn Du in die Adressszeile der Browser eingibts:

C:...\verzeichnis_deiner_webdateien\vorgaben.css ?

<meta http-equiv="content-type" content="text/html;charset=utf-8" />
liegts daran?

Nein. Aber bitte nicht XHTML- mit HTML-Schreibweise vermischen!

<link rel="stylesheet" type="text/css" href="vorgaben.css">
^^ Wenn Du nur HTML schreibst, bedarf es keinen / am Ende der meta-Angabe, aber wenn du XHTML schreibst, gehört auch hinter der link-Angabe ein /.

Viele Grüße aus Frankfurt/Main,
Patrick

[heiner]

Was passiert, wenn Du in die Adressszeile der Browser eingibts:

C:...\verzeichnis_deiner_webdateien\vorgaben.css ?

Hi Patrick,
dies hier:
{\rtf1\mac\ansicpg10000\cocoartf824\cocoasubrtf440
{\fonttbl\f0\fswiss\fcharset77 Helvetica;}
{\colortbl;\red255\green255\blue255;}
\paperw11900\paperh16840\margl1440\margr1440\vieww10540\viewh16660\viewkind0
\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\ql\qnatural\pardirnatural

\f0\fs24 \cf0 \ h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {\  font-family:Helvetica,sans-serif; }\ \ h1, h2, h3, h4 { font-size:9px; margin-bottom:18px; }\ \ p,ul,ol,li,div,td,th,address,blockquote { font-size:9px; }\ \ li { margin-top:0px; }\ \ pre { font-family:Helvetica,; font-size:9px; color:#000000; }\ \ code,kbd,tt { font-family:Helvetica,; font-size:9px; color:#000000; }\ \ var { font-style:normal; color:#0000C0; }\ \ blockquote,cite { font-style:italic; }\ \ .xmpcode { border-width:10px; border-style:solid; border-color:#EEEEEE; background-color:#FFFFE0; }\ \ .text {  font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; font-weight: normal; font-variant: normal; text-decoration: none; font-style: normal;}\

\ .Menue { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; font-weight: normal; font-variant: normal; text-decoration: none; color: #181918}\ \ a:link { color:#666666; text-decoration:none; }\ \ a:visited { color:#666666; text-decoration:none; }\ \ a:hover { color:#000000; text-decoration:none; }\ \ a:active { color:#000000; text-decoration:none; }\ \ a.an { text-decoration:none; }\ \ .unicode { font-size:9px; font-family:Arial Unicode MS,Arial,sans-serif }\ \ ins { color:#009900; font-weight:bold; text-decoration:none; }\ \ del { color:#990000; font-weight:bold; text-decoration:line-through; }\ }

beste Grüße aus Münster

[Patrick Andrieu]

Hallo heiner!

{\rtf1\mac\ansicpg10000\cocoartf824\cocoasubrtf440
{\fonttbl\f0\fswiss\fcharset77 Helvetica;}
{\colortbl;\red255\green255\blue255;}
[...]

Tut denn Safari alles escapen? Oder steht es in Deiner CSS wirklich so?

Ich wollte gerade mit meinem Safari für Windows testen, doch der trauert:

http://atomic-eggs.com/z_testdir/shots/rubbelfari.gif ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[heiner]

Hi Patrick

Tut denn Safari alles escapen? Oder steht es in Deiner CSS wirklich so?

Als Textdokument geöffnet steht da nix dergleichen, FF und Safari können da aber sowas finden.

Ich wollte gerade mit meinem Safari für Windows testen, doch der trauert:

Es gibt Safari für Windows? Irre!

Heiner

[Patrick Andrieu]

Hallo heiner!

Es gibt Safari für Windows? Irre!

Schon fast ein Jahr, anfangs mit Problemen, dann war's OK - bis heute ;)

Dass Du aber nicht auf Windows arbeitest, hättest Du erwähnen können, zumindest nach meiner zweiten Antwort.

Und ja, sowohl HTML als auch CSS solltest Du in einem reinem Texteditor schreiben, der an den Dateien nichts verändert.

Viele Grüße aus Frankfurt/Main,
Patrick

[heiner]

Hi Patrick,

sorry, ich dachte, dass das keine Rolle spielt. Irgendwo habe ich noch einen Haken in meinen Vorgaben, die nicht erkannt werden.

Ich bin leider nur Hobby-HTMLer, daher übersteigt das gerade etwas meine Möglichkeiten. Zur Not mache ich halt alles von Hand.

vielen Dank für die schnelle Hilfe und viele Grüßen ach Frankfurt.
heiner

[MudGuard]

Hi,

dies hier:
{\rtf1\mac\ansicpg10000\cocoartf824\cocoasubrtf440

Wieso speicherst Du css-Dateien als RichTextFormat (rtf) ab?

Speicher das als normalen Text ab.

cu,
Andreas

[heiner]

Hi Andreas,

räusper*, wie geht das denn? Ich hab einfach die Endung getauscht.

[MudGuard]

Hi,

räusper*, wie geht das denn? Ich hab einfach die Endung getauscht.

Hängt von der verwendeten Software ab.

cu,
Andreas

[heiner]

Hi Andreas nochmal,

habs versucht, sieht jetzt so aus:

h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {
 font-family:Arial,Helvetica,sans-serif; }

h1, h2, h3, h4,p,ul,ol,li,div,td,th,address,blockquote { font-size:12px; }

pre { font-family:Arial,Helvetica,; font-size:12px; color:#000000; }

.text {  font-family: Arial,Helvetica,sans-serif; font-size:12px; line-height: 16px; font-weight:normal;font-variant: normal;text-decoration:none; font-style:normal;}

.menue { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 16px; font-weight: normal; font-variant: normal; text-decoration: none; color: #181918}

a:link { color:#666666; text-decoration:none; font-weight:bold; }

a:visited { color:#666666; text-decoration:none; font-weight:bold; }

a:hover { color:#000000; text-decoration:none; font-weight:bold;}

a:active { color:#000000; text-decoration:none; font-weight:bold;}

a.an { text-decoration:none; }

beste Grüße
heiner

[MudGuard]

Hi,

habs versucht, sieht jetzt so aus:

h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {
font-family:Arial,Helvetica,sans-serif; }

[...]

Das sieht jetzt ok aus. Jetzt sollte es funktionieren.
Ggf. noch den Cache des Browsers austricksen.

cu,
Andreas

[Struppi]

habs versucht, sieht jetzt so aus:

Wenn keine Fehlermeldung mehr in der Fehlerkonsole erschient sollte es funktioneren.

Struppi.

[Gunnar Bittersmann]

@@heiner:

h1,h2,h3,h4,p,ul,ol,li,div,td,th,address,blockquote,nobr,b,i {
font-family:Arial,Helvetica,sans-serif; }

Du musst nicht alle Elemente aufzählen, wo es doch den universellen Selektor '*' gibt:

* { font-family: Arial, Helvetica, sans-serif }

Oder, da 'font-family' vererbt wird, einfach für 'html' oder 'body' angeben:

body { font-family: Arial, Helvetica, sans-serif }

h1, h2, h3, h4,p,ul,ol,li,div,td,th,address,blockquote { font-size:12px; }

Willst du dem Nutzer die Möglichkeit nehmen, die Schriftgröße in seinem Browser so einzustellen, dass er deinen Text auch lesen kann? Obwohl auch in px angegeben Schriftgrößen heutzutage von Browsern skaliert werden, verzichte besser auf solch eine Angabe!

Und sinnvoll dürfte das nicht sein, alle Überschriften in gleicher Schriftgröße darzustellen; die Struktur des Dokuments ist nicht mehr so leicht erkennbar.

.text {  font-family: Arial,Helvetica,sans-serif; font-size:12px; line-height: 16px; font-weight:normal;font-variant: normal;text-decoration:none; font-style:normal;}

Warum nochmals die Angaben, die du schon gemacht hattest? Das bläht das Styelesheet unnötig auf, macht es unübersichtlich und spätere Änderungen müssten an mehreren Stellen gemacht werden. Vermeide Redundanz!

Und gewöhne dir zur besseren Lesbarkeit besser einen anderen Schreibstil an: nur eine Deklaration pro Zeile:

selektor  
{  
  eigenschaft: wert;  
  eigenschaft: wert;  
}  
  
selektor  
{  
  eigenschaft: wert;  
  eigenschaft: wert;  
}

a:link { color:#666666; text-decoration:none; font-weight:bold; }

a:visited { color:#666666; text-decoration:none; font-weight:bold; }

Es ist kaum sinnvoll, dem Nutzer die wertvolle Orientierungshilfe wegzunehmen, welchen Links er schon gefolgt ist und welchen nicht. Verwende für ':link' und ':visited' unterschiedliche Farben!

Es ist auch selten sinnvoll, dem Nutzer die wertvolle Orientierungshilfe wegzunehmen, was überhaupt ein Link ist. Nutzer sind es gewöhnt, dass Links unterstrichen sind.

Live long and prosper,
Gunnar

[Marc]

Hallo Gunnar,

natürlich hast Du recht, aber miener Meinung nach dürften Deine Aussagen noch klarer / eindeutiger sein.

@@heiner:

h1, h2, h3, h4,p,ul,ol,li,div,td,th,address,blockquote { font-size:12px; }

Willst du dem Nutzer die Möglichkeit nehmen, die Schriftgröße in seinem Browser so einzustellen, dass er deinen Text auch lesen kann? Obwohl auch in px angegeben Schriftgrößen heutzutage von Browsern
skaliert werden, verzichte besser auf solch eine Angabe!

Geht in IE6 und IE7 immer noch nicht (ca 60 bis 90 Prozent der Nutzer sind damit unterwegs).

Und sinnvoll dürfte das nicht sein, alle Überschriften in gleicher Schriftgröße darzustellen; die Struktur des Dokuments ist nicht mehr [...]

erkennbar...

a:link { color:#666666; text-decoration:none; font-weight:bold; }

a:visited { color:#666666; text-decoration:none; font-weight:bold; }

Es ist []...

nicht

sinnvoll, dem Nutzer die wertvolle Orientierungshilfe wegzunehmen, welchen Links er schon gefolgt ist und welchen nicht. Verwende für ':link' und ':visited' unterschiedliche Farben!

Es ist auch selten sinnvoll, dem Nutzer die wertvolle Orientierungshilfe wegzunehmen, was überhaupt ein Link ist. Nutzer sind es gewöhnt, dass Links unterstrichen sind.

Es gibt zwar inzwischen andere Möglichkeiten, Links zu kennzeichnen. In der Regel durch Farben und Icons.

Die Darstellung bei vergrößerten Schriftarten und die Erkennbarkeit insbesondere (aber nicht nur) für Menschen mit Sehschwächen sind aber alles andere als gut...

Viele Grüße,
Marc.

[MudGuard]

Hi,

anbei der quelltext:
<link rel="stylesheet" type="text/css" href="vorgaben.css">
Die Datei liegt unter dem gleichen Namen im selben Ordner.

Wird die vorgaben.css mit dem korrekten content-type ausgeliefert?

cu,
Andreas

[Struppi]

Firefox, Opera und Safari zeigen alle das gleiche an, nämlich keinen Einfluss des vorgaben-Dokuments auf das html-dokument. Weiß jemand Rat?

Was steht im Firefox in der Fehlerkonsole?

Struppi.

[heiner]

Hi Struppi,

FF sagt: Selektor erwartet, Regelsatz wegen ungültigem Selektor ignoriert.

[Struppi]

FF sagt: Selektor erwartet, Regelsatz wegen ungültigem Selektor ignoriert.

eben.
D.h. deine CSS Datei wird durchaus gefunden, ist aber fehlerhaft.

Struppi.

[heiner]

Hallo nochmal,

besten Dank für die schnelle Hilfe! Ich habs leider noch nicht hinbekommen, hab aber jetzt einen deutlich eingegrenzten Fehlerraum.

schönes wochenende
heiner