How to extend the background color of the Test2 to the left.
+1
A:
You will need to remove all margin from the li and all padding from the ul:
ul { padding-left: 0; }
li { margin-left: 0; }
If that gives you layout problems, try adding more padding-left to the li.
If your bullet images are impossible to position correctly when you take away the ul's padding, you could consider using a background-image in the li instead.
Pekka
2010-02-20 13:20:37
not sure but those bullets won't make it go to left or whole list along with bullets will be moved to left, so no gain i think
Sarfraz
2010-02-20 13:21:58
His problem is that the `li`'s background colour doesn't stretch to the left, because the space to the left is occupied by the `ul`s padding. Removing those values should fix it, but brings a bunch of other issues, which is why he may have to use different bullets.
Pekka
2010-02-20 13:26:53
+1
A:
Were the html to look like this:
<ul>
<li/>
<li class="expanded">
<ul>
<li/>
<li/>
</ul>
</li>
</ul>
I'd use something like the following css:
ul, li {padding:0; margin:0;}
ul li { padding-left: 20px; background: transparent url('collapsed.gif') no-repeat top left;}
ul li.expanded {background-image: url('expanded.gif'); background-color: blue;}
ul li.expanded ul {padding-left: 20px;}
ul li.expanded ul li {padding-left: 20px; background-image: url('sub_bullet.gif');}
David Andersson
2010-02-21 09:58:25