|
||||
Der Back-Button und markierte Navi-Links
So, ich habe mal wieder den unerfahrenen User simuliert und etwas getan, was erfahrene User eher selten tun - ich habe ganz ausgiebig den Back-Button im Browser "traktiert".
Dabei bin ich auf folgendes Problem gestoßen: auf Seiten, in denen die jeweils aktiven Links im Menü optisch hervorgehoben werden, kann es vorkommen, dass beim Bedienen das Back-Buttons mehrere Seiten hervorgehoben werden. Nämlich die aktuelle und die vorhergehende. Das dürfte die User ziemlich verunsichern. Jetzt bin ich seit zwei Tagen am Tüfteln und finde keine Lösung. Eventuell liegt es am PHP-Code!? Meine Navigation, die per PHP included wird: Code:
<!-- h1 --> <h1>Navigation</h1> <?php $a = $_SERVER['PHP_SELF']; echo $b; ?> <!-- Menue --> <h2>Die Inhalte</h2> <ul> <li><?php echo (!strpos($a,"index.php"))?'<a href="index.php"><dfn>1 </dfn>Zur Startseite </a>':'<strong><dfn>1 </dfn>> Startseite </strong>'?></li> <li><?php echo (!strpos($a,"aktuelles.php"))?'<a href="aktuelles.php"><dfn>2 </dfn>Aktuelles </a>':'<strong><dfn>2 </dfn>> Aktuelles </strong>'?></li> <li><?php echo (!strpos($a,"info.php"))?'<a href="info.php"><dfn>3 </dfn>Informationen </a>':'<strong><dfn>3 </dfn>> Informationen </strong>'?></li> <li><?php echo (!strpos($a,"vereine.php"))?'<a href="vereine.php"><dfn>4 </dfn>Vereine </a>':'<strong><dfn>4 </dfn>> Vereine </strong>'?></li> <li><?php echo (!strpos($a,"einrichtungen.php"))?'<a href="einrichtungen.php"><dfn>5 </dfn>Einrichtungen </a>':'<strong><dfn>5 </dfn>> Einrichtungen </strong>'?></li> <li><?php echo (!strpos($a,"fotogalerien.php"))?'<a href="fotogalerien.php"><dfn>6 </dfn>Fotogalerien </a>':'<strong><dfn>6 </dfn>> Fotogalerien </strong>'?></li> <li><?php echo (!strpos($a,"historisches.php"))?'<a href="historisches.php"><dfn>7 </dfn>Historisches </a>':'<strong><dfn>7 </dfn>> Historisches </strong>'?></li> <li><?php echo (!strpos($a,"gewerbe.php"))?'<a href="gewerbe.php"><dfn>8 </dfn>Gewerbe </a>':'<strong><dfn>8 </dfn>> Gewerbe </strong>'?></li> </ul> <h2>Hilfen</h2> <ul> <li><?php echo (!strpos($a,"aenderungen.php"))?'<a href="aenderungen.php"><dfn>9 </dfn>Änderungen </a>':'<strong><dfn>9 </dfn>> Änderungen </strong>'?></li> <li><?php echo (!strpos($a,"hilfe.php"))?'<a href="hilfe.php"><dfn>10 </dfn>Hinweise zur Seite </a>':'<strong><dfn>10 </dfn>> Hinweise zur Seite </strong>'?></li> <li><?php echo (!strpos($a,"inhaltsverzeichnis.php"))?'<a href="inhaltsverzeichnis.php"><dfn>11 </dfn>Inhaltsverzeichnis </a>':'<strong><dfn>11 </dfn>> Inhaltsverzeichnis </strong>'?></li> <li><?php echo (!strpos($a,"suchen.php"))?'<a href="suchen.php"><dfn>12 </dfn>Suchen </a>':'<strong><dfn>12 </dfn>> Suchen </strong>'?></li> </ul> <h2>Allgemeines</h2> <ul> <li><?php echo (!strpos($a,"links.php"))?'<a href="links.php"><dfn>13 </dfn>Links aus Koblenz </a>':'<strong><dfn>13 </dfn>> Links aus Koblenz </strong>'?></li> <li><?php echo (!strpos($a,"gbuch/gaestebuch.php"))?'<a href="gbuch/gaestebuch.php"><dfn>14 </dfn>Gästebuch </a>':'<strong><dfn>14 </dfn>> Gästebuch </strong>'?></li> <li><?php echo (!strpos($a,"kummerkasten/kummerkasten.php"))?'<a href="kummerkasten/kummerkasten.php"><dfn>15 </dfn>Kummerkasten </a>':'<strong><dfn>15 </dfn>> Kummerkasten </strong>'?></li> <li><?php echo (!strpos($a,"nachricht.php"))?'<a href="nachricht.php"><dfn>16 </dfn>Kontakt </a>':'<strong><dfn>16 </dfn>> Kontakt </strong>'?></li> <li><?php echo (!strpos($a,"impressum.php"))?'<a href="impressum.php"><dfn>17 </dfn>Impressum </a>':'<strong><dfn>17 </dfn>> Impressum</strong>'?></li> </ul> Code:
div#navi ul li a, div#navi ul li a:link, div#navi ul li a:visited { display: block; color: #b10000; font-weight: bold; text-decoration: none; padding: 0 .2em; border: none; } div#navi ul li a:hover, div#navi ul li a:focus, div#navi ul li a:active { background: #fff8dc; color: #603; } div#navi ul li strong { display: block; background: #fff8dc; color: #000; font-weight: bold; cursor: default; padding: 0 .2em; } div#navi ul li a#aktiv { background: #fff8dc; }
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
Sponsored Links |
|
||||
Möglicherweise handelt es sich hier um einen Browserbug!
Ich habe die Navigation in umfangreichen Tests in reinem HTML angelegt - das Ergebnis ist das gleiche wie bei PHP. Sobald man aktive Links "totschaltet" und im CSS für die Zustände :active und :focus andere Hintergrundfarben als für :link angibt, spinnt der Browser, wenn man den Zurück-Schalter betätigt. Auf der neuen Seite erscheint auch die Markierung des (totegeschalteten) Links von der Seite vorher. Kann das noch jemand bestätigen?
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
Sponsored Links |
|
|||
Ich denke mal, dass das Problem beim CSS-Design liegt. Wenn du zurück gehst, bist du auf der alten Seite und der Link, auf den du auf dieser Seite vorher geklickt hast, ist noch als a:active markiert. Kannst die Markierung mit TAB auf den nächsten Link verschieben.
EDIT: Nimm das a:active raus, dann ist das Problem weg. Geändert von DaniFilth (30.06.2007 um 22:00 Uhr) |
|
||||
hm,
was mir bei deiner #navi augefallen ist: Code:
<li><a href="index.php"><dfn>1 </dfn>Zur Startseite </a></li> Zitat:
Beispiel Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="de"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="author" content="kadees"> <meta http-equiv="imagetoolbar" content="no"> <meta name="robots" content="index, follow"> <meta name="revisit" content="after 10 days"> <meta name="revisit-after" content="10 days"> <style type="text/css"> <!-- * {margin: 0; padding: 0; } --> </style> </head> <body > <ol style="list-style: none; margin: 1em;"> <li>a</li> <li>b</li> <li>c <ul style="list-style: none;"> <li><h3 style="margin: 0.3em 0;">Überschrift</h3></li> </ul> </li> <li>d</li> <li>e</li> </ol> </body> </html> Im Safari/Win tritt der von dir beschriebene Fehler nicht auf!
__________________
Gruss Dieter Vegetarier essen meinem Essen das Essen weg. Und unsere Norweger sind reine Karnivoren. selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS Geändert von kadees (01.07.2007 um 14:03 Uhr) |
|
|||
kadees, lies dir mal die Tutorialserie bei efa durch, dort findest du die Begründung für Dieters Vorgehen.
Tutorium: Barrierefreie Navigationsmenüs - Einfach für Alle |
|
||||
PHP und HTML habe ich als Verursacher ja bereits ausgeschlossen.
Es scheint an der Reihenfolge des Aufrufs im CSS zu liegen. Daran bastle ich aber noch, weil ich weder :focus noch :active rausnehmen möchte.
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
|
||||
So, fünf Tage voller Tests haben meine Nerven auf eine harte Probe gestellt!
Das beschriebene Browserverhalten scheint nur dann nicht aufzutreten, wenn man :link, :hover, :active und :focus identische Eigenschaften-/Wertepaare mitgibt. Das würde aber (unter anderem) bedeuten, dass Tastaturbenutzer mit den doch eher lausigen Fokus-Markierungen der Browser vorliebnehmen müssen. Damit kann ich mich nun wirklich nicht anfreunden. Dieses Thema lege ich jetzt erst mal unter Wiedervorlage ab!
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
|
||||
@fricca:
ok, habs kapiert. Hab mich mit dem Thema Barrierefreiheit bisher nur wenig beschäftigt. Danke für den Link!
__________________
Gruss Dieter Vegetarier essen meinem Essen das Essen weg. Und unsere Norweger sind reine Karnivoren. selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS |
|
||||
So ganz kann ich das Browserverhalten hier wirklich nicht nachvollziehen!?
Die Schalter "zurücK" und "vor" sollen doch ein Bewegen innerhalb der Session-History ermöglichen. Warum aber beim Vor- und Zurückschalten der jeweils aktuelle Link und die vorhergehende Standortmarkierung gleichzeitig angezeigt werden, ist meiner Meinung nach logisch nicht begründbar.
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
Sponsored Links |
|
||||
Kann man da nicht mit JavaScript was machen?
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
links (navi) gleichmässig horizontal verteilen | victorwooten | CSS | 5 | 26.10.2006 11:52 |
Holy Grail und der Internet Explorer! | ONeill | CSS | 23 | 01.06.2006 19:20 |
Probleme mit 3 spalten | luk | CSS | 3 | 08.06.2005 15:39 |
div zentriert ? | malo.conny | CSS | 2 | 26.04.2005 09:40 |