Help: Using Images For Lists via CSS

[kraftomatic]

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.

[SpirtOfGrandeur]

background: url(images/arrow2.gif) no-repeat right middle;

[kraftomatic]

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?

[_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.

[kraftomatic]

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.

[_Aerospace_Eng_]

Try spirit's code but instead of right middle try right center

[kraftomatic]

Originally Posted by _Aerospace_Eng_

Try spirit's code but instead of right middle try right center

No dice ..

[_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.

[kraftomatic]

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.

[_Aerospace_Eng_]

Short of putting the image tag inside of the li, CSS can't adjust the background image dynamically.

[kraftomatic]

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.

[circusbred]

Sure you can!! Put the text into an inline element such as <a> or <span> then apply a right padding to the element. Example:

<style type="text/css">
   ul li a { padding-right:10px; background:url(arrow2.gif) right center no-repeat; }
</style>

HTML:

<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.

[kraftomatic]

I coulda swore I tried that .. but it appears to work .. h mm ..