# frames & css - problem mit active links



## AntichristSuperstar (1. November 2004)

Hi,

unter http://www.stock-lot.net seht ihr meine website.

So, will da nun die Navigation mit CSS umsetzen, also wenn ich über die framebasierte Navi einen Link im Hauptfenster aufrufe, dann soll der angeklickte "active" link auch farblich markiert sein, solange ich auf dieser Seite bin.

Mit den activen Link Einstellungen klappt das aber irgendwie net, hove usw. klappt alles (lokal noch gespeichert, hab das noch net geuppt).

Mach übrigens die CSS sachen mit GoLive 6.

Kann mir wer nen Tipp geben, wie das mit den active Links klappt? Ich kenne mich halt net soo riesig mit CSS aus. Ist sicher ein kleines Prob...

Danke!


----------



## redlama (1. November 2004)

```
a:link 
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #012345;
  text-decoration: none;
}

a:hover
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #123456;
  text-decoration: none;
}

a:active
{  
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #234567;
  text-decoration: none;
}

a:visited 
{  
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #345678;
  text-decoration: none;
}
```
So könnte es aussehen (je nachdem, wie Deine Schriftart, -größe und -farbe sein sollen)!

redlama


----------



## Gumbo (1. November 2004)

Es sollte jedoch die korrekte Reihenfolge der Pseudoklassen eingehalten werden: :link, :visited, :hover, :active, :focus.


----------



## redlama (1. November 2004)

Gumbo hat gesagt.:
			
		

> Es sollte jedoch die korrekte Reihenfolge der Pseudoklassen eingehalten werden: :link, :visited, :hover, :active, :focus.


Warum sollte sie das? *neugierig frag*
Bei mir hat's bisher auch immer in anderer Reihenfolge funktioniert.

redlama


----------



## AntichristSuperstar (1. November 2004)

@redlama&gumbo:

vielen dank, Jungs!

es klappt, dank Eurer beiden Hilfe!  Super!  *freu*


----------



## AntichristSuperstar (1. November 2004)

obwohl

zu früh gefreut...mhmm

es klappt 1a im IE, aber bei Opera und Firefox klappen die activen links net, da klappt nur der hover... 

woran kann das denn liegen?


----------



## redlama (1. November 2004)

Das kann ich Dir leider auch nicht sagen, würde mich aber auch interessieren.
Aber achte bitte in auf die Netiquette (insbesondere die Groß-/kleinschreibung), da wird hier sehr viel Wert drauf gelegt!

redlama :suspekt:


----------



## AntichristSuperstar (1. November 2004)

Ok, alles klar!

Werde mich um korrekte Rechtschreibung bemühen!

Laut Statistik haben ohnehin 91% der User den IE, also störe ich mich jetzt mal nicht an der fehlenden Opera/Firefox Kompatibilität!

Thx!


----------



## AntichristSuperstar (1. November 2004)

Eine Frage hätte ich noch:

Habe im IE eine Fehlermeldung, "Zeile 49, Zeichen 1, Objekt erwartet"

Diese Zeile lautet so: "a:active"

Daraus werde ich nun gar nicht schlau  Was soll man denn da für ein Objekt erwarten?


----------



## redlama (1. November 2004)

Bist Du in der richtigen Datei?
Wenn ja, gib mal ein bisschen mehr Code drum herum, vielleicht bringt das mehr Aufschluss, ...

redlama


----------



## hela (1. November 2004)

Hallo redlama,
die richtige Reihenfolge der Pseudoklassen in den Stylesheets ist in
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus
angegeben. Eine Erklärung dafür ist u.a. in http://www.css4you.de/link.html zu finden.
Man kann natürlich auch Glück haben.


----------



## AntichristSuperstar (1. November 2004)

Huch, wie peinlich!

Hab den Fehler selbst entdeckt, ich hatte im Body-Tag der HTML-Seite noch irgendeinen alten Java-Script aufruf drin, der auf die Zeile 49 verwiesen hatte.

Also, mein Fehler  Danke trotzdem!


----------



## redlama (1. November 2004)

Danke hela, das hat Aufschluss gebracht! 

