Solved

How do I add bullet buttons o a list

Posted on 2008-10-22
17
342 Views
Last Modified: 2012-05-05
How would I replace the usual text bullets with graphics (such as a checkmark) to a list such as the following:

<ul>
        <li>
              
        </li>
                <li>
              </li>
                <li>
   </li>
        </ul>


Note: I cleaned out some of the non-relevant code, and I may have gone too far with my butchering, but I think you will get the point!

Thanks

Rowby
0
Comment
Question by:Rowby Goren
  • 8
  • 4
  • 3
  • +1
17 Comments
 
LVL 5

Expert Comment

by:JBart_17
ID: 22780036
0
 
LVL 1

Expert Comment

by:downtap
ID: 22780214
Here's a link to a great article on it.
http://www.alistapart.com/stories/taminglists/

My suggestion would be to read this part of the article. It talks about placing an image inline. The suggestion above is to change the bullet to one of the standard available list bullets which won't work that well for custom images.


There may be times when you have a list, but you dont want any bullets, or you want to use some other character in place of the bullet. Again, CSS provides a straightforward solution. Simply add list-style: none; to your rule and force the LIs to display with hanging indents. The rule will look something like this:
 
ul {
	list-style: none;
	margin-left: 0;
	padding-left: 1em;
	text-indent: -1em;
	}
Either the padding or the margin needs to be set to zero, with the other one set to 1em. Depending on the bullet that you choose, you may need to modify this value. The negative text-indent causes the first line to be moved to the left by that amount, creating a hanging indent.
 
The HTML will contain our standard UL, but with whatever character or HTML entity that you want to use in place of the bullet preceding the content of the list item. In our case we'll be using &#187;, the right double angle quote: ».

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 22780747
Thanks downtap and JBart_17:

I think I wil be going with JBart's suggestion (but will keep downtaps suggestion for future issues):

If the Ul list had this in the html:  

<h3 class="weblinkinfo_HotDealz">  Hot Deals    </h3>

How would I adjust my modification of your link suggestion -- my version is not workin'...

ul weblinkinfo_HotDealz {
list-style-image: url('/images/splat_orange.gif')
}

0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 1

Expert Comment

by:downtap
ID: 22780794
Just so you know. IE6 handles the list-image property badly at times. That's why it's not the most widely used technique for custom bullets.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 22780946
Ah, so I would be better off using the non image solution at least for the next year or so.

Can you tell me downtap how to use your suggestion per the below:

If the Ul list had this in the html:  

<h3 class="weblinkinfo_HotDealz">  Hot Deals    </h3>

How would I adjust my modification of your link suggestion ..............
0
 
LVL 5

Assisted Solution

by:JBart_17
JBart_17 earned 25 total points
ID: 22781000
i'm no css expert  but try this
ul.weblinkinfo_HotDealz {
list-style-image: url('/images/splat_orange.gif')
}

<ul id="weblinkinfo_HotDealz">
...
</ul>
0
 
LVL 1

Assisted Solution

by:downtap
downtap earned 75 total points
ID: 22781075
Don't get me wrong, you can use the technique, my preference in the past has been to use the inline image technique. Plus, I really trust the coders at a list apart magazine.

First, the css for your list would look like this:

ul {
      list-style: none;
      margin-left: 0;
      padding-left: 1em;
      text-indent: -1em;
      }

If you're using a class for the list, you can, otherwise you can't leave it like that. You may need to adjust the padding or margin depending on the bullet.

Now on to the html, which would like so:

<ul>
<li><h3 class="weblinkinfo_HotDealz"><img src="yourbullet.gif">Hot Deals</h3></li>
</ul>
0
 
LVL 42

Expert Comment

by:David S.
ID: 22781400
I prefer to use background images.

It might look like this:

li {
  list-style: none;
  padding-left: 20px; /* at least the width of the image */
  background: url(check.gif) 0 50% no-repeat;
}

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 22788774
Hi Kravimir (or anyone)

I'm trying your solution with this css:
li {
  list-style: none;
  padding-left: 20px; /* at least the width of the image */
  background: url(http://americatravelnow.com/images/splat_orange.gif) 0 50% no-repeat;
}

On this page.  Look at the list on upper right.

http://americatravelnow.com/

I tried various settings for the padding, but can't seem to get the splat to move to the left.

Any suggestions?
0
 
LVL 42

Expert Comment

by:David S.
ID: 22788935
That's because the "ul.weblinkinfo_HotDealz li" rule is overriding the left padding you're setting in the new rule.

Perhaps this would be a good time for you to read up on specificity:
http://www.sitepoint.com/article/get-specific-css-styles
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
http://juicystudio.com/displayarticle.php?page=selector-specificity.php
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 22789072
Kravimir,

Would it help in the specifity if the code related to the actual module name.  For example, the clas for this particular code is    class="weblinkinfo_HotDealz
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 22789091
kravimir, i realize now my previous comment probably didn't make sense based on your most current comment.   Ignore it :)
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 22789380
Hi Kravimir,

Actually I don't have a style called "ul.weblinkinfo_HotDealz li" at the moment.

All I have is  

li {
  list-style: none;
  padding-left: 0px; /* at least the width of the image */
  background: url(http://americatravelnow.com/images/splat_orange.gif) 0 50% no-repeat;
}

So far as I can tell, the following are the only other references to to li and ul in the style sheet are the following snippets:

div.module_menu ul {
      margin: 10px 0;
      padding-left: 20px;
}

div.module_menu ul li a:link, div.module_menu ul li a:visited {
      font-weight: bold;
}

0
 
LVL 42

Expert Comment

by:David S.
ID: 22789435
In the embedded stylesheet in the page you linked to you have this rule:

ul.weblinkinfo_HotDealz li{clear:left;list-style:none;margin-left:0px;padding-left:0px}
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 22790232
------------------  Kravimir ---------------------
In the embedded stylesheet in the page you linked to you have this rule:

ul.weblinkinfo_HotDealz li{clear:left;list-style:none;margin-left:0px;padding-left:0px}
-------------------------------------

Hi
That code might be "embedded" into the programming of the Content Management system I'm using and might not be easily changed.

However, Kravimir, if I add a css modification to the END of the styleshee for the above css -- or if that doesn't work to the header of the page itself -- I think I can fix it.

With that in mind, how can I modify the below to fix the issue of the bullets being too far to the right.
Then I'll probably go and just put it in the header of the page......

ul.weblinkinfo_HotDealz li{clear:left;list-style:none;margin-left:0px;padding-left:0px}
0
 
LVL 42

Accepted Solution

by:
David S. earned 400 total points
ID: 22790537
Simply give it higher specificity. One way is to say that it also needs to be a descendant of the "body" element.

body ul.weblinkinfo_HotDealz li {
  list-style: none;
  padding-left: 20px; /* at least the width of the image */
  background: url(http://americatravelnow.com/images/splat_orange.gif) 0 50% no-repeat;
}
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 22790811
thabnks Kravimir.....    I see, adding the body gave it the extra / higher specificity it needed.

Appriciate your help!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Remove third quote mark from widget 6 28
Only three borders showing on image 5 28
Change div area and length 1 34
How to make footer stick to bottom 9 36
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question