Umbau meiner website - Design und Code bewerten (Editor)

[sapa]

Hallo,
meine website habe ich über die Jahre immer "irgendwie" zusammengebastelt, bei der jetzt anstehenden Überarbeitung und Aktualisierung der Inhalte will ich gerne auch die Grundstrukturen verbessern. Dazu habe ich begonnen, mich mit html und css zu beschäftigen.

Meine bisherige website habe ich mit Hilfe von verschiedenen wysiwyg-Editoren und einem Programm, das die Daten aus meinem Ahnenprogramm in html-Seiten umwandelt, erstellt. Diese Seiten versuche ich jetzt mit einem html-Editor (Phase 5) umzuschreiben.

Ich möchte, daß
- die website in möglichst vielen Browsern vernünftig angezeigt wird
- sich die Seiten der Bildschirmgröße flexibel anpassen
- die Seiten möglichst barrierefrei sind
und
- leichte Bedienung und Navigation
- ansprechendes Layout ohne Kinkerlitzchen

Ich habe nun die Grundstruktur mit der Navigation fertig, die Inhalte sollen dann in das content-<div>, einige Inhalte sind schon eingefügt, sonst sind Platzhalter nur mit der Überschrift vorhanden. Es wäre nett, wenn ihr meine Baustelle mal ansehen könntet und mir ggf. zeigt, wo es etwas zu verbessern gibt, damit ich nicht später alles wieder umschreiben muß.

3 Fragen hätte ich noch (oder gehören die in einen anderen Forenbereich?)

- gibt es eine Möglichkeit, das Hintergrund-Blau der seitlichen Navigation bis zum footer durchlaufen zu lassen, damit es nicht so unschön abbricht?

- was kann ich tun, damit header und footer sowie Hintergrundbild bei den übergroßen Seiten (waagerechtes scrollen) Hamburgkarte bzw. Tabelle Wundärzte nicht "an der Bilschirmkante abbrechen", sondern auch beim scrollen oben und unten zu sehen sind?

- wie kann ich die Kopfzeilen der Wundärzte-Tabelle fixieren, so daß diese auch beim vertikalen scrollen stehenbleiben?

meine alte homepage:
Ahnenforschung von Sabine Paap

die Baustelle der neuen homepage:
Ahnenforschung Paap / Startseite

 

[Efchen]

Ich möchte, daß
- die website in möglichst vielen Browsern vernünftig angezeigt wird
- sich die Seiten der Bildschirmgröße flexibel anpassen
- die Seiten möglichst barrierefrei sind

Wenn Du HTML und CSS sinnvoll einsetzt und nicht ganz besondere Extrawünsche hast, dann wird Deine Site in allen modernen Browsern vernünftig, und sogar ähnlich angezeigt. Dass der IE Schwächen in Sachen CSS hat, sollte hinlänglich bekannt sein. Hat man aber nichts exotisches vor, klappt das auch alles im IE. Manchmal muss ein Nutzer, der einen inkompatiblen Browser benutzt, halt Abstriche machen (aber nur an der Optik!).
Dass sich die Seiten der Bildschirmgröße anpassen, ist Nonsense. Ich möchte, dass eine Seite in meinem Browserfenster angezeigt wird und ich nicht scrollen muss, weil mein Fenster kleiner ist, als der Bildschirm groß ist. Bitte: Die Bildschirmgröße und die Bildschirmauflösung haben im Webdesign keine Bedeutung.
Barrierefrei bekommst Du Deine Seiten, indem Du HTML in seiner ursprünglichen Bedeutung nutzt, also Deinen Inhalt damit logisch auszeichnest, und Inhgalt & Layout strikt voneinander trennst. Dann sind Deine Seiten sogar in z.B. Netscape 0.8 nutzbar, wie auch in Screenreadern oder Suchmaschinen.

Es wäre nett, wenn ihr meine Baustelle mal ansehen könntet und mir ggf. zeigt, wo es etwas zu verbessern gibt, damit ich nicht später alles wieder umschreiben muß.

