✔ Warum bleibt der Button nicht aktiv?

Status
Nicht offen für weitere Antworten.
L

lp-chester

Erfahrenes Mitglied
Guten abend, liebe Leute!

Ich bin gerade dabei die Seite von dem Reiterhof meiner Schwester zu überarbeiten. Für die Navigation habe ich mir überlegt, dass es drei Stadien eines Button geben soll: Normal, Over und Active. Bis jetzt habe ich alles recht gut mit der Hilfe von Dreamweaver hinbekommen. :-)

Nur habe ich ein Problem: Auf der Test-Seite die ich erstellt habe funktioniert es wunderbar.
(Bsp.: http://www.reiterhof-witzenhausen.de/rhw/test.php)

Wenn ich nun versuche die gleiche Funktion mit der gleichen Struktur auf die richtige Seite anzuwenden, funktioniert zwar der Over-Effekt aber nicht der Active.
(Bsp.: http://www.reiterhof-witzenhausen.de/rhw/

Ich hoffe Ihr konntet mein Problem verstehen und könnt mir helfen.
Vielen Dank, Vianney
 
In deinem Testfall funktioniert es deshalb nur, da die Seite nicht gewechselt wird. Im zweiten Fall wird jedoch die Seite gewechselt. Und damit geht auch die clientseitige Information – denn JavaScript ist clientseitig – des „aktiven“ Verweises verloren.
 
Hallo Gumbo.
Vielen Dank für deinen Tipp, soetwas hatte ich mir auch schon überlegt, weil ich die Seite include...aber deine Idee ist logischer ^^.
Kannst du mir sagen wie ich dieses Problem umgehen kann?

Vielen Dank, Vianney
 
Es gibt unterschiedliche Methode, allerdings würde ich das Ganze erst einmal mit CSS aufziehen:
HTML: 
<ul id="nav-main">
	<li id="nav-main-item-1"><a href="http://www.reiterhof-witzenhausen.de/rhw/index.php?section=home"><span>Home</span></a></li>
	<li id="nav-main-item-2"><a href="#"><span>Wir über uns</span></a></li>
	<li id="nav-main-item-3"><a href="#"><span>Angebote</span></a></li>
	<li id="nav-main-item-4"><a href="#"><span>Bilder</span></a></li>
	<li id="nav-main-item-5"><a href="#"><span>Termine und Preise</span></a></li>
	<li id="nav-main-item-6"><a href="#"><span>Anmeldung</span></a></li>
	<li id="nav-main-item-7"><a href="#"><span>Kontakte</span></a></li>
	<li id="nav-main-item-8"><a href="#"><span>Anreise</span></a></li>
	<li id="nav-main-item-9"><a href="#"><span>Gästebuch</span></a></li>
	<li id="nav-main-item-10"><a href="#"><span>Downlaods</span></a></li>
	<li id="nav-main-item-11"><a href="#"><span>Links</span></a></li>
	<li id="nav-main-item-12"><a href="#"><span>Drachenhöhle</span></a></li>
	<li id="nav-main-item-13"><a href="#"><span>Impressum</span></a></li>
</ul>
Code: 
#nav-main {
	list-style:		none;
}
#nav-main li {
	display:		inline;
}
#nav-main a {
	float:			left;
	display:		block;
	height:			14px;
}
#nav-main a span {
	display:		none;
}
#nav-main-item-1 a {
	width:			28px;
	background-image:	url(http://www.reiterhof-witzenhausen.de/rhw/grafiken/nav/home_off.gif);
}
#nav-main-item-1 a:hover {
	background-image:	url(http://www.reiterhof-witzenhausen.de/rhw/grafiken/nav/home_on.gif);
}
…

Zur Darstellung des aktuellen Verweises gibt es – wie bereits erwähnt – mehrere Methoden. Die meisten basieren jedoch auf der Unterstützung eines serverseitigen Skriptes.
Eine Möglichkeit wäre beispielsweise den aktuellen Verweis mit einem zusätzlichen class-Attribut auszuzeichnen. Eine andere wäre, dem gesamten Dokument eine ID zuzuweisen und die Darstellung mittels geschickter Nutzung der Selektoren zu realisieren.
 
Vielen Dank erstmal an Gumbo.
Bei der Verwendung dieser Variante tun sich mir nocheinmal zwei Fragen auf.

1. Kann ich bei dieser Art der Gestaltung, auch eine absolute Positionsangabe verwenden?

2. Bei dem Code den du mir hier netterweise zur Verfügung gestellt hast, ist der Normal-Effekt und der Over-Effekt definiert. Ich habe versucht das ganze wie folgt zu erweitern, da ich hauptsächlich wollte, dass der Button auf den man zuletzt geklickt hat, aktiv bleibt.

Code: 
#nav-main-item-1 a:hover {
	background-image:	url(grafiken/nav//home_on.gif);
}

Vielen Dank, Vianney
 
Kann ich bei dieser Art der Gestaltung, auch eine absolute Positionsangabe verwenden?
Zum Vergrößern anklicken....
Sicher kann das Navigationsmenü auch noch positioniert werden.

Und wie bereits gesagt, wird zur Darstellung des aktiven Verweises die Unterstützung einer serverseitige Skriptsprache nötig sein.
 
Das heißt, dass ich mir ein Skript in PHP suchen bzw. erstellen muss? Oder die Navi in ein Frame packe, wobei ich von Frames nur selten gutes höre.

Trotzdem Danke, Vianney

P.S.: Wie machen des die Leute auf dieser Seite? http://www.dr-bahr.com/

EDIT: Hab grad gesehen, die benutzen auch Frames. Also heioßt es für mich Frames oder PHP Skript?
 
Hallo.
Ich habe es jetzt ganz anders gemacht. Zuerst habe ich jeder Seite eine eigene Navigation geamacht, d.h.: Wenn man auf Home geht, wird die Navigation von "Home" geladen. Bei der Navigation "Home" ist der Hom-Button Aktiv und der rest ist standartmäßig mit einem RollOver-Effekt ausgestattet. Wenn man auf "Wir über uns" klickt, wird die Navi von "Wir über uns" geladen, bei welcher der Wir über uns-Button Aktiv ist.....usw :-)

Hat einer noch ne bessere idee?

Trotzdem nochmals vielen Dank, Vianney
 
Wie bereits erwähnt, könnte ein serverseitiges Skript anhand eines Parameters überprüfen, welche Seite ausgewählt wurde und das Dokument dementsprechend anpassen. Damit wäre auch nur ein zentral verwaltbares Navigationsmenü erforderlich.
 
Es tut mir leid wenn ich jetzt nerve, aber ich verstehe recht wenig von PHP und habe keinen blassen Schimmer, wie ich soetwas anstellen sollte. Für Hilfe oder ein Tutorial bzw. Link wäre ich sehr Dankbar.

Vianney
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück