• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Style Sheet importieren

L

LuckyEric1986

Neues Mitglied
Guten abend miteinander,

ich versuche mir im Moment selber html beizubringen und habe mir dazu ein Buch geholt. Ging bisher echt gut von der Hand, aber nun hab ich das erste Problem an dem ich zu scheitern drohe.

Ich gehe gerade ein Beispiel in meinem Buch durch indem gezeigt wird wie man externe Style Sheets importieren kann. Nur funktioniert das bei mir nich.

Hier mal mein Quellcode:

<HTML>
<HEAD>
<TITLE>Abbildung 9.4</TITLE>
<Style Type="text/css">
<!--
@import url(style.css);
LI {color: red; font-family: Verdana;}
-->
</Style>
</HEAD>
<body>
<P>Ein normaler Absatz mit blauer Schrift in Courier</P>
<P>Ein weiterer Absatz mit blauer Schrift in Courier</P>
<ul>
<LI>Eine Liste in Rot und Verdana</LI>
</ul>
</body>
</HTML>

Die Datei style.css liegt im selben Ordner wie meine Html-Datei. Die css-datei hat folgenden Inhalt: P {color: blue; font-family:Courier}

Also, wo liegt mein Fehler?
Wäre dankbar wenn mir jmd helfen kann.

mfg e
 
Achte auf Groß-/Kleinschreibung. Grundsätzlich sollten alle HTML-Elemente klein geschrieben werden. Folglich musst Du auch das "P" in der CSS-Datei klein schreiben, also "p".

Und füg noch einen Doctype ein.
 
Also in meinem schlauen Buch steht das Groß/Kleinschreibung bei html wurscht.
Hab das p in der .css datei kleine gemacht, hat auch nix geändert...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
 
Theoretisch ja, praktisch nein. Siehe: SELFHTML: HTML/XHTML / XHTML und HTML / Unterschiede zwischen XHTML und HTML

Außerdem fällt mir gerade noch auf, dass Du einen unnötigen HTML-Kommentar im style-Element verwendest. Das <!-- und --> ist dort falsch untergebracht. CSS-Code muss dort nicht maskiert werden. CSS-Kommentare sehen auch völlig anders aus.

Weiterhin ist entscheidend mit welchem Browser Du das hier versucht hast?!
 
Naja ich hab das Beispiel 1 zu 1 so aus dem Buch übernommen, wober dabei steht das dass mit dem @import bla bla bla nur beim Internetexplorer funktioniert. Ich benutze Opera 10.61.

Hab auch schon das hier versucht:

<link rel=stylesheet type="text/css" href="style.css">

Funktioniert aber auch nich...
 
