[goetzi]

Könnt ihr mal bitte über folgende Seite herziehen: http://redaxo.rofl.at
Bitte nur das Design/Layout bewerten, der Inhalt ändert sich noch (Ist im Moment Nonsense-Mist). Es geht um einen Verein zur Förderung und Weiterbildung von Flötisten.

Mehr gibt es eigentlich im Moment nicht zu sagen. Wäre eben über Kritik, Verbesserungsvorschläge, Lob ( ) dankbar.

goetzi

[püppi]

Ich finde es sieht sehr gu t aus.

[TolleTyp]

Ist richtig gut geworden, aussagekräftig
mach weiter so

[lua]

Moin,

Gute Seite Aber

Ich würde die Sprachauswahl nach oben velegen. Am besten in das erste "Sichtfenster", weill wenn ich nichts verstehe was da steht dann scroll ich ja nicht nach unten evtl. auch etwas besser abgrenzen (Fahne oder so)

Des weiteren würde ich den Link für das Gästebuch mit dem Sitemap tauschen. Da ich momentan (1024x768) nur bis zum sitemap sehe und dieser ja "eigentlich" weniger interesannt ist als das Gästebuch.

So das wars was ich zu meckern habe aber ansonsten sieht sehr gut aus weiter so
MfG
lua

[lord.dragon]

Schaut ganz nett aus die Page.

Aber, gleich oben sollten - meiner Meinung nach - die Grafiken nebeneinander stehen. sollte eigentlich ne bessere Ordnung schaffen

ja, gutes design.
aber wieso ist die adresse redaxo und im logo steht syrinx?

[Droziak]

Sehr schoenes Design!

[Doik]

hey goetzi,
respekt. seit langem mit abstand die technisch am besten umgesetzte seite, die man hier im webdesign vorgesetzt kriegt!
> Zum design fällt mir eigentlich nur ein, dass diese verzerrten blauen punkte in der header-grafik etwas unmotiviert wirken. So nach dem motto: "da muss noch platz ausgefüllt werden".
> In der Navigation ist ganz unten unter dem "Gästebuch" Link noch ein kleiner grüner Strich, der da nicht ganz reinpasst. (FF 1.0.7) Wenn du willst mach ich nen screenshot.
> Technisch 1A! Nichts zu bemängeln

Im IE sieht die Seite deutlich anders aus. Ich meine mich zu erinnern, dass das
<?xml version="1.0" encoding="ISO-8859-1"?> den IE in den quirksmode fallen lässt. verscuh evtl. mal das rauszunehmen.

ansonsten: lob!
so long
Doik

[goetzi]

Zitat von lord.dragon 

Schaut ganz nett aus die Page.

Aber, gleich oben sollten - meiner Meinung nach - die Grafiken nebeneinander stehen. sollte eigentlich ne bessere Ordnung schaffen

Wie meinst du das? Sorry, komm nicht hinter den Sinn deiner Aussage.

aber wieso ist die adresse redaxo und im logo steht syrinx?

Weil die jetzige Adresse nur temporär ist, bis der Inhalt da ist und die Seite fertig ist. Später wird sie auf www.syrinx.at (dort ist noch die alte Seite) geschaltet.

> Zum design fällt mir eigentlich nur ein, dass diese verzerrten blauen punkte in der header-grafik etwas unmotiviert wirken. So nach dem motto: "da muss noch platz ausgefüllt werden".

Stimmt. Da ich kein Designer bin stimmt dein Motto. Da muss ich mir noch was überlegen.

> In der Navigation ist ganz unten unter dem "Gästebuch" Link noch ein kleiner grüner Strich, der da nicht ganz reinpasst. (FF 1.0.7) Wenn du willst mach ich nen screenshot.

Danke für den Hinweis. Wenn ich wieder daheim bin, werd ich den entfernen.

Im IE sieht die Seite deutlich anders aus. Ich meine mich zu erinnern, dass das
<?xml version="1.0" encoding="ISO-8859-1"?> den IE in den quirksmode fallen lässt. verscuh evtl. mal das rauszunehmen.

Ou Mist!! Im IE ist sie ja total zerschossen. Ich hab tatsächlich erst heute morgen die XML-Angabe eingefügt, weil validome.org sonst nicht validiert hat. In dem Fall werd ich sie aber wieder rausnehmen.

