a:hover abschalten bei Navigationsleiste

[Snoggi]

Hallo
Folgendes Problem:
Ich habe eine Navigationsleiste, für die ich im CSS folgendes definiert habe:
-----------------------------------------------
#navbar {
background-color: #2C74B4;
height: 35px;
border: 2px solid gray;
font-size: 12px;
margin: -10px 10px 5px 10px;
padding: 0;
}

		#navbar ul.nav {  
			list-style-type: none;  
			padding: 0;  
			margin: 0;  
			}  
  
			#navbar ul.nav li {  
				padding: 0px 30px 0px 10px;  
				display: inline;  
				}  

			#navbar ul.nav a {  
				color: white;  
				text-decoration: none;  
				text-align: center;  
				border: 1px solid #2C74B4;  
				padding: 1px 5px 0px 5px;  
				border-top: none;  
				font-weight: bold;  
				}  

				#navbar ul.nav a:hover {  
					background-color: white;  
					color: #2C74B4;  
					border: 1px solid gray;  
					border-top: none;  
					padding: 0px 5px 0px 5px;  
					}  

------------------------------------------------

Jetzt habe ich in der Navbar jedem Link eine id gegeben, um per CSS anzeigen zu lassen, auf welcher Seite man gerade ist. Dabei sollten die einstellungen, diebei a:hover auftauchen, Standard werden für diese Seite, sodass man wiß, wo man ist.

Problem ist, dass ich jetzt für diese Seite den a:hover Effekt ausschalten möchte, denn wenn ich den aktiven Link mit der Maus überfahre, habe ich komischerweise ein doppeltes Padding. Hier ist der Code in der HTML-Datei:

---------------------------------------------
<style type="text/css">

	.home {  
		background-color: white;  
		color: #2C74B4;  
		border: 1px solid gray;  
		border-top: none;  
		padding: 0px 5px 0px 5px;  
		-webkit-border-radius: 5px;  
		-moz-border-radius: 5px;  
		-khtml-border-radius: 5px;  
		border-radius: 5px;  
		}  
	  
	  
	  
	a:hover {  
		padding: 0px -5px 0px -5px;  
		}  
	  
	</style>  

-------------------------------------

Ich habew also 2x 5px Abstand mit weißer Hintergrundfarbe, einmal bei .index und einmal bei a:hover, wobei ich das bei a:hover für diesen Link nicht möchte.

Gibt es da eine Lösung?

[Snoggi]

Hier könnt ihr das ganze sehen, wenn ihr über den "HOME" Button fahrt:
http://snoggi.bplaced.net/

[Gunnar Bittersmann]

@@Snoggi:

nuqneH

Jetzt habe ich in der Navbar jedem Link eine id gegeben

?? Davon ist in deinem Beispiel nichts zu sehen. Welches hier im Forum verlinkt sein sollte.

um per CSS anzeigen zu lassen, auf welcher Seite man gerade ist.

