Jump to content

[SOLVED] CSS, Sprites, How to replace them in this example.


Recommended Posts

How to make this global.css with a sprite 

#topnavigation > div > div > div > div
	{
		height:52px;
		padding-left:10px;
		background:url(http://magine.soaparcadia.com/picture1.png) no-repeat;
	}
	#topnavigation > div > div > div > div > div
	{
		background: url("http://magine.soaparcadia.com/picture2.png") no-repeat scroll right top transparent;
		float: left;
		margin-right: 0;
		padding-right: 20px;
		width: 100%;
		height:52px;
	}
	#topnavigation .container
	{background:url(http://magine.soaparcadia.com/picture3.png) repeat-x;height:42px}
	.navbar-inner
	{
		padding-left:0;
		background:none;
		border:0 !important;
		box-shadow:none;
		line-height:42px;
	}

Ok, now I wanna change the images with sprites. How to do that? 
 

I add the following generated sprite part to the global.css file

.parent-element {
      background:url(http://csssprites.com/results/4a85bf56de56627c275ab0a5a6057fcc/result.html);
}

Please correct me when I am wrong

And these are the pictures in 'code' :s :)

-0px -0px; width: 7px; height: 42px >>> being picture1.png
-0px -52px; width: 10px; height: 52px >>> being picture2.png
-0px -114px; width: 10px; height: 52px >>> being picture3.png

And this part is what I don't know. How to adapt the global.css file so that the global.css file now works with sprites. 

Thank you for reading. Please help me. It would mean a lot for me. And probably for others to :)

Regards.. 

Edited by vekia (see edit history)
Link to comment
Share on other sites

  • 1 year later...

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
×
×
  • Create New...