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

Erster Befehl wird nicht angenommen...

K

Kowalski

Neues Mitglied
Hallo,

ich bin noch ziemlicher HTML/CSS Neuling und habe eine (wahrscheinlich leicht zu beantwortende) Frage. Ich habe von meiner Lernseite HTML lernen und die eigene Homepage erstellen - HTML Kurs / Seminar eine Aufgabe nachgearbeitet aber es lädt nicht den ersten von vier CSS Befehl:

inhalt.htm:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  <title>Übungsseite über das Thema Fussball</title>
  <link href="design.css" type="text/css" rel="stylesheet" />

</head>
<body>


<div id="kopfbereich">
Säulenbauten des 20. Jahrhunderts
</div>

<div id="steuerung">
Steuerung
</div>

<div id="schatten">
Hier kommt der Schatten später
</div>

<div id="inhalt">
Der eigentliche Inhaltsbereich
</div>



</body>
</html>
Und die dazugehörende design.css:
Code: 
<style type="text/css">
<!--

#kopfbereich {
  background-color: red;
    }


#steuerung {
    background-color: yellow;
    }
    
#schatten {
    background-color: green;
    }
    
#inhalt {
    background-color: orange;
    }
-->
Und jetzt im Endeffekt zeigt es nur die letzten 3 CSS Befehle an.
Säulenbauten des 20. Jahrhunderts ist die Hindergrundfarbe weiß, also es ist nicht passiert und bei den anderen drein zeigt es die Farben der Befehle an.

Warum ist das so? Was habe ich falscht gemacht?
Ich habe sogar den kompletten Code von der Übungsseite kopiert, aber es bleibt so.

Danke und Gruß
Kowalski
 
CSS ist keine Programmiersprache. Folglich geht es auch nicht um Befehle sondern um CSS-Eigenschaften.

In deiner CSS-Datei steht HTML-Code. Der hat dort nichts zu suchen. Also raus damit.
 
Ok, wieder was gelernt.

Aber wo ist in meiner CSS-Datei ein HTML-Code?
Und meinst du ohne diesen würde das ganze funktionieren?
 
Das

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

am Anfang und das

Code: 
-->

am Ende ist HTML-Code. Und der gehört generell nicht in eine CSS-Datei. Und natürlich würde es ohne den funktionieren.
 
Die Kommentare (<!---/-->) sind in HTML zulässig, aber nicht mehr in XHTML. Die css-Auszeichnung mit Kommentaren hat sich allerdings überholt, da es kaum mehr Browser geben dürfte, vor denen man css verstecken müsste (genau das hat man in den Anfangszeiten von css mit den Kommentaren erreicht). Die gezeigte Auszeichnung entstammt u.a. dem Generator des genannten Kurses, ebenfalls in einer XHTML-Datei.
Grüsse
low
 
Was Du sagst beträfe aber die Einbindung von CSS innerhalb der HTML-Datei. Er hat aber eine externe CSS-Datei verwenden, wo keinerlei HTML-Code zulässig ist. Für Kommentare dort gibt es CSS-Kommentare.
 
Das würde überhaupt keinen Sinn machen! Einen Code den man nicht Kommentieren kann, kann ich mir nicht vorstellen. Was wäre das bloß für ein Durcheinander?
 
lowsaxonian schrieb:
Die Kommentare (<!---/-->) sind in HTML zulässig, aber nicht mehr in XHTML.
Zum Vergrößern anklicken....
Wenn Du weißt, wie Kommentare definiert sind, dann wüsstest Du, was an Deiner Aussage falsch ist.
Du schreibst "<!---", das ist natürlich in XHTML falsch, weil das kein Kommentar ist! Kommentare sind so definiert: "<!--", mit nur zwei Bindestrichen. Und genau so müssen sie in XHTML aussehen.

