Rollover-Menü mit 2 Grafiken

[Mo3b]

Hi,
das ist eigentlich ein einfaches Problem, und doch komme ich nicht weiter....

Also ich möchte eine Horizontale Navigationsleiste erstellen, bei der es einen Rollover Effekt gibt. Im Grund zustand wird Grafik 1 angezeigt, bei hover dann Grafik2.

Hier mein Ansatz:

<ul id="navi_oben">
    <li><a href="index.php">tesste</a></li>

    <li><a href="index.php">tesste</a></li>

   
  </ul>

und:

ul#navi_oben li {
    list-style: none;
    float: left; 
    margin: 0; padding: 0;
text-decoration: none;
width: 100;
height: 35;
  }


ul#navi_oben a, ul#navi_oben span {
    text-decoration: none; 
background-image:url(images/navi_oben_button.jpg);
background-repeat:no-repeat;
background-position:top left;
width:100;
height:35;
}

ul#navi_oben a:hover
 {
    text-decoration: none; 
background-image:url(images/navi_oben_button.jpg);
width:100;
height:35;
}

Da wird aber nur was angezeigt wenn ich auch Text iin den Listeneinträgen habe. Ansonsten bleibt alles weiß.
Ich könnte das lösen indem ich alles in eizelne divs oder noch besser tabellenfelder fülle. ;)
Wie geht das aber mit so einer Liste?

Mfg Mo3b

 

[neuroleptika]

<span> und <a> sind inline-Elemente.
Inbline-Elemente können kein width / height haben.
Eine Blockdarstellung erhalten inline-Element u.A. durch

1. display: block;
2. float: richtung;
3. position: absolute;

In deinem Fall würde sich display: block; anbieten:

ul#navi_oben a, ul#navi_oben span {
display: block;
...
...
}

Eine Tabelle würde das nicht ändern

 

[Efchen]

Ich könnte das lösen indem ich alles in eizelne divs oder noch besser tabellenfelder fülle.

Das wäre nicht besser, sondern einfach falsch.
Du hast doch ein Design/Layout-Problem, sowas kann man nicht mit HTML lösen, weil HTML nicht dafür gedacht ist. Also kann es keine Lösung sein, ein Menü statt als Liste irgendwie anders auszuzeichnen.

 

[Mo3b]

@Efchen:

Klar, wäre das so nicht richtig, funktionieren würde es aber. ;)

 

[prm]

Neben "display: block;" musst du den Breiten- und Höhenwerten auch noch eine Einheit zuweisen. Also

width: 100px;
height: 35px;

Ansonsten findest du hier Link-Buttons unter Ziffer 2 ein code-Beispiel.

 

[neuroleptika]

@Efchen:

Klar, wäre das so nicht richtig, funktionieren würde es aber. ;)

<a> darf nur Inline-Elemente enthalten. Kein <td> und auch kein <div>.

Wo sollte das <div> hin und was soll es bezwecken?
Ich verstehe nicht was du meinst.

 

[Efchen]

Klar, wäre das so nicht richtig, funktionieren würde es aber. ;)

Du kannst auch mit einem Bobby Car auf der Autobahn fahren. Ist zwar verboten, funktionieren würde es aber ;)