Wie weise ich in der Navigation jeder Überschrift eine andere "hover" Farbe zu?

Abendfrieden

Hallo,

ich möchte in der Navigationsspalte jedem Unterpunkt eine andere Farbe zuweisen wenn ich mit dem Mousezeiger drüberfahre.

Bisher habe ich es geschafft das alle in der Farbe Gold aufleuchten.

Ich möchte aber gerne jedes Wort eine andere Farbe zuweisen.

Z.B.

Home --) Gold

Religion --) Rot

Philosophy --) Blau

Sport --) Gelb

usw, usw...

Leider finde ich im Internet keine Anleitung.

Könnt ihr mir helfen?

Hier ist mein bisheriger Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<Title></title>
<style type="text/css">

body
{
background: "white"
}

h1
{
font-size: 7.2 pt;
font-family: Arial ;
color: red;
margin-top: 2em;
font-weight:800
}
h1
{
font-size: 7.2 pt;
font-family: Arial ;
color: red;
margin-top: 2em;
font-weight:800
}
p { letter-spacing: 0.04em; }

</style>
</HEAD>
<body>

<a href="Kopie von unter men.html" target="12">Home</a>
 
<a href="Kopie von unter men.html" target="12">Uhren</a>
 
<a href="Kopie von unter men.html" target="12">   Men </a>

<a href="Kopie von unter men.html" target="12">  Philosophie </a> 
<a href="Kopie von unter men.html" target="12">Religion</a>
 
<a href="Kopie von unter men.html" target="12">Biologie</a>
 
<a href="Kopie von unter men.html" target="12">Wirtschaft</a>
 
<a href="Kopie von unter men.html" target="12">Personal</a>

</body>
</html>

driver

du gibst dem link einfach ne class, schon kannst darüber dann alles steuern.

im css

Code

.menu1:active { color:#00f; font-weight:bold[I];[/I] }
.menu1:hover { color:#f00; font-weight:bold; }

im html

Code

<a class="menu1" href="Kopie_von_unter_men.html" target="12">Personal</a>

btw.
- verwende in dateinamen keine leerzeichen, lieber _
- dein hab ich entfernt, nimm lieber im css font-weight:bold;
- den anderen menüpunkten gibst dann z.b. menu2, menu3 und menu4
- für jede class kannst active, visited, hover und link definieren
- dir fehlt im css bei body ein ;

synaptic

schmeiss das font-tag weg und beschäftige dich mehr mit css...
du brauchst nur dem objekt ne id oder ne class zuweisen..
beispiel für die class religion:

Code

.religion{
color:#FF0000;
}

im entsprechenden link und der überschrift und allem was du sonst noch rot haben willst schreibste: class="religion" ins tag.

bei ner id is das nur für ein einzelnes objekt gedacht (bzw alle objekte mit der gleichen id (obwohl man IDs nur 1 mal in nem template vergeben sollte)
beispiel für die id religionslink:

Code

#religionslink{
color:#FF0000;
}

Code

<a href="religion.html" id="religionslink">religion</a>

natürlich kannste da auch mit pseudoklassen rumprobieren, ich denke http://www.css4you.de ist da eine lehrreiche seite.

und nimm abstand von deinen frames, arbeite stattdessen mit DIV und INCLUDES (evtl hin und wieder mal nen iframe, wobei der auch keine vorteile birgt)

nicolas_thun

Den Links verschiedene Klassen zuweisen und entsprechend im CSS formatieren: Farbe musst du natürlich für die entsprechenden Farben anpassen.

HTML

<a href="Kopie von unter men.html" target="12" class="farbe">

Im CSS gibt es dann:

HTML

.farbe a:link { text-decoration: none; color: red;}
.farbe a:visited { text-decoration: none; color: silver;}
.farbe a:active { text-decoration: none; color: gold;}
.farbe a:hover { text-decoration: none; color: gold;}

Abendfrieden

Super Leute!

Es klappt prima!

Vielen Dank!!!!

Aleks

Hallo Liebe Forumsmitglieder,

ich habe so ein ähnliches Problem und vielleicht kann mir jemand weiterhelfen.

Ich habe verschiedene Klassen in meiner CSS und würde gerne im Navibereich die Links weiß und im Haupftfenster die Links schwarz haben. Momentan sind alle weiß

HTML

.text {
    font-family: Arial, Helvetica, sans-serif; color: #000000;
    font-size: 12;
    font-weight: normal;
}
    a:link { color: #000000; text-decoration:none }
    a:hover { color: #000000; text-decoration:none }
    a:active { color: #000000; text-decoration:none }
    a:visited { color: #000000; text-decoration:none }


.navi {
    font-family: Arial, Helvetica, sans-serif; color: #FFFFFF;
    font-size: 12;
    font-weight: normal
}
    a:link { color: #FFFFFF; text-decoration:none }
    a:hover { color: #FFFFFF; text-decoration:none }
    a:active { color: #FFFFFF; text-decoration:none }
    a:visited { color: #FFFFFF; text-decoration:none }

Alles anzeigen

Vielleicht findet ihr ja den Fehler auf den ersten Blick, wäre euch dankbar.

Schöne Grüße
Aleks

driver

is ja auch klar....

der bereich .text fängt bei { an und hört bei } auf
der bereich .navi fängt weiter unten bei { an und hört bei } auf

die links werden also im prinzip doppelt definiert. und deshalb überschreiben
die unteren die oberen in den definitionen.

wenn dann musst schon .navi a:hover {....} machen

Aleks

Vielen vielen Dank Driver,

hab´s gleich ausprobiert und es funktioniert.

Tags