@Kowalski: Wenn Dir Dein HTML-Kurs den HTML-Code so vorgeschlagen hat, dann würde ich den Kurs sofort wegwerfen, denn dann macht der den Fehler, den momentan viele machen. Anstatt Dir HTML beizubringen, versucht er Dir wohl zuerst CSS beizubringen. Das ist für einen Anfänger aber sehr schwer, weil Du dann hinterher HTML nochmal neu lernen musst. Worauf ich hinaus will? Die Auszeichnung von Text mit <div> ist schlichtweg falsch und sollte in einem seriösen HTML-Kurs so nicht auftauchen.

Ich würde mal hier einen Blick reinwerfen: Einführung | Webdesign mit XHTML und CSS
 
Efchen schrieb:
mit nur zwei Bindestrichen.
Zum Vergrößern anklicken....
Sorry, hab ich nicht aufgepasst, sollten natürlich nur zwei Bindestriche sein ! Hin und wieder haben meine Finger die Tastatur nicht 100%ig im Griff - da bin ich glücklicherweise nicht der Einzige...
Tatsächlich wird dieser Code in genau dieser Weise als XHTML-Dokument vom Generator dieses Kurses vorgegeben.

@ Threadi
Ich habe nicht behauptet, dass css kommentiert wird, sondern dass (in den Anfangszeiten von css) eben dieses css mit eben diesen Kommentaren vor Browsern "versteckt" wurde, die mit css nichts anfangen können.
selfhtml.org schrieb:
Damit ältere Web-Browser, die keine Stylesheets kennen, den Inhalt des style-Elements nicht irrtümlich als anzuzeigenden Text interpretieren, können Sie den Inhalt in einen HTML-Kommentar (<!-- ... -->) einbinden(...)
Zum Vergrößern anklicken....
Gleichgültig, ob Stylesheet in externer Datei oder nicht.

Wenn Du den Code, exact so, wie er am Threadstart steht, in den css-w3c-Validator lädst, wird er -trotz der Kommentare- als valide angesehen. Ohne wenn und aber.
Ich distanziere mich selbstverständlich und ausdrücklich von dieser durchaus noch gängigen Praxis und sage lediglich, dass dies so ist, nicht dass ich es so anwende, nicht, dass ich es für richtig befinde und auch nicht, dass ich Fan dieser Praxis bin.
Ich habe auch nicht behauptet, es gäbe in XHTML keine Kommentare mehr gibt - OK, ich habe auch nicht geschrieben, dass Kommentare in XHTML anders ausgezeichnet werden. Mein Fehler. Ich bin halt nicht fehlerfrei. Tut mir leid. Wirklich.



Grüsse
low
 
lowsaxonian schrieb:
Ich habe nicht behauptet, dass css kommentiert wird, sondern dass (in den Anfangszeiten von css) eben dieses css mit eben diesen Kommentaren vor Browsern "versteckt" wurde, die mit css nichts anfangen können.

Gleichgültig, ob Stylesheet in externer Datei oder nicht.
Zum Vergrößern anklicken....
Und eben das ist falsch, das hat threadi gesagt. In ein externes Stylesheet darf kein HTML und somit auch keine HTML-Kommentare!

Wenn Du den Code, exact so, wie er am Threadstart steht, in den css-w3c-Validator lädst, wird er -trotz der Kommentare- als valide angesehen. Ohne wenn und aber.
Zum Vergrößern anklicken....
Fehler im Validator ;-)

Ich habe auch nicht behauptet, es gäbe in XHTML keine Kommentare mehr gibt
Zum Vergrößern anklicken....
Wie würdest Du das hier interpretieren?
lowsaxonian schrieb:
Die Kommentare (<!---/-->) sind in HTML zulässig, aber nicht mehr in XHTML.
Zum Vergrößern anklicken....

:-)
 
Efchen schrieb:
@Kowalski: Wenn Dir Dein HTML-Kurs den HTML-Code so vorgeschlagen hat, dann würde ich den Kurs sofort wegwerfen, denn dann macht der den Fehler, den momentan viele machen. Anstatt Dir HTML beizubringen, versucht er Dir wohl zuerst CSS beizubringen. Das ist für einen Anfänger aber sehr schwer, weil Du dann hinterher HTML nochmal neu lernen musst. Worauf ich hinaus will? Die Auszeichnung von Text mit <div> ist schlichtweg falsch und sollte in einem seriösen HTML-Kurs so nicht auftauchen.

