Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: css for lists

  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,457
    Thanks
    15
    Thanked 0 Times in 0 Posts

    css for lists

    what css do I need to put in my list so that the bullet shows aligned to the top of the text ?

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,696
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi esthera,

    I believe that the only way to accomplish this is with list-style-image.
    Try this example with the attached gif.
    Code:
    <style type="text/css">
    <!--
    ul {
        font-size:20px;
    }
    #foo {
        list-style-image:url(bullet.gif);
    }
    -->
    </style>
    
    <ul>
      <li>This is a normal list bullet</li>
      <li id="foo">This is a custom list bullet</li>
    </ul>
    coothead
    Attached Images Attached Images  

  • #3
    Senior Coder
    Join Date
    May 2004
    Posts
    1,457
    Thanks
    15
    Thanked 0 Times in 0 Posts
    but how can i align the bullet to the top of the text.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,696
    Thanks
    0
    Thanked 232 Times in 227 Posts
    if you tried my example you would see that the bullet is aligned to the top of the text.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Top?

    Please elaborate on "the top of the text"; sketch, example?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #6
    Senior Coder
    Join Date
    May 2004
    Posts
    1,457
    Thanks
    15
    Thanked 0 Times in 0 Posts
    i'm trying this somewhere else and it's stubbornly still showing the dot instead of my bullet.

    css



    #foo {
    list-style-image:url(tbullet.jpg);
    }


    html

    <ul>
    <li id="foo">list 1</li>
    <li id="foo">list 2</li>
    </ul>

    any ideas why this could be?

  • #7
    New Coder
    Join Date
    Nov 2005
    Location
    Australia
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bit hard to answer your question without seeing your code in full.

    I see my old mate Coot is on the job, so you'll get some good input there.

    Looking at your last post though, you have the id used on each <li>, You can't do this as it is only possible to use an id once on a page. You need to wrap the entire <div> in an id and then let the <li> inherit the values you set for the div itself. It's a much cleaner and easier way of doing it. Your list-style-type is normally set on your <ul> also as it provides the opening and closing tags for your <li>s.

  • #8
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can't vertically align a bullet in a list. You can however, set a background-image, remove the list bullet, and set the background-image to no repeat.
    Code:
    ul, li {
    list-style-type: none;
    margin: 0;
    padding: 0
    }
    
    li {
    padding-left: 20px;
    background-image: url(images/bullet.gif);
    background-repeat: no-repeat;
    background-position: top left
    }
    I hope that helped
    CATdude about IE6: "All your box-model are belong to us"

  • #9
    Senior Coder
    Join Date
    May 2004
    Posts
    1,457
    Thanks
    15
    Thanked 0 Times in 0 Posts
    thanks..
    it's working if i put the css directly in the html title tag but not if i put it in my external css

  • #10
    New Coder
    Join Date
    Nov 2005
    Location
    Australia
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by esthera
    thanks..
    it's working if i put the css directly in the html title tag but not if i put it in my external css
    I presume you mean the head of your document.

    If the code isn't working in your external css, check the url path to the image you're trying to use. Perhaps it needs to be

    url(../images/bullet.gif)


  •  

    Posting Permissions

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