Subnavi weist Fehler auf

[Quabbe]

Hallo,

auf meiner noch im Aufbau befindlichen Seite Caeruin - Der Weltenbastler Blog spinnt die Subnavi sich einen zusammen. Ich hab mit allen aktuellen Browsern das Problem, dass der Hovereffekt nicht ordnungsgemäß funktioniert. Ich häng mal einen Screenshot an, der das Problem beschreibt:



An Mausposition 1 sieht man keinen Hover Effekt (er sollte aber da sein!). Bei Position 2 ist alles i.O. Kann mir jemand sagen, was da los ist? Ich wäre euch unendlich dankbar! :)

Hier die CSS-Datei: http://www.caeruin.de/css/basic.css


Grüße,
Quabbe

 

[Efchen]

Wie ist der Link zur Seite?

Sieht aus, als wäre Dein Link (<a>) nicht so groß, wie das Listenelement (<li>).

display:block und width/height:100%.

 

[Quabbe]

Morgen,

ist jetzt schon das zweite Mal, dass mich jemand nach dem Link fragt. Dabei steht er doch im ersten Beitrag. Ist er dort nicht als solcher zu erkennen oder meinst Du einen anderen Link? Er lautet jedenfalls Caeruin - Der Weltenbastler Blog :)

Und vielen Dank für Deinen Lösungsvorschlag! Werde ich zuhause sofort ausprobieren. Das komische ist halt nur, dass die anderen Links normal funktionieren und dieses Phänomen nur im Zusammenhang mit der Subnavi auftritt.


Grüße,
Quabbe

 

[Efchen]

Entschuldige, das hab ich im Fließtext wahrscheinlich wirklich einfach übersehen :-)

Der Fehler liegt woanders.
Du hast im ul.subnav ein padding-left:40px. Das überlagert Deinen Link, daher geht auf den rechten 40px des Links kein Hover.

Übrigens solltest Du die Links mindestens 3x größer machen, der Text ist viel zu klein zum Lesen und für manche sicher auch zum Klicken zu klein. Fließtext sollte immer 1em groß sein, davon ausgehend kann ein Menü auch mal 0.9 oder vielleicht auch 0.8em groß sein. Aber so ist das viel zu klein. Und wenn ich meine Schriftgröße 5x größer stelle, dann platzt Dein Layout, weil der Text nicht in die viel zu kleinen Buttons passt und er verschwindet dann, d.h. wenn er groß genug wäre zum Lesen, kann ich ihn nicht mehr lesen, weil er dann halb abgeschnitten ist.
Websites mit pixelgenauen Layouts sind im WWW immer problematisch bis unmöglich.

 

[Quabbe]

Aaah, padding heißt der Übeltäter. Das leuchtet ein - mit dem hatte ich schon so manches Mal das 'Vergnügen'. Danke. :)

Die Sache mit der Größe ist halt so 'ne Sache. Ich bastel seit drei oder vier Jahren an dem Design rum (immer mit langen Pausen zwischendurch). Wenn ich die Links größer machen möchte, reicht der Platz für den Content nicht mehr aus bzw. würde noch weiter schrumpfen. Und die Navi nur auf eine Seite zu legen schaut einfach nicht richtig aus...

Wobei ich die Seite mit Strg + Mausrad aber problemlos größer oder kleiner skalieren kann. Was meinst Du mit 'dann platzt mein Layout'?

 

[Gilles]

Es gibt die Möglichkeit nur den Text zu vergrößern. Das meint er wohl damit. :)
Außerdem. 3-4 Jahre für ein Design?
Das nenn ich mal Ausdauer ^^
Aber würde echt gucken, dass das Design dann wenigstens so veränderst, sodass alle deinen Seiteninhalt auch ordentlich lesen können :)

 

[Quabbe]

Wie vergrößert man denn nur den Text?

Das Problem ist, dass die Größe meines Layouts am Header ausgerichtet werden muss. Ich kann meine Inhalte nicht dynamisch in die Breite wachsen lassen - das macht der Torbogen einfach nicht mit. Und mehrzeilige Navilinks finde ich auch nicht wirklich prickelnd.

