Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Position LI Menu Background Image

3:59 am on Mar 24, 2012 (gmt 0)

New User

5+ Year Member

joined:Mar 24, 2012
posts: 1
votes: 0

First post here so I'll try and explain as indepth as possible.

Have been working with creating this online shop for a little while now and am not seeing the right code to use. The online shop uses Wordpress v3.3.1 with Catalyst Theme v1.5 and Shopp Plugin v1.2. Now what I've done is create a categories menu / sub-menu to the left which I require each menu to have a background image (201px wide) behind it without the list style square. So what I need is for the image to move left more so it is centred within the sidebar. I hope there is a solution, cause my brain just quit. Thanks in advance.

[edited by: alt131 at 7:59 am (utc) on Mar 29, 2012]
[edit reason] Thread Tidy [/edit]

3:04 pm on May 4, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

Hi techwiz, and a very belated welcome to WebmasterWorld. If you are still working on this - and for any other readers, can you clarify whether the "side-bar" is the <li>, the <ul> or the menu container, such as a container div? The reason I ask is that I am womdering if the issue is more complex than the suggestions I've made below.

If the list itself, there are a number of ways to visually "move" the background-image further to the left. The first is to remove the padding (or margin if supporting older versions) from the <ul> to remove the gap between the list marker and the list item that remains even when setting list-style-type:none is set. Another would be to apply a negative margin or position to the <ul> or <li> to forcibly drag it back towards the left. If the aim is to just move the background-image within the <li> then a negative background-position should do it.