CSS Css Menü

[raven16]

Ich bekomm irgendwie mein CSS-Menü nicht hin

CSS:

a.submenu{
min-width: 177px !important;
display: block;
}
a.submenu:link {
color: #333333;
}
a.submenu:visited {
color: #333333;  
}
a.submenu:hover {
color: #FFFFFF;
background: #3333333;
}
a.submenu:active {
color: #555555; 
}

<div class="submenu-middle"><a class="submenu" href="#">Link 1</a></div>
<div class="submenu-middle"><a class="submenu" href="#">Link 2</a></div>
<div class="submenu-middle"><a class="submenu" href="#">Link 3</a></div>
<div class="submenu-middle"><a class="submenu" href="#">Link 4</a></div>
<div class="submenu-middle"><a class="submenu" href="#">Link 5</a></div>

Der soll eigentlich den Hintergrund bei Hover in die Farbe #333333 ändern, macht es aber nicht. Ich weiß nicht ob ich irgendwo meine Einstellung überschreibe aber durch die angegebende Klasse muss doch der Link eigentlich geändert werden...

Link normal: Link in Farbe #333333; Background in Farbe #A3A3A3;
Link hover: Link in Farbe #FFFFFF; Background in Farbe #333333;

Bemerkung div.submenu-middle ist eine Grafik die im hinter dem Link liegt und den Link links grafisch erweitert durch einen pfeil

Was läuft da schief? xD

 

[Mr. Snoot]

Das Attribut heißt korrekt background-color, außerdem hast du eine 3 zu viel.

Zudem genügt bei einer Farbe ala XXYYZZ die Angabe XYZ (#333333 wird also zu #333).

 

[raven16]

Naja man kanns aber auch ohne -color schreiben...

der erkennt dann danach

man kann ja auch margin schreiben und muss nicht margin-left/-top-/... schreiben ^^


Aber das ne 3 zu viel war *peinlich*
Darauf hätte ich vll. auch selbst kommen können *brett vorm kopf*

Trotzdem danke fürs zählen

 

[Mr. Snoot]

Wenn du margin schreibst, meinst du aber alle 4 Seiten; margin-xxx spricht ja explizit nur die jew. Seite an.

Außerdem: könnte background nicht auch für background-image stehen? Also machs lieber eindeutig, dann gibts sicher keine Probleme

Könntest du durch eine Hintergrundgrafik nicht auch das äußere div sparen?

 

[raven16]

Nein, das kann ich mir nicht sparen
oder ich könnte sie kleiner machen und den Link rechts daneben

hab son kleine Grafik neben dem Link mit som Pfeil

Am coolsten wäre ja noch, wenn ich den Pfeil weiß umranden könnte beim hover des links... d.h. das der Pfeil sich dann verändert und durch das hover die grafik wechselt oder anders formuliert per js darüber setzt... das hab ich aber leider noch nicht hinbekommen.... weiß nur wie man mit js eine <img> wechselt aber das geht nur wenn diese image in verbindung mit dem link steht

 

[Mr. Snoot]

Du machst einfach:

a.submenu:link
{
  background-image:url(bild.png);
}

a.submenu:hover
{
  background-image:url(bild.png);
  background-position: 0px -16px;
}

Und das Bild dazu sieht so aus:

​

Normal siehst du die obere Hälfte und beim Hovern wird es einfach so verschoben, dass du die untere Hälfte siehst.

 

[QXARE]

Zu allererst verwendest du <ul> für die Navigation und lässt die ganzen divs mal weg.

<ul id="navigation">
    <li><a href="#">Link 1</a></li>
    <li>...</li>
</ul>

Die Links werden dann wie folgt formatiert (Farbe):

#navigation ul li a {
    color: #000;
}

#navigation ul li a:hover { /* ua. Pseudoklassen */
    color: #333;
}

Den "Pfeil-Hover" kannst du von Mr. Snoot nehmen, die Grafik kannst du in der Breite verkleinern.