plese help with small css for sprites

More
3 years 11 months ago - 3 years 11 months ago #8748 by migors
migors created the topic: plese help with small css for sprites
Hi friends i am trying to reduce http requests. So made a css sprite from icons in modules. And i try to replace icons in modules with background images. In module i removed image url and added a span class icon7. What is the problem i can not set background image in proper possition. (see second icon in picture)
You can see this in this url first page. http://meko.lv

what ever i do i can not make icon be in the center. If i move it with background possition it hides in the middle of module, See picture in attachment.

The code in module:
<div class="jm-box"><a href="/metalapstrade"> <span class=" icon icon7"> </span> <h2 style="font-size: 16px;"><span class="title">Metālapstrāde</span></h2> </a></div>
The css i added to custom less:
.icon8, .icon7, .icon6, .icon5, .icon4, .icon3, .icon10, .icon9{
	background: url(/templates/jm-cleaning-company/images/sprites.png) no-repeat;
}

.icon8{
	background-position: 0 0;
	width: 85px;
	height: 72px;
}

.icon7{
	background-position: -151px 0;
	width: 85px;
	height: 72px;
}

.icon6{
	background-position: -299px -1px ;
	width: 85px;
	height: 72px;
}

.icon5{
	background-position: -450px -1px ;
	width: 85px;
	height: 72px;
}

.icon4{
	background-position: -1px -151px ;
	width: 85px;
	height: 72px;
}

.icon3{
	background-position: -147px -150px ;
	width: 85px;
	height: 72px;
}

.icon10{
	background-position: -298px -151px ;
	width: 85px;
	height: 72px;
}

.icon9{
	background-position: -450px -151px ;
	width: 85px;
	height: 72px;
}

So far i managed reduce http requests to 28. And implementing this sprite i can reduce it to 21.

Can you plese help what i am doing wrong? may be this is complitely wrong way?
Attachments:
Last Edit: 3 years 11 months ago by migors.

Please Log in or Create an account to join the conversation.

More
3 years 11 months ago #8753 by marcin
marcin replied the topic: plese help with small css for sprites
Hello,

It seems that you need simply to center the icon using margin auto.
Please try this style:

#jm-allpage #jm-page .jm-box span {
margin: 0 auto;
}

Regards,
Marcin

Please Log in or Create an account to join the conversation.

More
3 years 11 months ago #8754 by migors
migors replied the topic: plese help with small css for sprites
Thank you :) it works!

you are the best :)

Please Log in or Create an account to join the conversation.

Time to create page: 0.268 seconds

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2019 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.