SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question styling a <ul> - centered li text, but bullet is left justified?

    I'm having a little problem with an unordered list.
    I want the text to be centered, but when I do that the bullet point graphic stays left justified to the whole ul. I can't figure out how to keep the text left justified, and have the bulletpoint appear directly next to the beginning of each li text.

    HTML Code:
    <div>
    <ul>
    <li>monetary donations</li>
    <li>donate supplies</li>
    <li>donate time/skills</li>
    </ul>
    </div>

    Code:
    div {
    text-align:center;
    }
    ul {
    padding:0;
    margin:0;
    }
    ul li {
    background:url(../images/mod-bullet-green.png) no-repeat 0 4px;
    padding-left:8px;
    list-style:none;
    margin-bottom:6px;
    }
    I apologise if it's something simple I'm just missing, but I just can't seem to figure it out!
    Thank you!

  2. #2
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding these to your ul css rules:
    Code:
            display: inline-block;
            text-align:left;

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zarin Denatrose View Post
    Try adding these to your ul css rules:
    Code:
            display: inline-block;
            text-align:left;
    WHOA! that totally worked for the first one! but the two below (i'm applying the same styling to 3 modules), the list element is left justified. ?

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Location
    milwaukee, wi
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zarin Denatrose View Post
    Try adding these to your ul css rules:
    Code:
            display: inline-block;
            text-align:left;
    if it will help to show you the site (it's a Joomla site) - http://www.redkettledesign.com/jtesting/

    the left modules. the top one is correct. the only difference is in the bottom two - they have a word wrap going on. could this be the problem? and any idea how to fix it? thank you!!

  5. #5
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, for your li rules, try text-align: center;

    They are all going to line up at the edges because of the word wrap that's happening - that's pushing the bullets to the edge of the box, and there's not really anything that can be done about that. Max with is max width.

  6. #6
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Scratch that. I just made it kinda work using :before.

    Here's my CSS:
    Code CSS:
    		div {
    		text-align:center;
    		}
    		ul {
    		padding:0;
    		margin:0;
    		display: inline-block;
    		text-align:left;
    		width: 90px;
    		}
    		ul li {
    		padding-left:8px;
    		list-style:none;
    		margin-bottom:6px;
    		text-align: center;
    		text-indent: -12px;
    		}
    		li:before{
    			padding-right: 4px;
    			content: url("../images/mod-bullet-green.png");
    		}


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
  •