2 verschiedene css ?

[bountykilla]

Hi,
Ich habe folgendes Problem:
Es sollen das Menu(besteht nur aus Text) und der content-Bereich mit einem(1) master.css
realisiert werden.
Nur die Links im Menu dürfen keinen Unterstrich haben.Die Links im Content-Bereich sollen dagegen den normalen Link-Unterstrich bekommen!
Ich kann das Verhalten von a: link;a :hover usw ja nur einmal einstellen!

Für Antworten wäre ich dankbar ;-)

[Toxical]

du kannst auich link klassn erstellen
dann hast du 2 verschieden links eben , oder 3 oder 4

such mal nach css links class, da findest du n paar threads

bin grad zu faul selber zu schreiben

[bountykilla]

Hab ich doch als "ordentlicher" TP´ler gemacht ;-)
Leider hat mir die Suche nichts gebracht.
Wie legt man die Klassen denn an?

Es reichen ja auch Stichwörter ;-)

[Toxical]

a.menu:link{}
a.menu:visited{}
a.menu:hover{}
a.menu:active{}

a.main:link{}
a.main:visited{}
a.main:hover{}
a.main:active{}


<a href="#" class="menu">Class menu</a>
<a href="#" class="main">Class main</a>


Alle Klarheiten beseitigt?

[bountykilla]

Jap, Danke!!!

[the0bone]

Original geschrieben von bountykilla
Hab ich doch als "ordentlicher" TP´ler gemacht ;-)

Ordentliche TP´s drücken auch auf erledigt!

[Thomas]

kann es sein, dass diese Möglichkeit ausschließlich mit Textlinks funktioniert?

Brauch das nämlich für'n grafischen Link (anderen Hover Effekt) und kriegs nicht auf die Kette

hab' ein Beispiel gerade mal hochgeladen: >> klick mich << - wenn ihr da über den Button "in den Warenkorb" geht, seht ihr die orange Backgroundfarbe bei hover.
Die muss wech!

[Lars]

Hmm... am einfachsten wäre es wohl, wenn Du eine zweite CSS-Klasse (s. oben) anlegst, bei der es keine Änderung der Hintergrundfarbe gibt, und diese dann dem Warenkorb-Link zuweist.

[Thomas]

genau das funktioniert ja nicht

a:link {...; text-decoration:underline;color:#CC0000}
a:visited {...; text-decoration:underline;color:#990000}
a.extra:visited {...; text-decoration:underline;color:#FFFFFF}
a:hover {...; text-decoration:underline;cursor:hand;color:#990000; background-color: #FF9900}
a.extra:hover {...; text-decoration:underline;cursor:hand;color:#990000}
a:active {...; text-decoration:none;color:#FF6600}

der Aufruf:

<a href="javascript:;" class="extra"><img src="bilder/buttons/in_den_warenkorb.gif"></a>

ändert nix am Problem

mach ich das gleiche mit nem Textlink: für "visited" funktionierts - für "hover" auch dort nicht

und "hover" brauch ich.

hier ne Test-dat zum Anschauen

[Lars]

Baue mal die Hover-Definitionen zusätzlich mit einem Punkt davor ein (a:hover und a.hover).

[Thomas]

nee, ändert leider nix

[LANtastic]

@Rattenkönig

Du hast auf der Seite mindestens 1 Fehler bei der Benennung der CSS Klassen. In deinem Code tacuht ein Fehler auf. Du hast eine KLasse mit einem ungültigen Namen benannt. In diesem Fall staht genau in der Zeile mit der betroffenen Grafik
<p class="button:">
Der : ist im Namen nicht zulässig. Deswegen passiert auch nichts.
Nimm den Doppelpunkt aus dem Namen raus und versuche es nochmal.

ICh weiß jetzt nicht, wie genau Deine Seite aufgebaut ist, aber du kannst z.B. auch folgende CSS Defintion verwenden:

.button a:hover{
background-color: black;
}

Das sagt dem Browser formatiere jeden Link, der nach einer Klasse button kommt mit der Hintergrundfarbe schwarz bei Hover.

Wenn Du das in das externe Stylesheet packst, gilt das natürlich für jeden Link auf deiner gesamten Site, der in einer Klasse button vorkommt.
Seltsamerweise scheint der IE Probleme mit Selektoren im Bezug auf Inline-Elemente zu haben. Deswegen ist mir spontan nichts anderes eingefallen. Sollte es aus irgendeinem Grunde nicht gehen, daß jeder Link in der Klasse button gleich behandelt werden soll, dann bleibt leider nichts anderes übrig als jede betroffenen Grafik in ein Block-Element (Div, P, H1-6, oder was auch immer zu packen, daß Du wiederum einer Klasse zuweist.

Also statt :
<p class="button"> blabla
<a href="#"><img src="bild.gif"></a>
</p>
zu verwenden, mußt du dann z.B folgende Konstruktion verwenden :

<p class="button"> blablabla
<div class="bildohnehover">
<a href="#"><img src="bild.gif"></a>
</div>
</p>


In Deine CSS Definition mußt du dann noch folgende Zeilen reinbauen:

.bildohnehover a:hover {
background-color: black;
}

WICHTIG: Zwischen der Klasse und der Pseudoklasse darf nur 1 Leerzeichen stehen. Sonst geht es nicht (sagt w3c).

Das sollte auf jeden Fall klappen, weil Du dann theoretisch jedes Bild mit einer Art Schalter versehen kannst.

@schmobi:
a.link wird nicht klappen.
Der Browser wird nun nach einer Klasse namens link suchen, die er natürlich nicht finden kann. Eigentlich sollte laut CSS Spezifikation ein einfaches img:hover {irgendwas} klappen, aber ich weiß gar nicht ob das überhaupt irgendein Browser unterstützt.

[Thomas]

Hi,

danke, hört sich aber recht heftig an

"background-color: transparent" funktioniert auch, war guitar's Tipp hier

[LANtastic]

Stimmt schon. Nur hatte ich jetzt gedacht, daß Du der betroffenen Grafik einen andere Hover Farbe zuweisen wolltest. Deswegeb der Umstand.

Tatsache ist aber daß der IE6 (andere Browser habe ich jetzt nicht getestet) arge Probleme mit CSS Selektoren bei inline Elementen hat.

Aber nun, ja, Hauptsache Dir konnte geholfen werden