SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to position list bullets?

    Hey

    I've got this menu,
    HTML Code:
            <li class="active"><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
    and this css style,
    Code CSS:
    .menu ul {
    margin:0;
    padding:0;
    list-style-position:inside;
    }
     
    .menu li {
    margin:0 0 0 0;
    padding:5px 0 5px 0;
    list-style-image:url(img/menu_passive.png);
    }


    So basically you can see that I have this menu list, which has custom bullets.
    But the problem is that, the bullets aren't aligned with the text.
    The text is in bottom left, when the bullets are left middle.
    I want the text and the bullets be centered.

    How do you do this?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Firstly, you need to give the menu some left padding so that the images have space to appear. Then you can position the image half-way down the side by setting the y-access to 50%, like so. See if this helps:

    Code:
    .menu li {
      margin:0 0 0 0;
      padding:5px 0 5px 10px; /* adjust padding to suit */
      list-style-image:url(img/menu_passive.png) 0 50%;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •