Hintergrund für Listenelement li?

[img]

Hallo miteinander,

ich habe das Problem, dass ich es nicht schaffe einem aktiven Listenelement einen Hintergrund zuzuweisen. Das Ganze basiert auf folgendem Code:

HTML

<div id="header_menu">
      <div class="moduletable_menu">
            <ul class="menu_header">
                 <li class="item9"></li>
                 <li class="item16"></li>
              [COLOR=Red] [B]  <li id="current" class="active item17"></li>[/B][/COLOR]
                 <li class="item18"></li>
                 <li class="item19"></li>
            </ul>
      </div>
</div>

und der CSS-Part

#header_menu .item17 a{
    background-image: url(../images/background/menu.jpg);
    background-repeat:no-repeat;
    background-position: -214 0;
    height:89px;
    padding-top:55px;
    }
    
#header_menu .item17 a:hover{
    background-position: -214 -150;
    }
[COLOR=Black]#header_menu .active item17 {
    background-position: -214 -150;[/COLOR]
    }

Das Menü besteht aus Listenelementen, jedes Listenelement hat einen Hintergrund
welcher sich beim hover verschiebt.

Das Gleiche möchte ich im Prinzip für das aktive Listenelement haben,
aber ich schaffe es nicht <li id="current" class="active item17"></li> einen neuen Hintergrund zuzuweisen?


Vielleicht kann mir da jemand weiterhelfen, vielen Dank im Voraus.
Achja und ein Hallo in die Runde, bin ganz neu hier ;)

Grüße Jan

 

[threadi]

Du verdrehst etwas die IDs und Klassen. Sinn von IDs ist, dass diese nur 1 Mal pro Seite vergeben werden. Klassen können mehrfach vergeben werden. Wieso nutzt du dann eigentlich eindeutige Kennzeichen wie item17 als Klasse? Als ID wäre es viel besser:

<li id="item17" class="active"></li>

Dann kannst Du auch einfach per Klasse einen anderen Hintergrund zuweisen:

#header_menu #item17 {
    background-image: url(../images/background/menu.jpg);
    background-repeat:no-repeat;
    background-position: -214 0;
    height:89px;
    padding-top:55px;
}
#header_menu .active {
    background-image: url(../images/background/menu_aktiv.jpg);
}

 

[neuroleptika]

  #header_menu .item17 a

In deinem html gibt es kein <a>-Element

<li id="current" class="active item17">ddd</li>

Dieses <li> mit der id #current hat zwei Klassen .active und .item17.
In dem css wird .active mit einem Kinderelement der Klasse .item17 angesprochen.
Auch das gibt es in dem geposteten html nicht.

Was spricht dagegen #current direkt anzusprechen?

 

[img]

  #header_menu .item17 a

In deinem html gibt es kein <a>-Element

<li id="current" class="active item17">ddd</li>

Dieses <li> mit der id #current hat zwei Klassen .active und .item17.
In dem css wird .active mit einem Kinderelement der Klasse .item17 angesprochen.
Auch das gibt es in dem geposteten html nicht.

Was spricht dagegen #current direkt anzusprechen?

sorry, hier der Code direkt aus der Webseite

<div id="header_menu">
    <div class="moduletable_menu">
        <ul class="menu_header">
                    <li id="current" class="active item9"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=9">
                       <span>Über uns</span></a></li>
                    <li class="item16"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=10&amp;Itemid=16">
                       <span>aktuelles</span></a>
                    </li>
                </ul>
        </div>
</div>

die Sache ist, ich kann die ids und Klassen nicht manuell vergeben, das macht das CMS (Joomla).
Spreche ich hingegen current direkt an (#current {background-position: 0 0;} reagiert er garnicht.

habe schon viel herumprobiert, leider bisher ohne Erfolg.


grüße img

 

[neuroleptika]

#current a {
background: ...;
}
oder
#current a span {
background: ....;
}
Je nach dem wie das sonstige css aussieht.
Joomla verwendet viele css-dateien.
Mann bräuchte einen Link um zu überblicken welcher Wert wie überschrieben werden kann.
Ich will nicht versprechen, daß ich es mir ansehe. Aber gerade bei Joomla sind Helfende auf das Ganze angewiesen.
Joomla! und andere CMS nutzen oft jedes Element (und alle klassen und ids) als Selektor.

Nur deshalb sind sie so individuell anpassbar.

 

[img]

ok ich lade es gerade hoch, sobald die Seite online verfügbar ist, gebe ich dir Bescheid.

 

[neuroleptika]

....sobald die Seite online verfügbar ist, gebe ich dir Bescheid.

Ähm,
Dem Forum im allgemeinen bitte.
Ich bin nur einer von Vielen.
Ich verpflichte mich hier zu nichts.

 

[img]

Ähm,
Dem Forum im allgemeinen bitte.
Ich bin nur einer von Vielen.
Ich verpflichte mich hier zu nichts.

natürlich allen, aber da ich bisher nur mit dir zu tun hatte, hab ich das Wort an dich gerichtet.

Ich freue mich über jede weiter Antwort, egal von wem.
Wenn du mir helfen kannst und Zeit hast würde ich mich freuen, wenn nicht ist das zwar schade, aber auch in Ordnung...

ich poste den Link einfach sobald alles online ist.


grüße img

 

[img]

hier der Link: deleted

 

[neuroleptika]

Der aktuelle Menüpunkt (<li>) bekommt jeweils die id="current"
Wenn ich dich richtig verstanden habe, soll der ausgewählte Link mit der selben background-position hervorgehoben werden wie bei :hover.
(also mit dem blauen Ausschnitt)

Dann könnte es z.B. so aussehen:
(template.css / line 244)

  #header_menu #current a {
background-color:#FFFFFF;
background-image:url(../images/background/menu.jpg);
background-repeat:no-repeat;
background-position:center bottom;
}

 

[img]

Der aktuelle Menüpunkt (<li>) bekommt jeweils die id=&quot;current&quot;
Wenn ich dich richtig verstanden habe, soll der ausgewählte Link mit der selben background-position hervorgehoben werden wie bei :hover.
(also mit dem blauen Ausschnitt)

Dann könnte es z.B. so aussehen:
(template.css / line 244)

  #header_menu #current a {
background-color:#FFFFFF;
background-image:url(../images/background/menu.jpg);
background-repeat:no-repeat;
background-position:center bottom;
}

Habs hinbekommen, danke für die zahlreichen Antworten. grüße img