[goetzi]

So, ich hab jetzt noch ein paar Stunden daran rumgebastelt (Stunden, die man wahrscheinlich nicht sieht).

Größte Veränderung: Neuer Banner, jetzt auch mit dem offiziellen "Slogan".

Das Menü hab ich noch ein bisschen "getunt". Der grüne Strich ist weg und in der zweiten Menüebene ist ein deutlicheres Hover. Außerdem hab ich die Sprachauswahl nach oben rechts verlagert und besser sichtbar gemacht.

Was sagt ihr dazu?

[aNtiCHrist]

In der Tat, eine technisch so gut gemachte Seite bekommt man hier eher selten zu sehen. Sogar an Label für die Formulare wurde gedacht.

Vom visuellen Eindruck her habe ich auch nicht viel zu bemängeln, der Kontrast bei den Menupunkten könnte ruhig etwas kräftiger ausfallen, im Vergleich zu der alten Version ist es allerdings schon viel besser. Bei ausgewähltem Hauptmenupunkt sind die Untermenupunkte alle schon weiß hinterlegt, das ist in Kombination mit dem display:block etwas ungünstig, da so leider die hover-Rückmeldung über die aktive Zeile fehlt und man ohne gutes Augenmaß doch wieder den Zeiger genau auf den Text bringen muss um sicherzugehen.

Technisch sind ein paar kleine, eher theoretische XHTML-Probleme drin, die man eigentlich aber auch lösen sollte, wenn man denn unbedingt XHTML nutzen möchte. Einmal das Problem mit der XML-Deklaration und zum anderen die Kommentarsyntax zum Verstecken von Script- und Style-Blöcken.

