Hintergrund bei a:hover

Questionmark

Hallo,

habe mal wieder ein Problem: Meine Navigation habe ich in Form einer Liste aufgebaut - also <ul> und [*]. Jetzt will ich, dass der Eintrag farbig hinterlegt wird wenn man mit der Maus drüberfährt. Also "gehighlightet" wird.

Geht das mit meinem bisherigen Aufbau, oder muss ich meine Navi in eine Tabelle basteln, sodass ich dann mit background-color:xyz; arbeiten kann?

Grüße,
Questionmark

K.C.

ein menü macht man überhaupt nicht mit einer liste.

sag mir folgendes und ich schreib dir schnell ein menü-script:

-hintergrungfarbe oder image des gesamten menüs
-breite (oder höhe, falls das menü sich nicht dem content anpassen soll)
- link farbe
- bereits besuchter link farbe(wenn du überhaupt willst)
- link hover farbe + background color(wenn du mit der maus drüber fährst)

gruss

Questionmark

Zitat von K.C.

ein menü macht man überhaupt nicht mit einer liste.

Nichts gegen dein Wissen, aber seriöse Quellen sagen folgendes.

Außerdem will ich kein Script, sondern einen CSS-Effekt!

Gruß,
Questionmark

DarkSyranus

Code

...
<style type="text/css">
.hl { background-color: #000; }
.hl:hover { background-color: #fff; }
</style>
...
<li class="hl">Link
<li class="hl">Link
...

So müsste das glaub ich gehen.

Questionmark

Vielen Dank, DarkSyranus,

so hatte ich das auch gehabt und es hat nicht funktioniert. Nach deinem Posting habe ich meinen Quelltext nochmal angeschaut und siehe da - es hat sich ein Rechtschreibfehler eingeschlichen

Vielen Dank!
Questionmark

Ronald

Zitat von K.C.

ein menü macht man überhaupt nicht mit einer liste.

Ich hab keine Ahnung wer du bist, aber du schreibst ziemlich viel Schrott.
Bevor du solche Aussagen machst, solltest du dich vielleicht einmal etwas schlauer machen.

Questionmark

Mann kann die List-Zeichen dafür benutzen, muß man aber nicht. Es hat sich bei vielen Usern so eingebürgert, genau wie die Aussage "keine Tabellen für Layouts verwenden". Komischerweise sagt niemand "List-Styles sind nicht für Navigationen vorgesehen", dabei ist beides gleich sinnvoll oder gleich unsinnig.

So geht es ohne List-Styles (mal eben so aus dem Handgelenk, sollte hoffentlich klappen):

HTML

<html>
<head>
<title></title>
<style type="text/css">
<!--


.navi a   {
          display:block;
          width:150px;
          height:22px;
          color:#FFFFFF;
          background-color:#005050;
          border:1px solid #000000;
          line-height:22px;
          margin:1px;
          font-size:13px;
          text-indent:5px;
          }


.navi a:hover   {
          color:#003030;
          background-color:#BCD0BB;
          }
-->
</style>
</head>
<body>
<div class="navi">
[url='test.html']Testseite[/url]
[url='test2.html']Testseite 2[/url]
[url='test3.html']Testseite 3[/url]
</div>
</body>
</html>

Alles anzeigen

Generell kannst du dir bei den Styles alles so anpassen, wie du es haben willst.

G.a.d.M.

Ronald

Questionmark

@ Ronald

Vielen Dank für deinen Tipp, das sieht jetzt ungefähr so aus wie ich mir das vorgestellt habe

Grüße,
Questionmark

Tags