SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Lists

  1. #1
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lists

    Hi, instead of the standard

    [] Link One
    [] Link Two Here

    I would like

    Link One []
    Link Two Here []

    The text is align to the right, and the bullets are vertically align on the right. If anyone knows how, thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The easiset and most brower compatible would be to put an image at the end of the line in the background of the list.

    If you want to be clever you could change the direction of the writing from ltr to rtl but I'm not sure of brower support.

    Ie5 - 6 supports it and so does mozilla but opera doesn't.
    This code shows both ways:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    ul.image{list-style-type:none;width:100px;text-align:right;}
    .image li {
     padding-right:14px;
     background-image:  url(bullet.gif);
     background-repeat: no-repeat;
     background-position: right center;
    }
    
    ul.rtl {
     direction: rtl; 
    }
    .t {text-align:left;}
    .listouter {
     width:150px;
    }
    </style>
    </head>
    <body>
    <ul class="image">
      <li>Hello</li>
      <li>Hello hello</li>
      <li>Hello Hi</li>
      <li>Hello Hello</li>
      <li>Hello HI</li>
      <li>Hello Hello</li>
      <li>Hello Hi</li>
      <li>Hello</li>
    </ul>
    <ul class="rtl t">
      <li>Hello</li>
      <li>Hello hello</li>
      <li>Hello Hi</li>
      <li>Hello Hello</li>
      <li>Hello HI</li>
      <li>Hello Hello</li>
      <li>Hello Hi</li>
      <li>Hello</li>
    </ul>
    <div class="listouter">
    <ul class="rtl">
      <li>Hello</li>
      <li>Hello hello</li>
      <li>Hello Hi</li>
      <li>Hello Hello</li>
      <li>Hello HI</li>
      <li>Hello Hello</li>
      <li>Hello Hi</li>
      <li>Hello</li>
    </ul>
    </div>
    </body>
    </html>
    You can find a live example here:
    http://www.pmob.co.uk/temp/rightbullet.htm

    Hope that helps.

    Paul

  3. #3
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I love you paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hmm people are getting a bit too friendly on this forum

  5. #5
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aww you know you love the attention, aww yesh you do!


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
  •