LuckyEric1986;256627[... schrieb:
, wober dabei steht das dass mit dem @import bla bla bla nur beim Internetexplorer funktioniert. Ich benutze Opera 10.61.
Zum Vergrößern anklicken....
Falsch, es funktioniert nur beim IE NICHT!
Ist auch ein häufig verwendeter Trick um den IE auszuschließen.

Hab auch schon das hier versucht:

<link rel=stylesheet type="text/css" href="style.css">

Funktioniert aber auch nich...
Zum Vergrößern anklicken....

Gib den Pfad mal absolut an. Angenommen die "style.css" liegt im Root-Ordner:

<link rel="stylesheet" type="text/css" href="/style.css">

Oder:

<link rel="stylesheet" type="text/css" href="http://www.meinedomain.de/style.css">

Und setz die Eigenschaft des "rel"-Attributs ("stylesheet") in Anführungszeichen um validen Code zu erhalten.

Zur Groß- und Kleinschreibung:
Im Code ist das schnuppe, bei einem Zugriff auf externe Dateien jedoch nicht.
Das heißt "Style.css" ist eine andere Datei als "style.css" - zumindest wird es meistens so interpretiert.
 
Hallo,

dein Beispiel aus dem ersten Betrag funktioniert bei mir im Firefox, IE 6.0, Opera und Chrome. Die html-Datei und die css-Datei liegen dabei bei mir gleichen Verzeichnis.

Auf deinen Bildern hast du aber nicht einfach

HTML: 
url(style.css)
sondern

HTML: 
href="/style.css"
Druch den / sucht der Browser die css-Datei im Root-Verzeichnis. Das funktioniert nicht.

Trotzdem solltest du das Buch mit Vorsicht genießen. Es sollte eigentlich selbstverständlich sein, für die html- und css-Befehle sowie die Datei- und Verzeichnisnamen für's / im Internet nur kleine Buchstaben aus dem englischen Alphabet zu verwenden und grundsätzlich einen Doctype zu Beginn jeder html-Datei einzutragen.

Die Groß- / Kleinschreibproblematik wird sich auf deinem Rechner mit Windows kaum bemerkbar machen, da Windows die Buchstaben gleich behandelt.

Die Rechner im Internet laufen jedoch meist unter Linux. Und da sind style.css und Style.css zwei unterschiedliche Dateien, die damit natürlich auch im gleichen Verzeichnis gespeichert sein können. Du kannst zwar versuchen, die Dateinamen immer gleich zu schreiben, was die Groß- / Kleinschreibung betrifft. Aber das geht bei größeren Projekten regelmäßig schief und ist eine beliebte Fehlerquelle.

Am Beispiel von jansh Beitrag, der dir den / "eingebrockt" hat, siehst du ja schon, wie schnell im Quellcode was schieflaufen kann. Du schreibst, das die css-Datei im gleichen Verzeichnis wie die html-Datei liegt, jansh schreibt als Antwort den Befehl, wenn die css-Datei im Root-Verzeichnis liegt. Wobei das Root-Verzeichnis lokal wiederum ein anderes sein kann (nämlich das Hauptverzeichnis der Festplatte) wie bei bei Rechnern im Internet (wo es meist das höchste vom Provider zur Verfügung gestellte Verzeichnis ist).

Wobei Chrome und der IE 6.0 die style-css im Hauptverzeichnis der Festplatte finden, Firefox und Opera nicht. Deshalb sollten die Pfadangaben immer vom Verzeichnis der Datei aus bestimmt werden, in der die Datei steht.

Gruss

MrMurphy

Korrigiert nach Info von jansh: Statt css-Datei im Root-Verzeichnis hatte ich zunächst irrtümlich css-Datei ein Verzeichnis höher geschrieben.
 
Zuletzt bearbeitet:
Also so wie es im Buch steht, sollte es aber trotzdem funktionieren.

Opera hat übrigens eine sehr gute Fehlerkonsole, in der auch Fehler im CSS angezeigt werden.
Du findest sie im Menü Extras > Weiteres
 
Also ich bin ja echt dankbar für eure unterstützung, aber ich glaube langsam das irgendwas an den rahmenbedingungen nich hinhaut.
Kann einfach mal jemand den kompletten (getesteten) quellcode posten? Ich glaube irgendwie nämlich nicht das es am quellcode liegt sondern an etwas anderem.

mfg e
 
An MrMurphy:
Am Beispiel von jansh Beitrag, der dir den / "eingebrockt" hat, siehst du ja schon, wie schnell im Quellcode was schieflaufen kann.
Zum Vergrößern anklicken....
Ich hatte dazu geschrieben, dass ich als Beispiel das root-Verzeichnis nehme.
Relative Links zu Stylesheet-Dateien sind nicht das tollste. Vor allem nicht bei Template-Frameworks und mehreren Unterordnern (außer du errechnest per PHP die "../" die davor kommen).
Außerdem widersprichst du dir selbst. Erst sagst du, der "/" geht ein Verzeichnis höher, dann sagst du (richtigerweise) er verweißt auf das Root-Verzeichnis.
Danke auch an threadi.


Zum Beispiel:
An den TS: das "<link>"-Tag gehört natürlich nicht in das "<style>"-Tag. In ein Style-Tag kommen NUR und AUSSCHLIESSLICH CSS-Deklarationen und CSS-Kommetare.
Da liegt der ganze Fehler. Pack das einfach so in den "<head>" und schon klappt das ganze.

Achja: du kannst den Code übrigens auch hier einfügen, das ist leichter als ein Screenshot.
 
Zuletzt bearbeitet:
Also mein Code sieht folgendermaßen aus:

HTML: 
<HTML>
  <HEAD>
   <link rel="stylesheet" type="text/css" href="/style.css"></link>
    <TITLE>Abbildung 9.4</TITLE>
     <Style Type="text/css">
      LI {color: red; font-family: Verdana;}
     </Style>
   </HEAD>
 <body>
  <p>Ein normaler Absatz mit blauer Schrift in Courier</p>
  <p>Ein weiterer Absatz mit blauer Schrift in Courier</p>
   <ul>
    <LI>Eine Liste in Rot und Verdana</LI>
   </ul>
 </body>
</HTML>

Meine .css datei liegt im selben ordner wie die html seite und hat folgenden Inhalt.

p {color: blue; font-family:Courier}

Also entweder stimmt hier wirklich was nich, oder ich bin nur schwer von begriff :D
 
LuckyEric1986 schrieb:
Also mein Code sieht folgendermaßen aus:

HTML: 
<HTML>
  <HEAD>
   <link rel="stylesheet" type="text/css" href="/style.css"></link>
    <TITLE>Abbildung 9.4</TITLE>
     <Style Type="text/css">
      LI {color: red; font-family: Verdana;}
     </Style>
   </HEAD>
 <body>
  <p>Ein normaler Absatz mit blauer Schrift in Courier</p>
  <p>Ein weiterer Absatz mit blauer Schrift in Courier</p>
   <ul>
    <LI>Eine Liste in Rot und Verdana</LI>
   </ul>
 </body>
</HTML>

Meine .css datei liegt im selben ordner wie die html seite und hat folgenden Inhalt.

p {color: blue; font-family:Courier}

Also entweder stimmt hier wirklich was nich, oder ich bin nur schwer von begriff :D
Zum Vergrößern anklicken....

Ist "derselbe Ordner" denn gleichzeitig auch das Root-Verzeichnis?
Du hast den "/" aus meinem Beispiel genommen, aber das gilt natürlich nur, wenn die CSS-Datei im Root-Ordner liegt.
Im selben Ordner reicht: href="style.css"

Außerdem schließt das "<link>"-Tag laut XHTML-Spezifkation so: <link blala /> und nicht mit </link>.
 
Wenn Du die HTML-Datei lokal aufrufst, also nicht über http, dann lass das "/" vor "style.css" weg. Dann geht es. Habe ich eben bei mir auch so erfolgreich getestet.
 
Bei mir geht nix, ich hau das ding gleich an die wand...
sieht nun so aus, geht nix... weder mit opera, ie, firefox, chrome oder safari

HTML: 
<HTML>
  <HEAD>
   <link rel="stylesheet" type="text/css" href="style.css">
    <TITLE>Abbildung 9.4</TITLE>
     <Style Type="text/css">
      LI {color: red; font-family: Verdana;}
     </Style>
   </HEAD>
 <body>
  <p>Ein normaler Absatz mit blauer Schrift in Courier</p>
  <p>Ein weiterer Absatz mit blauer Schrift in Courier</p>
   <ul>
    <LI>Eine Liste in Rot und Verdana</LI>
   </ul>
 </body>
</HTML>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben