Hallo zusammen,

Ich habe mich wieder mal als blutiger Anfänger an das Erstellen einer Website gemacht. Leider wird sie im IE nicht so dargestellt, wie sie müsste (erkennt das CSS nicht richtig), im Safari ist alles i.O. Obwohl ich glaube, die Gründe verstanden zu haben (quirk mode, strict mode, ...), schaffe ich es nicht, den Code so anzupassen, dass es funktioniert.

Kann mir dabei jemand ein Tipp geben?

Die Website ist die folgende:

Merci bien!

Was speziell sieht denn nicht so aus, wie es sollte? Ein bisschen mehr Info wäre eventuell nicht verkehrt

Mit das erste, was man machen sollte, ist die Webseite durch den Validator zu schicken. Und der sagt dir an einigen Stellen, was nicht so ist wie es sein sollte:

Die zweite Sache ist, dass man das "Designen" mit Tabellen gar nicht erst anfangen sollte...

kcnb8
Also auf der "about" Seite bspw. sollten die Links orange sein...

Mr. Krabs
Was ist die Alternative zur Tabelle?

Merci schon mal für euer Interesse!

Ui, der Validator findet ja schon einiges

Naja, in deinem Fall reicht ein einziges DIV aus und eine UL Liste für die Navigation unten. Das Stichwort ist "semantisches Markup" - und dazu zählt eine Tabelle nicht.

W3C Markup Validator Help & FAQ: Why should I validate my HTML pages? und Why validate?

W3C Markup Validation Service (für HTML/XHTML/HTML5)
W3C CSS Validation Service

Und seit kurzem und den Kinderschuhen vor kurzem entwachsen (darf also auf die Menschheit losgelassen werden):
W3C Unicorn - Der Einheitsvalidator des W3C (der fasst alle Validatoren des W3C unter einem Dach und mit einem einzigen GUI zusammen)

Und auf dem Weg dorthin als helfende Hand zum Beispiel:

Firefox Add-On HTML Validator & Tidy (gibt's inzwischen auch für andere Browser wie z.B. Safari)

Michael Jendryschik: Einführung in XHTML, CSS und Webdesign: Nützliche Werkzeuge: Tidy (dieses Kapitel geschrieben von meiner Wenigkeit)

Tabelle nur dann, wenn Du wirklich Inhalt in Tabellenform ausgeben willst. Also ganz klassisch eine Tabelle, wie man sie aus einem Tabellenkalkulationsprogramm oder einer Präsentation her kennt.
HTML ist eine Auszeichnungssprache (Markup Language). Du zeichnest Inhalt gemäß seiner semantischen Bedeutung damit aus. Wenn Du eine Tabelle mit echtem klassichen Tabellninhalt darstellen willst, nimmst eben das <table>-Element. Und ansonsten nicht.
Willst Du einen Absatz auszeichnen, verwendest du das <p>-Element. Für Überschriften 1. bis 6. Ordnung (gestaffelt nach Wichtigkeit), nimmst Du <h1> bis <h6>. Willst Du einen irgendwie gearteten Container benutzen, dann verwendest Du <div>. Willst Du eine Liste oder Aufzählung darstellen, dann verwendest Du <ul> für eine ungeordnete Liste/Aufzählung, für eine geordnete Liste verwendest Du <ol>, für die einzelnen Listenpunkte/Aufzählungspunkte verwendest Du <li>.
Und so weiter und so fort...

Und die Positionierung und das Aussehen machst Du alles komplett mit CSS. Indem Du per CSS Regeln aufstellst, die dann, an gewisse Bedingungen geknüpft, entweder auf die jeweiligen HTML-Elemente im Dokumentenbaum passen oder eben nicht passen, das musst Du u.U. ganz genau definieren und ausdrücken, damit so eine Regel so verfängt wie Du es Dir vorstellst. CSS ist mächtig. Du kannst damit einer kompletten Seite ihr Aussehen verleihen und es mit anderen CSS-Regeln auf Knopfdruck verändern, ohne dass auch nur ein Buchstabe am HTML-Gerüst verändert wird.

Gute Literatur, die das alles sehr eingängig und verständlich erklärt u.a. Michael Jendryschiks Buch Einführung in XHTML, CSS und Webdesign . Kannst Du entweder kaufen (erschienen im Addison-Wesley Verlag) oder auch vollständig und kostenfrei unter bereits angegebenem URL online sozusagen als E-Book.
Natürlich gibt's auch noch andere Quellen und Bücher zu dem Thema, die genauso gut und hilfreich sind, die Auswahl ist da inzwischen erschöpfend und groß genug.

Super, vielen Dank. Ich muss mich da wirklich mal von Grund auf einlesen.
Toll, dass ihr einem Newbie wie mir überhaupt noch antwortet. Nehme an, dass viele Fragen immer und immer wieder gestellt werden...

Im speziellen Fall liegt es sowohlwohl an der CSS-Einbindung im HEAD-Bereich, als auch am CSS selbst. Für die Einbindung verwendest

Du verwendest:

korrekt wäre:


Einige Browser (Safari) erkennen wohl auch deine Methode, andere Browser (Firefox, IE) mögen das nicht so.

Die anderen Fehler liegen im CSS selbst. Hier verwendest du eine falsche Auszeichnung für die Farben:

Falsch:

Richtig:

Die Raute (#) wird nur verwendet, wenn danach eine Farbangabe in Hexadezimaler Schreibweise (#FF0000) verwendet wird. Gibst du nur den Farbnamen an, kommt keine Raute hin.


Falsch:

Richtig:

Background-color muss immer eine Farbe sein (white, #FFFFFF), wenn du keine Farbe willst, fällt auch das »color« weg, also nur »background: none« oder »background: transparent«

Ansonsten kann ich die Kommentare der Vorredner nur wiederholen: Tabellen als »Gestaltungsrahmen« sind pfui. Das von sierkb vorgeschlagene Buch (Einführung in XHTML, CSS und Webdesign) kann ich ebenfalls sehr empfehlen!

Krypton

Hey, cool! Du rettest mich mal temporär
Die Tabelle eliminiere ich dann noch.

Vielen Dank!

Das ist unsinnig, so wie Du es anmeckerst und versuchst richtigzustellen.
Erstens ist die Reihnfolge der Attribute hier völlig unerheblich, die kann er machen wie ein Dachdecker. Und zweitens ist sein Original-Code an der Stelle folgender:


Und der Validator stört sich an dem fehlenden schließenden Tag für das Link-Element. Es fehlt nämlich das hier: </link>.

Oder er schreibt's in verkürzter Schreibweise so:


Oder, damit auch Uralt-Browser damit zurechkommen, so:


Und warum wird da gemeckert und bei allen anderen nicht geschlossenen Elementen, die eigentlich geschlossen gehören?

Weil er versucht hat, das als XHTML-Seite zu schreiben (und die Häfte dabei vergessen hat und falsch gemacht hat: wo ist z.B. der Doctype? Wo ist der XML-Prolog, wenn er schon XHTML schreiben will? Wo sind die für XHTML notwendigen schließenden Tags für sog. leere Elemente?) und ganz am Anfang das oberste Wurzel-Element des Dokument-Baumes, nämlich das <html>-Element, einen Namespace mitbekommen hat, nämlich den von XHTML! Da steht nämlich in seinem Code:


Folglich muss er sich dann auch nach der Nomenklatura von XHTML richten. Und in XHTML gibt es keine offenen Elemente so wie unter SGML, da müssen alle Elemente geschlossen sein, und sogenannte leere Elemente (wozu jenes gehört), müssen sich selber schließen, deshalb dann diese Schreibweise am Schluss des Elements:
oder, damit die Parser von Uralt-Browsern, die kein XHTML können, nicht darüber stolpern, mit Leerzeichen vor dem Schrägstrich:
<link />

Auch falsch. Der Wert "none" ist nur bei background-image vorgesehen.
Obwohl die Verwendung von dem umfassenden 'background' alle anderen background-Eigenschaften in sich vereint, ist für diese Schreibweise der Wert "none" laut Spezifikation nicht vorgesehen: . Hat ja auch Sinn, denn background: none hieße: keinen Hintergrund. Es gibt aber immer irgendwie einen Hintergrund, und wenn's der Standardwert Weiß ist. Sinn würde das "none" in background nur bekommen, wenn noch andere background-Eigenschaften genannt würden und mit "none" ein vorherige definiertes background-image explizit mit "none" (also kein Hintergrundbild) überschrieben werden soll.
Treffender und sinnvoller wäre dann wohl eher: background-color: transparent, wenn's unbedingt sein muss. Oder ganz weglassen, wenn da eh angezeigt oder übergebügelt werden soll. Ggf. auch background-color: inherit (also die betreffende Eigenschaft des im DOM-Baum nächsthöher gelegenen Elternelements übernehmen/erben).

Siehe dazu auch: CSS2.1 background-color und CSS2.1 background-image bzw. CSS2.1 Appendix F. Full property table .

Nein, muss nicht. Kann auch transparent sein. Siehe auch: und .

Nein, auch nicht background: none. Das "none" ist nur für background-image definiert. Siehe die bereits gegebenen Stellen der CSS2.1 Spec bzw. diese Übersichtstabelle:

Nur so. Oder in diesem Fall sogar ganz weglassen, weil unnötig und ohne Wirkung. Wenn der background sich nicht von dem im Browser vorgegebenen Standard-Hintergrund (i.d.R. weiß) unterscheidet, warum muss man dann nochmal redundant schreiben, dass der Browser da nix pinseln soll? Würde nur Sinn haben, wenn der Hintergrund schon irgendwie eingefärbt oder mit einem Bild versehen worden wäre. So wie ich den CSS-Code der Seite aber grad' sehe, ist diese Angabe an dieser Stelle überflüssig und kann getrost weggelassen werden. Weil der keine neue Farbe benutzt, sondern sich auf die Standardvorgabe des Browsers stützt, welche die Farbe Weiß ist.

Und wenn ich mit der Developer-Toolbar von Firefox an dem CSS ein wenig rumspiele, dann bekomme ich das auch genauso bestätigt, wie ich das eben beschrieben habe: es ist in diesem Fall völlig wurscht, ob ich da an der Stelle ein


oder ein

schreibe oder diese Regel da ganz streiche und lösche, es ändert sich nix, weil standardmäßig dort die Farbe Weiß per Default-Stylesheet des Browsers schon vorgegeben ist.

Ok. Hab mal ein paar Anpassungen gemacht. Leider funktioniert es mit der Angabe des Doctype immer noch nicht so, wie es sollte. Siehe:
Da ist die Schriftart leider nicht die gewollte

Chrismac:

Warum verwendest Du diesen Doctype

statt diesem hier:


Welche HTML-Elemente aus der Transitional-DTD verwendest Du, dass Du absichtsvoll den Strict-Doctype verschmähst?

Du weißt, dass gerade in Bezug auf Tabellen und Tabelleninhalte einige Browser (z.B.) Firefox in den Quirks-Modus schalten und einige Dinge anders rendern/darstellen, als wenn Du dasselbe Dokument ohne weitere Änderung als Strict-Dokument und mit dem Strict-Doctype versehen würdest?

Was heißt wörtlich übersetzt "Transitional". Wenn Du das beantworten kannst, dann erschließt sich Dir auch der Sinn der Transitional-DTD.

Merke: wenn Du nicht ganz spezielle Gründe hast und aus irgendeinem Grund bestimmte Elemente verwenden musst bzw. auf sie keinesfalls verzichten kannst, die eigentlich "deprecated"/"missbilligt" sind, dann ist Transitional angesagt. Ansonsten: nach Möglichkeit und standardmäßig immer Strict!
Du erleichterst Dir die Arbeit, und Du erleichterst dem Browser die Arbeit dadurch, weil er dann nämlich weniger raten muss und sich ganz streng an das hält, was Du ihm da vorsetzt. Folge: ggf. schnelleres Darstellen der Seite (eben weil der Browser glatt durchmarschieren kann beim Rendern und nicht seine Fehlerkorrektur ggf. zum Einsatz bringen muss). Und es erleichtert bei Problemen die Fehlersuche, eben weil weniger geraten wird.

Ok, aber mit dem Strict stellt er nicht einmal mehr das javascript dar und die Schrift ist auch nicht die gedachte...

Die Korrekturen von sierkb sind natürlich richtig, meine Hinweise waren da eher schlampiger Natur. Sorry dafür.

Du solltest, wenn du schon mit Tabellen arbeitest, diese auch richtig aufbauen.

Chrismac:

Mache Deine Seite erstmal insgesamt valide, sodass der W3C Validator Dir 0 Fehler und grün anzeigt. Und dann können wir über irgendwelche anderen Fehler reden, sollten sie danach noch existieren. Der Validator gibt Dir doch schon Hilfestellung, wo Du beim Korrigieren ansetzen musst. Er benennt Dir die einzelnen Stellen doch schon und stößt Dich mit dem Kopf drauf. Dann bring doch erstmal das in Ordnung!
Solange Dein Dokument nicht valide ist, und solange der Validator Dir da Fehler nach Fehler aufzeigt, hat es null Sinn über irgendwas Anderes zu reden. So manches erledigt sich nämlich von selbst, wenn Du die Validität erstmal hergestellt hast. Und sollte das nicht ausreichen, erst dann hat es Sinn, weitere Ursachenforschung zu betreiben. Vorher nicht.

Ok, mach ich. Vielen Dank!

Also, ich hab mal aufgeräumt und alles im CSS definiert. Jetzt krieg ich im Validator keine Fehler mehr, die Seite wird aber überhaupt nicht so dargestellt, wie sie sein müsste. Ohne die Angabe des Doctypes funktioniert es tiptop...

mit doctype:

ohne doctype:

Ich bin ein bisserl überfordert gerade

Bin unendlich dankbar für Tipps

Edit: gibt allerdings beim zweiten link ohne doctype aber einige Fehler im Validator...

Seltsam, hiert tuts sowohl lokal als auch auf 'nem Server mit der Gestaltung aus deinem CSS. Und wenn ich dein
ändere in
kommt auch der "Bildwechsel".

Ich bin da ja auch eher Laie, aber im Antwort-Header von deinem Server stehen Dinge, die ich nicht so recht einordnen kann. Vielleicht liefert der irgendwas seltsam aus. Der IE scheint allerdings damit klar zu kommen ... Mein Latein endet hier jedenfalls.

Ich würde die Version mit doctype nochmal hochladen, hier scheint es ein Problem auf dem Server zu geben. Bei mir lokal und auf meinem Webserver läuft die Seite. Bei dir wird die CSS-Datei nicht verwendet.

In der Datei »index_test.html« würde ich folgende Zeile noch ändern:


zu

dann lädt auch die Slideshow im Firefox

da war iMonoMan wohl schneller

Cool, die Slideshow ist schon mal repariert. Merci!
Kann es sein, dass mobileme mit den CSS Dateien nicht zurecht kommt?

Da das selbe CSS (index_test.css) in der Version ohne Doctype funktioniert, könnte es auch an einer Art Dateinamenskonflikt liegen. In der Version ohne doctype sind die Namen der HTML und CSS Dateien verschieden:

index_test2.html
index_test.css

In der Version mit doctype sind die Namen (bis auf die Endung) gleich:

index_test.html
index_test.css

Das sollte normalerweise überhaupt nichts ausmachen. Scheinbar geht es auch lokal, auf dem Server von iMonoMan und meinem Server. Bei dir gibt es aber Probleme.

Ich würde daher mal versuchen, die CSS-Datei anders zu benennen (hallo.css) und im HTML Dokument entsprechend angeben. Anschließend nochmal testen. Erklären kann ich das gerade auch nicht, aber es ist das Einzige, was mir noch aufgefallen ist.

Heureka!

Eure Überlegungen zu Server (mobileme) und CSS haben mich auf die Lösung gebracht. Anscheinend kommt es drauf an, in welchem Text Encoding CSS Dateien auf mobileme raufgeladen werden. Ich habe nun alle CSS Dateien einmal komprimiert, dekomprimiert und via Finder (anstatt via dem Programm Flow) raufgeladen. Nun funzts!!!


Herrlich, habe ein paar Dinge dazu gelernt heute. Danke euch allen!

Danke für’s Feedback. Auf das Encoding wäre ich auch nicht gleich gekommen.

Warum werden die Nussknacker eigentlich aus Liechtenstein verkauft? Hat das steuerrechtliche Hintergründe oder kommen sie tatsächlich daher? Mir persönlich ist es immer etwas suspekt, wenn ich auf einer Website etwas kaufen soll und nirgends einen Namen, eine Adresse oder sonst etwas »greifbares« finden kann.

Ok, guter Punkt
War halt einfach noch die einzige gonuts Adresse, die erhältlich war (www.gonuts.ch wär mein Favorit gewesen).
Adresse füg ich aber noch hinzu, hast recht.
Ich verdiene aber auch nicht wirklich Geld damit. Ist eher ein Hobby und ich hoffe, die Fabrikationskosten sind einigermassen kostendeckend...

So, jetzt weisst alles

Hallo zusammen,

Darf ich nochmal eure Expertise in Anspruch nehmen. Ich bin nochmal ein bisserl am Website-Basteln. Ich habe mal das Cufon script für Schriftersatz probiert (funktioniert leider gerade nicht in allen Browsern).
Im Moment bin am Kämpfen mit der richtigen Positionierung der divs, sodass sie auch im IE korrekt sind.

Kann mir jemand einen Tipp geben, was ich falsch mache?

http://www.flaex.ch/gonuts_neu.html
css: http://www.flaex.ch/neu.css

Merci beaucoup!

So sollte es aussehen: