Hintergrund von einem Link ändern

[chrisnrw86]

Hallo zusammen,

ich habe hier ein Problem wo ich nicht durchsteige.

Folgendes HTML für ein Menü mit Tabs in Joomla:

Code: Alles auswählen

<div>
<ul id="mainleveltab">
<li id="active1" class="item3"><a href="/portal/seite1"><span>Menüpunkt1</span></a></li>
<li id="active" class="item2"><a href="/portal/seite2">Menüpunkt2</a></li>
<li id="active" class="item679"><a href="/portal/seite3">Menüpunkt3</a></li>
<li id="active" class="item680"><a href="/portal/seite4">Menüpunkt4</a></li>
<li id="active" class="item681"><a href="/portal/seite5">Menüpunkt5</a></li></ul>
</div>


Folgendes CSS:

Code: Alles auswählen


#mainleveltab a{
color: #000;
background: url("../images/tab_left.png") left top no-repeat;
text-decoration: none;
padding-left: 10px;
   margin-right:4px;
   height:19px;
   padding-top:5px;
   display:inline-block;
         display:-moz-inline-block;

}

#mainleveltab a span
{
background: url("../images/tab_right.png") right top no-repeat;
padding-right: 10px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#fff;
height:24px;
padding-top:5px;
position:relative;
top:-5px;
display:inline-block;
display:-moz-inline-block;

}

#mainleveltab #active1 a {
background: url("../images/tab_left_current.png") left top no-repeat;
text-decoration: none;
padding-left: 10px;
margin-right:4px;
height:19px;
padding-top:5px;
display:inline-block;
display:-moz-inline-block;

}


#mainleveltab #active1 a span
{
background: url("../images/tab_right_current.png") right top no-repeat;
color:#e98932;
}



Es geht darum den aktiven Menüpunkt, also #active1 zu gestalten.
2 Buttons müssen allerdings auf grund des Header-Hintergrunds ein
anderes Hintergrundbild wie die sonstigen Menüpunkte erhalten.

Darum habe ich folgendes versucht:

Code: Alles auswählen

#mainleveltab #active1 .item3 a span
{
background: url("../images/tab_right_current3.png") right top no-repeat;
color:#e98932;
}


Leider wird diese Definiton nicht beachtet, der gibt einfach anstatt
"tab_right_current3.png" die Hintergrundgrafik "tab_right_current.png"
aus wie bei allen anderen Menüpunkten.

Kann mir jemand sagen was ich falsch mache ?

Ich verstehe nicht warum der nicht auf
#mainleveltab #active1 .item3 a span reagiert.

Vielen Dank schonmal und Viele Grüße

Christian

[chrisnrw86]

Kann man hier irgendwie einen Beitrag editieren ?
Wollte das CSS übeersichtlicher formatieren.

[Azra]

Du kannst von einer Klasse nicht verlangen dass sie sich mit den Eigenschaften vor die ID setzt.
Entweder du entfernst beim jeweiligen Link die <div> - ID und vergibst die Eigenschaften an die Klasse (.item3) oder du schreibst eine völlig neue ID.

Wäre gut, wenn wir eine live Ansicht hätten.