Right Align Img Within List Item

Discussion in 'CSS' started by Letcha, Jan 28, 2009.

  1. #1
    I have some links in a list, and I'd like a graphic to appear next to each of them (but to the right), and have the graphic included in the link. So basically:

    <ul>
    <li><a href="#">item 1<img src="buyitem1.jpg" style="float:right"></a></li>
    <li><a href="#">item 2<img src="buyitem2.jpg" style="float:right"></a></li>
    (and so on)

    This hasn't worked out so far. I have tried style="text-align:right", align="right", etc. Any idea what I'm doing wrong. The list is in a div with a width of about 400px, and I'd like for the images to appear flush up against the right hand side.
     
    Letcha, Jan 28, 2009 IP
  2. eric.r

    eric.r Peon

    Messages:
    124
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Can you post a link to the page where it doesn't work?

    ~eric
     
    eric.r, Jan 28, 2009 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Think about it. You want the image to be flush with the right hand side... of the li, right? But you've got it inside the anchor. Since your anchor doesn't have anything suggesting you've made it a block or anything, it's only as wide as the text and the image is, no wider. Certainly not wide enough to reach the right side!

    Have you considered making the image a sibling of the anchor instead of a child?

    <li><a href="#">item</a><img src="blah"></li>?

    Although, I haven't ever seen a menu that really needed an HTML img in it before... instead, it's usually decorational, meaning it belongs in the css.

    Like this:
    <li><a href="#">blah</a></li>

    li {
    background: url(tehimage.bla) 100% 50% no-repeat;
    }

    That's pseudo-CSS, it needs to be written properly to go with your page, but I'd say you might really be after this instead of a hard image tag.
     
    Stomme poes, Jan 30, 2009 IP
  4. eric.r

    eric.r Peon

    Messages:
    124
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Lol. What kind of image has an extension of .bla ;)

    ~eric
     
    eric.r, Jan 30, 2009 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    It's a .blahblahblah file, but with the extention shortened for older OSes : P
     
    Stomme poes, Feb 3, 2009 IP
  6. eric.r

    eric.r Peon

    Messages:
    124
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Oh. It must be on Vista then. Dam Microsoft.

    ~eric
     
    eric.r, Feb 3, 2009 IP