Page 1 of 1
How to sprite two images in one user list (Ul)
Posted: Tue Feb 05, 2013 9:44 am
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.
Re: How to sprite two images in one user list (Ul)
Posted: Tue Feb 05, 2013 2:22 pm
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.
Re: How to sprite two images in one user list (Ul)
Posted: Tue Feb 05, 2013 9:27 pm
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
Re: How to sprite two images in one user list (Ul)
Posted: Wed Feb 06, 2013 1:55 am
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?
Re: How to sprite two images in one user list (Ul)
Posted: Wed Feb 06, 2013 6:12 am
by infomamun
Yes, please visit
http://raddacentre.org/career.php to see the menu.
Re: How to sprite two images in one user list (Ul)
Posted: Wed Feb 06, 2013 3:12 pm
by requinix
Unrelated: you should disable directory browsing. In your .htaccess
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.
Re: How to sprite two images in one user list (Ul)
Posted: Wed Feb 06, 2013 11:15 pm
by infomamun
Parent's li will not grow while submenu expands if the background image is set to <a> element instead <li> element.
Re: How to sprite two images in one user list (Ul)
Posted: Thu Feb 07, 2013 12:36 am
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?
Re: How to sprite two images in one user list (Ul)
Posted: Thu Feb 07, 2013 1:00 am
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.
Re: How to sprite two images in one user list (Ul)
Posted: Thu Feb 07, 2013 1:20 am
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.
Re: How to sprite two images in one user list (Ul)
Posted: Thu Feb 07, 2013 11:48 am
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.
Re: How to sprite two images in one user list (Ul)
Posted: Thu Feb 07, 2013 12:51 pm
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.