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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28
  1. #1
    Regular Coder
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    302
    Thanks
    2
    Thanked 0 Times in 0 Posts

    right positioning of unordered list button?

    I wonder if it is possible to move the buttons for an unordered list over to the right hand side. This is for an unordered list that is to go on the right side of the page. I am hoping the answer is yes so that I won't have to resort to using a background image and positioning on the <li> (although I suppose that is just as viable....)

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can float it to the right using CSS.

    ul {
    float: right;
    }

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <ul dir="rtl">
      <li>item 1</li>
      <li>item 2</li>
    </ul>
    Moves the bullets to the right side.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #4
    Regular Coder
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    302
    Thanks
    2
    Thanked 0 Times in 0 Posts
    gohankid77, that does move the list over to the right but it doesn't move the bullets to the right (which is what I wanted to do)

    Ah, yes, mcdougals4all! This is what I was hoping for. Thank you. I would rather use CSS so I googled and found

    Code:
    ul {direction:rtl;}
    ---------------------------
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>

    The above is much cleaner than the workaround I came up with:

    Code:
    ul {list-style: none; float:right;}
    li {background:transparent url(images/bullet.gif) no-repeat right; padding-right:12px;}
    -----------------------------
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>
    Again, many thanks.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Noooo! WTF?? You can't use language directionality for physical orientation - you're not writing in an RTL language.

    Do what you were doing before - it may be a bit more code, but at least it's not a traversty.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #6
    Regular Coder
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    302
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brothercake
    Noooo! WTF?? You can't use language directionality for physical orientation - you're not writing in an RTL language.

    Do what you were doing before - it may be a bit more code, but at least it's not a traversty.
    And yet it works - "traversty" or not. (Please reassure me that that was a typo )

    I checked it in the WDG CSS checker and it validates.

  • #7
    Regular Coder
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    302
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brothercake
    You can't use language directionality for physical orientation
    I'm serious. Aside from what seems to be an aesthetic/semantic reason, why can't one use language directionality for physical orientation of the list button? It doesn't appear to affect the direction of the words - it only affects the button itself.

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just out of curiosity, why are you putting bullets on the right hand side of a list? I would personally do the background image thing and align: right. Just makes more sense. And how well suported is rtl?

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by llizard
    I'm serious. Aside from what seems to be an aesthetic/semantic reason, why can't one use language directionality for physical orientation of the list button? It doesn't appear to affect the direction of the words - it only affects the button itself.
    Non-semantic content would be the problem. Your code would be saying it has RTL content event though the content isn't truly RTL. This means a search engine looking for pages with true RTL content would accidentally include your page. I'm not sure that any search engine would be able to perform such a search right now but if a lot of people misuse the RTL properties it becomes less likely that such a search could ever be made.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #10
    Regular Coder
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    302
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Roy Sinclair
    Non-semantic content would be the problem. Your code would be saying it has RTL content event though the content isn't truly RTL. This means a search engine looking for pages with true RTL content would accidentally include your page. I'm not sure that any search engine would be able to perform such a search right now but if a lot of people misuse the RTL properties it becomes less likely that such a search could ever be made.
    Ah, this makes some sense. Is there something that I can put into the meta tag to negate the rtl search? (Yes, I know. I could just as easily do the other coding but this way even if images are disabled, the list button still appears on the right)

    If there is no way to stop the search engines from thinking there is rtl content, is there a way to have buttons appear in place of background images on the list?

    And as to why am I wanting to do this, Aaron, it's because the list is on the right side of the page with a right alignment of text. I think it's aesthetically more pleasing to have the buttons lined up to the right. With CSS disabled, the list is NOT right aligned and the buttons appear normally.

    Here is a demo of what I am attempting:

    http://llizard.crosswinds.net/listdemo.html

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So you think it's okay to abuse semantics because you think it looks nicer? Well okay if that's how you feel, why don't you just use a table with list bullets in the right column and text in the left, like this:
    Code:
    <table>
    	<tr>
    		<td>list item text 1</td><td><li></td>
    		<td>list item text 2</td><td><li></td>
    	</tr>
    </table>
    Last edited by brothercake; 10-22-2004 at 02:07 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #12
    Regular Coder
    Join Date
    Apr 2004
    Location
    Canada
    Posts
    302
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brothercake
    why don't you just use a table with list bullets in the right column and text in the left, like this:
    because
    1. I am trying to get away from tables
    2. That won't validate

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But you had a workaround that you'd come up with before the "rtl" was suggested. Why not just use that workaround?
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #14
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Validation and semantics go hand in hand.

  • #15
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm lost here -- why can't you just align the text to the right and then use a background image with padding? What's the big deal with that way -- it validates, and it's semantic, or am I missing some other need?
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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