billydocks Posted October 25, 2011 Share Posted October 25, 2011 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! Link to comment Share on other sites More sharing options...
Ingolme Posted October 25, 2011 Share Posted October 25, 2011 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. Link to comment Share on other sites More sharing options...
billydocks Posted October 30, 2011 Author Share Posted October 30, 2011 Thanks Ingolme. I'll have another read through the tryit editor and attempt to understand it more clearly with what you've explained here in mind. Link to comment Share on other sites More sharing options...
deepak.ramineni Posted November 6, 2011 Share Posted November 6, 2011 Hi therei am trying to use a.hover{} ...selector to change to an image if i click on the link. can you suggest how i can go about doing this. for example:- <html><head><style type="text/css">a.one:hover{i am not sure what to put in here}</style></head><body><a class="a.one" href="http:///image.com/">A</a></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted November 6, 2011 Share Posted November 6, 2011 CSS can't manipulate the DOM, it can just change its appearance. You'll have to use Javascript. Link to comment Share on other sites More sharing options...
deepak.ramineni Posted November 6, 2011 Share Posted November 6, 2011 HI Inglome thnks ur reply cheers Link to comment Share on other sites More sharing options...
deepak.ramineni Posted November 6, 2011 Share Posted November 6, 2011 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 More sharing options...
dsonesuk Posted November 7, 2011 Share Posted November 7, 2011 are you missing the drive letter as in background-image:url("file:///C:/Users/deepakshowri/Desktop/basketball.gif"); Link to comment Share on other sites More sharing options...
deepak.ramineni Posted November 7, 2011 Share Posted November 7, 2011 Hi Dsonesuk i hv doublechecked and it seems to be right. cheers Link to comment Share on other sites More sharing options...
dsonesuk Posted November 7, 2011 Share Posted November 7, 2011 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 More sharing options...
deepak.ramineni Posted November 7, 2011 Share Posted November 7, 2011 Hi i have as you said, and it still the same issue, cud you advise me how i can chnage the height and width of an image for the code above. thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted November 7, 2011 Share Posted November 7, 2011 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 More sharing options...
billydocks Posted November 8, 2011 Author Share Posted November 8, 2011 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 shotyou 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 More sharing options...
billydocks Posted November 8, 2011 Author Share Posted November 8, 2011 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 More sharing options...
thescientist Posted November 8, 2011 Share Posted November 8, 2011 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 Link to comment Share on other sites More sharing options...
deepak.ramineni Posted November 13, 2011 Share Posted November 13, 2011 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 More sharing options...
dsonesuk Posted November 13, 2011 Share Posted November 13, 2011 This a different problem, and should started in a new topic. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.