SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot ninjayong's Avatar
    Join Date
    May 2006
    Location
    Holland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to put bullets on the right

    I have the following code, but I want the bullets to appear on the right instead of the left, because my text is right aligned. Can this be done in CSS ?

    PHP Code:
    #nav ul {
        
    list-style-image:url(images/bullet_u.jpg);
        
    margin-left1em;
        
    padding-left0;


  2. #2
    Non-Member rateit05's Avatar
    Join Date
    Dec 2005
    Location
    Somewhere in the UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try adding this some where inside that css:

    PHP Code:
    floatright
    regards

  3. #3
    SitePoint Zealot ninjayong's Avatar
    Join Date
    May 2006
    Location
    Holland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that but it's not working... am I putting it in the wrong place ? I tried it in the <li> element and it didn't work there either...

    Code:
    #nav {
    	position: absolute;
    	top: 350px;
    	left: 20px;
    	width: 220px;
    }
    #nav ul {
    	list-style-image:url(images/lotus/lotus_small.gif);
    	margin-left: 1em;
    	padding-left: 0;
    	float: right;
    }
    #nav li {
    	text-align: right;
    	font-size: 80%;
    	border-bottom: 1px dotted #B2BCC6;
    	margin-bottom: 0.8em;
    }
    #nav a:link, #nav a:visited {
    	text-decoration: none;
    	color: #2A4F6F;
    	background-color: transparent;
    }
    #nav a:hover {
    	list-style-image:url(images/lotus_small_light.gif);
    	color: #778899;
    }
    #nav h2 {
    	font: 110% Georgia, "Times New Roman", Times, serif;
    	color: #2A4F6F;
    	background-color: transparent;
    	border-bottom: 1px dotted #cccccc;
    }

  4. #4
    Non-Member rateit05's Avatar
    Join Date
    Dec 2005
    Location
    Somewhere in the UK
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try putting at the top thats all i can suggest also try changing these:

    margin-left to margin-right
    padding-left to padding-right

    regards

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    did you try "text-align: right;" for the entire ul section

  6. #6
    SitePoint Zealot ninjayong's Avatar
    Join Date
    May 2006
    Location
    Holland
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only solution that worked was using "direction: rtl;" like this:

    #nav ul {
    direction: rtl;
    list-style-image:url(images/lotus/lotus_small.gif);
    margin-right: 1em;
    text-align: right;
    }

  7. #7
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Try setting a large margin-left on the UL to shove the whole list over (or padding), and then taking it off the LI margin/padding to make the list text back in front of the bullet point. Then align the text right.

  8. #8
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This kind of works:

    HTML Code:
    <ul>
     <li><span>This</span></li>
     <li><span>Is</span></li>
     <li><span>A</span></li>
     <li><span>List</span></li>
    </ul>
    
    <style>
    ul {
     margin-left: 3em;
    }
    
    li span {
     margin-left: -3em;
    }
    </style>


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
  •