ComputerBase Menü
Aktuelles

[CSS] Syntaxfehler bei Background-color?

bitfunker

bitfunker

ewohner
Registriert
Okt. 2001
Beiträge
18.283
Hi, Folks!

Ich habe hier in einer CSS folgende Zeilen eingetragen:
Code: 
.topnav{font-size:10px;color:#000000;height:20px;white-space:nowrap;border: 0px solid #000000;border-width: 1px 1px 1px 1px}
.topnav,a.topnav,a.topnav:visited{background-color:#B2B2B2}
a.topnav:hover{background-color:#3366CC}

Damit möchte ich erreichen, dass sich die Hintergrundfarbe der Linktexte ändert, wenn man mit der Maus drübergeht. Leider tut sich aber rein gar nichts. Warum?

Habe es auch mal mit der Schriftfarbe selbst probiert, klappt auch nicht.

Das hier dagegen funktioniert:
Code: 
.topictitle{font-size:11px;font-weight:bold}
a.topictitle:visited{color:#262626}
a.topictitle:hover{color:#000000}
 
Hm, danke dir, aber mit
Code: 
.topnav{font-size:10px;color:#000000;height:20px;white-space:nowrap;border: 0px solid #000000;border-width: 1px 1px 1px 1px}
a.topnav:hover{background-color:#3366CC}
.topnav,a.topnav,a.topnav:visited{background-color:#B2B2B2}
geht es leider auch nicht.
:confused_alt:
 
Hallo!

Also erstmal würde ich die Styleangaben zeilenweise schreiben, denn so ist das ja mal extremst unübersichtlich. Deshalb hast Du auch mal hier und da ein Semikolon unterschlagen. ;)

"a.topnav" im ersten Beispiel kann ja schon gar nicht funktionieren, da der Hintergrund kein "a href"-Element ist, sondern der Link. Dessen Farbe hat aber mit dem Hintergrund nicht sonderlich viel zu tun.

Ach egal, lange Rede, kurzer Sinn. So muss es aussehen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
.topnav
{
font-size:10px;
color:#000000;
height:20px;
white-space:nowrap;
border: 0px solid #000000;
border-width: 1px 1px 1px 1px;
}

.topnav,a.topnav,a.topnav:visited
{
background-color:#FF0000;
}

.topnav:hover
{
background-color:#00FF00;
}
-->
</style>
</head>
<body>
<div class="topnav">Hallo</div>
</body>
</html>
Zum Vergrößern anklicken....
 
Du hast jetzt hover ganz an den Anfang gepackt, das ist auch die falsche Reihenfolge. Schau mal hier: http://www.netandmore.de/faq/fom-serve/cache/1237.html

Dieses Beispiel ist eh zu überladen - das visited ist mit diesen Angaben überflüssig und kann weggelassen werden. Sprich:

a.topnav
{
background-color:#FF0000;
}

a.topnav:hover
{
background-color:#00FF00;
}

Und genutzt wird das dann so:

<a href="derlink.htm" class="topnav">Hallo Link</a>

Tankreds Beispiel wird im IE nicht funktionieren ;)
 
Da haste wohl recht, aber wieso? Bei mir kommt die Klasse "topnav" doch auch vor dem "hover"!? Mit was genau kommt der IE da nicht zurecht?
 
Der IE kennt kein :hover auf andere Elemente als A ... du hast es auf ein DIV angewandt.
 
Leute, ich habe alles empfohlene probiert, aber: es klappt nicht! :(

Letzer Stand:
.topnav{font-size:10px;color:#000000;height:20px;white-space:nowrap;border: 0px solid #000000;border-width: 1px 1px 1px 1px}
a.topnav:hover{background-color:#3366CC}
a.topnav{background-color:#B2B2B2}
Zum Vergrößern anklicken....

Schaut es euch evtl. selbst mal an, hier ist die Site dazu: http://electricafe.el.funpic.de/ec/portal.php?

Es geht um die waagrechte Navigation oben.
 
Du hast die Klasse topnav nicht dem Link (Element a) zugewiesen sondern der Tabellenzelle (td). So müsste es stimmen:

<td align="center">
<a class="topnav" href="portal.php?sid=59f62d1388bb66e33e33c78fe59a464a">Home</a>
</td>
 
Außerdem ist bei deinem "letzten Stand" die Reihenfolge wieder falsch. Wenn du a.topnav:hover vor a.topnav definierst, wird alles von a.topnav überschrieben. Schau dir mein Beispiel an!
 
@BlackBeast: THX! Wie konnte ich nur so blind sein... :freak:

EDIT: So, Mädels, nun habe ich mal weitergespielt und diese Zeile noch eingefügt:
a.topnav:active{background-color:#ffffff;}
Zum Vergrößern anklicken....
Funzt aber leider nicht. Was hab ich nun wieder verbockt? :confused_alt:
 
Zuletzt bearbeitet:
Gib doch immer den ganzen CSS-Code an, da die Reihenfolge ja nicht nur einmal von entscheidender Bedeutung war. ;)
 
Du hast nix falsch gemacht, sondern da du durch die Menülinks immer eine neue Seite aufrufst, kann der Link gar nicht auf "active" bleiben.

Also entweder machst du eine neue Klasse .topnavactive und weißt die einzeln auf jeder Seite dem richtigen Menülink zu - Einfach, aber umständlich v.a. wenn du das Menü mit PHP-includes eingebunden hast - oder du machst folgendes:

- Du gibst jedem Link eine eigene Klasse nach seinem Namen
- Dann schreibst du in den Body jeder seite eine eindeutige ID

zB:
<body id="crew">
...
<!-- Menü -->
<a href="crew.php" class="crewlink">Crew</a>
...
</body>

CSS:
a.crewlink{background-color: white}
#crew a.crewlink{background-color: blue}

d.h. nur, wenn die Klasse "crewlink" innerhalb der id "crew" liegt, ist die Hintergrundfarbe Blau.
 
Das dürfte wohl nicht b-runners Problem sein, daß er die Bedeutung der Pseudo-Klassen kennt, unterstellen wir ihm einfach mal :D

@b-runner
Bei den Pseudo-Klassen ist die Reihenfolge wichtig, dies gilt besonders für active und hover, da der Event für active zusammen mit dem Event für hover gefeuert wird, wenn man auf den Link klickt.
Steht die Style-Definition für active vor der Style-Definition für hover und klickt man auf den Link, treffen sowohl die active- als auch die hover-Styles zu und die hover-Styles gewinnen gemäßt der Regel "der letzte gewinnt".

Deutlich wird dieses Verhalten, wenn man den Link nicht mit der Maus aktiviert (z.B. mit TAB den Link anspringen), dann gilt der active-Style, da der Event für hover nicht gefeuert wurde.

greetings, Keita
 
Schau dir doch den Avatar von b-runner an... er kann dich nicht hören... :evillol:

greetings, Keita
 
@BlackBeast: Nochmals danke, nun habe ich auch das gerafft!

@Adiago: Wo ist dein Problem?

@Keita: Ebenso danke & :volllol: ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

BlindC0der
Html / Css Background
Antworten
3
Aufrufe
1.015
BlindC0der
BlindC0der
T
[CSS] a:link {background-color:farbe}; funkioniert nur teilweise bei IE
Antworten
6
Aufrufe
963
Toby
T
HardwarePope
[HTML & CSS] Problem mit a:hover background-color bei <div> Containern
Antworten
2
Aufrufe
1.234
HardwarePope
HardwarePope
K
Background Problem
Antworten
0
Aufrufe
1.041
kalfany
K
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 187 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz