Getränke = Getränke - Warum? Bitte um Hilfe.

[Fischwaage]

Hallo Leute,

ich steige grade in die HTML & CSS Materie ein. Habe mir dazu das Buch "HTML mit CSS & XHTML von Kopf bis Fuss" gekauft.

Finde das Buch bisher wirklich super geil - okay ich bin erst bei Seite 20 aber...hey, bisher is alles cool und super verständlich!

Nun habe ich aber leider ein Problem das im Buch nicht erwähnt wird bzw. gar nicht auftritt!

Also...
Bin grade auf Seite 20 und dort stellt mir das Buch folgende Aufgabe:

Ich soll einen Text - nämlich diesen hier:

Getränke bei Sternback-Kaffe

Hausmischung, € 1.49
Eine feine, milde Mischung verschiedener Kaffeesorten aus Mexiko, Bolivien und Guatemala.

Mokka Cafè Latte, € 2.35
Espresso, heiße Milch und Schokosirup.

Cappucino, € 1.89
Eine Mischung aus Espresso, heißer Milch und Milchschaum.

Chai-Tee, € 1.85
Eine würzige Melange aus schwarzem Tee, Gewürzen, Milch und Honig.


In einen einfachen Text Editor reinschreiben und das ganze dann als .html abspeichern!

Ich benutze einen iMac und daher MacOSX Snow Leopard. Im Buch wird mir auch gezeigt welches Programm ich dafür nehmen soll (TextEdit auf dem Mac) und mir wurde sogar erklärt was ich für Einstellungen vorher in dem Programm machen soll....

Das habe ich auch alles genau wie beschrieben gemacht!

Das Problem jetzt:
Wenn ich diese einfache HTML Seite nun in meinem Browser (Safari) aufrufe, habe ich Probleme mit den Umlauten! Also mit den Ä,Ü,ß usw...

Das ganze sieht so aus:
Getränke bei Sternback-Kaffe Hausmischung, € 1.49 Eine feine, milde Mischung verschiedener Kaffeesorten aus Mexiko, Bolivien und Guatemala. Mokka Cafè Latte, € 2.35 Espresso, heiße Milch und Schokosirup. Cappucino, € 1.89 Eine Mischung aus Espresso, heißer Milch und Milchschaum. Chai-Tee, € 1.85 Eine würzige Melange aus schwarzem Tee, Gewürzen, Milch und Honig.

Im Buch hingegen ist ebenfalls eine Abbildung wie es aussehen soll und dort sind diese Probleme mit den Ä,Ü und ß nicht....

Was hab ich den nun schon falsch gemacht?

Würde mich sehr freuen wenn man mir helfen kann damit ich fleissig weiter lernen kann.

 

[delimiter]

Hi,

das ist ein klassisches Problem mit den Umlauten. Versuch es doch mal bitte in der ersten Zeile mit:

<?xml version="1.0" encoding="utf-8"?>

und erst in Zeile 2 das HTML-Element.

Und schreib mal bitte, ob Du einen DOCTYPE gesetzt hast (im HTML oben) und wie Dein HTML-Element aussieht. Eventuell einfach mal des gesamten Inhalt des Dokuments posten.



Gruß,
delimiter

 

[Fischwaage]

Hi,

das ist ein klassisches Problem mit den Umlauten. Versuch es doch mal bitte in der ersten Zeile mit:

<?xml version="1.0" encoding="utf-8"?>

und erst in Zeile 2 das HTML-Element.

Und schreib mal bitte, ob Du einen DOCTYPE gesetzt hast (im HTML oben) und wie Dein HTML-Element aussieht. Eventuell einfach mal des gesamten Inhalt des Dokuments posten.



Gruß,
delimiter

Öhm *hust*

Soweit bin ich im Buch noch nicht
Ich wende noch absolut keinen Code Schnipsel an! Das kommt erst auf der nächsten Seite!
Laut Buch sollte ich erstmal nur diesen Text (siehe oben) in den Editor tippen und als .html abspeichern und mir dann mit einem Browser angucken.

Und im Buch ist dann auch ein Screenshot wie es aussehen soll...ohne diese ganzen Fehlerhaften Zeichen halt...
Wieso krieg ich das den noch nicht einmal hin?

 

[Raziel1]

Öhm *hust*

Soweit bin ich im Buch noch nicht
Ich wende noch absolut keinen Code Schnipsel an! Das kommt erst auf der nächsten Seite!
Laut Buch sollte ich erstmal nur diesen Text (siehe oben) in den Editor tippen und als .html abspeichern und mir dann mit einem Browser angucken.

Und im Buch ist dann auch ein Screenshot wie es aussehen soll...ohne diese ganzen Fehlerhaften Zeichen halt...
Wieso krieg ich das den noch nicht einmal hin?

Tja, da lässt dein Buch aber schon zu Beginn was ganz wichtiges weg. Sonderzeichen werden je nach angegebener Zeichencodierung (und besonders wenn diese nicht erfolgt) oder wenn der Browser sie nicht unterstützt oder korrekt erkannt hat, nicht korrekt wiedergegeben. Daher muss man sogenannte Entities verwenden um diese Zeichen sicher einsetzen zu können. Besonders wichtig ist dies bei Zeichen, die so auch als Teil von HTML verwendet werden und zu Fehlinterpretationen führen können.

