Hallo zusammen,

bastel gerade an einem Relaunch einer Site, die von Frames in CSS "umgewandelt" werden soll. Stichwort Barrierefreiheit.

Hier mein Showcase: 'ne Kistedüvel - Höllisch gut drauf -

Die einzelnen Buttons in der Navigation habe ich via CSS als background eingebunden.
Den Text dafür im HTML auf SPAN und im CSS auf display:none gesetzt.

Wenn ich mir die Seite nun ohne Style anschaue, werden die Links als Liste dargestellt und können angeklickt werden.
Nehme ich mein Stylesheet mit rein, werden nur die Buttons angezeigt und die Schrift (in dem Fall die Links) ausgeblendet.

Nun möchte ich jedoch erreichen, daß die Buttons dennoch zur Navigation dienen.

Im Moment dreh ich mich im Kreis...

[B]EDIT:Hat sich erledigt, hatte den falschen Selektor angesprochen. Der a-Selektor wäre die richtige Wahl gewesen
Und die Eigenschaften height und width sowie display:block mussten mit eingefügt werden

Gruß
Marko

Moin,

das mit dem display:none; ist aus Gründen der Barrierefreiheit leider gar keine gute Idee.
Die Screenreader lesen solche Elemente nicht mehr vor.

Hier mal zwei Umsetzungen, eine mit Text im Bild und eine mit Bild nur als HG.

edit. Es ist sogar noch einiges mehr im Argen:
Zieh mal dein Browserfenster kleiner.....Fällt dir was auf?
Inhalte verschwinden nach rechts unerreichbar im Nirgendwo (FF).

Erste schnelle Maßnahme: overflow:hidden für body muss raus. Solche Anweisungen sind fast nie gut.

edit. Da wimmelt es ja von überflüssigen overflow:hiddens und position:absolute/fixed.
Schau doch mal bei Little Boxes vorbei, damit du die Basics etwas vertiefen kannst.
So wird das jedenfalls leider nix g'scheits.

__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Hi,

der Grundaufbau ist ein Template um Frames durch CSS zu ersetzen. Habe es mir von der Seite Dynamic Drive CSS Layouts- CSS Frames heruntergeladen und angepasst.

Ein wenig "static" sollte auf der Seite schon vorhanden sein, damit mir das "Layout" nicht zusammengeschoben wird. Das war der ursprüngliche Gedanke.

Habe bisher nur "fixe" Layouts hergestellt, und für die Umsetzung der alten Frameseite kam mir dieses Template gerade richtig.

__________________
Gruß
Marko


Habt Geduld mit den Anfängern, schließlich wurde niemand allwissend geboren!

das nützt aber imho nicht soviel, wenn bei einem kleinem Bildschirm Inhalte unerreichbar werden.
Unter ca. 1200px Bildschirmbreite ist das der Fall. Da reicht schon ein netbook Von kleineren Ausgabegeräten wie Schmachtfons fange ich lieber gar nicht erst an.
Das mit dem Verschwinden gilt übrigens auch vertikal. Ich denke nicht das die unteren Menüpunkte in einem netbook erreichbar sind.

So ein fixed Layout halte ich jedenfalls für viel zu unflexibel.

__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Wenn die Motivation für die Umstellung der Seite Barrierefreiheit sein soll, dann muss man leider sagen, dass die Barrieren eher mehr geworden sind (es ist nicht ja schwer, die bestehende Frame-Seite zu finden).
Die min-width-Angabe für den Hauptinhalt und die partielle Unerreichbarkeit der Navigation sind die Hauptprobleme. Die min-width sollte weg, und die Navigation sollte ebenfalls vertikal scrollbar sein. Im Moment kann man z.B. den Link zum Impressum nicht erreichen, wenn man nicht einen entsprechend hohen Viewport hat. Keine gute Idee.

Wenn das ganze neu umgesetzt werden soll, frage ich mich, warum dann auf Teufel komm raus dieses 90er-Jahre Look-and-Feel bestehen bleiben soll. Warum nicht wirklich neu machen -- mit modernem Design und modernen Methoden?

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

Hallo,

ich teile Deine Kritik. Wenn ich mir die Seite mit der Web Developer Toolbar auf 1280x960 ansehe kann ich noch alles erkennen.

Bei einer Größe von 1024x768 verschwindet alles.

Leider habe ich allerdings die Befürchtung, daß sich alles zusammenschiebt, sobald jemand die Seite mit einer kleineren Auflösung anschaut. Deshalb hab ich da noch ein wenig "Angst"

Little Boxes habe ich als Buch vorliegen. Habs auch schon einmal durch und denke die Grundlagen zu verstehen. Ab und an muß ich es nochmal zur Hilfe nehmen.

Ich denke es gibt für alles ein pro und contra.

Ich gelobe Besserung.

__________________
Gruß
Marko


Habt Geduld mit den Anfängern, schließlich wurde niemand allwissend geboren!

@Corina: Eine durchaus angemessene Frage. Ich denke auf kurz oder lang werde ich da nicht drum herum kommen. Vielleicht sollte ich den Ansatz tatsächlich nutzen um die Seite zu modernisieren!

__________________
Gruß
Marko


Habt Geduld mit den Anfängern, schließlich wurde niemand allwissend geboren!

Mal ne kleine OT-Frage:

Was bedeuten die einzelnen Symbole unten rechts im Beitrag?
Ich meine, wie kann ich einzelnen Text für ein Zitat auswählen "Das Zeichen mit den Anführungszeichen"?

Ich zitiere immer den kompletten Text, obwohl ich evtl. nur eine Zeile benötige.

Danke und zurück zum Thema

__________________
Gruß
Marko


Habt Geduld mit den Anfängern, schließlich wurde niemand allwissend geboren!

Damit kannst du mehrere Beiträge als Zitat in deine Antwort aufnehmen. Jeder Beitrag eines Threads, bei dem du das "Anführungszeichensymbol" einmal angeklickt hast, wird in deine nächste Antwort übernommen.

Du kannst die Voll-Zitate manuell kürzen und mit [ quote ][ /quote ] (ohne Leerzeichen) umfassen, wenn du ein Zitat aufteilen willst. edit: Dafür gibt's eine Schaltfläche im Editor.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

Von welchem "Layout" redest du? Auf meinem 24'' werd ich von fast 250 Zeichen pro Zeile vom Text regelrecht erschlagen. Optimal wären ca. 60-80. Das ist einfach eine Zumutung. Zum Glück bleibt es mir (und deinen Besuchern) überlassen, ob ich (sie) das lesen will (wollen). Und du redest von Barrierefreiheit...