Ich würde mal hier einen Blick reinwerfen: Einführung | Webdesign mit XHTML und CSS
Zum Vergrößern anklicken....

Ich habe in meinem Kurs zuerst HTML gelernt und dann CSS.
Und die Auszeichnung vom Text mit <div> sollte so gemacht sein das man ungefähr weiß wie es später aussehen soll von der Gliederung her. Das war nur der erste Schritt, man würde das nachher ersetzen. Aber jetzt habe ich schon in diesem ersten Schritt ein Problem und im Moment auch noch keine richtige Lösung hier gefunden (sorry falls ich was überlesen habe, aber ist ein wenig durcheinander hier geworden :P)

Gruß
Kowalski
 
Kowalski schrieb:
Und die Auszeichnung vom Text mit <div> sollte so gemacht sein das man ungefähr weiß wie es später aussehen soll von der Gliederung her. Das war nur der erste Schritt, man würde das nachher ersetzen.
Zum Vergrößern anklicken....
Das ist zwar so grundsätzlich nicht falsch, aber ich würde sowas nie einem Anfänger erklären, weil das das Verständnis von HTML nicht einfacher macht. Anfänger gewöhnen sich so an, erstmal alles in <div> zu schreiben, was semantisch falsch und nicht im Sinn von HTML ist, und ändern es hinterher nicht mehr - weils ja auch gut dargestellt wird. Aber das HTML nichts mit der Darstellung zu tun hat, und die Semantik wichtig ist, darauf wird nicht entscheidend eingegangen.
Schöner wäre es hier gewesen, man verwendet einfach <p>, das wäre die Auszeichnung für Text und würde sich quasi genauso verhalten.
Nun gut. Das nur dazu.

Aber jetzt habe ich schon in diesem ersten Schritt ein Problem und im Moment auch noch keine richtige Lösung hier gefunden
Zum Vergrößern anklicken....
Der letzte Hinweis war der, dass in einem externen Stylesheet kein HTML stehen darf.

Wenn Du uns einen Link zur Seite gibst, können wir zeitgleich mit Deinen Antworten auch immer prüfen, ob Du alles richtig umgesetzt hast. So weiß ich jetzt natürlich nicht, was derzeit Stand der Dinge ist und kann Dir deshalb nicht weiterhelfen.
 
Ok, ich habe jetzt den HTML-Teil gelöscht und es funktioniert. Danke an alle hier die mir geholfen haben!
Übungsseite über das Thema Fussball

Ich wollte jetzt aber doch nochmal auf Nummer sicher gehen und habe das nochmal auf meiner Lernseite nachgelesen...
Ich habe das falsch gemacht, auf der Seite steht es richtig.

Zum Auslagern werden 2 Dinge benötigt. Als erstes eine neue Datei, ich nenne diese design.css (kann aber auch beliebig anders heißen) und als zweites einen Verweis darauf in der HTML-Datei, die diese ausgelagerte Datei nutzen soll.
Verweis in der HTML-Datei:
Dieser Verweis sollte im head-Bereich eingegeben werden.

<link href="design.css" type="text/css" rel="stylesheet" />
So, nun erstellen wir eine neue Datei mit dem Namen "design.css".

Inhalt:
Code: 
h1 {

       color:red;
    letter-spacing:30px;
 }
Unbedingt auf Leerzeichen achten, und als Klammern kommen hier die geschweiften zum Zuge!! So, Datei abspeichern und im HTML Editor zurück zur ursprünglichen Internetseite.
Zum Vergrößern anklicken....
 
Auf einmal gehts dann, gell? ;-)

Übrigens muss man im Stylesheet nicht auf Leerzeichen achten, zumindest nicht in dem Code. Ist mir nur so aufgefallen. Mit Einrückung ist es aber natürlich übersichtlicher.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben