Hover background-color bei padding

[bert123]

Hallo,

ich habe in meiner Wordpress-Sidebar ein Kasten, in dem die Kategorien angezeigt werden.
Wenn ich mit der Maus über eine Kategorie (in dem Fall "Allgemein") gehe, sieht es folgendermaßen aus:
http://img710.imageshack.us/img710/2268/hoverr.jpg

Also die Hintergrundfarbe des Links "Allgemein" verändert sich.
Allerdings werden alle Kategorien 30px nach rechts verschoben (padding-left:30px) und somit fehlt halt ein Bereich von 30px, der aber auch die Hintergrundfarbe erhalten soll.

Also die ganze Zeile soll den Hover-Effekt erhalten, wenn man mit der Maus drüber geht.

Hier die verantwortlichen Stellen.

Von der Sidebar:

#sidebar {
    background:#F7F7F7 url(img/sidebar_shadow.gif) top repeat-x;
    width:300px;
    float:right;
    font-size:95%;
    line-height:145%;
    overflow:hidden;
    padding-top:8px;
}
#sidebar li {
    background:url(img/icons.gif) 0 -560px no-repeat;
    padding-left:30px;
    list-style:none;
    margin-top:5px;
}

Vom Kasten:

div.baloon ul li a:hover{
    background-color:#f2a263;
}

Wie kann der Padding-Bereich auch durch die Hover-Farbe ausgefüllt werden?

Vielen Dank für Antworten!

 

[Wustersoss]

Nimm doch die 30Pixel beim padding-left einfach raus:

#sidebar li {
    background:url(img/icons.gif) 0 -560px no-repeat;
    padding-left:0;
    list-style:none;
    margin-top:5px;
}

 

[bert123]

Das ist natürlich die einfachste Lösung, aber der Abstand ist schon gewollt, weil es ansonsten sehr gequetscht aussieht.

 

[Wustersoss]

Dann gib dem Listenelement den Hover-Effekt und nicht nur dem Link darin.

 

[bert123]

So geht es leider auch nicht:

div.baloon ul li:hover{
background-color:#f2a263;
}

 

[Wustersoss]

Ich dachte eher das müsste so lauten:

#sidebar li:hover {
    
}

aber ich kenne natürlich die Elemente nicht, von daher eher geraten aufgrund der bisherigen Erkenntnisse.

 

[bert123]

Ich habe nun alles ausprobiert und das einzige was klappt ist folgendes:

div.baloon ul:hover{
    background-color:#f2a263;
}

Dort sieht es aber dann, nachdem man mit der Maus drüber gegangen ist, so aus:
http://img804.imageshack.us/img804/5599/kategorien.jpg

Hier alles zu dem Kasten:

div.baloon{
    overflow:hidden;
    width:254px;
    background:url(img/orange_center.gif) repeat-y 100% 0;
    margin: 0 0 0 0px;
}
div.baloon_top{
    overflow:hidden;
    width:254px;
    background:url(img/orange_top.gif) no-repeat 0 0;
    padding:9px 0 0 0;
}
div.baloon_bottom{
    overflow:hidden;
    width:254px;
    background:url(img/orange_bottom.gif) no-repeat 100% 100%;
    padding:0 0 8px 0;
}

div.baloon ul{
    overflow:hidden;
    width:243px;
    margin:0px 0 0 0px;
}

div.baloon ul li{
    float:left;
    width:243px;
    line-height:16px;
    background:url(img/dotted_line.gif) no-repeat 30px 100% !important;
    margin:-1px 0 0 0;
}

div.baloon ul li.last{
    background:none;
}
div.baloon ul li a{
    float:left;
    width:241px;
    display:inline;
    color:#fff;
    padding:3px 0;
    cursor:pointer;
}

div.baloon ul:hover{
    background-color:#f2a263;
}

/*div.baloon ul li a span{
    font-size:13px !important;    
    float:left;
    color:#cc6600 !important;
    background:url(img/ul.gif) no-repeat 0 7px;
    padding:0 0 0 12px;
    margin:0 0 0 27px;*/
}
div.baloon ul li a em{
    font-size:13px !important;
    float:right;
    color:#fff;
    font-style:normal;
    padding:0 25px 0 0;
}

und zur Sidebar:

#sidebar {
    background:#FFF url(img/sidebar_shadow.gif) top repeat-x;
    width:300px;
    float:right;
    font-size:95%;
    line-height:145%;
    overflow:hidden;
    padding-top:8px;
}
#sidebar li {
    background:url(img/icons.gif) 0 -560px no-repeat;
    padding-left:30px;
    list-style:none;
    margin-top:5px;
    /*font-size:95%;*/
}
#sidebar .content, 
#sidebar li {
    font-size:12px;
}

Wie bekomme ich den Hover-Effekt korrekt angezeigt? Mit der Option "height" hatte ich keinen Erfolg. Da verschiebt sich dann der Kasten etwas, wenn man mit der Maus über eine Kategorie fährt.

Vielen Dank!

 

[Space Vampire]

Wenn ich das richtig verstanden hab, gehts dir um den Textabstand nach Links, oder?
Nimm das Padding vom UL weg und leg es aufs LI.
Falls LI eine margin-left hat, muss auch die weg.
Dann den gewünschten :hover aufs LI und fertig.

 

[Wustersoss]

Das könnte so gehen, wie Space Vampire es beschreibt, wenn nicht musst du auch mal den entsprechenden Html-Code der sidebar posten.

 

[bert123]

Hallo,
habe nun sehr viel ausprobiert, allerdings ohne Erfolg.

Hier die sidebar.php:
sidebar.php - Pastebin.com

und die style.css:
style.css - Pastebin.com
--> div.baloon sowie #sidebar li

Danke.