frames & css - problem mit active links

Status
Nicht offen für weitere Antworten.
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!
 
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:

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

Code: 
 <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
 
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. ...
Zum Vergrößern anklicken....
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.
 
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
 
SebHoff hat gesagt.:
... dass wenn man auf einen Link klickt, das zweite Bild bleiben sollte,...
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
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".
 
Zuletzt bearbeitet:
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
 
redlama hat gesagt.:
Code: 
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
Zum Vergrößern anklicken....
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
 
lawinencorsa hat gesagt.:
Diese kannst du nun aber auch zusammenfassen, [...]
Zum Vergrößern anklicken....
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
Zum Vergrößern anklicken....
Da kann ich nur zustimmen!

redlama

P.S. Übrigens, ... willkommen an Bo(a)rd! ^^
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück