SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Add bullet

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add bullet

    Hi,

    I need to add bullet to the content on this index page (brown area), but everything I tried failed. Can someone help?

    Here's the link:

    http://www.valuehomebuyers.com/index.html

    * Do you have a house that needs a lot of repairs?
    * Do you owe more on your house than what it's worth?
    * Do you need to sell quickly because of a job transfer?
    * Did you inherit a property?

    Thanks

  2. #2
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <ul>
               <li>Do you have a house that needs a lot of repairs?</li>
    	<li>Do you owe more on your house than what it's worth?</li>
    	<li>Do you need to sell quickly because of a job transfer?</li>
    	<li>Did you inherit a property?</li>	   
    </ul>

    The above is the code in your html and so it appears you have removed bullets for lists by default in your css. You could try giving this one an id and then set either one of the "built in" bullets to the list or set your own bullet image for the list in your css.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    You've got the following bit of CSS:
    Code:
    #intro h1, #intro h2, #intro p, #intro ul { 
    line-height: normal;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    }
    This is a particularly interesting idea, as you're applying list-style properties to headings, subheadings and paragraphs (which don't accept list-style properties), as well as the list itself.

    If you want bullets, change the list-style-type to one of square/disc/circle, for a browser default bullet, or set a background image if you want to use your own image (this is more reliable than using list-style-image).

    This is what happens when you use a boilerplate CSS template without understanding how it works...

  4. #4
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    If you want bullets, change the list-style-type to one of square/disc/circle, for a browser default bullet, or set a background image if you want to use your own image (this is more reliable than using list-style-image).
    Just out of curiosity, why is setting a background image more reliable than setting list-style-image?

    Admittedly I have rarely used list-style-image, but on the few occassions I have, I haven't had any problems with it.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    You've got the following bit of CSS:
    Code:
    #intro h1, #intro h2, #intro p, #intro ul { 
    line-height: normal;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    }
    This is a particularly interesting idea, as you're applying list-style properties to headings, subheadings and paragraphs (which don't accept list-style properties), as well as the list itself.

    If you want bullets, change the list-style-type to one of square/disc/circle, for a browser default bullet, or set a background image if you want to use your own image (this is more reliable than using list-style-image).

    This is what happens when you use a boilerplate CSS template without understanding how it works...
    I would have been helpful if you had given a code snippet to make it work as you noticed that I'm new to CSS.

    Thanks

  6. #6
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,286
    Mentioned
    121 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by razzor View Post
    I would have been helpful if you had given a code snippet to make it work as you noticed that I'm new to CSS.

    Thanks
    His point is you are applying a style which should be applied there and this just one portion of what is causing you problems. For a starter, remove that section of code as it's invalid.

    If you need to style it further, please reference the list area of the SP CSS reference. If you don't get the answers there, come back with an updated page and we'll try to help you further.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by aidos View Post
    Just out of curiosity, why is setting a background image more reliable than setting list-style-image?

    Admittedly I have rarely used list-style-image, but on the few occassions I have, I haven't had any problems with it.
    The problem is that the vertical (and horizontal) position of the list-image is decided by the browser and this varies between browsers quite a bit. Some place it lower down and some higher. None seem to cater for it properly at all.

    For that reason (if you are looking for near pixel perfect positioning) using a background image (although a less semantic choice) is the easiest solution as you have absolute control over the position.


    ould have been helpful if you had given a code snippet to make it work as you noticed that I'm new to CSS.
    You have set the list item to display:block which means that it is no longer display:list-item and won't show the bullet (IE6 won't show bullets if the list is floated anyway).

    Make these changes.


    Code:
    #intro ul.bullet{
    list-style:disc;
    margin:0 0 .2em 1.5em;
    padding:0;
    }
    #intro ul.bullet li{
    float:none;
    display:list-item;
    }
    You have spelled class incorrectly here:

    Code:
    ul clas="bullet"
    That should get it working.

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. I will try it.

  9. #9
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The problem is that the vertical (and horizontal) position of the list-image is decided by the browser and this varies between browsers quite a bit. Some place it lower down and some higher. None seem to cater for it properly at all.

    For that reason (if you are looking for near pixel perfect positioning) using a background image (although a less semantic choice) is the easiest solution as you have absolute control over the position.
    ok thanks

    Yes I have noticed that the bullet images are not exactly where I would like them but it hasn't caused any real concern thus far. I'll keep the bg image option in mind the next time I want to use my own bullet image.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by aidos View Post
    ok thanks

    Yes I have noticed that the bullet images are not exactly where I would like them but it hasn't caused any real concern thus far.
    Yes it does depend on the size of the image and some will look ok so probably best to try list-image first as it is the more semantic choice and then if you can't live with what it looks like use a background image instead.

    The benefit of the list image is that you can set it to fallback to disc if the image is missing which you can't do with a background image (unless you place the background image over the disc to hide it which is more work than needed I think ).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •