Link-Formate in Navigationsleiste

[Gast] Foren Web allgemein HTML und CSS / Stylesheets Link-Formate in Navigationsleiste

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1193

6413

FSt

19. Dez 2022, 21:28

Vitus

Sero

Beiträge gesamt: 143

28. Jul 2006, 22:26
Beitrag # 1 von 19
Bewertung:
(19721 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

Link-Formate in Navigationsleiste

SabineP

Beiträge gesamt: 7586

28. Jul 2006, 23:57
Beitrag # 2 von 19
Beitrag ID: #241644
Bewertung:
(19641 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

als Antwort auf: [#241629]

Link-Formate in Navigationsleiste

Sero

Beiträge gesamt: 143

29. Jul 2006, 15:59
Beitrag # 3 von 19
Beitrag ID: #241681
Bewertung:
(19629 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

als Antwort auf: [#241644]

Link-Formate in Navigationsleiste

SabineP

Beiträge gesamt: 7586

29. Jul 2006, 18:05
Beitrag # 4 von 19
Beitrag ID: #241697
Bewertung:
(19625 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

>> 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

als Antwort auf: [#241681]

Link-Formate in Navigationsleiste

Sero

Beiträge gesamt: 143

12. Sep 2006, 20:26
Beitrag # 5 von 19
Beitrag ID: #250418
Bewertung:
(19524 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

als Antwort auf: [#241697]

Link-Formate in Navigationsleiste

FSt

Beiträge gesamt: 1965

13. Sep 2006, 08:59
Beitrag # 6 von 19
Beitrag ID: #250466
Bewertung:
(19512 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Sero

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

Code

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

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

Gruss
Martin

als Antwort auf: [#250418]

Link-Formate in Navigationsleiste

Sero

Beiträge gesamt: 143

13. Sep 2006, 20:12
Beitrag # 7 von 19
Beitrag ID: #250678
Bewertung:
(19501 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Martin,

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

Code

<a class="nav" href="html/general_contact.html" target="_top">contacts</a>

CSS style für link:

Code

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

als Antwort auf: [#250466]

Link-Formate in Navigationsleiste

FSt

Beiträge gesamt: 1965

13. Sep 2006, 22:57
Beitrag # 8 von 19
Beitrag ID: #250700
Bewertung:
(19497 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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:

Code

<a class=  
  if SeitenTitel = ButtonName 
    then print "nav_active" 
    else print "nav" 
href="html/general_contact.html" target="_top">contacts</a>

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/...nd_CGI_Forum_18.html

Gruss
Martin

als Antwort auf: [#250678]
(Dieser Beitrag wurde von FSt am 13. Sep 2006, 23:05 geändert)

Link-Formate in Navigationsleiste

Sero

Beiträge gesamt: 143

14. Sep 2006, 00:27
Beitrag # 9 von 19
Beitrag ID: #250714
Bewertung:
(19485 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

als Antwort auf: [#250700]

Link-Formate in Navigationsleiste

FSt

Beiträge gesamt: 1965

14. Sep 2006, 08:56
Beitrag # 10 von 19
Beitrag ID: #250733
Bewertung:
(19478 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

als Antwort auf: [#250714]

Link-Formate in Navigationsleiste

ganesh

Beiträge gesamt: 1981

15. Sep 2006, 13:06
Beitrag # 11 von 19
Beitrag ID: #251065
Bewertung:
(19462 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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.

Code

<?php 
 
function nav($link, $title, $display) { 
	$req = $_SERVER['REQUEST_URI']; 
	if(strstr($req, $link)) { 
		echo "$display <br>"; 
	} else { 
		echo "<a href=\"$link\" title=\"$title\">$display</a><br>"; 
	} 
} 
 
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"); 
 
?>

als Antwort auf: [#241629]

Link-Formate in Navigationsleiste

Sero

Beiträge gesamt: 143

15. Sep 2006, 19:02
Beitrag # 12 von 19
Beitrag ID: #251154
Bewertung:
(19446 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

als Antwort auf: [#251065]

Link-Formate in Navigationsleiste

ganesh

Beiträge gesamt: 1981

15. Sep 2006, 19:54
Beitrag # 13 von 19
Beitrag ID: #251160
Bewertung:
(19444 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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.

als Antwort auf: [#251154]

Link-Formate in Navigationsleiste

Sero

Beiträge gesamt: 143

16. Sep 2006, 12:03
Beitrag # 14 von 19
Beitrag ID: #251208
Bewertung:
(19428 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

als Antwort auf: [#251160]

Link-Formate in Navigationsleiste

ganesh

Beiträge gesamt: 1981

17. Sep 2006, 10:31
Beitrag # 15 von 19
Beitrag ID: #251261
Bewertung:
(19411 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Es gibt noch eine CSS-only Lösung:

- In jeder Seite weist du dem body tag eine unique ID zu, z.B. <body id="home">

- 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

als Antwort auf: [#251208]

Link-Formate in Navigationsleiste

ganesh

Beiträge gesamt: 1981

17. Sep 2006, 10:37
Beitrag # 16 von 19
Beitrag ID: #251262
Bewertung:
(24507 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hier noch ein kleines Demo

als Antwort auf: [#251261]

Link-Formate in Navigationsleiste

Sero

Beiträge gesamt: 143

22. Sep 2006, 20:05
Beitrag # 17 von 19
Beitrag ID: #252708
Bewertung:
(24485 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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

Code

... 
<body id="projects"> 
... 
<!--#include virtual="subnav_projects_general.html"-->  
.... 
</body>

externe Navigation

Code

<div id="bl_nav1"> 
<a id="nav_main1" class="nav_main" href="http://www.hirsts.co.uk" target="_top">home</a> 
<a id="nav_main4" class="nav_main" href="html/general_projects.shtml" target="_top">projects</a></div>

CSS

Code

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

als Antwort auf: [#251261]

Link-Formate in Navigationsleiste

Klaus aus MG

Beiträge gesamt: 121

2. Jan 2007, 20:03
Beitrag # 18 von 19
Beitrag ID: #268856
Bewertung:
(24433 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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:

Code

#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

als Antwort auf: [#251261]

Link-Formate in Navigationsleiste

Sero

Beiträge gesamt: 143

17. Jan 2007, 23:05
Beitrag # 19 von 19
Beitrag ID: #271218
Bewertung:
(24387 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

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)

Code

<div id="bl_main_nav"> 
<ul> 
<li><a id="main_nav1" href="home" target="_top">home</a></li> 
<li class="spacer"></li> 
<li><a id="main_nav2" href="general_person.shtml" target="_top">person</a></li> 
<li class="spacer"></li> 
<li><a id="main_nav3" href="general_skills.shtml" target="_top">skills</a></li> 
<li class="spacer"></li> 
<li><a id="main_nav4" href="general_projects.shtml" target="_top">projects</a></li> 
<li class="spacer"></li> 
<li><a id="main_nav5" href="general_contact.shtml" target="_top">contact</a></li> 
</ul> 
</div>

hier ist die dazugehörige CSS

Code

#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

als Antwort auf: [#268856]

Aktuell

PDF / Print

MadeToTag mit neuer Vorgaben-Funktion und umfangreichen Verbesserungen

| 04.04.2024

Weitere Events

Neuste Foreneinträge

Mit Preflight Registerfarbe ALL nach Grau konvertieren geht nicht

Absatzsetzer in CC24 ME lösen Probleme aus

Barrierefreie PDFs | Mögliche unangebrachte Verwendung des Strukturelements xy

Barrierefreiheit in indesign 2022: figure-Tags haben als Attributobjekt "block" statt "inline"?

Kontrollkästchen in PDF-Formular

Indesign Tabelle ausrichten

Quark Objekte lassen sich nicht neben Layout ziehen.

Mehrfach geschichtete und übereinander gelagerte PDFs bereinigen

InDesign 19.2 konvertiert 19.3-Dateien beim Öffnen ungefragt

Platzierte Vektorgrafiken skalieren

Weitere Stellenangebote