Jump to content

Help With Css Image Sprites


billydocks
 Share

Recommended Posts

hi there,Ingolme put me on to image sprites for a problem I had over a month ago but I have only just yesterday sat down to figure it all out.I have created a background image which is repeated directly below with the changed colours on the relevant parts, and I have only the top half showing as the background image, so I can get that far without trouble. I am not using regular boxes or standard shapes but that should not matter as long as I enter the correct pixel coordinates, is that right?I am confused as to the next step in the process. I can't seem to get my head around the coding as explained in the W3C tutorial. i have this in the HTML <body> <ul id="navlist"> <li id="news"><a href="news.html">News</a></li> <li id="photos"><a href="photos.html">Photos</a></li> <li id="links"><a href="links.html">Links</a></li> <li id="music"><a href="music.html">Music</a></li></ul> </body> and this in the CSS #navlist li { float:left; list-style:none; display:inline; text-indent: -9999em;}#navlist { background-image: url(images/background_72_spr.jpg); background-repeat: no-repeat; float: left; height: 710px; width: 950px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; text-indent: -9999px; list-style-image: none; list-style-type: none;} #news { width: 307px; height:110px; }#photos { width: 153px; height:47px; }#links {width: 88px; height:57px; } #news a:hover { background-image: url(images/background_72_spr.jpg); margin-top: 207px; margin-left: 151px;} I haven't gone past 'news' because I thought I'd make sure I could get one working before typing all the rest of the code out and discovering it need correction also. I know there must be a glaring error, but as I am so new to this whole thing I can't spot it. I have tried different things for hours today but still can't figure it out. I'll attach the image so you can see that if you need it. I apologise if this posting of lots of code is against the rules on this forum. Please let me know and I will edit it immediately. If anyone can provide assistance, it'd be greatly appreciated. Cheers!post-84097-0-07429000-1319534309_thumb.jpg

  • Like 1
Link to comment
Share on other sites

For an image sprite, you have to turn the link into a block with the exact width and height of the part of the image you want to display and set the background image to the link with a position 0 0. When you hover over the element, you change the background-position so that the background image moves up as far as the height of the first sprite. That means giving it a negative value for the vertical coordinate. Did you see the CSS sprites example in W3Schools tryit editor? In the tryit editor you can modify the values yourself to see what happens and understand what's going on.

  • Like 1
Link to comment
Share on other sites

Hi i have been trying to create an unordered list using CSS properties i have tried the following code ,to get basketball asa picture, but it returns a broken image , pls correct me where i am going wrong <html><head><style type="text/css">ul{list-style-type:none;margin:0px;padding:0px;}li{background-image:url("file:///Users/deepakshowri/Desktop/basketball.gif");background-position:0px 7px;background-repeat:no-repeat;padding-left:300px;}</style></head><body><ul><li>Micheal Jordon</li><li>Solomon Adrich</li><li>adrian jeff</li></ul></body></html> your help is appreciated.

Link to comment
Share on other sites

Rather using a absolute path, it would be better to use a relative path instead 1) In the folder you have this html page, create a folder images. 2) In this images folder place your image 'basketball.gif' 3) Now use relative path to image li{background-image:url(images/basketball.gif);background-position:0px 7px;background-repeat:no-repeat;padding-left:300px;}

Link to comment
Share on other sites

You can't change the size of the background-image, you have to make it the size of the li element it is placed into li{background-image:url(images/basketball.gif);background-position:0px 7px;background-repeat:no-repeat;padding-left:300px;width:100px;height:30px;} you would now have a background-image of 100px width and 30px high to fit in the li element, OR if using sprite images 100px wide and 60px high, with top 30px relating to normal state, and bottom 30px of image being the hover state.

Link to comment
Share on other sites

Hello again, apologies for my slow progress on this. I am attempting to learn image sprites in my "spare time" (a misnomer, surely), which means unfortunately I only get to it about once a week. I do very much appreciate your help though. Thanks for all of it so far. Your tip regarding turning the link into a block was what I was missing, thanks Ingolme. And after re-reading the W3 tutorial, I understand what I'm doing a lot more now. I am fairly confident I have everything sorted out now, except one last thing.The sprites work, the bg image changes with the mouse hover, but all my images/links are piled on top of each other. i can't figure out how to position them all around to where they are supposed to be in the larger bg image. i'll attach a screen shotpost-84097-0-66784600-1320717905_thumb.jpgyou can see all the blocks are grouped in the top left. here is my css: #navlist { background-image: url(images/background_72_spr.jpg); background-repeat: no-repeat; position:relative; height: 710px; width: 950px; text-indent: -9999px; list-style-image: none; list-style-type: none; margin: 0 0 0 0; padding: 0 0 0 0;} #navlist li { position:absolute; margin:0; padding:0; list-style:none; }#news { background-image: url(images/background_72_spr.jpg); background-position: -152px -207px;}#news a:hover { background: url(images/background_72_spr.jpg) -152px -917px;}#news a, #news a:visited { display:block; width: 307px; height: 110px; } the last #news group is repeated for each link, but i'll leave them out to save you reading 5 more groups of identical CSS coding.the HTML has not changed from my initial post in this thread. Thank you again for the help!

Link to comment
Share on other sites

Ah! I've figured it out myself. I insert {left: x; and top: x;} values after the background coordinates and this positions the sprites where I want them to be. Thanks Ingolme for the help to get me this far. If you notice any redundant/incorrect CSS, or something I could do more efficiently, and can be bothered to note it down for me, feel free. Rest assured I'll be back with more questions on a different topic soon!

Link to comment
Share on other sites

Hi i have been trying to create an unordered list using CSS properties i have tried the following code ,to get basketball asa picture, but it returns a broken image , pls correct me where i am going wrong <html><head><style type="text/css">ul{list-style-type:none;margin:0px;padding:0px;}li{background-image:url("file:///Users/deepakshowri/Desktop/basketball.gif");background-position:0px 7px;background-repeat:no-repeat;padding-left:300px;}</style></head><body><ul><li>Micheal Jordon</li><li>Solomon Adrich</li><li>adrian jeff</li></ul></body></html> your help is appreciated.
you should really follow a different convention for your image paths, as was discussed in great detail with you already here.http://w3schools.inv...pic=39800&st=20 Edited by thescientist
Link to comment
Share on other sites

Hi i have been trying to get the "text" part of the following code aligned by the image, but i get the text over the image , pls give me a fix for this <html><head><style type="text/css">body{background-image:url("help.png"); background-repeat:no-repeat; margin-left:0px; margin-top:10px;background-size:300px,300px;}#matter{font-type:Garamond,Helvetica Neue; color:#6495ED; font-size:20px;margin-top:50pxmargin-left:100px;text-align:justify;}</style></head><body><p id="matter">India is renowned for its culture and traditional values,though it has been developing financially over the recent past with new companies setup and more business coming into the country, it is still been a bit slacky in poverty,there could be many reasons why it is behind in this case, may be due to corruption,low literacy or may be people are a bit lazy to get on to work and feed their families.However there are numerous organizations who are constantly funding part of income over a regular basis in helping the poor ,who has got solid initiatives and who are willed to do something to improve the nation overcome this situation.<br/></p><br/><p id=">please comment below your valuable ideas and opinions which could make a difference to indian poverty,which is greatly appreciated</p><br/><form><input type="text-box" size="100px"name="blank" value=""></form></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...