...

View Full Version : Help: Using Images For Lists via CSS



kraftomatic
12-21-2005, 08:10 PM
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
12-21-2005, 08:31 PM
background: url(images/arrow2.gif) no-repeat right middle;

kraftomatic
12-21-2005, 08:38 PM
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_
12-21-2005, 08:53 PM
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
12-21-2005, 08:54 PM
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_
12-21-2005, 09:09 PM
Try spirit's code but instead of right middle try right center

kraftomatic
12-21-2005, 09:18 PM
Try spirit's code but instead of right middle try right center

No dice .. :(

_Aerospace_Eng_
12-21-2005, 09:31 PM
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
12-21-2005, 09:43 PM
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_
12-21-2005, 09:51 PM
Short of putting the image tag inside of the li, CSS can't adjust the background image dynamically.

kraftomatic
12-21-2005, 10:06 PM
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
12-21-2005, 10:13 PM
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
12-21-2005, 10:16 PM
I coulda swore I tried that .. but it appears to work .. h mm ..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum