a:active

[Onkel.Tom]

Guten Tag

Was mache ich falsch, dass die Funktion "ul#Navigation a:active" nicht funktioniert?

Mein CSS:

ul#Navigation {  
        width: 15em;  
        margin: 0; padding: 0.8em;  
	margin-top: 10em;  
	margin-left: 5em;  
  }  
  
ul#Navigation li {  
        list-style: none;  
        margin: 0.4em; padding-bottom: 40px;  
	-moz-border-radius: 20px;  
	borer-radius: 20px;  
}  
  
ul#Navigation a {  
	display:block;  
	padding: 0.2em;  
	text-decoration: none;  
	font-weight: normal;  
	border-left-color: white;  
	border-top-color: white;  
	color: white;  
	background-color: #F30;  
	-moz-border-radius: 20px;  
	border-radius: 30px;  
  
  }  
  
ul#Navigation a:hover {  
        border-color: white;  
	text-align: left;  
	background-color: #00B0F0;	  
	font-weight: normal;  
        border-bottom-color: black; border-right-color: black;  
	border-radius: 30px;  
	-moz-border-radius: 20px;  
        color: white;  
  
  }  
  
ul#Navigation a:active {  
        border-color: white;  
	display:block;  
	text-align: left;  
	background-color: #00B0F0;	  
	font-weight: normal;  
        border-bottom-color: black; border-right-color: black;  
	border-radius: 30px;  
	-moz-border-radius: 20px;  
        color: white;  
  
  }

und hier der Aufruf:

<ul id="Navigation">  
    <li><a href="index.html">&nbsp;Home</a></li>  
    <li><a href="halsketten.html">&nbsp;Halsketten</a></li>  
    <li><a href="ohrringe.html">&nbsp;Ohrringe</a></li>  
    <li><a href="glastiere.html">&nbsp;Glastiere</a></li>  
    <li><a href="weihnachtsschmuck.html">&nbsp;Weihnachtsschmuck</a></li>  
	<li><a href="aktuell.html">&nbsp;Aktuell</a></li>  
</ul>  

Die Einträge "Halsketten, Ohrringe, usw" (wenn ich die nun anklicke) sollten doch (also bei active) die andere Hintergrundfarbe anzeigen?

hover geht, aber active nicht.

Wo mache ich einen Denkfehler?

Hmm, Danke und gruss
Onkel.Tom

[Der Martin]

Hallo,

Was mache ich falsch, dass die Funktion "ul#Navigation a:active" nicht funktioniert?

keine Ahnung - vielleicht erwartest du nur etwas Falsches?

Die Einträge "Halsketten, Ohrringe, usw" (wenn ich die nun anklicke) sollten doch (also bei active) die andere Hintergrundfarbe anzeigen?

Ja, und zwar vom Niederdrücken der Maustaste bis zum Wieder-Loslassen. So ist :active definiert.
Und das bemerkst du wahrscheinlich nicht, weil das Anklicken des Links ja eine neue Ressource lädt.

Ciao,
 Martin

[Onkel.Tom]

Hallo,

Was mache ich falsch, dass die Funktion "ul#Navigation a:active" nicht funktioniert?

keine Ahnung - vielleicht erwartest du nur etwas Falsches?

Die Einträge "Halsketten, Ohrringe, usw" (wenn ich die nun anklicke) sollten doch (also bei active) die andere Hintergrundfarbe anzeigen?

Ja, und zwar vom Niederdrücken der Maustaste bis zum Wieder-Loslassen. So ist :active definiert.
Und das bemerkst du wahrscheinlich nicht, weil das Anklicken des Links ja eine neue Ressource lädt.

Ciao,
Martin

dann müsste ja das hier funktionieren:

ul#Navigation a:focus {  
    border-color: white;  
	text-align: left;  
	font-weight: normal;  
  	background-color: #00B0F0;  
	border-bottom-color: black; border-right-color: black;  
	border-radius: 30px;  
	-moz-border-radius: 20px;  
	border-radius: 20px;  
    color: white;  
  
  }

aber auch das geht nicht.

Danke für Deine 1/2 Hilfe, damit Du ganz, ganz genau verstehst, was ich möchte und Du mir vielleicht - wenn es Dir denn eventuell möglich ist  - und Du mir auch wirklich weiterhelfen möchtest, hier die supergenaue Definition:

1. Der Eintrag "ohrringe" ist in orange
2. wenn ich mit der Maus den Eintrag berühre, wechselt der auf blau (gelöst)
3. wenn ich darauf klicke, wechselt der Browser auf die Seite "Ohrringe" (gelöst)
4. wenn die Seite  "Ohrringe" nun im Browser angezeigt wird, soll der Eintrag Ohrringe (ja, das steht so in der Navi links) die neue Farbe blau anzeigen.

Vielleicht kannst Du _oh Herr_ mir auch sagen, was ich denn erwarten kann, mit meiner CSS? Die ja anderweitig funktioniert?

Vielen demütigen unterwürfigen Dank
Onkel.Tom

:-/

[Der Martin]

Hi,

Danke für Deine 1/2 Hilfe, damit Du ganz, ganz genau verstehst, was ich möchte und Du mir vielleicht - wenn es Dir denn eventuell möglich ist  - und Du mir auch wirklich weiterhelfen möchtest, hier die supergenaue Definition:

1. Der Eintrag "ohrringe" ist in orange
2. wenn ich mit der Maus den Eintrag berühre, wechselt der auf blau (gelöst)
3. wenn ich darauf klicke, wechselt der Browser auf die Seite "Ohrringe" (gelöst)
4. wenn die Seite  "Ohrringe" nun im Browser angezeigt wird, soll der Eintrag Ohrringe (ja, das steht so in der Navi links) die neue Farbe blau anzeigen.

dann ist :active eben *nicht* das, was du willst, denn :active entspricht nur dem kurzen Moment, in dem der Link den Zustand "geklickt" hat. Aber das sagte ich ja bereits.

Was du willst, ist offenbar eine unterschiedliche Darstellung des Menüpunkts für die momentan angezeigte Seite. Das machst du am besten, indem du diesem Link eine eigene Klasse gibst - oder den Menüpunkt, der der gerade angezeigten Seite entspricht, überhaupt nicht verlinkst. Beide Fälle kannst du im Stylesheet gezielt selektieren. Aber nicht mit :active.

Vielen demütigen unterwürfigen Dank

Kein Grund, sarkastisch zu werden.

Ciao,
 Martin

[Onkel.Tom]

»

Was du willst, ist offenbar eine unterschiedliche Darstellung des Menüpunkts für die momentan angezeigte Seite. Das machst du am besten, indem du diesem Link eine eigene Klasse gibst - oder den Menüpunkt, der der gerade angezeigten Seite entspricht, überhaupt nicht verlinkst. Beide Fälle kannst du im Stylesheet gezielt selektieren. Aber nicht mit :active.

Vielen demütigen unterwürfigen Dank

Kein Grund, sarkastisch zu werden.

Ciao,
Martin

Vielen Dank, Problem gelöst.
Du trägst natürlich keine Schuld, dass ich mich schon (zu) lange damit rumschlage.

Sorry.

Schönen Abend und Gruss
Onkel.Tom

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Was du willst, ist offenbar eine unterschiedliche Darstellung des Menüpunkts für die momentan angezeigte Seite. Das machst du am besten, indem du diesem Link eine eigene Klasse gibst - oder […]

Den Teil vor dem Oder hättest du auch weglassen können.

[…] den Menüpunkt, der der gerade angezeigten Seite entspricht, überhaupt nicht verlinkst.

Eben. Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

[…] weglassen können.

Oops, den Link zu diesem Thread wollte ich eigentlich nicht weglassen.

Qapla'

[Der Martin]

Hallo,

Was du willst, ist offenbar eine unterschiedliche Darstellung des Menüpunkts für die momentan angezeigte Seite. Das machst du am besten, indem du diesem Link eine eigene Klasse gibst - oder […]
Den Teil vor dem Oder hättest du auch weglassen können.

nein, auf keinen Fall - weil ich in diesem Punkt mit deinem Guru Nielsen nicht übereinstimme. Aber sowas von überhaupt nicht.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Onkel.Tom:

nuqneH

border-radius: 30px;
-moz-border-radius: 20px;

Die richtige CSS-3-Eigenschaft sollte hinter vendor-spezifische Angaben stehen.

'-moz-border-radius' kannst du aber getrost weglassen, Firefox versteht seit einiger Zeit schon 'border-radius'.

<li><a href="index.html">&nbsp;Home</a></li>
    <li><a href="halsketten.html">&nbsp;Halsketten</a></li>
    <li><a href="ohrringe.html">&nbsp;Ohrringe</a></li>
    <li><a href="glastiere.html">&nbsp;Glastiere</a></li>
    <li><a href="weihnachtsschmuck.html">&nbsp;Weihnachtsschmuck</a></li>
<li><a href="aktuell.html">&nbsp;Aktuell</a></li>

Die '&nbsp;' gehören dort nicht hin. Abstande erzeugst du mit CSS.

Qapla'