View Full Version : navigation list button image

08-11-2012, 10:19 PM
Hey I'm having trouble trying to figure this out. I want to add similar to the list area that includes check marks to the navigation. The only difference is that I'd like to try and achieve is the bullet on the right side. I still want to have an image of my choice there. I'm not sure how to do this for my navigation area. It's a ul li list.

08-11-2012, 11:40 PM
I'm not entirely following what you're asking. If I'm understanding right you want to have an image where the bullet usually is and then the bullet on the right. Is that correct?

Replacing the bullet with an image can be done with css. Set list-style: none on the list itself and then set a background-image on the list items. Trying to place a bullet at the end is going to be a little more work. I don't think you can just set them on the right side of the list so you would need to set them at the end of each list item. The problem is you'll need to have already used background-image on the same list item.

You could add a bullet at the end of each list-item by typing the html entity ( • ) at the end, however in that case they won't line up. If you want them all lined up vertically at the end, you'll probably need to add something inside each list item like a paragraph and then add css to li p to add the bullet. You might even try styling li:after and add the bullet as content.

I'm not sure which way would be best or if all of the above would easily work. Those are the ideas that are coming to mind.

08-11-2012, 11:48 PM
Thats what I'm looking to do. I want to add the image on the right of the nav link. They are horizontal. I re read what I wrote and didn't understand what I was trying to say myself. Lol. I know how to create them for the left side, but was curious if I could create them for the right. I'm not sure I understand what you are recommending though.

08-13-2012, 03:41 PM
Got'cha. I kind of understood what you meant then.

The thing with the right side is you won't be able to use a simple background-imgae on the list so you'll need to find another element to add it to. You probably want to try the list item ( li ) first, but if that doesn't work then you'll need something inside the list-item like a paragraph or a span. You might have something like this.

<li><span>your text here</span></li>
<li><span>your text here</span></li>
<li><span>your text here</span></li>

Then you could add the background-image to the span

li span {
background-image: path-to-your-image;
background-position: right center;
display: block;

or something like that. The display block is to ensure the span fills the entire list item and so it's right edge aligns with the right edge of the list. A span might not be the best element and you may need to play around with the background position or add some padding on the right, but the above is the general approach I would try.

08-13-2012, 04:49 PM
I figured how to do it. I did use a background image for it. Thanks for your help. I actually saw an article of what I believe is you and I figured you be able to answer this for me. That's why I didn't go else where to post.

08-13-2012, 11:49 PM
I'm glad you were able to get things working. Which article did you find? Feel free to post a link. You made me curious.

08-14-2012, 09:25 PM
I can't remember the exact article. I have my own reference now and forgot to bookmark it as it seems. I believe this may be it. Image only menu items with rollover effect - Joomla! Documentation (http://docs.joomla.org/Image_only_menu_items_with_rollover_effect) . It was a variation off of this at least. All I needed was the basic syntax as I had never tried to do that before. I don't use rollovers, but the basic idea was there. You can inspect my nav to get a better idea of how it works. I did have trouble having every list item in a vertical list behave properly, but I'm sure with some tinkering it should come out correctly.

08-16-2012, 11:36 AM
That article wasn't me, but I'm still glad it helped. Pretty much what I was recommending above with the background-position thing. I think I made it sound more complicated than it was though. :)

08-18-2012, 01:18 AM
It was yours. You are Vaneso right? I just couldn't find the page that I used.

08-20-2012, 11:38 AM
That is me. I did write an article about css background properties (http://www.vanseodesign.com/css/background-properties/). Is that the one you mean?

08-22-2012, 02:18 PM
I must have been dreaming. I'm pretty sure it was your article regarding lists. Maybe a combination of yours (the one you posted) and others.

08-22-2012, 05:38 PM
No worries. I've certainly written about background stuff before and other things related to designing and developing websites. :)