Letztlich bleibt doch nur, das Design so zu nehmen wie es ist oder es komplett über den Haufen zu werfen und von vorne anzufangen. Und nach drei bis vier Jahren Arbeit, die da drin stecken, neige ich nicht zu letzterem.


Grüße,
Quabbe

 

[Efchen]

Wenn ich die Links größer machen möchte, reicht der Platz für den Content nicht mehr aus

Auf diesem Rechner von mir reicht der Platz mehr als genug, da hast Du locker nochmal 50% mehr Platz, und das ist nichtmal der größte Bildschirm. Auf meinem EeePC würde der Platz wahrscheinlich jetzt schon nicht mehr reichen. In noch kleineren Viewports wird Deine Website zur Qual und man würde sie wahrscheinlich sehr schnell wieder verlassen.

bzw. würde noch weiter schrumpfen. Und die Navi nur auf eine Seite zu legen schaut einfach nicht richtig aus...

Ich weiß schon, was Du meinst, mir gefällt das Design auch sehr, aber der Text im Menü ist dennoch zu klein. Auch dadurch verlierst Du Nutzer.

Wobei ich die Seite mit Strg + Mausrad aber problemlos größer oder kleiner skalieren kann. Was meinst Du mit 'dann platzt mein Layout'?

Ansicht -> Zoomen -> Nur Text zoomen.

Das Problem ist, dass die Größe meines Layouts am Header ausgerichtet werden muss.

Ideales Layout wird an der Größe des Viewports ausgerichtet.
Das macht Webdesign aber auch so ungeheuer schwer, viel schwerer als Print-Design. Und es ist eben ganz ganz anders.

Und mehrzeilige Navilinks finde ich auch nicht wirklich prickelnd.

Es gibt eine Stelle, an der muss man Abstriche am Design machen, wenn man die Nutzer nicht vergraulen will. Webdesign ist kein Printdesign.

Letztlich bleibt doch nur, das Design so zu nehmen wie es ist oder es komplett über den Haufen zu werfen und von vorne anzufangen. Und nach drei bis vier Jahren Arbeit, die da drin stecken, neige ich nicht zu letzterem.

Manchmal ist es aber besser, ein Web-taugliches Design mit 100.000 Nutzern zu haben, als ein wunderschönes Design, was überhaupt nicht web-gerecht ist und dafür nur 10 Nutzer.

Wobei ich damit jetzt auch nicht sagen will, Du sollst alles wegwerfen. Ich sage nur, dass die Linktexte extrem klein sind. Ich weiß, dass Webdesign eine Gratwanderung ist. Und ich habe auch nicht für alles eine gute Lösung.

 

[Quabbe]

Mit den Linktexten sprichst Du etwas an, was ich so vorher noch nicht bedacht habe. Seit ich ein Kapitel über Barrierefreiheit gelesen habe, versuche ich eigentlich stets, dieser auch gerecht zu werden. Zum Beispiel in Form eines Links ganz zu Anfang, mit dem sich die Navi überspringen lässt - dazu hab ich zwei Tage herumdoktorn müssen, bis die rechte Navi im HTML Dokument schließlich vor dem Content lag (position:absolut lässt grüßen).

Ich möchte die Seite schon einem möglichst großen Publikum zugänglich machen (bzw. jedem). Aber gleichzeitig möchte ich auch den Header behalten - der hat mir wirklich einiges abverlangt, auch wenn Photoshop-Cracks sowas sicherlich in zwei Stunden erstellt haben. Heute wüsste ich nicht mal mehr, wie ich die Strukturen in den Stein bekommen habe. Das liegt alles schon Jahre zurück. Neueren Datums sind nur die Ketten und die hölzernen Elemente.

Ich werd mir mal eine Lösung überlegen. Vielleicht eine Art Holz-Schild, das über den Rahmen hinausgeht. Oder ich kürze die Linknamen auf ein Minimum... na, mir wird schon was einfallen.

Jedenfalls vielen Dank, dass Du mir Deine Ansichten so ausführlich mitgeteilt hast! :)


Grüße,
Quabbe