|
||||
Grafische Buttons zur Navigation nutzen
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 Geändert von dercoe (21.03.2012 um 12:03 Uhr) |
Sponsored Links |
|
||||
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 Geändert von hubspe (21.03.2012 um 12:13 Uhr) |
Sponsored Links |
|
||||
Zitat:
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! |
|
|||
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 Geändert von fricca (21.03.2012 um 13:22 Uhr) |
|
||||
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! Geändert von dercoe (21.03.2012 um 13:28 Uhr) |
|
||||
@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! Geändert von dercoe (21.03.2012 um 13:33 Uhr) |
|
|||
Zitat:
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (21.03.2012 um 13:44 Uhr) |
Sponsored Links |
|
||||
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...
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Navigation ist nicht mittig | Schokokrapfen | CSS | 29 | 19.09.2011 23:19 |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 11:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 16:20 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 15:29 |
Problem mit dem Menü [erledigt] | Julian | CSS | 2 | 15.01.2006 23:27 |