Navigation via 'include' auf alle Seiten, aber Sprungmarken funktionieren nur auf 'externe' Links

[Holger]

Hallo zusammen,

entweder formuliere ich meine Suchanfragen an Google so schlecht, oder mein Problem existiert nur bei mir ;-)

Ich habe mehrere Seiten auf meinem Server, deren Navigationsleiste via <?php include "aj_header_test.php"; ?> auf jeder Seite eingebunden ist. In dieser 'Header'-Seite sind die entsprechenden Links normal als href-links angegeben:

<li><a href="index.php#home" >HOME</a></li>  

<li><a href="aj_about_de.php#about" >ÜBER UNS</a></li>

<li><a href="aj_about_de.php#team" >TEAM</a></li>  
 
<li><a href="aj_destination_de.php#ideen" >REISE IDEEN</a></li>

Mein Problem ist, dass diese Links nur auf fremde Seiten wirken, d.h. ich bin auf 'HOME' und kann alle Sprungmarken auf 'ÜBER UNS' oder 'REISE IDEEN' anspringen. Auf der aktuellen Seite geht das nicht (es sei denn, ich nehme den Dateinamen vor dem '#' raus, dann geht's natürlich - aber dann nur auf der jeweils aktuellen Seite, die Sprünge auf Fremdseiten sind dann futsch).

Was mache ich falsch und wie kann ich das Problem lösen?

Danke für Eure Hilfe, und frohe Weihnachten!

Holger

[Gunnar Bittersmann]

@@Holger

Mein Problem ist, dass diese Links nur auf fremde Seiten wirken

Dei Problem liegt außerhalb des hier von dir Gezeigten.

Was mache ich falsch

Das Navigationskonzept an sich? Gleichartige Menüpunkte in einer Liste, die mal auf eine andere Seite, mal auf andere Bereiche verweisen? Oder ist aj_destination_de.php ein one-pager, der sich für den Nutzer wie verschiedene Seiten verhält?

<li><a href="index.php#home" >HOME</a></li>  
<li><a href="aj_about_de.php#about" >ÜBER UNS</a></li>
<li><a href="aj_about_de.php#team" >TEAM</a></li>  
<li><a href="aj_destination_de.php#ideen" >REISE IDEEN</a></li>

Die Beschriftung der Links ist falsch. Screenreader lesen da womöglich „Ha-o-em-e“, „Ü-be-e-er u-en-es“, „Te-e-a-em“, „Er-e-i-es-e I-de-e-e-en“ vor.

Verwende im Markup die normale Schreibweise „Home“, „Über uns“, „Team“, „Reise-Ideen“.^[1] Die Großschreibung ist Sache von CSS:
nav { text-transform: uppercase } ^{[2] [3]}

LLAP 🖖

---

1. Das Deppenleerzeichen hab ich gleich mal mit korrigiert. ↩︎

2. Die Liste ist doch – wie sie sein sollte – in einem nav-Element, oder? ↩︎

3. Außer für Klingonisch. Aber dafür hat man ja :lang(tlh) { text-transform: none !important } im Stylesheet zu stehen. ↩︎

[Holger]

@@Gunnar, vielen Dank erst mal für Deine Antwort. Sorry für den schlecht formatierten Text. Ich versuche mich zu bessern 😀

Deine Tipps nehme ich gerne an und werde das Script entsprechend umstellen. Aber mein eigentliches Problem löst das natürlich noch nicht.

Die Liste ist in der Tat in einem <nav> Element. Die Seite war früher mal ein Onepager, ich musste sie jetzt aber erweitern und daher gibt es halt mehrere parallele Seiten, auf die auch gesprungen werden muss. Ich (Amateur - aber gezwungen zu Handeln, da sich die Agentur in einen mehrwöchigen Weihnachtsurlaub verabschiedet hat) habe die ursprüngliche Seite 'aufgebohrt' und angepasst und halt zusätzliche Seiten hinzugefügt.

Ein neues Navigationskonzept muss her ?!?. Irgendwelche Tipps, wie ich das relativ anpassen kann?

Danke schön 😀

Viele Grüße, Holger

[pl]

Hi,

Ein neues Navigationskonzept muss her ?!?. Irgendwelche Tipps, wie ich das relativ anpassen kann?

Idee: Man braucht eine zentrale Konfiguration in welcher die virtuellen URLs zum Menu notiert sind. Desweiteren sind ein Titel und ggf. ein Kurztitel zu jedem URL konfiguriert, also nicht nur zu URLs die ins Menü gehören sondern für sämtliche URLs. Außerdem wird zu jedem URL ein virtueller Ordner konfiguriert so daß, wenn man auf einen solchen klickt, alle URLs aufgelistet werden die in den Ordner gehören. Zum Anklicken versteht sich. Und natürlich darf es mehrere Ordner geben und auch Ordner in Ordner, womit man das Ganze hierarchisch aufsetzen kann. Wenn man diese Idee verstanden hat, ist der Rest nur noch Tipparbeit. MfG

[Gunnar Bittersmann]

@@Holger

Ein neues Navigationskonzept muss her ?!?.

Das will ich so nicht gesagt haben. Wenn sich aj_about_de.php#about und aj_about_de.php#team für den Nutzer so verhalten, als wären es verschiedene Seiten, dann kann man das Navigationsmenü sicher so machen. Wenn sich das nicht so verhält, könnte es verwirrend sein.

Aber hömmal, wenn du da schon mit PHP rummachst, könntest du auch gleich die jeweils aktuelle Seite im Menü kennzeichnen:

<li><a aria-current="page" href="…">…</a></li>

und die aktuelle Seite in Menü nicht verlinken. Entweder kein href

<li><a aria-current="page" tabindex="0">…</a></li>

oder auf den Bereich mit dem Hauptinhalt auf der Seite verweisen:

<li><a aria-current="page" href="#main">…</a></li>
⋮
<main id="main">

Das aria-current-Attribut lässt sich dann auch nutzen, um die aktuelle Seite im Menü visuell hervorzuheben.

LLAP 🖖

[Holger]

Cool! Auch dass kannte ich noch nicht! Das werde ich ausprobieren 😀

Danke nochmals!

[Gunnar Bittersmann]

@@Holger

Cool! Auch dass kannte ich noch nicht! Das werde ich ausprobieren 😀

Using the aria-current attribute

LLAP 🖖

[Tabellenkalk]

Hallo,

Außer für Klingonisch. Aber dafür hat man ja :lang(tlh) { text-transform: none !important } im Stylesheet zu stehen.

Wo krieg ich einen Screenreader her, der mir Webseiten auf Klingonisch vorliest?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Wo krieg ich einen Screenreader her, der mir Webseiten auf Klingonisch vorliest?

Wenn du dich nicht auf den Weg nach Kronos begeben willst, frag doch mal den Ferengi deines geringten Misstrauens, was er so im Angebot hat.

LLAP 🖖

[einsiedler]

einsiedler

[Gunnar Bittersmann]

@@einsiedler

alt = ?

LLAP 🖖

[einsiedler]

nuq DaHech

einsiedler

[Rolf B]

Hallo einsiedler,

potlh nuq…

(danke an http://tradukka.com/translate/en/tlh) 😂

Rolf

[Gunnar Bittersmann]

@@einsiedler

nuq DaHech

Hu’tegh, ich kann zwar neben lateinischen Buchstaben auch кириллица, ελληνικό αλφάβητο, אלפבית עברי und 한글 entziffern, aber pIqaD hab ich noch nicht gelernt. Meh.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Hu’tegh, ich kann zwar neben lateinischen Buchstaben auch кириллица, ελληνικό αλφάβητο, אלפבית עברי und 한글 entziffern, aber pIqaD hab ich noch nicht gelernt. Meh.

… was mich aber nicht davon abhält, das zu verwenden 😉

LLAP 🖖

[dedlfix]

Tach!

Mein Problem ist, dass diese Links nur auf fremde Seiten wirken, d.h. ich bin auf 'HOME' und kann alle Sprungmarken auf 'ÜBER UNS' oder 'REISE IDEEN' anspringen. Auf der aktuellen Seite geht das nicht (es sei denn, ich nehme den Dateinamen vor dem '#' raus, dann geht's natürlich - aber dann nur auf der jeweils aktuellen Seite, die Sprünge auf Fremdseiten sind dann futsch).

Dann mach das so. Aber nur für die aktuelle Seite. Wenn das eine Include-Datei für alle Seiten ist, dann kannst du mit Fallunterscheidungen (if) arbeiten. Die inkludierende Seite sagt in einer Variable, wer sie ist. Die inkludierte Navigation prüft den Wert und gibt den Link entsprechend so oder so aus.

dedlfix.

[Holger]

Hallo dedlfix,

danke für Deine Nachricht.

Das habe ich schon versucht. Aber leider bin ich da auch nicht weiter gekommen, da das Script immer nur die eingebundene 'Headerpage' als aktuelle Seite erkannt hat (hatte das mit: basename(__FILE__); getestet). Dadurch war natürlich die 'aktuelle Seite' immer die gleiche, nämlich 'header.php'.

Hättest Du da sonst einen Tipp, wie ich dieses besser machen könnte?

Danke, und Gruß, Holger

[Matthias Apsel]

Hallo Holger,

if (strpos($_SERVER['SCRIPT_NAME'], 'index.php')) : 
		// index ist die aktuelle Seite
				
elseif (strpos($_SERVER['SCRIPT_NAME'], 'kontakt')) :
		// 
				
elseif (strpos($_SERVER['SCRIPT_NAME'], 'impressum')) : 
		//

endif;

Bis demnächst
Matthias

[dedlfix]

Tach!

Das habe ich schon versucht. Aber leider bin ich da auch nicht weiter gekommen, da das Script immer nur die eingebundene 'Headerpage' als aktuelle Seite erkannt hat (hatte das mit: basename(__FILE__); getestet). Dadurch war natürlich die 'aktuelle Seite' immer die gleiche, nämlich 'header.php'.

FILE bezieht sich auf die Datei, in der es steht. Schreib es in die aufrufenden Dateien in eine Variable. Oder siehe Matthias, beziehungsweise in $_SERVER, was da so nützliches drinsteht.

dedlfix.

[Holger]

Danke Euch!

$_SERVER hat es gebracht und den Unterschied gemacht. ich habe es jetzt per PHP-Script gelöst 😀

Allen ein friedliches Weihnachtsfest und viele Grüße aus Bremen,

Holger