Die Meldung von Validome ist korrekt, da dein Dokument sonst von einem XML-Parser als UTF-8-kodiert angesehen wird. Zwar lieferst du das Dokument bislang aus Kompatiblitätsgründen als text/html aus, was die Browser dann mit ihrem Tagsoup-Parser verarbeiten, aber wenn du die Datei mal als application/xhtml+xml auslieferst oder mit xhtml-Endung (über file://) aufrufst, werden die aktuellen Browser UTF-8 nutzen. Insofern benötigst du tatsächlich die XML-Deklaration mit Kodierungsangabe. Da aber der IE 6 eben mit dieser Angabe in den Quirksmode schaltet, hast du nun zwei Möglichkeiten:

Entweder du nimmst die Quirks des IE in Kauf und bindest dem ein eigenes Stylesheet per Conditional Comment ein (und umschiffst die restlichen Bugs mehr oder weniger elegant). Das hätte den Vorteil, dass du automatisch auch den IE 5.x weitestgehend unterstützt, der eh keinen Standardsmode kennt. Die Alternative wäre der Wechsel der Zeichenkodierung, mit UTF-8 kannst du auf die XML-Deklaration verzichten, da dies eben die XML-Standardkodierung ist. Das dürfte mit einem geeigneten Editor die bessere Lösung sein, vor allem wenn der IE 5 nicht unbedingt das identische Layout liefern muss und man so kein umfangreiches separates IE-Stylesheet braucht. Eine dritte Möglichkeit mit der von Validome angedeuteten Kodierungsangebe im HTTP-Header wäre zwar möglich (und auch generell sinnvoll), allerdings kann es dann Probleme geben, wenn jemand die Seite speichern möchte und dann diese Angabe aus dem Header verloren geht. Daher sollte die Angebe im HTTP-Header nur zusätzlich erfolgen.

Ein weiteres Problem bei der Verarbeitung als XML-Dokument sind die in Kommentare eingeschlossenen Inhalte von den Style/Script-Blöcken. Ein XML-Parser darf solche Inhalte verwerfen, was dann zu einem Ignorieren der Angaben führt. Ian Hixie erklärt unter http://hixie.ch/advocacy/xhtml wie es sowohl in HTML als auch XHTML funktioniert:

<style type="text/css"><!--/*--><![CDATA[/*><!--*/
...
/*]]>*/--></style>

Auch sonst ist der Artikel für die ganzen übereifrigen XHTML-Freaks sehr zu empfehlen, man sieht immer wieder Leute, die unbedingt XHTML nutzen wollen, aber dabei allerlei Fehler machen, die sie bei HTML gar nicht gehabt hätten. Ich habe zwar nichts gegen XHTML, bloß bietet es zur Zeit einfach zu wenige Vorteile, sodass ich es noch nicht nutzen würde.

Das

<meta http-equiv="content-type" content="text/html; iso-8859-1" />

werte ich mal als Test, ob da auch mal jemand genauer in den Code guckt.

[goetzi]

@aNtiCHrist
WOW, vielen Dank.

In diesem Fall werde ich mir wohl überlegen, auf HTML 4.01 "zurückzugehen", was du ja anscheinend für empfehlenswert hälst?

Eigentlich müsst ich ja nur die Doctype-Angabe ändern, die xml-Angabe aus dem <body>-Tag nehmen und die <br /> in <br> umwandeln (eben alle Tags, die mit /> abgeschlossen sind)? Oder mach ichs mir da zu einfach?

Das
Zitat:
<meta http-equiv="content-type" content="text/html; iso-8859-1" />
werte ich mal als Test, ob da auch mal jemand genauer in den Code guckt.

Wie meinst das?

Mir geht es darum: Ich bin noch nicht lange auf der schöner-Code-schlanke-barrierefreie-tabellenlose-Seiten-Schiene, aber ich habe eben eingesehen, dass man diesen Weg gehen sollte. Jetzt habe ich mit dieser Seite probiert, alles was ich über das Thema weiß, reinzupacken. Viel Erfahrung habe ich allerdings noch nicht, weswegen mir Posts wie deine sehr helfen.

Ich hoffe ihr seid geduldig mit mir,
goetzi

[aNtiCHrist]

In diesem Fall werde ich mir wohl überlegen, auf HTML 4.01 "zurückzugehen", was du ja anscheinend für empfehlenswert hälst?

Ja, das ist sinnvoll, sofern du nicht alle Tücken von XHTML verstanden hast und diese zu umgehen weißt. Du nutzt momentan ja nicht einen Vorteil von XHTML, insofern besteht die Konvertierung hier tatsächlich nur aus dem anderen DOCTYPE, dem Entfernen des xmlns/xml:lang-Attributs und dem Weglassen des " /" bei inhaltsleeren Elementen. Die strengeren XHTML-Regeln erfüllen ansonsten automatisch die HTML-Anforderungen.

Bei der Charset-Meta-Zeile habe ich dann wohl genauer geguckt als du selbst, die war erstens doppelt und zweitens fehlte bei der zweiten eben das charset=.

[edit]
Ich sehe gerade, dass die eingerückten Untermenüpunkte rechts in die andere Spalte ragen, da die trotz einrückung gleich breit sind. Durch das Hintergrundweiß war das recht gut versteckt.

[goetzi]

So, es gibt einiges neues zu berichten.

Mit ein paar Kniffen hab ich das CMS dazu "überredet", doch UTF-8 zu liefern. Die Seite validiert jetzt nach XHTML 1.0 Strict, im IE schauts auch super aus (eben ohne XML-Deklaration), ich bin sehr erfreut.
Das CMS (Redaxo) generierte nämlich immer das "/" bei inhaltsleeren Elementen mit, was keinen validen HTML-Code brachte. Deswegen hab ich es doch nach XHTML hingebogen.

Ich sehe gerade, dass die eingerückten Untermenüpunkte rechts in die andere Spalte ragen, da die trotz einrückung gleich breit sind. Durch das Hintergrundweiß war das recht gut versteckt.

Da hast du recht. Ich komm aber nicht drauf, wo und wie ich das im CSS korrigieren muss. Du siehst das sicher auf den ersten Blick

Nochmal vielen Dank, ich find es wirklich toll, wie ausführlich und kompetent einem hier geholfen wird.

goetzi

[aNtiCHrist]

Ok, die verwendete Software muss da natürlich mitspielen. Wenn die nur noch XHTML kann, ist das natürlich ein Argument dafür auch XHTML zu nutzen.

Jetzt musst du natürlich noch die Inhalte entsprechend kodiert ablegen, momentan ist das ja noch nicht der Fall. Wenn du das in dem CMS sauber umgestellt hast, sollten alle neu verfassten Einträge dann auch korrekt eingetragen werden. Und die spezielle Kommentar-Syntax bei dem Style-Block nicht vergessen...

Wegen dem Stylesheet:

Sowas bekommt man am schnellsten per DOM-Inspector heraus, das ist ein sehr komfortables Werkzeug, in Firefox findest du das Ding unter Extras. Dort dann einfach den Auswahl-durch-Klick-Button anklicken und in dem Browsertab mit der zu anaylsierenden Seite auf eines der Problemelemente klicken. Automatisch wurde nun in der Baumansicht links das passende Element ausgewählt und rechts erscheint die (hier eher uninteressante) DOM-Node-Ansicht. Klick auf das Symbol oben links in der rechten Spalte aus und wähle CSS Style Rules. Hier siehtst du nun alle auf dieses Element angewendeten Regelsätze und kannst schon sehen, dass der Selektor #navigation ul.nav1st a, #navigation ul.nav1st a:link leider auch auf die Links in der unteren Ebene passen. Wenn du mal kurz die Ansicht in der rechten Spalte auf Computed Style umstellst, siehst du dann auch, dass das Element 176px breit ist. Da man im DOM-Inspector auch das Dokument in gewissen Grenzen modifizieren kann, kannst du hier damit auch gleich etwas rumspielen und verschiedene Lösungen ausprobieren. Nach dem Auswählen eines Regelsatzes oben rechts kannst du dann unten die einzelnen Deklarationen sehen. Dort kannst du per Kontextmenu auch neue hinzufügen, oder bestehende ändern oder löschen.

Screenshot: http://img321.imageshack.us/img321/2...spector9qt.png

Ich habe bei dem genannten Selektor einfach mal testweise die width-Eigenschaft entfernt, ein Blockelement wird ja eh automatisch so breit wie sein Elternelement es zulässt. Ein anderer Ansatz wäre das zusätzliche Definieren von width:auto; für die Selektoren der zweiten Ebene, aber damit würde man nur die eh unnötige width-Definition aus der höheren Ebene überschreiben, da entfernt man die besser gleich ganz.

[goetzi]

Jetzt musst du natürlich noch die Inhalte entsprechend kodiert ablegen, momentan ist das ja noch nicht der Fall. Wenn du das in dem CMS sauber umgestellt hast, sollten alle neu verfassten Einträge dann auch korrekt eingetragen werden.

Ja, das ist mir klar. Da es aber im Moment eh nur Nonsense-Blödsinn ist, hab ich da nur einen kleinen Teil konvertiert.

Wegen der Navigation:
Den DOM-Inspector kannte ich schon, aber dass er so viele Möglichkeiten bietet, wusste ich nicht. Danke für die Hinweise, man lernt eben nie aus.
Zum Entfernen der width-Angabe: Die hab ich drinnen, weil ohne sie der Internet Exploder den Link nicht auf die ganze Schaltfläche ausdehnt (ich habs jetzt mal so drinnen zum Veranschaulichen, einfach mim IE probieren). Ist das ein Bug im IE oder ein Denkknoten in meinem CSS-File?

goetzi

PS: Bitte nicht wundern, dass bei allen Links ein 404er kommt, ich experimentiert gerade mit mod_rewrite herum.

[stephantom]

Die Seite wird zwar als UTF-8 ausgeliefert, gespeichert wurde sie aber mit ISO-8859-1. Deshalb sieht das dann so aus:

[aNtiCHrist]

Ok, das mit dem width stimmt, das bekommt der IE sonst nicht korrekt hin, dann musst du das halt jeweils konkret angeben wenn die Links dort auch auf der ganzen Breite funktionieren sollen.

stephantom, darum ging es doch gerade schon in den zwei letztn Postings.

[Greg5000]

Noch ein paar Kleinigkeiten:

1. oben rechts beim Logo ist Platz frei, das wirkt abgehackt
2. der "Footer" ist linksbündig, der Rest ist zentriert
3. bei den Untermenupunkten kann man links vom Text nicht klicken. Die würde ich per padding für die a-Elemente einrücken

Sonst sehr schön