Problem bei CSS

[Stalefish]

Hallo. Ich bin gerade dabei Css zu lernen und hab eine Frage. Ich habe ul, li so formatiert:
ul {
list-style: none;
margin: 1;
padding-top: 25px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10 px;
color: #000000;
}

li {
text-align:center;
background:url("images/li-bg.png") repeat-x;
padding-top:5px;
padding-bottom:7px;
padding-left:7px;
padding-right:7px;
}


Zwischen den li-tags stehen die Links. Nun möchte ich das, wenn man über den Link fährt, sich background:url("images/li-bg.png") repeat-x; in background:url("images/li-bg-active.png") repeat-x; ändert. Geht das? Wenn ja, wie?

 

[flummox]

Hallo,

du koenntest fuer das Hover-Event von Links eine eigene CSS-Klasse erstellen.

z.B.

a.list:hover {
background:url....
}

und dann so einbinden: <li><a href="..." class="list">link</a></li>

mfg Stefan

 

[Stalefish]

Funktioniert leider nicht. Der Text bekommt den Hintergrund und leider nicht der Kasten um den Text. Hier ist noch ein ScreenShot: http://www.apfeltalk.de/forum/attachment.php?attachmentid=11822&stc=1&d=1168118370. Das blaue soll sich ändern. Mit dem text hatte ich dies auch schon hinbekommen, ist aber leider nicht was ich möchte!

 

[TobMan]

Hi!

Ich würde es wie folgt machen:
Dein ul bekommt die id="menu", damit alles wirklich nur auf die li teile angewendet wird und nicht auf andere.
Dein Source sieht dann wie folgt aus:

ul#menu {
list-style: none;
margin: 1;
padding-top: 25px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10 px;
color: #000000;
}

ul#menu li {
text-align:center;
background:url("images/li-bg.png") repeat-x;
padding-top:5px;
padding-bottom:7px;
padding-left:7px;
padding-right:7px;
}

ul#menu li a:hover
{
background: url('deinhoverbild.jpg') repeat-x;
}

ich würde noch ein current id setzten:

ul#menu li#current
{
background: url('deinhoverbild.jpg') repeat-x;
}

der angeklickte links bekommt dann die id="current" und der user sieht
immer wo er sich gerade befindet, da die pseudo klasse active nie so recht
funkioniert, wie ich das will...

viel glück!

 

[Stalefish]

Funktioniert leider auch nicht so wie gedacht. Ich habe schon etwas anderes gefunden, sieht auch gut aus, trotzdem danke.

 

[Hilarious]

Der Trick ist, mit »display:block« zu selektieren:

li a {
   background:url("images/li-bg.png") repeat-x;
   display: block; }

Allerdings braucht's jetzt noch ein paar weitere Dinge, damit's auch mit dem MSIE fehlerfrei klappt, aber das wäre schon einmal ein Anfang.