Die aktuelle Seite sollte im Menü nicht verlinkt sein. (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

habe ich komischerweise ein doppeltes Padding.

Wenn du für li, a und span jeweils Padding angibts, sollte das nicht überraschen.

Wozu soll das span überhaupt gut sein?

Gibt es da eine Lösung?

Ja.

1. Weg mit dem span.

2. Beim Menüpunkt der aktuellen Seite ist kein a-Element im li-Element. Diesen Menüpunkt formatierst du per '#navbar li'. Du gibst sowohl Innen- (padding) als auch Außenabstand (margin) an.

Die anderen Menüpunkte formatierst du per '#navbar li a' bzw. '#navbar li a:hover'.

3. Wozu hat das ul-Element @class="nav", wenn es doch per '#navbar ul' formatierbar ist? Wozu dient überhaupt der div-Container? (In HTML5 wäre dafür das nav-Element angebracht.)

Das ARIA-Attribut @role="navigation" fürs div- bzw. ul-Element wäre für Blinde hilfreich.

S.a. https://forum.selfhtml.org/?t=202467&m=1367635 ff.

Qapla'

[Snoggi]

Erstmal danke. auf die Idee, die aktuelle seite nicht zu velinken, bin ich gar nicht gekommen.
Dein Vorschlag geht aber nur, wenn die navbar direkt in der HTML-Datei zu finden ist. Bei mir ist sie momentan ausgelagert in der Datei "navbar.html", um Änderungen nur einmal vornehmen zu müssen. Deshalb auch die spans, damit ich in der ausgelagerten Datei jedes Elemen ansprechen konnte.

Aber vom Auslagern muss ich dann wohl Abstand nehmen, denn deins scheint mir eine sehr plausible Lösung zu sein.

[Gunnar Bittersmann]

@@Snoggi:

nuqneH

Erstmal danke. auf die Idee, die aktuelle seite nicht zu velinken, bin ich gar nicht gekommen.
Dein Vorschlag geht aber nur, wenn die navbar direkt in der HTML-Datei zu finden ist. Bei mir ist sie momentan ausgelagert […]

Und du bindest das Include per SSI oder PHP in deine Seiten ein? Mit beiden Techniken ist realisierbar, die jeweils(!) aktuelle Seite nicht zu verlinken. Pseudocode:

IF URI_des_Menüpunkts = URI_der_aktuellen_Seite
  PRINT '<li>Titel_des_Menüpunkts</li>'
ELSE
  PRINT '<li><a href="URI_des_Menüpunkts">Titel_des_Menüpunkts</a></li>'

Deshalb auch die spans, damit ich in der ausgelagerten Datei jedes Elemen ansprechen konnte.

?? Dem kann ich nicht folgen.

Aber vom Auslagern muss ich dann wohl Abstand nehmen

Nein, musst du nicht.

Qapla'

[Snoggi]

Ja, Seite wird per PHP eingebunden.
Werde das mit dem PHP.Code mal versuchen, danke!!

[Solero]

Und du bindest das Include per SSI oder PHP in deine Seiten ein? Mit beiden Techniken ist realisierbar, die jeweils(!) aktuelle Seite nicht zu verlinken. Pseudocode:

IF URI_des_Menüpunkts = URI_der_aktuellen_Seite
  PRINT '<li>Titel_des_Menüpunkts</li>'
ELSE
  PRINT '<li><a href="URI_des_Menüpunkts">Titel_des_Menüpunkts</a></li>'

Wie ich dich richtig verstanden habe, willst du die Datei index.php mittels include eine externes file navi.php importieren lassen, welches dann für jeden menüpunkt den von dir genannten code aufweist. aber kann man mit php php importieren? wenn man mit php etwas importiert, wird es danach nicht an den browser gesendet welcher es als html interpretiert und gar nichts mit dem php.script anfangen kann?

oder habe ich deine idee falsch verstanden?

gruss, solero

[Gunnar Bittersmann]

@@Solero:

nuqneH

aber kann man mit php php importieren

Ja. include(-once), require(-once)

Qapla'

[Solero]

IF URI_des_Menüpunkts = URI_der_aktuellen_Seite
  PRINT '<li>Titel_des_Menüpunkts</li>'
ELSE
  PRINT '<li><a href="URI_des_Menüpunkts">Titel_des_Menüpunkts</a></li>'

habe diese Idee auf meiner eigenen Homepage ebenfalls ausprobiert:

if ('/new_hp/index.php' OR '/new_hp/' == $_SERVER['REQUEST_URI'] ) echo '<li><a id="aktuell">Home</a></li>';
else echo '<li><a href="/new_hp/index.php">Home</a></li>';

die OR-Operation in der Condition ist enthalten, weil mit der URL ohne "index.php" ja ebenfalls diese Datei angesteuert wird und die URI dann nur '/new_hp/' lautet.

Die selbe Navigation wird in allen Seiten eingebunden und genau das führt auf der Seite beispiel.php mit der URI /new_hp/index.php zu meinem Problem. Das Script wählt nämlich für den Listenpunkt Home ebenfalls die erste Option (also ohne Link aus), auf der Seite beispiel.php wird also Home nicht verlinkt, aber als aktuel gehighlighted. Habe auch schon die Operation === ausprobiert, was aber natürlich zu nichts geführt hat, weil ja beide Werte Strings sind, also den selben Typ aufweisen.

Kann mir jemand erklären, wieso es zu diesem Problem kommt?
Vielen Dank bereits im Voraus.

mfG
Solero

[Matthias Apsel]

Om nah hoo pez nyeetz, Solero!

habe diese Idee auf meiner eigenen Homepage ebenfalls ausprobiert:

if ('/new_hp/index.php' OR '/new_hp/' == $_SERVER['REQUEST_URI'] ) echo '<li><a id="aktuell">Home</a></li>'; else echo '<li><a href="/new_hp/index.php">Home</a></li>';

URI sollte etwas mehr sein, als nur der pfad. Schau dir doch mal an, was $_SERVER['REQUEST_URI'] liefert.

<li><a id="aktuell">Home</a></li>

Wenn du den Link nicht haben willst, muss er weg. also

if ("aktuelles Dokument") then <li>aktueller Menüpunkt</li> else <li><a href="...">Menüpunkt</a></li>

Matthias

[Solero]

habe diese Idee auf meiner eigenen Homepage ebenfalls ausprobiert:

if ('/new_hp/index.php' OR '/new_hp/' == $_SERVER['REQUEST_URI'] ) echo '<li><a id="aktuell">Home</a></li>';
else echo '<li><a href="/new_hp/index.php">Home</a></li>';

URI sollte etwas mehr sein, als nur der pfad.
Schau dir doch mal an, was $_SERVER['REQUEST_URI'] liefert.

genau das habe ich mir zuerst auch überlegt, aber echo $_SERVER['REQUEST_URI']; gibt genau das aus, was ich in meine strings geschrieben habe.

<li><a id="aktuell">Home</a></li>

Wenn du den Link nicht haben willst, muss er weg. also

if ("aktuelles Dokument") then <li>aktueller Menüpunkt</li> else <li><a href="...">Menüpunkt</a></li>

den link habe ich schon weg bekommen, es steht ja nicht <a href...> oder so, sondern eben <a id="aktuell">, was kein link ist. das Problem ist, dass auf der Seite beispiel.php mit der URI (gemäss echo $_SERVER['REQUEST_URI']) nur für den Menüpunkt "Home" ebenfalls die option <a id="aktuell"> angesteuert wird, und das will ich eben verhindern.

[Gunnar Bittersmann]

@@Solero:

nuqneH

if ('/new_hp/index.php' OR '/new_hp/' == $_SERVER['REQUEST_URI'] )

„Wenn A oder B gleich C ist“ mag in der Umgangssprache als Abkürzung für „wenn A gleich C ist oder B gleich C ist“ funktionieren; nicht jedoch in Programmiersprachen.

Da bedeutet 'IF A OR B = C' nämlich: „wenn A als TRUE gewertet wird oder B gleich C ist“.

Qapla'

[Solero]

@@ Qapla'

natürlich, genau das wars. war wohl ein dummer überlegungsfehler meierseits^^
Danke vielmals!

mfG
Solero

[Matthias Apsel]

Om nah hoo pez nyeetz, Snoggi!

Bei mir ist sie momentan ausgelagert in der Datei "navbar.html"

Das klingt nach frames.

Matthias