Wieso hat meine Seite so viele Fehler?

[nikl]

Hi

ich habe für einen kleinen Laden eine Homepage erstellt. Hierbei handelt es sich nur um eine kleine Seite, die selten aktualisiert und besucht wird und die eigentich auch nur existiert damit man sagen kann: wir sind im Netz

Daher war ich und die Ladenbetreiber mit der Seite eigentlich auch immer zufrieden. Jetzt musste ich aber feststellen, dass die Seite in Firefox absolut falsch dargestellt wird. Ich hatte damals schon mit w3 validation angefangen, nachdem ich aber über 100 Fehler in der Seite hatte, hab ich es dann einfach gelassen. Im IE gings ja auch so ohne Probleme.

Ich wüsste nur gerne, wie solche Fehler zusammenkommen?
Ich hab von html oder Homepage-Erstellen nicht viel Ahnung und mich mit Foren und Tutorials durchgeschlagen. Aber die Fehlerbeschreibungen helfen mir einfach nicht weiter. Bzw weiß ich dann trotzdem nicht, wie ich den Fehler jetzt loswerde.

Naja, das ist die Seite: Beate Uhse Schweinfurt und die Startseite sollte eigentlich so aussehen:

Wäre sehr dankbar, wenn mir jemand sagen könnte, warum meine Seite so fehlerhaft ist. Danke!

 

[ingoS]

Das hat mehrere Gründe:

• Der Doctype passt nicht zum Inhalt der Seite: Du verwendest mehrere IFrames, das macht das Ganze aber noch nicht zum Frameset.
• Du hast den head-Tag vorzeitig geschlossen, danach aber weitere Sachen wie style und script geschrieben, die eigentlich noch reingehörten.
• Die ersten beiden Punkte zusammen erzeugen die folgenden zehn Fehler, die du beheben solltest: [Invalid] Markup Validation of http://www.bu-sw.de/ - W3C Markup Validator
• In der Kategorie "Websitecheck" sollen fertige Webseiten bewertet werden, Hilfe zu deinen Problemen findest du am ehesten unter "HTML und XHTML". Ich habe das Thema dorthin verschoben.

Abschließend möchte ich noch bemerken, dass der Code im Moment nicht nur aus syntaktischer sondern auch aus semantischer Sicht ein Debakel ist, aber das wird wohl nicht Ursache der Darstellungsfehler sein. ;)

 

[Efchen]

Ich wüsste nur gerne, wie solche Fehler zusammenkommen?
Ich hab von html oder Homepage-Erstellen nicht viel Ahnung

Das sollte Deine Frage beantworten.
Auch wenn ich das mit einem Schmunzeln beantworte - aber wahr ist es dennoch.

Aber die Fehlerbeschreibungen helfen mir einfach nicht weiter.

Das ist die Folge aus dem Unwissen.

Lerne HTML und CSS und schreib die Site neu. Die enthält ja von der Vorgehensweise noch viel mehr Fehler, als der Validator syntaktische aufzählen kann.

 

[Bernhard]

Hi

ich habe für einen kleinen Laden eine Homepage erstellt. Hierbei handelt es sich nur um eine kleine Seite, die selten aktualisiert und besucht wird und die eigentich auch nur existiert damit man sagen kann: wir sind im Netz

Daher war ich und die Ladenbetreiber mit der Seite eigentlich auch immer zufrieden.

Hallo Nikl,

nicht wirklich, oder?

Bei dem Thema sollte die Site mehrere tausend Besucher täglich haben und
richtig Umsatz generieren!

Jetzt musste ich aber feststellen, dass die Seite in Firefox absolut falsch dargestellt wird. Ich hatte damals schon mit w3 validation angefangen, nachdem ich aber über 100 Fehler in der Seite hatte, hab ich es dann einfach gelassen. Im IE gings ja auch so ohne Probleme.

Im IE teste ich eine Seite erst, wenn sie von anderen Browsern korrekt dargestellt wird.

Ich wüsste nur gerne, wie solche Fehler zusammenkommen?
Ich hab von html oder Homepage-Erstellen nicht viel Ahnung und mich mit Foren und Tutorials durchgeschlagen. Aber die Fehlerbeschreibungen helfen mir einfach nicht weiter. Bzw weiß ich dann trotzdem nicht, wie ich den Fehler jetzt loswerde.

Naja, das ist die Seite: Beate Uhse Schweinfurt und die Startseite sollte eigentlich so aussehen:

Wäre sehr dankbar, wenn mir jemand sagen könnte, warum meine Seite so fehlerhaft ist. Danke!

Ich sag sowas eher selten, aber hier ist es der einzige sinnvolle Weg:
einstampfen und komplett von vorne anfangen!

Da macht eine wirklich gute und gut von Suchmaschinen auffindbare Website
wirklich Sinn!

Grüße
Bernhard

 

[sysop]

ich versuche es mal anders als die anderen..

du setzt ein style-sheet ein, wieso sind dann noch style angaben in der seite selbst. eleminiere die style angaben mal und shieb den style code in dein css-file.

die tabelle ist das, was von efchen als schwerer fehler bezeichnet wird. tabellen für tabellarische werte, text und grafiken, schlicht gesagt, einfaches layout, macht man über css. nun bekjommst du ja nicht mal das layout mit einer tabelle hin, folgelich....

ein background ist eine style angabe und sollte daher im css file unter gebracht werden. oder anders:

<td class="tdstyle">

im style dann

.tdstyle
{
   height:24px;
   align:left;
   vertical-align: middle;   
   background-image:url(images/body_main_header.gif)
}

ansonsten, wenn das mal alles soweit bereinigt ist, neu validieren und die anderen fehler beheben, dann hast du zeit dir html, css und alles was man so braucht anzueignen und das ganze besser zu machen.

 

[nikl]

Ok, danke, da hab ich ja noch einiges zu tun.

Ich bin jetzt dabei die Style Elemente aus den html Dateien zu nehmen und alles im Stylesheet unterzubringen.

Dabei bin ich auf folgende Probleme gestoßen, evtl kann mir dazu nochmal jemand weiter helfen:

1. Doctype:

Woher weiß ich, was für einen Doctype ich brauche. Meiner Meinung nach bleiben eigentlich nur HTML Transitional oder XHTML Transitional. Also

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

bzw

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

Aber was ist jetzt korrekt?

2. Scrollbar anpassen:

Ich würde die Farben der Scrollbalken gerne anpassen. Eigentlich war dies auch direkt in der html Datei festgelegt. Jetzt weiß ich nicht, wie das im Stylesheet definiert werden muss. Den Code

{
scrollbar-face-color: #EAEAEA;
scrollbar-shadow-color: #EAEAEA;
scrollbar-highlight-color: #EAEAEA;
scrollbar-3dlight-color: #EAEAEA;
scrollbar-darkshadow-color: #697074;
scrollbar-track-color: #F7F7F7;
scrollbar-arrow-color: #666666;
background-color: #ce0000;
background-image: url();
}

einfach ins Stylesheet zu kopieren, geht nicht.

3. Zu sysop's Post:

Damit ich das auch richtig verstehe: Man ordnet der Tabelle hier den Style "tdstyle" zu, oder?

Wenn ich im Stylesheet jedoch

.tdstyle
{
height:24px;
align:left;
vertical-align: middle;
background-image:url(images/body_main_header.gif)
}

eingebe, erscheint folgende Fehlermeldung: Die Eigenschaft align existiert nicht : left

 

[Efchen]

Woher weiß ich, was für einen Doctype ich brauche.

Das liegt daran, welchen HTML-Dialekt Du verwenden willst. Zwischen HTML und XHTML gibt es z.B. auch einige syntaktische Unterschiede, die zu beachten sinnd.

Meiner Meinung nach bleiben eigentlich nur HTML Transitional oder XHTML Transitional.

Besser als Transitional sind die Strict-Varianten, weil die eben noch viel strikter sind in der Syntax. Da kann man noch mehr sauberes Arbeiten lernen. "Transitional" heißt ja vom Wort her "übergangsweise", das ist also brauchbar, wenn Du eine alte Site umstellst und nicht sofort alles umstellen kannst.
Außerdem kommt es darauf an, ob der Doctype die Browser in den Quirks oder Standards Mode versetzt. Der IE hat im Quirks Mode ein anderes Box Model, Darstellungsunterschiede sind damit garantiert.
Man sollte schauen, dass die Browser im Standards Mode arbeiten. Wobei ein Firefox im Quirks Mode immer noch besser ist, als ein IE (wahrscheinlich sogar als ein IE im Standards Mode ;-))

Aber was ist jetzt korrekt?

Es ist Deine Entscheidung. Es gibt keinen "korrekten" Doctype. Wären einige davon falsch, warum gäbe es sie dann?

Ich würde die Farben der Scrollbalken gerne anpassen.

Ich nicht. Und viele Benutzer auch nicht, vor allem DAUs. Die suchen dann ihren Scrollbalken und finden ihn nicht.
Zum Glück ist das kein Standard von CSS und funktioniert auch nur in einigen Browsern (IE, Konqueror, und noch einer: Safari oder Opera?).
Ich möchte Dir dazu raten, von dem Vorhaben Abstand zu nehmen, weil das die Nutzerfreundlichkeit senkt.

Jetzt weiß ich nicht, wie das im Stylesheet definiert werden muss.

Genauso, wie alles andere auch. Das, was vorher in einem <style>-Block gestanden hat, kannst Du ja unverändert in ein externes Stylesheet übernehmen (ohne die Tags natürlich).
Vor Deinem Code fehlt natürlich der Selektor, also "body { ... }".

Die Eigenschaft align existiert nicht

Richtig. Das war wohl ein Type. Es gibt nur "text-align", aber das hättest Du sicher auch selbst herausfinden können?

 

[nikl]

Es ist Deine Entscheidung. Es gibt keinen "korrekten" Doctype. Wären einige davon falsch, warum gäbe es sie dann?

Ich meinte eher "korrekt für meine Seite" aber deine Antwort macht deutlich, dass auch das nicht so ohne weiteres beantwortet werden kann.

Genauso, wie alles andere auch. Das, was vorher in einem <style>-Block gestanden hat, kannst Du ja unverändert in ein externes Stylesheet übernehmen (ohne die Tags natürlich).
Vor Deinem Code fehlt natürlich der Selektor, also "body { ... }".

Danke! Langsam entsteht bei mir ein minimales Grundverständnis ... glaub ich.
Aber auch so:

Body {
scrollbar-face-color: #EAEAEA;
scrollbar-shadow-color: #EAEAEA;
scrollbar-highlight-color: #EAEAEA;
scrollbar-3dlight-color: #EAEAEA;
scrollbar-darkshadow-color: #697074;
scrollbar-track-color: #F7F7F7;
scrollbar-arrow-color: #666666;
background-color: #ce0000;
background-image: url();
}

klappt es leider nicht.

Richtig. Das war wohl ein Type. Es gibt nur "text-align", aber das hättest Du sicher auch selbst herausfinden können?

Richtig! Hab ich auch gerade :) Trotzdem danke!

 

[Efchen]

Ich meinte eher "korrekt für meine Seite" aber deine Antwort macht deutlich, dass auch das nicht so ohne weiteres beantwortet werden kann.

Genau.
Aber empfehlen würde ich Dir entweder HTML4.01 Transition mit URL für ältere Seiten oder für Leute, die glauben, sie schaffen meine zweite Empfehlung nicht. Oder eben XHTML 1.0 Strict. Strict aus den oben genannten Gründen.

Aber auch so: klappt es leider nicht.

Es gibt ja auch kein Element "Body". Das heißt "body".

 

[nikl]

Danke für deine Antwort, du warst echt schon hilfreich!

Es gibt ja auch kein Element "Body". Das heißt "body".

Ich hatte auch "body" geschrieben, sorry. Hab mittlerweile auch "html" und "html, body, textarea" versucht, aber aus irgend einem Grund wird es als fehlerhaft angezeigt. Und die Scrollbars bleiben natürlich farblos.

Laut selfhtml soll es ja in etwa so aussehen:

html, body, textarea {
background-color:#8C8CC6;
color:#FFFFFF;
font-family:"Andale Mono",Arial,sans-serif;
scrollbar-base-color:#8C8CC6;
scrollbar-3d-light-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#000000;
scrollbar-face-color:#8C8CC6;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#000000;
scrollbar-track-color:#ACACE6;
}

Und bei mir sieht es so aus:

html, body, textarea {
scrollbar-face-color: #EAEAEA;
scrollbar-shadow-color: #EAEAEA;
scrollbar-highlight-color: #EAEAEA;
scrollbar-3dlight-color: #EAEAEA;
scrollbar-darkshadow-color: #697074;
scrollbar-track-color: #F7F7F7;
scrollbar-arrow-color: #666666;
background-color: #ce0000;
background-image: url();
}

Ich weiß nicht, was hier falsch ist..

 

[Efchen]

Ich weiß nicht, was hier falsch ist..

dann hast Du aber :-) Tomaten auf den Augen!

base-color -> face-color
3d-light-color -> 3dlight-color

Du schreibst, es wird als fehlerhaft angezeigt? Wer tut das? Ein CSS-Validator? Das ist richtig, denn das ist ja auch eine proprietäre EIgenschaft, die nicht zum Standard gehört!

 

[nikl]

Sowohl scrollbar-base-color als auch scrollbar-face-color werden hier definiert, es bleibt aber meine Entscheidung, ob ich beides einfärbe oder nicht. scrollbar-3d-light-color habe ich aber tatsächlich falsch geschrieben Aber deswegen würden die anderen Farben ja trotzdem angezeigt werden, oder?