redlama :suspekt:


----------



## SebHoff (26. Februar 2005)

*selbes problem anderer Code*

Hallo. Ich wollte nicht direkt ein neues Thema eröffnen und hoffe, dass hier noch reingeschaut wird. 

  Ich habe ungefähr das gleiche Problem, dass der FireFox die link:active Angaben
 gänzlich ignoriert. Ich arbeite mit Bilder in der Navigation, die per css einen MouseOver und Active Event bekommen. Der Internet Explorer zeigt alles richtig an.

  Die Reihenfolge der css Elemente ist richtig und ich habe keinerlei Kommentarfelder.

  hier der Code:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  
  <html>
  
  	<head>
  		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  	
  		<title>Page</title>
  	</head>
  <style type="text/css"> 
  .events  { background-image: url(images/events_1.jpg); display: block; width: 70px; height: 70px }
  .events:hover  { background-image: url(images/events.jpg) }
  .events:active  { background-image: url(images/events.jpg) }
  .events:focus  { background-image: url(images/events.jpg) }
  
  .style  { background-image: url(images/style_1.jpg); display: block; width: 70px; height: 70px }
  .style:hover  { background-image: url(images/style.jpg) }
  .style:active  { background-image: url(images/style.jpg) }
  .style:focus  { background-image: url(images/style.jpg) }
  
  .pixx  { background-image: url(images/pixx_1.jpg); display: block; width: 70px; height: 70px }
  .pixx:hover  { background-image: url(images/pixx.jpg) }
  .pixx:active  { background-image: url(images/pixx.jpg) }
  .pixx:focus  { background-image: url(images/pixx.jpg) }
  
  
  .rewind  { background-image: url(images/rewind_1.jpg); display: block; width: 70px; height: 70px }
  .rewind:hover  { background-image: url(images/rewind.jpg) }
  .rewind:active  { background-image: url(images/rewind.jpg) }
  .rewind:focus  { background-image: url(images/rewind.jpg) }
  
  .links  { background-image: url(images/links_1.jpg); display: block; width: 70px; height: 70px }
  .links:hover  { background-image: url(images/links.jpg) }
  .links:active  { background-image: url(images/links.jpg) }
  .links:focus  { background-image: url(images/links.jpg) }
  
  </style>
 
 ........
```
 
  Bilder werden dann wiefolgt eingebunden. (Übrigens, diesen Trick hatte ich bereits in diesem Forum gefunden... danke dafür...)


```
<a href="style.html" target="screen" class="style"><img src="images/blank.gif" alt="" height="70" width="70" border="0"></a>
```
 
 Für eine Antwort wäre ich dankbar...

 mfg - SebHoff


----------



## hela (27. Februar 2005)

*Re: selbes problem anderer Code*



			
				SebHoff hat gesagt.:
			
		

> ..., dass der FireFox die link:active Angaben
> gänzlich ignoriert. Ich arbeite mit Bilder in der Navigation, die per css einen MouseOver und Active Event bekommen. Der Internet Explorer zeigt alles richtig an. ...


Wie merkst du eigentlich, dass Firefox die active-Pseudoklasse ignoriert? In deinem pepostetem Code haben die hover-, active- und focus-Pseudoklasse in allen Klassen die gleichen Eigenschaften.

   Ausserdem sollten die Stylesheets innerhalb des HEAD-Bereiches untergebracht werden.


----------



## SebHoff (27. Februar 2005)

Es sollte so aussehen, dass wenn man auf einen Link klickt, das zweite Bild
 bleiben sollte, was man zuvor beim hover Effekt gesehen hatte, demnach ist der Code schon richtig.

 Auch im Head bereich wird er ignoriert. IExplorer zeigt alles richtig an. Man fährt mit der Maus über die Links und das Bild für den Hover Effekt wird eingeblendet - soweit funktioniert es beim FireFox auch noch.

 Wenn man nun auf den Link klickt bleibt im IE das Hover Bild erhalten, damit man weiß wo man sich befindet - dahingegen der FireFox setzt wieder das erste bild hinein.


 mfg - sebhoff


----------



## hela (27. Februar 2005)

SebHoff hat gesagt.:
			
		

> ... dass wenn man auf einen Link klickt, das zweite Bild bleiben sollte,...


Das ist ein Missverständnis deinerseits: Entsprechend der CSS2-Spezifikation wirken die in der Pseudoklasse "active" definierten Eigenschaften nur solange die Maustaste gedrückt wird. 





			
				CSS2 hat gesagt.:
			
		

> Die Pseudo-Klasse :active gilt, während ein Element vom Benutzer aktiviert wird. Beispielsweise könnte das zwischen den Zeitpunkten sein, wo der Benutzer die Maustaste drückt und sie wieder loslässt.


 Dass das "scheinbar" im IE funktioniert hat wahrscheinlich nur damit zu tun, dass der Focus an diesem Link hängenbleibt. Wenn du anschließend mit der Maus irgendwohin auf die Seite klickst und damit dem Link den Focus nimmst, dann wirst du sehen, dass der IE auch nicht anders reagiert.

      Wenn du eine Möglichkeit suchst, um die aktuelle Seite in einer Standardnavigation zu markieren, dann sieh dir mal das an, insbesondere den Punkt "Anzeige des aktuell gewählten Menüpunktes".


----------



## SebHoff (28. Februar 2005)

Da hast du recht, da hab ich wirklich einiges verwechselt.

 nungut, ich danke dir für deine Hilfe und wenn ich mir alles durchgelesen und verstanden habe werde ich euch wissen lassen ob es funktioniert hat oder nicht.

 mfg - sebhoff


----------



## lawinencorsa (28. Februar 2005)

redlama hat gesagt.:
			
		

> ```
> a:link
> {
> font-family: Verdana, Arial, Helvetica, sans-serif;
> ...


 Hallo redlama, 

du hattest als Beispiel folgende Css gegeben.

Zitat:"

a:link 
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #012345;
  text-decoration: none;
}

a:hover
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #123456;
  text-decoration: none;
}

a:active
{  
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #234567;
  text-decoration: none;
}

a:visited 
{  
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #345678;
  text-decoration: none;
}

Zitatende"

Diese kannst du nun aber auch zusammenfassen, dies würde dann wie folgt aussehen:

#a:link, #a:visited,  #a:hover, #a:active, 
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: #012345;
  text-decoration: none;
}
#a:visited { color: #345678;}
#a:hover { color: #123456;}
#a:active { color: #234567;}

Auch schreibe ich zumindestens meine CSS Merkmale in eine externe Datei, zu welcher ich dann verlinke. Als ordentlicher "hoffe doch dies zu sein" Webprogrammierer bin ich ebenfalls bemüht keine Frames zu verwenden, sondern mit Hilfe von CSS und den Div Containern ein frameähnliches Design zu erhalten. Dies ist vor allem für Schwerbehinderte also fast Blinde und Blinde Menschen von Vorteil.

Biba
lawinencorsa


----------



## redlama (28. Februar 2005)

lawinencorsa hat gesagt.:
			
		

> Diese kannst du nun aber auch zusammenfassen, [...]


Danke für den Hinweis, aber da habe ich bereits gewusst!  ^^





			
				lawinencorsa hat gesagt.:
			
		

> Auch schreibe ich zumindestens meine CSS Merkmale in eine externe Datei, zu welcher ich dann verlinke. Als ordentlicher "hoffe doch dies zu sein" Webprogrammierer bin ich ebenfalls bemüht keine Frames zu verwenden, sondern mit Hilfe von CSS und den Div Containern ein frameähnliches Design zu erhalten. Dies ist vor allem für Schwerbehinderte also fast Blinde und Blinde Menschen von Vorteil.
> 
> Biba
> lawinencorsa


Da kann ich nur zustimmen! 

redlama

P.S. Übrigens, ... willkommen an Bo(a)rd! ^^


----------



## c2uk (28. Februar 2005)

lawinencorsa hat gesagt.:
			
		

> Diese kannst du nun aber auch zusammenfassen, dies würde dann wie folgt aussehen:
> 
> #a:link, #a:visited,  #a:hover, #a:active,
> {
> ...


 
 Dir sind dabei ein paar Schönheitsfehler passiert, so jedenfalls zeigt mir mein Firefox nicht das gewünschte Ergebnis an. Zum einen ist anzumerken, dass Du mit dem Gartenhag (#) eine id festlegst (in dem Fall a) und formatierst, und nicht den eigentlichen und gewünschten <a> tag formatierst, dann ist das letzte Komma hinter #a:active noch zu viel:

 Korrekt wäre es dann so:

```
a:link, a:visited, a:hover, a:active
 {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 0.9em;
 color: #012345;
 text-decoration: none;
 }
 a:visited { color: #345678;}
 a:hover { color: #123456;}
 a:active { color: #234567;}
```
 
 Nicht böse nehmen, habe ich jetzt nur geschrieben damit css-Anfänger nicht verwirrt werden.


----------



## lawinencorsa (2. März 2005)

redlama hat gesagt.:
			
		

> Danke für den Hinweis, aber da habe ich bereits gewusst!  ^^Da kann ich nur zustimmen!
> 
> redlama
> 
> P.S. Übrigens, ... willkommen an Bo(a)rd! ^^



Danke für die Willkommensgrüße.

lawinencorsa


----------



## Marshallbbw (8. März 2005)

wieso ist das von vorteil - versteh ich nicht


----------



## c2uk (8. März 2005)

Wieso soll was von Vorteil sein? Also was meinst Du jetzt eigentlich?


----------



## redlama (8. März 2005)

Könntest Du Dein "versteh ich nicht" ein wenig präzisieren?
Was genau verstehst Du denn nicht bzw. worauf bezog es sich? :suspekt:

redlama


----------



## Gumbo (8. März 2005)

Da Schwerstsehbehinderte, Blinde oder Menschen mit einer ähnlich einschränkenden Behinderung ihre Umwelt – und damit auch das Internet – nur noch schlecht bzw. garnicht visuell erschließen können, sind sie oft von Hilfsmitteln, wie beispielsweise Screenreader oder einer Braille-Schriftzeile, abhängig. Und wer schon einmal versucht hat, sich mithilfe eines Screenreaders wie etwa JAWS im Internet fortzubewegen, wird verstehen, welche großen Hürden Blinde erst überwinden müssen.


----------



## lawinencorsa (9. März 2005)

Gumbo hat gesagt.:
			
		

> Da Schwerstsehbehinderte, Blinde oder Menschen mit einer ähnlich einschränkenden Behinderung ihre Umwelt – und damit auch das Internet – nur noch schlecht bzw. garnicht visuell erschließen können, sind sie oft von Hilfsmitteln, wie beispielsweise Screenreader oder einer Braille-Schriftzeile, abhängig. Und wer schon einmal versucht hat, sich mithilfe eines Screenreaders wie etwa JAWS im Internet fortzubewegen, wird verstehen, welche großen Hürden Blinde erst überwinden müssen.




Gerade mit den Sreenreadern habe ich mich mehr als auseinandergesetzt. Aber das ist meine ganz private Angelegenheit.

Jedenfalls bin ich der Ansicht, das wir die "halbwegs normal" sind und einen Einfluss auf das Internet haben, ja das Leben dieser Leute nicht unbedingt noch mehr erwschweren müssen. Dies ist der Grund, weshalb ich mich den Frames abgewendet habe und mich seit geraumer Zeit mit CSS beschäftige. 

Auch so als kleinen Anzreiz fand ich zumindestens, das dies ohne grossartige Probleme ging und das Design nicht darunter leidet. Naja solange keine Flashprogrammierung eingebettet werden muss. Dies ist bei mir im Moment noch der einzige Knackpunkt, das unter Netscape die Links dann alle ein wenig verwirrt sind.

Ebenfalls bin ich sehr dankbar für die tolle HIlfe hier und auch für die Berichtigungen, denn keiner ist perfekt und JEDER  ich betone JEDER  kann nur dazu lernen.

So das solls gewesen sein erstmal.

Bis nächste Woche 
lawinencorsa


----------

