font-weight funktioniert - Textfarbe nicht - Hilfe

Status
Nicht offen für weitere Antworten.

dwex

Erfahrenes Mitglied
Hallo Leute,

stehe hier vor einem Problem das ich nicht ganz verstehe.
Es geht um eine Navigation.

Ich habe folgende CSS (unter anderem):
Code:
.menu a:link, .menu a:visited, .menu a:active {
	padding: 3px 10px 3px 10px;
	display: block;
	color: rgb(132,130,130);
	text-decoration: none;
}
.menu a:hover {
	color: rgb(217,37,28);
	text-decoration: none;
	font-weight: bold;
}
.menu_current {
	font-weight: bold;
	color: rgb(217,37,28);
}

Die Navigation funktioniert soweit, dass die Farbe für .menue a:link.... und auch für den a:hover gemacht wird. Jedoch wenn ich .menue_current ausführen möchte dann macht er mir den Text zwar dick aber er ändert die Farbe nicht. Die Farbe bleibt so wie in .menue a:link deklariert.

Was kann ich tun?
Vielen Dank für eure Hilfe im voraus!
 
Moin,

vielleicht hilft der Holzhammer :)
Code:
.menu_current,.menu_current a {
	font-weight: bold;
	color: rgb(217,37,28) !important;
}

oder auch einfach
Code:
.menu_current a {
	font-weight: bold;
	color: rgb(217,37,28) ;
}
 
Also die Holzhammermethode hat funktioniert.
Nur leider kapiere ich es nicht das er das bold macht und die Farbe eben nicht.
Hier mal der Quelltext (ein Teil davon):
Code:
<td class="menu" width="155">

			
<ul>
<li><span class="menu_current"><a href="index.php" target="_top"  class="menu_current"> Home </a></span>

</li>
<li><span class="menu_default"><a href="unsere-produkte.php" target="_top"  class="menu_default"> Unsere Produkte </a></span>
</li>
 
Bei mir wird mit deinem eingangs gezeigten Stylesheet und dem gerade geposteten HTML-Code die (rote) Schriftfarbe browserübergreifend angezeigt, da u.a. der Link mit der Klasse .menue_current ausgezeichnet ist.

Nur leider kapiere ich es nicht das er das bold macht und die Farbe eben nicht.
Und wer ist er?

mfg Maik
 
Also ich habe es jetzt im IE6, IE7 und Firefox 2 + 3 getestet auf verschiedenen Rechnern und in verschiedenen Netzwerken - bei mir funktioniert das nur wenn ich den Vorschlag von Sven Mintel mit important nehme.
 
Folgt auf diese Regel evtl. im Verlauf der CSS-Formatierung eine weitere, die diese wieder überschreibt, Stichwort: "Es funktioniert nur mit der !important-Regel"? Ist die Seite online verfügbar, um dort mal einen Blick drauf werfen zu können?

So sieht's bei mir mit deinen Code-Snippets aus:

ff2.jpg

mfg Maik
 
Nein das Projekt ist leider noch nicht online.
Hier mal das gesamte CSS:
Code:
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
body {
	/*background-color: rgb(180,208,220);*/
	/*background-image: url(background.jpg);*/
	background-repeat: repeat-x;
	margin: 10px;
}
a:link, a:visited, a:active {
	color: #0000FF;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #0000FF;
}
hr {
	height: 1px;
	color: #336699;
	background-color: #336699;
	border: 0;
}
h1 {
	font-size: 18px;
	color: rgb(217,37,28);
}
h1, h2, h3, h4, h5 {
	margin: 5px 0px 5px 0px;
}
form {
	margin: 0;
}
.main {
	width: 750px;
	background-color: white;
	border: 1px solid #999999;
}
.header {
	height: 100px;
	background-color: white;
}
header img {
	border: 1px solid #999999;
}
.menu {
	vertical-align: top;
	width: 155px;
	padding: 0px;
}
.menu ul {
	border-top: 0px;
	border-bottom: 0px solid #999999;
	border-left: 0px solid #999999;
	border-right: 0px solid #999999;
	list-style-type: none;
	background: white;
	padding: 0;
	margin: 0;
}
.menu ul ul{
	border: 0px;
	padding: 0;
	margin: 0;
}
.menu ul ul ul {
	border: 0px;
	padding: 0;
	margin: 0;
}
.menu li {
	border: 0px;
	border-top: 0px solid #999999;
}
.menu li li{
	border: 0px;
	border-top: 0px solid #999999;
}
.menu li li li{
	border: 0px;
	border-top: 0px solid #999999;
}
.menu li a {
	border-left: 0px solid white;
}
.menu li li a {
	border-left: 12px solid white;
}
.menu li li li a {
	border-left: 24px solid white;
}
.menu a:link, .menu a:visited, .menu a:active {
	padding: 3px 10px 3px 10px;
	display: block;
	color: rgb(132,130,130);
	text-decoration: none;
}
.menu a:hover {
	color: rgb(217,37,28);
	text-decoration: none;
	font-weight: bold;
}
.menu_current {
	font-weight: bold;
	color: rgb(217,37,28) !important;
}
.login a:link, .login a:visited, .login a:active {
	display: inline;
	background-color: #DDDDDD;
	color: #000000;
	text-decoration: none;
	padding: 0;
}
.login input {
	font-size: 10px;
}
.content {
	padding: 20px;
	background-color: #FFFFFF;
	border: 0px solid #999999;
	height: 300px;
	vertical-align: top;
	text-align: left;
}
.footer {
	padding: 2px;
	background-color: #FFFFFF;
	border: 0px solid #999999;
	height: 20px;
	vertical-align: middle;
	text-align: center;
}

und der gesamte HTML-Code was die Navigation betrifft.
Code:
<td class="menu" width="155">

			
<ul>
<li><span class="menu_current"><a href="index.php" target="_top"  class="menu_current"> Home </a></span>

</li>
<li><span class="menu_default"><a href="produkte.php" target="_top"  class="menu_default"> Unsere Produkte </a></span>
</li>
<li><span class="menu_default"><a href="wir-ueber-uns.php" target="_top"  class="menu_default"> Wir &uuml;ber uns </a></span>
</li>
<li><span class="menu_default"><a href="kontakt.php" target="_top"  class="menu_default"> Kontakt </a></span>
</li>
<li><span class="menu_default"><a href="impressum.php" target="_top"  class="menu_default"> Impressum </a></span>

</li>
<li><span class="menu_default"><a href="test111.php" target="_top"  class="menu_default"> test111 </a></span>
</li>
</ul>
			
				</td>
 
Status
Nicht offen für weitere Antworten.
Zurück