http://de.selfhtml.org/html/allgemein/zeichen.htm

 

[Fischwaage]

Danke für eure Hilfe.
Habe in einem anderen Forum soeben auch einen Tipp bekommen, den ich euch bzw. Leuten die diesen Fehler eventuell auch haben, nicht vorenthalten will:

So sieht das aus, wenn der Browser den Multibyte utf-8 bekommt aber selber einen festen 1 Byte Zeichensatz nutzt.

Stell alles auf utf-8 ein, dann gehts wieder.

(Ich musste in den Safari Einstellungen einfach utf-8 einstellen...nun wird es korrekt angezeigt! Juhu, endlich kann ich weiter machen )

 

[Fischwaage]

Bin nun 2 Seiten weiter...
jetzt gehts direkt schon mit CSS los und wieder habe ich Problem!

Ich soll folgendes in meine Seite einbauen:

<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted grey;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}

</style>

Okay - Null Problemo! Habe alles verglichen usw. bei mir steht nun genau derselbe Code in der Datei wie auch im Buch!

Das Problem:
Auf dem Bild im Buch endet die Umrahmung auch genau nach dem letzten Text Absatz!
Bei in Safari hingegen geht der Rahmen runter.....runter bis ans Seitenende!

Woran kann das nun schon wieder liegen?
Ahh...macht mich verrückt...ich mache alles richtig und genau wie dort beschrieben und trotzdem kriege ich ein verfälschtes Resultat!

Hier mal der komplette Code:

<html>
<head>
<title>Sternback Kaffee</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted grey;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}

</style>
</head>

<body>
<h1>Getränke bei Sternback-Kaffe</h1>

<h2>Hausmischung, € 1.49</h2>
<p>Eine feine, milde Mischung verschiedener Kaffeesorten aus Mexiko, Bolivien und Guatemala.</p>

<h2>Mokka Cafè Latte, € 2.35</h2>
<p>Espresso, heiße Milch und Schokosirup.</p>

<h2>Cappucino, € 1.89</h2>
<p>Eine Mischung aus Espresso, heißer Milch und Milchschaum.</p>

<h2>Chai-Tee, € 1.85</h2>
<p>Eine würzige Melange aus schwarzem Tee, Gewürzen, Milch und Honig. </p>
</body>

</html>

Wie gesagt....im Bild im Buch endet der Rahmen direkt nach dem "Honig" Absatz...
Bei mir in Safari jedoch geht er bis an Seitenende!

 

[SteveNichtJobs]

Nach dem Absatz ist doch Seitenende!

 

[Raziel1]

Das liegt daran, dass du vergessen hast eine Doctype zu setzen.

Füge diese Zeile hier an den Anfang der Datei (direkt über dem html-tag):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Eine Dokumentendeklaration muss immer vorhanden sein, da sie dem Browser sagt, was für eine Art von Dokument nun folgt. Schließlich gibt es da ja alleine bei HTML zig Varianten und Versionen (HTML4, XHTML 1.0, XHTML 1.1, HTML5 etc..)
Wenn du nichts dergleichen angibst, oder der Browser es nicht erkennt (dafür reicht teilweise schon eine kleiner Fehler in dem HTML) dann schaltet der Browser in den sogennanten Quirks Modus und versucht mehr oder minder, die Seite selbstständig zu interpretieren, was zu Darstellungsproblemen führen kann

ps: Deine Lösung mit dem Umstellen auf UTF-8 in Safari ist leider nicht wirklich eine gute. Denn es wird nicht jeder Internetuser, der später deine Seite besucht, seinen Browser extra für dich neu konfigurieren wollen, damit er alles richtig Angezeigt bekommt

So sieht dein Dokument richtig aus:
Probiere es aus! Habe dir den Text leicht verändert damit mehr Umlaute vorkommen und du siehst, das es nun richtig angezeigt wird. Stelle dafür im Safari aber erstmal wieder alles zurück

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Sternback Kaffee</title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted grey;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>

<body>
<h1>Getränke bei Sternback-Kaffe</h1>

<h2>Hausmischung, € 1.49</h2>
<p>Eine feine, milde Mischung süßer Kaffeesorten aus Mexiko, Bolivien und Guatemala.</p>

<h2>Mokka Cafè Latte, € 2.35</h2>
<p>Espresso, heiße Milch und Schokosirup.</p>

<h2>Cappucino, € 1.89</h2>
<p>Eine Mischung aus Espresso, heißer Mädels und Milchschaum.</p>

<h2>Chai-Tee, € 1.85</h2>
<p>Eine würzige Melange aus schwarzem Tee, Gewürzen, Milch und Honig. </p>
</body>

</html>

 

[Fischwaage]

EDIT: Erledigt

 

[Paul_]

Um noch einmal auf Doctype zurückzukommen: Mit Blick in die Zukunft lohnt es sich bald bestimmt HTML5 zu nutzen.
Bereits jetzt in allen Browsern funktionierend und W3C-valide ist die folgende Schreibweise:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

Viel Erfolg, Fischwaage, nur nie aufgeben.