Link-Formate in Navigationsleiste

Sero

Hallo,

hier der link zu meiner seite:

http://www.sebastianrost.de/pallmann/

die Formate der Links in der Navigation werden über css gesteuert. das Layout besteht aus nem frameset.

mein Problem:

ich möchte den aktiven Link durch einen Farbwechsel der Schriftfarbe (rot) hervorheben (active). nun funktioniert das auch, wie ihr testen könnt, aber beim erneuten klicken auf die seite wird der aktive link wieder grau.
habe schon einiges probiert (im css), komme aber nicht weiter.

meine bedingung ist aber, dass die navigationsleiste (navi-html) nicht durch ne neue ausgetauscht wird, in der man den aktiven link anders stylen könnte, sondern immer die gleiche html benutzt wird.
ist das irgendwie möglich oder wirds zu kompliziert?

Vielen Dank und nen schönen Gruß aus Glasgow
Sebastian

SabineP

Hallo Sebastian,

>> dass die navigationsleiste (navi-html) nicht durch ne neue ausgetauscht wird,
>> in der man den aktiven link anders stylen könnte, sondern immer die gleiche html benutzt wird.

Der Link muß eine andere Klasse bekommen, ansonnsten kann sich auch die Farbe des Links nicht ändern.
Der HTML-Code muß also neu geladen werden.

Nimm am besten bei dieser Gelegenheit gleich die Frames heraus. Das erspart in Zukunft viel Ärger.

Gruß Sabine

Sero

Hi Sabine,

du meinst also ich muss für jeden aktivierten link, z.b. wenn ich auf angebote klicke, ne separate html file erstellen mit entsprechend abgeänderten styles?

ich weiss ja das die frame technik etwas in jahre gekommen ist, aber ich wollte nicht noch mal alles ändern. was gebe es den für ne alternaive...div elemente?
Falls ja hab noch nicht so die erfahrung damit, mache außerdem meine seiten mit phase5 und photshop.

gibt es für mein problem vielleicht auch nen java script?

Gruß Sebastian

SabineP

>> du meinst also ich muss für jeden aktivierten link, z.b. wenn ich auf angebote klicke,
>> ne separate html file erstellen mit entsprechend abgeänderten styles?

Die separate HTML-Datei brauchst Du nicht, wenn Du alle 3 Frames die zusammengehören,
in eine einzige HTML-Seite steckst.

Meiner Meinung nach die einfachste und sicherste Variante für alle Browser und auch für Suchmaschinen-Roboter.

Gruß Sabine

Sero

Hallo

leider konnte ich zu meiner Anfrage in diesem Beitrag noch nicht den überzeugenden Lösungsvorschlag finden:

1. einerseits kann ich den aktiven Link der Navi darstellen, indem ich eine auf eine neue html verweise, wo der aktive Link neue Eigenschaften über css zugewiesen bekommt (z.B rote Schriftfarbe). Nachteil: ich habe meine Navi auf jeder seite und wenn es Änderungen gibt macht das ne menge aufwand.

2. ich habe gelernt das man wiederkehrnede elemente (wie z.B. Navi-Leiste) über SSI und folgendem Befehl (Bsp.) referenzieren kann. das funktioniert ähnlich wie bei den frames, nur es ist halt besser.
Aber jetzt habe ich wieder das Problem mit dem aktiven Link a:active. Ich kann natürlich a:active anders definieren um ihn hervorzuheben, aber wenn ich erneut klicke ist die Hervorhebung weg.

=> wie könnte die Lösung lauten. ich möchte Referenzierung über Befehl nutzen und zugleich den aktiven Link so lange hervorheben bis ich einen anderen Punkt meiner Navi anwähle.

Gruß aus Scotland
Sero

FSt

Hallo Sero

Da ist nicht mehr HTML sondern eine Script-Sprache gefragt. Denn Du musst eine "if ... then" Abfrage einbauen. Also so etwas wie:


if "SeitenTitel" = "ButtonName" then "Button" = "ActiveButton"

Und wie schon Oesi50 sagte hat, geht sowas nicht mit HTML ...
http://www.hilfdirselbst.ch/foren/XHTML_1_0_Strict_P236309.html#236309

Gruss
Martin

Sero

Hallo Martin,

kannst du deine Anwort noch ein wenig ausbauen und vielleicht auf dieses Bsp. anwenden:
Link aus meiner html:


contacts

CSS style für link:


a.nav {color:black;}

a.nav:hover {color:red;}

a.nav_active {color:blue;}

Wie baue ich mein script nun hier ein. ich möchte lediglich ne ander textfarbe erzeugen für den aktiven Link, die solange bestehen bleibt bis ich nen andern punk anklicke.
die seite von mir verdeutlicht den effekt den ich haben will.
http://www.loft-office.de/

Vielleicht kannst mir mir eine Beispielseite geben.

Danke und Gruß
Sebastian

FSt

Hallo Sero

Dort ist es ganz einfach gemacht worden:
Auf der Seite auf der Du Dich gerade befindest, ist der Link mit der Klasse "navactive" markiert. Alle anderen haben "navbold".

Wenn Du Deine Navigation nur einmal anlegen willst, musst Du in einem Script eine Abfrage einbauen. Denn Die Navigation kann von sich aus ja nicht wissen ob ein Linnk "navactive" oder "navbold" sein soll.

Du musst also so was einbauen wie:


  if SeitenTitel = ButtonName

    then print "nav_active"

    else print "nav"

href="html/general_contact.html" target="_top">contacts

Verstehst Du was ich meine? So wird aus Deiner Klasse entweder ein "nav_active" oder ein "nav", je nach Situation.

Ich weiss nicht welche Scriptsprache Du beherrschst, bzw. Dein Server erlaubt. Aber versuch mal Dein Glück hier:
http://www.hilfdirselbst.ch/foren/Perl_und_CGI_Forum_18.html

Gruss
Martin

Sero

Hallo Martin,

hier ist die seite, wo ich dein script anwenden will:
http://www.hirsts.co.uk/
die hauptnavigation liegt extern vor und du findest die hier:
http://www.hirsts.co.uk/html/main_nav.html
wie du sehen wirst, habe ich dein script schon eingebaut, aber es funktioniert irgendwie nicht. meine script-kenntnisse sind leider beschränkt.
vielleicht kannst du mir die zeile anpassen und funktionstüchtig machen.

Danke
Sero

FSt

Hallo Sero

Mein Code-Beispiel kann nicht funktionieren (es ist nämlich gar kein Code, Sorry). Das war so etwas wie

if "Apfel" = "schmutzig"
then "waschen" = "ja"
else "direkt essen"

Es sollte Dir nur den logischen Aufbau der Abfrage aufzeigen. Die Programmierung/Umsetzung muss in einer Sprache wie Pearl oder PHP erfolgen. Deshalb hab ich Dich auch ins Pearl-Forum verwiesen [smile]

Gruss
Martin

ganesh

Hier ist eine Möglichkeit mit PHP.

Eigentlich ist es doof, zur Seite zu verlinken, auf der man sich schon befindet. Ergo würde ich den Link jeweils ganz rausnehmen, statt nur die CSS-Klasse zu ändern. Aber das kannst du selber nach Belieben anpassen.




function nav($link, $title, $display) {

	$req = $_SERVER['REQUEST_URI'];

	if(strstr($req, $link)) {

		echo "$display 
";

	} else {

		echo "$display
";

	}

}



nav("seite-01.php", "Mein Seiten-Titel 01", "HELLO WORLD");

nav("seite-02.php", "Mein Seiten-Titel 02", "FOO BAR");

nav("seite-03.php", "Mein Seiten-Titel 03", "HYPERTEXT PREPROCESSOR");



?>

Sero

Hallo Ganesh,

danke für deinen vorschlag aber leider habe ich keinen Plan wo ich das skript einfügen muss und was ich für meine Navigation abändern müsste.
Ich wäre dir sehr dankbar, wenn du das skript beispielsweise für einen meiner links anpassen könntest.
Hier nochmal die links für die haupseite:
http://www.hirsts.co.uk/
und die navigation
http://www.hirsts.co.uk/html/main_nav.html

Danke
Sero

ganesh

Hast du überhaupt PHP auf deinem Hosting-Account? Voraussetzung dass so etwas überhaupt funktioniert, ist natürlich dass PHP vorhanden ist. Die Dateinamen (Endungen) müsstest du dann auch alle in .php ändern statt .html.

Sero

Hi Ganesh,

ich glaube ja. ich werd mich noch mal genau informieren. jedenfalls funktiniert SSi Support.
Ich habe mir eigenentlich nicht gedacht, das die Lösung meines Problem so kompliziert sein würde. Ich bin davon ausgegangen man kann den a:active mittels Java Script umschreiben, so dass er nicht beim nächsten klick wieder deaktiviert wird.

Gruss
Sero

ganesh

Es gibt noch eine CSS-only Lösung:

- In jeder Seite weist du dem body tag eine unique ID zu, z.B.

- Im CSS spezifizierst du den Link style für jede Seite, z.B.
#three #nav #n3 a:link,
#three #nav #n3 a:visited {
text-transform: uppercase;
color: #FFFF00;
}

d.h. #three = Seiten - ID (body ID),
#nav = Navigations-Block (div id),
#n3 = Navigations-Item

ganesh

Hier noch ein kleines Demo

Sero

Hallo Ganesh,

vielen Dank für deinen Tip. Funktioniert echt super und ist eine ganz einfache und super lösung.
Hier mein ein auszug von meinem skript: ...ich hoffe es findet nachahmer ;-)

Html


...



