✔ Zwei verschiedene Link Arten!

[Rambo51]

Hallo.

Ich habe ein Problen und weiß nicht wie ich es lösen soll mittels CSS.
Ich habe einmal ganz normale Links mit

a:link {
	color: #000000; text-decoration: none;
}
a:visited {
	color: #000000; text-decoration: none;
}
a:hover {
	color: #A59B87; text-decoration: none; 
}
a:active {
	color: #000000; text-decoration: none; 
}	
)

Nun habe ich aber noch eine Navigation wo sich das Hintergrundbild ändern soll.
Bisher habe ich es so versucht aber es funktioniert nicht.

.navigation (
a:link {
	color: #000000; text-decoration: none; background-image:url(images/nav_linkbg.jpg)}
a:visited {
	color: #000000; text-decoration: none;}
a:hover {
	color: #A59B87; text-decoration: underline; background-image:url(images/nav_linkbg_over.jpg)}
a:active {
	color: #000000; text-decoration: none;}
)

Kann mir da jemand bei Helfen? Danke schonmal im Vorraus.

Gruss Rambo51


// edit 1

ok habe es jetzt doch selber geschafft allerdings gibt es jetzt noch ein problem!

Wenn ich jetzt über ein Link drüber gehe mit der Maus, dann zeigt er das falsche "Over"-Bild

.navigation 
a {
	color: #000000; text-decoration: none; background-image:url(images/nav_linkbg.jpg); width:100%;}
a:visited {
	color: #000000; text-decoration: none; width:100%;}
a:hover {
	color: #A59B87; text-decoration: underline; background-image:url(images/nav_linkbg_over.jpg); width:100%;}
a:active {
	color: #000000; text-decoration: none; width:100%;}
	
.navigationoben 
a{
	color: #000000; text-decoration: none; background-image:url(images/2teoben_nav.jpg); width:100%;}
a:visited {
	color: #000000; text-decoration: none; width:100%;}
a:hover {
	color: #A59B87; text-decoration: underline; background-image:url(images/2teoben_nav_over.jpg); width:100%;}
a:active {
	color: #000000; text-decoration: none; width:100%;}
	
.navigationunten 
a {
	color: #000000; text-decoration: none; background-image:url(images/2teunten_nav.jpg); width:100%;}
a:visited {
	color: #000000; text-decoration: none; width:100%;}
a:hover {
	color: #A59B87; text-decoration: underline; background-image:url(images/2teunten_nav_over.jpg); width:100%;}
a:active {
	color: #000000; text-decoration: none; width:100%;}

Es wird immer das gleiche "Over"-Bild angezeigt. Also bei .navigation wird das "over"-Bild von .navigationunten angezeigt und das gleiche ist bei .navigationoben.
Und es ist zwischen jedem Bild 1px abstand das sollte eigentlich auch nicht so sein!

Bitte helft mir!

Gruss Rambo51


// edit 2

Habs selber gelöst!

 

[Maik]

Da wir von dir nicht erfahren haben, wie du das Problem gelöst hast, und dein letztes CSS-Posting vom Grundprinzip her falsch ist, möchte ich (für alle Interessierten / Suchenden) die technische Lösung zeigen, wie sich in einem (X)HTML-Dokument mit Hilfe von Klassen für mehrere Links unterschiedliche CSS-Formatierungen bestimmen lassen.

Die Klassennamen (.navigation, .navigationoben, .navigationunten) müssen vor jeder einzelnen Pseudoklasse notiert werden. Nur so können sie vom Browser voneinander unterschieden und korrekt ausgeführt werden:

a.navigation:link { }
a.navigation:visited { }
a.navigation:hover { }
a.navigation:active { }
	
a.navigationoben:link { }
a.navigationoben:visited { }
a.navigationoben:hover { }
a.navigationoben:active { }
	
a.navigationunten:link { }
a.navigationunten:visited { }
a.navigationunten:hover { }
a.navigationunten:active { }

<a href=#" class="navigation">link - navigation</a>

<a href=#" class="navigationoben">link - navigationoben</a>

<a href=#" class="navigationunten">link - navigationunten</a>

 

[oezer]

hi,

mal eine kleine Abwandlung davon, wie bewerkstelle ich das in Verbindung mit Javascript?

<a href="javascript:void(0);" onClick="javascript:window.open( 'pfad/datei.php');" class="navigationoben">Link - Navigation oben</a>

oder durch ein Div tag? oder am besten in eine tabelle reinhauen?
bin a bissi confused.. dachte mir aber das es eigentlich genau mein thema ist

 

[Maik]

Verstehe deine Fragestellung nicht


[editpost]

Wenn du das Kombinieren / Ausführen mehrerer Javascript-Funktionen in einem Link meinst:

<a href="javascript:void(0);" onclick="void(0);window.open('pfad/datei.php','Fenster');" class="navigationoben">Link - Navigation oben</a>

 

[oezer]

ok, so rum erklärt..

ich habe eine Navigation die schon bereits per css definiert worden ist, jetzt habe ich nachträglich einen weiteren navigationspunkt eingefügt, doch das letzte was ich eingefügt habe als link ist eben mit javascript gemacht weil ich unbedingt möchte das ein popup fenster geöffnet wird.

<a href="javascript:void(0);" onclick="void(0);window.open('pfad/datei.php','Fenster');" class="navigationoben">Link - Navigation oben</a>

jetzt möchte ich zu diesem link die gleiche klasse nutzen wie die anderen navigationslinks, wenn ich das mache bekomme ich aber keinerlei reaktionen.. mein link bleibt weiterhin ohne jegliche css einfluss.


hört sich extrem confused an.. liegt aber darin das ich mich mit dem ursprungscode nicht auskenne ist ein komplettes cms script. ich hab die möglichkeit templates zu bearbeiten, und an die jeweiligen stellen sind eben sogenannte Marker platziert.. bps. __TMI_Login3__ und da habe ich kein einfluss über das template diesen link mit css zu steuern weil der in einer externen datei liegt und der ist lauter php und javascript codes.. und da ich kein programmierer bin und kein bock drauf hab das komplette teil zu zerschiessen.. dachte ich wäre es doch auf dem direkten weg einfach diesen link mit css zu füttern. nur wie?

 

[Maik]

jetzt möchte ich zu diesem link die gleiche klasse nutzen wie die anderen navigationslinks, wenn ich das mache bekomme ich aber keinerlei reaktionen.. mein link bleibt weiterhin ohne jegliche css einfluss.

Wenn du den aus deinem CMS vorgegebenen Klassennamen für den neuen Link übernommen hast, dann kann ich dir auch nicht sagen, wo der Grund für dieses (mysteriöse) Problem liegt und wie es sich lösen lässt .....


Hast du denn schon versucht, den neuen Navigationspunkt mit einem 'eigenen' Stylesheet zu formatieren?

Entweder mit <style> ... </style>:

<style type="text/css">
<!--
a.Klassennamen:link { }
a.Klassennamen:visited { }
a.Klassennamen:hover { }
a.Klassennamen:active { }
-->
</style>

oder mit einer seperaten CSS-Datei:

<link rel="stylesheet" type="text/css" href="style.css">

 

[oezer]

also so sieht das ganze aus in der orginal navigations class die dann irgendwo in einer externen datei eingebunden wird.:

.mouse_out {background:  url(images/mouse_out.gif); width:96; height:29; font-family: Verdana; font-size: 14px; font-weight:bold; color: #FFFFFF;}
.mouse_over {background:  url(images/mouse_over.gif); width:96; height:29; font-family: Verdana; font-size: 14px; font-weight:bold; color: #FFFFFF;}

und ich dachte mir da ich ja keine templates Marker verwende und diesen javascript link habe, das ich ja mir für mein link (es geht um die einbindung eines forums) eine eigene klasse erstelle die dann so aussieht:

a.forum:link, a.forum:hover {background:  url(images/mouse_over.gif); width:96; height:29; font-family: Verdana; font-size: 14px; font-weight:bold; color: #FFFFFF;}
a.forum:visited, a.forum:active {background:  url(images/mouse_out.gif); width:96; height:29; font-family: Verdana; font-size: 14px; font-weight:bold; color: #FFFFFF;}

das ist ja im endeffekt das allergleiche wie beim ersten code nur das ich da einen eigenen klassennamen dafür angebe und je nach situation mit hover oder ohne etc. eingeblendet wird.

 

[Maik]

Es sieht so aus, daß beim Überfahren der 'Original' -Links die CSS-Klassen .mouse_out und .mouse_over getauscht werden:

<a href="#" class="mouse_out" onmouseover="this.className='mouse_over'" onmouseout="this.className='mouse_out'">Link>/a>

Funktioniert denn deine (nachträglich) eingerichtete CSS-Klasse .forum, oder wird die auch ignoriert?

Anmerkung: bei den CSS-Eigenschaften width und height fehlt die Einheit px, was in den non-IE Browsers zu Darstellungsfehlern führt.

 

[oezer]

das ist ja das problem, die orginalen funktionieren, aber meine nachträglich eingerichtete class mit a.forum:link funktiontioniert nicht, deshalb war ja meine frage wo positioniere ich die

class="forum"

in welchen tag hinein? in den javascript wie ganz oben in meinem beitrag reingeschrieben, oder in <td> oder <table> oder in einen <div> irgendwo muss die doch funktionieren..

 

[Maik]

Gestern hast du folgendes geschrieben:

jetzt möchte ich zu diesem link die gleiche klasse nutzen wie die anderen navigationslinks, wenn ich das mache bekomme ich aber keinerlei reaktionen.. mein link bleibt weiterhin ohne jegliche css einfluss

und heute schreibst du:

das ist ja das problem, die orginalen funktionieren, aber meine nachträglich eingerichtete class mit a.forum:link funktiontioniert nicht

Also was nun?

Soll der neue Link die gleichen CSS-Formatierungen, wie die vorhandenen Links erhalten, oder nicht? So langsam blicke ich nicht mehr, was du eigentlich willst, und was daran nicht funktioniert.

Wenn die Original-Klasse .mouse_out für den neu hinzugefügten Link erkannt / ausgeführt wird, dann ist doch alles in Ordnung ..... ansonsten kann ich dir nicht weiterhelfen, sorry!

deshalb war ja meine frage wo positioniere ich die class="forum" in welchen tag hinein? in den javascript wie ganz oben in meinem beitrag reingeschrieben, oder in <td> oder <table> oder in einen <div> irgendwo muss die doch funktionieren..

Die Klasse wird in dem a-Element notiert (das kein Javascript ist, sondern zwei Script-Funktionen ausführt) und nicht in einem DIV, oder einer Tabelle, oder sonst einem anderen HTML-Element.

<a class="forum" href="javascript:void(0);" onclick="void(0);window.open('pfad/datei.php','Fenster');">Forum</a>

<!-- oder -->

<a class="mouse_out" href="javascript:void(0);" onclick="void(0);window.open('pfad/datei.php','Fenster');" onmouseover="this.className='mouse_over'" onmouseout="this.className='mouse_out'">Forum</a>

Anmerkung: empfehle dir an dieser Stelle SELFHTML als Nachschlagewerk rund um HTML + CSS.