Ja, ich habe es durch einen CSS Validator laufen lassen. Aber unabhängig vom Validator Ergebnis, farbig angezeigt wird der Scrollbar einfach nicht.

EDIT: Ach ja, und ob zwischen dem Text und dem Zahlenwert ein Leerzeichen ist oder nicht, ist laut diversen Foren egal. Aber da kennst du dich mit Sicherheit eh aus ;)


Übrigens, wenn ich mich jetzt für xhtml strict als Doctype entscheide, kann ich die iframes dann überhaupt noch nutzen?
Ich hoff ich nerv nicht zu sehr! Für heute ist eh genug, wünsch dir ein schönes Wochenende, Efchen!

 

[Efchen]

Nein, ab XHTML 1.0 Strict gibt es keine Frames mehr.
Aber warum würde jemand Frames benutzen wollen, wo sie doch nur Nachteile haben und die vermeintlichen Vorteile auch auf andere Weise umgesetzt werden können?

Woran das mit dem Scrollbalken liegt, weiß ich nicht. Aber wie gesagt, ich würde es eh unterlassen, weil es nervt.

 

[Bernhard]

Ja, ich habe es durch einen CSS Validator laufen lassen. Aber unabhängig vom Validator Ergebnis, farbig angezeigt wird der Scrollbar einfach nicht.

Der Validator spuckt einen Fehler aus, weil es eine proprietäre Eigenschaft ist, wie
Efchen schon schrieb.
Angezeigt wird es nur vom IE (könnte sogar sein, dass es nur IE bis Version 6 macht)
und vom Opera (da aber nur, wenn er im Quirks-Modus ist)

EDIT: Ach ja, und ob zwischen dem Text und dem Zahlenwert ein Leerzeichen ist oder nicht, ist laut diversen Foren egal. Aber da kennst du dich mit Sicherheit eh aus ;)

das ist tatsächlich egal, darum lasse ich sie grundsätzlich weg.

Übrigens, wenn ich mich jetzt für xhtml strict als Doctype entscheide, kann ich die iframes dann überhaupt noch nutzen?
Ich hoff ich nerv nicht zu sehr! Für heute ist eh genug, wünsch dir ein schönes Wochenende, Efchen!

Auf Frames und iFrames solltest Du verzichten, da sie nur Nachteile, aber keine
Vorteile haben.

Woran das mit dem Scrollbalken liegt, weiß ich nicht. Aber wie gesagt, ich würde es eh unterlassen, weil es nervt.

Das Problem ist, dass es meist viel zu brutal eingesetzt wird.
Ich kann mich an eine Site mit schwarzen Scrollbalken erinnern...

Aber ich hab neulich tatsächlich sehr danach gesucht, da ich eine Site vollständig
fertig hatte und dann festgestellt habe, dass Opera genau die selbe Farbe für den
Scrollbalken verwendet, wie ich sie als Hintergrundfarbe eingesetzt habe.
So sind im Opera die Scrollbalken quasi unsichtbar. Aber in den Quirksmodus versetzen
wollte ich ihn nicht - und alle Hintergrundgrafiken ändern wäre Wahnsinn gewesen...
Da das Problem nur auf einem meiner beiden Rechner aufgetreten ist und sonst auf
keinem, auf dem ich getestet habe, habe ich es dann zähneknirschend bleiben lassen...

Grüße
Bernhard

 

[nikl]

Ja, das mit dem Scrollbalken hab ich jetzt auch erst mal nicht weiter beachtet. Hab damit angefangen, wie von sysop beschrieben, das layout ins stylesheet zu kopieren.
Nach etwas Arbeit wird die Seite in Firefox größtenteils schon korrekt dargestellt
Gibt aber noch ne Menge zu tun, doch die index Seite ist im xhtml transitional type immerhin schon fehlerlos

Und jetzt muss ich natürlich herausfinden wie die Alternative zu den iframes aussieht...

 

[nikl]

Ach ja, macht es dann eigentlich Sinn mehrere Stylesheets einzusetzen? Viele im Stylesheet definierten Styles brauch ich ja auf den meisten Seiten nicht. Macht es hier Sinn, eine abgespeckte css Datei für diese Seiten zu verwenden? Oder wirkt sich das eh nicht spürbar aus? Danke!

 

[Efchen]

Wenn Du alles in ein Stylesheet packst, wird das nur einmal geladen und dann von Deinem Browser gecached. Es stört also nicht und ist sogar besser, als wenn Du auf jeder Seite unterschiedliche Stylesheets lädst.