...

 

....

externe Navigation




home

projects

CSS


a.nav_main {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color:#FFFFFF;

font-weight:bold;

text-decoration:none;

}



a.nav_main:hover {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color:#CC0000;

font-weight:bold;

text-decoration:none;

}

#home #bl_nav1 #nav_main1 {color:#CC0000;}

#home #bl_nav1 #nav_main1:hover {color:#FFFFFF;}



#projects #bl_nav1 #nav_main4 {color:#CC0000;}

#projects #bl_nav1 #nav_main4:hover {color:#FFFFFF;}

Gruß Sero

Klaus_aus_MG

Hi ganesh,
erstmal ein frohes neues Jahr !
Ich habe mir deine CSS-only Lösung angeschaut weis aber leider nicht wie ich sie für meine Navigation umsetzen kann.
Ich frage mich, wie komme ich an die Nr. des Navigationsitems ?
Ich habe meine CSS-Navigation über ul und li realisert:


#RMenue   { visibility: visible; position: absolute; top: 0; left: 76px; width: 400px; height: 50px }

#RMenue a { display: block; float: left; height: 24px; margin-right: 20px; padding-left: 10px; padding-right: 10px; padding-top: 6px;

			text-decoration: none; color: white;	}

#RMenue ul { font-size: 0.9em; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; list-style: none; margin: 0; padding: 0; height: 30px }

#RMenue ul li { display: inline;}

#RMenue ul li a { display: block; float: left; height: 24px; margin-right: 20px; padding-left: 10px; padding-right: 10px; padding-top: 6px;

				  text-decoration: none; color: white;	}

#RMenue ul li a:hover { color: black; background-color: #CCCCCC; border-top: 2px solid black; height: 22px; padding-top: 4px;}

#RMenue ul li a:hover,

#RMenue ul li a.menue_aktiv { }

#RMenueRe  { visibility: visible; position: absolute; top: 0; left: 550px; width: 350px; height: 50px }

Zu besichtigen ist die Umsetzung unter:
http://www.singlemaltseite.de/impressum_fl.php

Kannst Du mir da vielleicht weiterhelfen - ich dachte an einen Tip den auch ich, als Newby, verstehe ?

Gruß
Klaus

Sero

Hallo Klaus,

ein nachträglich frohes Jahr auch an dich...habe erst jetzt deine Anfrage gelesen und ich will versuchen dir zu helfen.
Deine Seite war mir ja gleich sympatisch...naja da gehts um schottischen Whisky und ich wohne zufälligerweise in Glasgow.
Zum Thema:
Dies ist ein Beispiel für eine horizontale Listennavigation (html)






home



person



skills



projects



contact

hier ist die dazugehörige CSS


#bl_main_nav ul {

width:600px;

line-height:20px;

margin:0px;

padding:0px;

list-style-type:none;

letter-spacing:1px;

}



#bl_main_nav li {

margin:0px;

padding:0px;

text-align:center;

float:left;

border:0px solid #000000;

}



li.spacer {

margin:0px;

padding:0px;

width:2px;

float:left;

border:0px solid #000000;

}



#bl_main_nav a {

color:#FFFFFF;

font-weight:bold;

display:block;

height:18px;

width:100px;

padding-top:0px;

background:#BAB590;

text-decoration:none;

border:1px solid #BAB590;

}

#bl_main_nav a:hover {

color:#990000;

background:#FFFFFF;

border:1px solid #990000;

}



#home #bl_main_nav #main_nav1 {color:#990000;background:#BAB590;border: 1px solid #BAB590;}

#home #bl_main_nav #main_nav1:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;}



#person #bl_main_nav #main_nav2 {color:#990000;background:#FFFFFF;border: 1px solid #BAB590;}

#person #bl_main_nav #main_nav2:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;}



#skills #bl_main_nav #main_nav3 {color:#990000;background:#FFFFFF;border: 1px solid #BAB590;}

#skills #bl_main_nav #main_nav3:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;}



#projects #bl_main_nav #main_nav4 {color:#990000;background:#FFFFFF;border: 1px solid #BAB590;}

#projects #bl_main_nav #main_nav4:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;}



#contact #bl_main_nav #main_nav5 {color:#990000;background:#FFFFFF;border: 1px solid #BAB590;}

#contact #bl_main_nav #main_nav5:hover {color:#990000;background:#FFFFFF;border: 1px solid #990000;}

die unteren Zeilen der CSS definieren den jeweiligen aktiven link.
die struktur ergibt sich folgendermaßen:
#home ...Body ID
#bl_main_nav ...Div Körper ID
#main_nav1 ...Link ID

Die ID deines Bodys muss dabei variieren, damit der aktive Linkzustand auf der jeweiligen Seite angezeigt wird.

Ich hoffe mein Beispiel hilft dir weiter.
Gruß aus dem veregneten Galsgow
Sebastian