Jump to content
Sign in to follow this  
jonsolid-marketingcom

CSS Bullet Alignment Problem

Recommended Posts

jonsolid-marketingcom

I'm having trouble getting a list of bullet points to align with the image I'm using, and I haven't been able to identify what the fix is. I'm using a small diamond for the bullet points, but the diamond needs to be more centered with the text in the bullets. It's currently too high. The bottom of the image aligns with the bottom of the first line of text, but I would like for it to be more centered vertically. Here's what it looks like: w6JUJ.png As you can see, the bullets need to be dropped down vertically. Any ideas how to do that in the CSS?

Share this post


Link to post
Share on other sites
jonsolid-marketingcom

(edited to fix image in last post)

Share this post


Link to post
Share on other sites
catrina

There is CSS you can use, but I'll have to see the page where that bulleted list is to show you. Can you please a post a link to the page?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Kate

Hi Jonathan, The easiest way to work with images and bullets is to just use the background property. To check it out, please replace your current line with this:

ul2 li { background: url("http://www.vanessanicoleengagementrings.com.php5-22.dfw1-2.websitetestlink.com/wp-content/uploads/2011/07/ringbullet01.png") left center no-repeat; padding-left:40px;list-style-type:none; line-height: 1.8em;}

In addition, if you change "ul2" to a class, you can use it on other uls.

Share this post


Link to post
Share on other sites
jonsolid-marketingcom

Thanks Kate! Is there a way to move the image up a bit? Some sort of padding maybe? If you look at the link again you'll see what it looks like. Ideally it would align the image so the diamond was centered with the first line of each bullet. Thanks! Jon

Share this post


Link to post
Share on other sites
cmunns

Looks like you already added the padding-top parameter which is what you'd be looking for

Share this post


Link to post
Share on other sites
jonsolid-marketingcom

Yes I played around with it today and got it to work, thanks to Kate!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×