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.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Help: Using Images For Lists via CSS

    Hey Guys,

    I've got the following CSS that works great:

    .rowTwoLeftText ul li {
    background: url(images/arrow2.gif) no-repeat 70px 11px;
    margin: 0 0 0 -10px;
    padding: 8px 0 0 0;
    display: block;
    color: #666;
    /*border: 1px solid #000;*/
    }

    It displays correctly in a listing like this:

    <div class="rowTwoLeftText">
    <ul>
    <li>dada</li>
    </ul>

    However, the problem I'm running into is that it only displays correctly with a fixed length of text within the LI tag ( as shown by the hardcoded location in the CSS).

    How can I make the arrow.gif move, depending on the length of the text? I know this has to be possible, but I've been racking my brain and cannot get it to work.

    Any help would be much appreciated.

    Thanks.

  • #2
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    background: url(images/arrow2.gif) no-repeat right middle;
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Seems close .. using your code, the image disappears (out of the DIV tag I'm guessing).

    If I remove "middle" and keep it to the right, it will expand and space itself out of the text grows, however it stays on the right end of the DIV box if the text is shorter.

    Any ideas?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Lets see, you ask a question about a background image yet you don't tell us where this image is. Umm its not like we know what it looks like either. Post a link or attach the image.

  • #5
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    Lets see, you ask a question about a background image yet you don't tell us where this image is. Umm its not like we know what it looks like either. Post a link or attach the image.
    The image is irrelevant, but for sake of example, it's a small arrow. It sits just to the right of the linking/list text.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try spirit's code but instead of right middle try right center

  • #7
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    Try spirit's code but instead of right middle try right center
    No dice ..

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Attach the image you are using. Some of us help better when we see things visually. You may think its irrelevant but I don't think it is.

  • #9
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    Attach the image you are using. Some of us help better when we see things visually. You may think its irrelevant but I don't think it is.
    Attached here. Thanks.
    Attached Images Attached Images  

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Short of putting the image tag inside of the li, CSS can't adjust the background image dynamically.

  • #11
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_
    Short of putting the image tag inside of the li, CSS can't adjust the background image dynamically.
    That's the answer I was looking to confirm, thanks.

  • #12
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure you can!! Put the text into an inline element such as <a> or <span> then apply a right padding to the element. Example:
    Code:
    <style type="text/css">
       ul li a { padding-right:10px; background:url(arrow2.gif) right center no-repeat; }
    </style>
    HTML:
    Code:
    <ul>
       <li><a href="#">Some Test</a></li>
       <li><a href="#">Tests test stest </a></li>
       <li><a href="#">tests</a></li>
       <li><a href="#">t</a></li>
    </ul>
    EDIT: PS its "CENTER" not 'middle' for background-position.

  • #13
    Regular Coder
    Join Date
    Jul 2003
    Posts
    600
    Thanks
    17
    Thanked 0 Times in 0 Posts
    I coulda swore I tried that .. but it appears to work .. h mm ..


  •  

    Posting Permissions

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