How to sprite two images in one user list (Ul)

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
infomamun
Forum Contributor
Posts: 102
Joined: Mon Dec 28, 2009 7:48 pm

How to sprite two images in one user list (Ul)

Post by infomamun »

Hi there,
I have following structure in my userlist:

Code: Select all

<ul id="vmenu">
  <li><a href="index.htm">Menu1</a></li>
  <li><a href="#">Menu2</a></li>
  <li><a href="#">Menu3</a>
    <ul>
      <li><a href="#">Submenu1</a></li>
      <li><a href="#">Submenu2</a></li>
      <li><a href="#">Submenu3</a></li>
      <li><a href="#">Submenu4</a></li>
    </ul>
  </li>
  <li><a href="#">Menu4</a>
    <ul>
      <li><a href="index.htm">Submenu1</a></li>
      <li><a href="#">Submenu2</a></li>
      <li><a href="#">Submenu3</a></li>
    </ul>
  </li>
</ul>
What I am trying to do, using 1px width and 25 px height images as image sprite on all menu and submenu to make a gradient like structure. But at the same time I have a jquery function to slide down the sub-menus from menu3 and menu4 respectively. That's why I also need to put a up/down arrow on the menu3 and menu4 to show the users that these menus have submenu. So I want to use the arrow also as imagesprite together with 1px width image for bringing the gradient fill of those menus. How can I use two images together in same userlist/menu in this case?

Any help will be appreciated.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: How to sprite two images in one user list (Ul)

Post by requinix »

You could use another background image but personally I would use an actual <img> in the list. Put an alt/title on it for maximum accessibility.
infomamun
Forum Contributor
Posts: 102
Joined: Mon Dec 28, 2009 7:48 pm

Re: How to sprite two images in one user list (Ul)

Post by infomamun »

Dear Requinix,
Sorry but I could not understand what you have said. I use imagesprite in css instead using whole image for reducing http request like this:
#id ul li a{
backgroud: url('image.gif) 0 0;
backgroud-repeat: repeat-x;
}

If I use a second backgroud image with imagesprite like this:
#id ul li a{
backgroud: url('image.gif) 0 0;
backgroud-repeat: repeat-x;
backgroud: url('image2.gif) 0 0;
backgroud-repeat: repeat-x;
}

Then the second image is appeared over first image and the first image can not be seen. I don't want to use actual image like this:
<ul id="vmenu">
<li><a href="index.htm"><img src="image01.gif>Menu1</img></a></li>
<li><a href="#"><img src="image02.gif>Menu2</img></a></li>
<li><a href="#"><img src="image03.gif>Menu3</img></a>
<ul>

Because the text in the menu list is dynamic and length of text can be changed in time which will degrade the quality of image due to stretch.

It will be my pleasure if you show me sample css code to put two pictures at a time in the same menu.

Thanks
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: How to sprite two images in one user list (Ul)

Post by requinix »

Actual multiple backgrounds is a CSS 3 thing but if you think that's okay then go ahead.

It'll probably be easier to see this in action. Is there a page somewhere online you can show?
infomamun
Forum Contributor
Posts: 102
Joined: Mon Dec 28, 2009 7:48 pm

Re: How to sprite two images in one user list (Ul)

Post by infomamun »

Yes, please visit http://raddacentre.org/career.php to see the menu.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: How to sprite two images in one user list (Ul)

Post by requinix »

Unrelated: you should disable directory browsing. In your .htaccess

Code: Select all

Options -Indexes
You say you don't want images because of stretch, but right now if the text stretches then the background will be messed up. And sprites aren't so good when the size of the object can change, as these menus (the parent LIs will grow as the submenu expands) and the links themselves (with longer text) will.
infomamun
Forum Contributor
Posts: 102
Joined: Mon Dec 28, 2009 7:48 pm

Re: How to sprite two images in one user list (Ul)

Post by infomamun »

Parent's li will not grow while submenu expands if the background image is set to <a> element instead <li> element.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: How to sprite two images in one user list (Ul)

Post by requinix »

Actually the LI will grow but you don't have a background on it so that's okay.

I'm playing around with a couple ideas and I still think the easiest thing to do would be to use an IMG. I know sprites are cool and all that but the arrow.gif isn't even 1KB, and that includes both the up and down icons together (and some odd extra space you have in there). Apache can serve up the two images incredibly fast. Really there's no big technical reason why not to do that. Actually you get the whole alt/title advantage I mentioned before.
Only thing left I can think of is preloading the other arrow icon (the one shown for an expanded menu, that doesn't appear by default) but you can do it with one line of Javascript.

So one more time: do you have to use sprite images for this? Is there any other reason why?
infomamun
Forum Contributor
Posts: 102
Joined: Mon Dec 28, 2009 7:48 pm

Re: How to sprite two images in one user list (Ul)

Post by infomamun »

No special reason, I like to use sprite and just for knowing whether this is possible or not. If it is possible using css2 (like with applying z index), then please help me.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: How to sprite two images in one user list (Ul)

Post by requinix »

z-index applies to the element, not the background image.

Code: Select all

background: url('../webimages/arrow.gif') 150px 4px no-repeat, url('../webimages/gray001.png') 0 -22px;
seems to work well for me.
infomamun
Forum Contributor
Posts: 102
Joined: Mon Dec 28, 2009 7:48 pm

Re: How to sprite two images in one user list (Ul)

Post by infomamun »

If I am not wrong, it is for css3, but I intend to do it with css2 as I have a site which users are mainly from mobile.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: How to sprite two images in one user list (Ul)

Post by requinix »

Then you can't use multiple background images on the same element. Then you have to have put one each on two different elements. You could put it on the LI but it scales in height and you can't crop the background. You can't have a sister element to the A because they'll both be display:block and force each other onto different lines.

Only other thing I can think of is wrapping the A in another block-level element, moving the gradient background to that, and putting the arrow icon on the A instead.
Post Reply