Farbe des Links auf aktiver Seite

Silvie · 26.06.2006, 13:53

Servus,
komme hier nicht weiter, habe links meine Navi und ich möchte gerne, daß der Link auf der Seite, auf der ich mich gerade befinde, eine andere Farbe hat. Im IE funktionierts, im Firefox und Netscape nicht. Auch sind die Grafiken vor dem Link im Netscape nicht sichtbar.
Mein CSS sieht so aus:

HTML-Code:

/* Navigation - Linke Spalte */
#spaltelinks { background-repeat: repeat-y; background-position: right top; margin: 0; padding: 0 0 25px; width: 25%; float: left }
#spaltelinks ul { color: #633; font-size: 14px; font-variant: small-caps; line-height: 20px; background-color: transparent; list-style-type: none; margin-top: 25px; margin-right: 0; margin-left: 30px; padding: 0 0 20px; width: 75% }
#spaltelinks li { color: #633; background: url("../media/logoklein.jpg") no-repeat left 50%; list-style-type: none; padding: 3px 0 }
#spaltelinks a  { color: #633; font-weight: bold; text-decoration: none; padding-left: 15px }
#spaltelinks navibaum { font-size: 12px; font-variant: small-caps; line-height: 20px; margin-top: -20px }
#spaltelinks h4  { color: #900; font-size: 85%; line-height: 12px; padding-left: 30px }
#spaltelinks hover  { color: #900; text-decoration: none; padding-left: 15px; border-left: medium none #900 }
#spaltelinks active {color: #900; text-decoration: none; padding-left: 15px }

Kann mir jemand helfen?
Besten Dank!
Grüßli
Silvie

Adromir · 26.06.2006, 14:16

Also Pseudoklassen wie :active müssen eigentlich mit einem Doppelpunkt nach dem Elementnamen notiert werden

also
#spaltelinks:hover
und nicht
#spaltelinks hover

und eigentlich wendet der IE :hover, :active etc. nur auf das a- Element an..

Daniel FR · 26.06.2006, 14:24

Wie kriegst du das mit dem Stylesheet überhaupt hin, dass die aktuelle Seite hervorgehoben wird? Könntest du auch mal das dazugehörige HTML der Navi zeigen?
Und am besten das ganze mit Zeilenumbrüchen, damit man nicht soviel horizontal scrollen muss, ist besser für die Übersicht:

Code:

/* Navigation - Linke Spalte */
#spaltelinks 
{ 
background-repeat: repeat-y; 
background-position: right top; 
margin: 0; 
padding: 0 0 25px; 
width: 25%; 
float: left 
}
#spaltelinks ul 
{ 
color: #633; 
font-size: 14px; 
font-variant: small-caps; 
line-height: 20px; 
background-color: transparent; 
list-style-type: none; 
margin-top: 25px; 
margin-right: 0; 
margin-left: 30px; 
padding: 0 0 20px; 
width: 75% 
}
#spaltelinks li 
{ 
color: #633; 
background: url("../media/logoklein.jpg") no-repeat left 50%; 
list-style-type: none; 
padding: 3px 0 
}
#spaltelinks a  
{ 
color: #633; 
font-weight: bold; 
text-decoration: none; 
padding-left: 15px 
}
#spaltelinks navibaum 
{ 
font-size: 12px; 
font-variant: small-caps; 
line-height: 20px; 
margin-top: -20px 
}
#spaltelinks h4  
{ 
color: #900; 
font-size: 85%; 
line-height: 12px; 
padding-left: 30px 
}
#spaltelinks hover  
{ 
color: #900; 
text-decoration: none; 
padding-left: 15px; 
border-left: medium none #900 
}
#spaltelinks active 
{
color: #900; 
text-decoration: none; 
padding-left: 15px 
}

Silvie · 26.06.2006, 15:31

@Adromir: hab das a: rausgemacht,hab im Buch CSS-Praxis gelesen, daß es weggelassen werden kann.

@Daniel FR: hab die Seite mal hier angehängt http://www.sackedv.de/neidlein/pages/home.html. Es gehen nur die ersten beiden links.

Daniel FR · 26.06.2006, 15:46

Wie ich sehe, hebst du den Link der aktuellen Seite mit einem -tag hervor. Abgesehen davon, dass ich solche grobschlächtigen Methoden eigentlich nicht billige, schlage ich dir als Erste-Hilfe-Maßnahme vor, color="#990000" statt color="990000" zu schreiben. Ich weiß allerdings nicht, wie das dann mit der Spezifizität in der Kaskade aussieht. Besser wäre, wenn du statt <a href="#" accesskey="a" title="startseite" >Home</a> (Die Reihenfolge der schließenden Tags stimmt übrigens nicht) <a href="#" accesskey="a" title="startseite" style="color:#990000">Home</a> schreibst, das müsste auf jeden Fall funktionieren.

Abgesehen davon ist der Code ziemlich grauslich, aber das ist ja jetzt gerade nicht Thema.

Gruß, Daniel

Silvie · 26.06.2006, 15:53

mein Code ist grauselig - und ich bin/war so stolz darauf... was ist denn so grauselig? Ich bin lernwillig....

Den font color hab ich nur zum Ausprobieren reingemacht, wollt ich eigentlich wieder rausmachen, find ich auch "grobschlächtig".

Aber für mein Problem hab ich jetzt immer noch keine Lösung....

Daniel FR · 26.06.2006, 16:04

Zitat:

Zitat von Silvie

Aber für mein Problem hab ich jetzt immer noch keine Lösung....

Zitat:

Zitat von Daniel FR

Besser wäre, wenn du statt <a href="#" accesskey="a" title="startseite" >Home</a> (Die Reihenfolge der schließenden Tags stimmt übrigens nicht) <a href="#" accesskey="a" title="startseite" style="color:#990000">Home</a> schreibst, das müsste auf jeden Fall funktionieren.

Sorry, mit <a href="#" accesskey="a" title="startseite" style="color:#990000 !important">Home</a> geht es, dann überrennt der Inline-Style das Stylesheet. Das ist eine Quick-and-dirty-Lösung. Es gibt wesentlich bessere, aber dafür muss man mehr in die Tiefe gehen und dazu habe ich jetzt im Augenblick gerade nicht die Muße.

Gruß, Daniel

Silvie · 26.06.2006, 16:14

@Daniel FR: damit gehts nicht, gefällt mir auch nicht wirklich.

Vielleicht hat mir jemand anderes ne Lösung?

IMBild · 26.06.2006, 16:35

Lösung:

Zitat:

und eigentlich wendet der IE :hover, :active etc. nur auf das a- Element an..

Daniel FR · 26.06.2006, 17:37

Zitat:

Zitat von Silvie

@Daniel FR: damit gehts nicht, gefällt mir auch nicht wirklich.

Wenn es damit nicht geht, hast du es nicht richtig implementiert. Ich habe folgendes getan: Deine Seite heruntergeladen, entsprechende Änderung vorgenommen und ausprobiert. Die Hervorhebung der aktuellen Seite funktioniert so in allen Browsern. (Opera 9, Firefox 1.5.0.4, IE 6.0, Netscape 7.1)

Oder meinst du das Hovern, dass das nicht geht? Das geht nämlich nicht.

----

Mit grauslichem Code meinte ich übrigens sowas:

Code:

<div class="width">

<div class="minwidth">
<div class="page">
<div id="container">
<div id="header">
</div>
</div>
<div id="spaltelinks">
<ul>
<li><a href="#" accesskey="a" title="startseite" style="color:#990000">Home</a></li>
<li><a href="http://www.sackedv.de/neidlein/pages/ueberuns.html" accesskey="b" title="Ueber_Uns" >Über Uns</a></li>
<li><a href="http://www.sackedv.de/neidlein/pages/leistungen.html" accesskey="c" title="Leistungen" >Leistungen</a></li>
<li><a href="http://www.sackedv.de/neidlein/pages/kontakt.php" accesskey="d" title="Kontakt" >Kontakt</a></li>
<li><a href="http://www.sackedv.de/neidlein/pages/impressum.html" accesskey="e" title="Impressum" >Impressum</a></li></ul>

<div id="navibaum"><a href="http://www.sackedv.de/neidlein/pages/www.baumerhaltung.de"><img src="Neidlein Objektpflege_files/navi_bau.jpg" hspace="16" border="0" alt="Neidlein Baumerhaltung" /></a>
<div class="lbox">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<p>Wer einen Baum pflanzt,<br />wird den Himmel gewinnen.</p><div align="right"><i><font size="1">Konfuzius</font></i></div>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
</div>
</div>

und die ganzen tief verschachtelten DIVs. Man nennt sowas auch DIV-Suppe. Ist schon eine Leistung, sowas in einer eigentlich so überschaubaren Datei alles unterzubringen. Welchen WYSIWYG-Editor verwendest du?

Gruß, Daniel

Silvie · 26.06.2006, 18:25

nix WYSIWYG, hab zwar GoLive, aber das nutze ich nur für die Vorschau, schreiben tu ich im Quellcode, im Layoutmodus sehe ich nichts, ausserdem macht GoLive manchmal komische Sachen

Ich habe hier die min-width-hack von Stu Nicholls http://www.cssplay.co.uk/boxes/minwidth.htmleingesetzt. Und <b class....usw, gibt die runden Ecken beim den Boxen, ist auch von Stu Nicholls.
Jetzt versuche ich nochmals mein Glück mit der Farbe. :hover ist wenn ich mit dem Mauszeiger über ein aktives Element gehe - hier ist die Farbe dann rot wie gewünscht. Wenn ich dann z.B. Home anklicke, soll Home rot bleiben, das funktioniert auch im IE nur nicht im FF und Netscape.

newcommer · 26.06.2006, 23:28

darf ich mal blöd fragen, warum du keine 2 verschiedenen klassen einsetzt ???

a.inaktiv {
color:blue;
}
a.aktiv {
color:red;
}

Und den Rest brauch ich hier dann ja wohl nicht mehr zu schreiben ;-)

Silvie · 27.06.2006, 09:22

ups, vielen Dank! Kannst Du mir auch hier noch helfen: die Bildchen links in der Navileiste werden im NN nicht angezeigt.

HTML-Code:

#spaltelinks li
{
color: #633;
background: url ("../media/logoklein.jpg") no-repeat left 50%;
list-style-type: none;
padding: 3px 0
}

Daniel FR · 27.06.2006, 10:05

Vielleicht hilft es, statt über #spaltelinks li das Format über #spaltelinks li a zuzuweisen.

newx · 27.06.2006, 12:28

Zitat:

Zitat von newcommer

darf ich mal blöd fragen, warum du keine 2 verschiedenen klassen einsetzt ???

a.inaktiv {
color:blue;
}
a.aktiv {
color:red;
}

Und den Rest brauch ich hier dann ja wohl nicht mehr zu schreiben ;-)

Das genau scheint zu sein, was ich in einem anderen Thread gefragt habe.
Wie genau müsste denn der CSS Code komplett aussehen, damit es Browserübergreifend so angezeigt wird?

Und wie schafft man es, sowas in DW Vorlagen einzubauen?

Sorry tue mich etwas schwer mit diesem CSS Code bzw. der "Aktive" Sache

So in etwa:

HTML-Code:

body {
	background-color: #000000;
}
body,td,th {
	font-family: Tahoma;
	font-size: 10px;
	color: #FAD703;
}

a:link {
	color: #FFFFFF;
}

a:hover {
	color: #CCCCCC;
}
a.inaktiv {
color:blue;
}
a.aktiv {
color:#CC0000;
}

Aber dann müsste ich ja auf jeder Seite jedem Link die Class zuordnen, seh ich das richtig? Hatte nämlich gerade rausgefunden wie ich mit "DW Vorlagen" effektiver arbeiten kann - das wäre ja dann dahin?!

New X