Du solltest aufpassen, dass Du keine div-Suppe kochst. Das <div> ist kein Wunderelement und wird auch nicht zwingend zum Layouten mit CSS benötigt, wie manch einer Dir sicher schon gesagt hat.
Beispielsweise frage ich mich, warum Du ein <div id="header"> hast, was mich vermuten lässt, dass das eine Überschrift sein soll. Warum also nicht <h1>? Den Anker kannst Du auch weglassen und einfach dem h1 eine ID geben, diese wird als Anker angesprungen. Du sparst Dir ein div und ein a.
Wozu ein <div> um die <ul>? div verwendet man für gewöhnlich zum Grppieren mehrerer Elemente. Hier ist aber nur eines. Warum also nicht <ul id="mainnav">?
Ist <li><h3> erlaubt?
Warum ist "...beim Stöbern" eine Überschrift? Du hast das so ausgezeichnet. Für was dient sie als Überschrift?
Dann verwendest Du <p> und <br> falsch. Ein Textabsatz wird von <p></p> eingeschlossen. Du verwendest stattdessen <br>, was man eigentlich fast gar nicht mehr benötigt. Abstände macht man mit CSS. Du solltest jeden Absatz in <p></p> einpacken, wenn Du keine Abstände willst, schaltest Du sie per CSS aus.

Und, Du solltest Inhalt und Layout strikt trennen, d.h.
- Keine veralteten HTML-Attribute (align) verwenden, die sich nicht auf die Semantik, sondern nur auf Layout/Design beziehen. Dafür ist CSS da!
- Nicht das Attribut "style" verwenden. Alles CSS in externe Stylesheets auslagern. Nur so kommst Du in den vollen Genuss der Vorteile von CSS.

gibt es eine Möglichkeit, das Hintergrund-Blau der seitlichen Navigation bis zum footer durchlaufen zu lassen, damit es nicht so unschön abbricht?

Ohne hinzusehen: "Faux Columns". Hab keinen Link, findest Du über die Suche aber zuhauf!

Gruß,
-Efchen

 

[assmaje]

Das klingt jetzt wahrscheinlich ziemlich hart, aber deine alte Website hat mir besser gefallen (zumindest vom Design her). Übrigens solltest du beim Puzzle-Hintergrundbild die rechte Kante weichzeichnen (für größere Viewports). Es hat übrigens eine extrem schlechte jpg-Qualität. png ist um Meilen besser.

 

[sapa]

Hallo,
die ersten Umbauten habe ich erledigt, sie geänderten Seiten sind aber noch nicht online.

Dass sich die Seiten der Bildschirmgröße anpassen, ist Nonsense. Ich möchte, dass eine Seite in meinem Browserfenster angezeigt wird und ich nicht scrollen muss, weil mein Fenster kleiner ist, als der Bildschirm groß ist. Bitte: Die Bildschirmgröße und die Bildschirmauflösung haben im Webdesign keine Bedeutung.

Da habe ich wohl einen falschen Ausdruck gewählt, jedenfalls soll mein Layout nicht in der Größe absolut festgelegt sein, sondern sich den Gegebenheiten beim Betrachter flexibel anpassen können. Ich denke, wir meinen dasselbe.

Du solltest aufpassen, dass Du keine div-Suppe kochst. Das <div> ist kein Wunderelement und wird auch nicht zwingend zum Layouten mit CSS benötigt, wie manch einer Dir sicher schon gesagt hat.
Beispielsweise frage ich mich, warum Du ein <div id="header"> hast, was mich vermuten lässt, dass das eine Überschrift sein soll. Warum also nicht <h1>? Den Anker kannst Du auch weglassen und einfach dem h1 eine ID geben, diese wird als Anker angesprungen. Du sparst Dir ein div und ein a.
Wozu ein <div> um die <ul>? div verwendet man für gewöhnlich zum Grppieren mehrerer Elemente. Hier ist aber nur eines. Warum also nicht <ul id="mainnav">?

Danke. Die <div> hatte ich ganz am Anfang eingefügt, als ich die Grundzüge des Layouts mit bunten Boxen gebastelt habe. Dass diese nun nicht mehr benötigt werden, war mir nicht klar. Diese 2 <div> habe ich entfernt, jetzt bastel ich noch an den Abständen und an der seitlichen Navigation.

Ist <li><h3> erlaubt?

Warum sollten in einer Liste keine Überschriften erlaubt sein? Aber an dieser Stelle in der Navigation ist <h3> wohl nicht passend. Das Attribut <style> soll ich vermeiden, wäre <span class="passende Schriftformatierung"> möglich?

Warum ist "...beim Stöbern" eine Überschrift? Du hast das so ausgezeichnet. Für was dient sie als Überschrift?

Tja, das sind genau die Dinge, weshalb ich meine Seite hier im Forum eingestellt habe. Als Anfänger übersieht man einfach vieles. Und es ist auch nicht so einfach, sich von der klassischen Texterstellung auf die html-Auszeichnung umzustellen. Meine geteilte Textüber/unterschrift ist in diesem Fall in html einfach nur Text. Und die Gestaltung mache ich mit css (mit <span>?).

Dann verwendest Du <p> und <br> falsch. Ein Textabsatz wird von <p></p> eingeschlossen. Du verwendest stattdessen <br>, was man eigentlich fast gar nicht mehr benötigt. Abstände macht man mit CSS. Du solltest jeden Absatz in <p></p> einpacken, wenn Du keine Abstände willst, schaltest Du sie per CSS aus.

Ist erledigt.

Keine veralteten HTML-Attribute (align) verwenden, die sich nicht auf die Semantik, sondern nur auf Layout/Design beziehen.

Hm, wo hast Du das denn noch gefunden? Ich habe mich extra für html strict entschieden, da meckert der Validator in solchen Fällen eigentlich immer. Habe ich noch etwas übersehen?

Ohne hinzusehen: "Faux Columns". Hab keinen Link, findest Du über die Suche aber zuhauf!

Ich habe aber noch keine Möglichkeit gefunden, bei der ich meine Hintergrundgrafik behalten und das Layout sich flexibel anpassen kann.

 

[Efchen]

Da habe ich wohl einen falschen Ausdruck gewählt ... Ich denke, wir meinen dasselbe.

Vermutlich. Warum ich aber trotzdem so pingelig darauf hinweise, liegt daran, dass viele Leute wirklich nicht wissen, dass man sein Fenster nicht maximiert haben muss. Wenn das nämlich jeder verstehen würde, gäbe es auch kein son Unding wie eine "Auflösungsweiche" - weil die ist ja völlig sinnlos.

Die <div> hatte ich ganz am Anfang eingefügt, als ich die Grundzüge des Layouts mit bunten Boxen gebastelt habe.

Deswegen empfehle ich, nicht mit dem Layout, sondern mit dem Inhalt anzufangen. Dann schreibt man von vornherein richtigen, und nicht überflüssigen, Code, womöglich sogar besseren Code, und man hat weniger Arbeit.

Hm, wo hast Du das denn noch gefunden?

Ich dachte, ich hätte irgendwo ein align=center oder sowas stehen sehen...

 

[sapa]

Das Grundgerüst meiner Seiten mit Kopfzeile, Navigation und Fußzeile sollte jetzt in Ordnung sein, an dem Code der jeweiligen Inhalte muß ich noch etwas arbeiten, da die früher von mir benutzten WYSIWYG-Editoren jede Menge schlechten Code erzeugten.

Als nächstes würde ich gerne das Problem mit dem Hintergrund lösen. Die blaue Hintergrundfarbe der Navigation links setzt sich jetzt wie gewünscht bis zum footer fort, allerdings bleibt ein horizontaler, blauer Streifen auch zwischen Inhalt und footer stehen. Wie bekomme ich den weg?

Und was muß ich tun, damit das Hintergrundbild des Inhalts sich bei waagerechtem scrollen wiederholt und nicht die blaue Hintergrundfarbe des body auftaucht? Wie z.B. bei verkleinertem Fenster bei dieser Tabelle:

Ahnenforschung Paap / Hamburg / Wundärzte

Wäre nett, wenn mir jemand helfen könnte, ich finde einfach keine Lösung.