Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 11-08-2017, 08:31 PM
SunEmbroidery's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 04-11-08
Location: Seaville, NJ
Posts: 72
iTrader: 0 / 0%
Fix CSS For Responsive Sprite

I want create a responsive sprite that consists of a horizontal row of four social icons that are each 32 x 32px.

I used a responsive sprite generator to create a sprite.png and its CSS. I added the sprite.png to my images folder and included that url path in the following css that was given to me:
Code:
/*sprite*/ ..spriteblogger-32, ..spritefacebook-32, ..spritepinterest-32, ..spritetwitter-32 {display:inline-block; overflow:hidden; background-repeat: no-repeat; background-image:url(../images/catalogue/sprite.png);} ..spriteblogger-32 {width:32px; height:32px; background-position:0.892857% 0.892857%; background-size:800.000%; } ..spritefacebook-32 {width:32px; height:32px; background-position:16.0714% 0.892857%; background-size:800.000%; } ..spritepinterest-32 {width:32px; height:32px; background-position:31.2500% 0.892857%; background-size:800.000%; } ..spritetwitter-32 {width:32px; height:32px; background-position:46.4286% 0.892857%; background-size:800.000%; }
I added the following code to a dwt file where I want the four icons to appear:
HTML Code:
<p class="center"><a href="https://custom-embroidered-shirts-hats.blogspot.com/" title="Custom Embroidered Shirts, Hats &amp; Apparel!"><img alt="Blogger" src="http://www.v7n.com/forums/images/catalogue/sprite.png" title="Blogger"></a> &nbsp;<a href="https://www.facebook.com/Sun-Embroidery-Screen-Printing-931769516867027/" title="Facebook"><img alt="Facebook" src="http://www.v7n.com/forums/images/catalogue/sprite.png"></a> <a href="https://twitter.com/sunembroidery" title="Sun Embroidery Screen Printing Tweets"><img alt="Twitter" src="http://www.v7n.com/forums/images/catalogue/sprite.png" title="Twitter"></a> &nbsp;<a href="https://www.pinterest.com/sunembroideryscreenprinting/logo-design/"><img alt="Pinterest" src="http://www.v7n.com/forums/images/catalogue/sprite.png" title="Pinterest"></a>&nbsp; </p>
Instead of seeing the four images I see linked titles: Blogger Facebook Twitter Pinterest. What am I doing wrong? Thanks for your help!
__________________
Custom Embroidery and Screen Printing for advertising your business
 
Reply With Quote

Advertisement

Advertisement

  #2 (permalink)  
Old 11-08-2017, 08:44 PM
SunEmbroidery's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 04-11-08
Location: Seaville, NJ
Posts: 72
iTrader: 0 / 0%
To add,

When I look at the dwt in my page editor's design view I see 4 boxes with red X's. I see the four linked titles when I preview a linked page in Firefox and Chrome.
__________________
Custom Embroidery and Screen Printing for advertising your business
 
Reply With Quote
  #3 (permalink)  
Old 11-09-2017, 09:38 AM
Super Moderator
Latest Blog:
None

 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 5,582
iTrader: 1 / 100%
The image url http://www.v7n.com/forums/images/catalogue/sprite.png does not exist, so try changing the url to an actually existing image that would probably help .
 
Reply With Quote
  #4 (permalink)  
Old 11-09-2017, 12:42 PM
SunEmbroidery's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 04-11-08
Location: Seaville, NJ
Posts: 72
iTrader: 0 / 0%
I see that the code in my post says "http://www.v7n.com/forums" in the url path but that's not what I posted. The path on my site is "../images/catalogue/sprite.png" which is where the sprite.png image is located.
__________________
Custom Embroidery and Screen Printing for advertising your business
 
Reply With Quote
  #5 (permalink)  
Old 11-09-2017, 02:44 PM
Super Moderator
Latest Blog:
None

 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 5,582
iTrader: 1 / 100%
I'm still pretty sure it's the image url there is the issue. You may want to try the full url to the image in a web browser to make sure the image exists. Just enter the the full url to the image in your web browsers adress-bar, click enter and see if the image is displayed in the web browser.

Even if you have put the image in the folder /images/catalogue/ you may have some redirects in the .htaccess-file that changes the url to another location on the server.
 
Reply With Quote
  #6 (permalink)  
Old 11-09-2017, 06:54 PM
SunEmbroidery's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 04-11-08
Location: Seaville, NJ
Posts: 72
iTrader: 0 / 0%
The image url path was the problem. I had "catalog" in one place and "catalogue" in another.

Now I see the icons but instead of seeing 4 icons total I see 4 sets of 4 icons. The first set all link to Blogger, the second 4 link to Facebook and so on. In other words I see the entire sprite image instead of the desired 1/4 of the sprite where each icon should be. Do I need to reference each part of the sprite on the dwt page? Any ideas?
__________________
Custom Embroidery and Screen Printing for advertising your business
 
Reply With Quote
  #7 (permalink)  
Old 11-10-2017, 02:06 AM
Super Moderator
Latest Blog:
None

 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 5,582
iTrader: 1 / 100%
Well the CSS looks a little strange and the images in the html doesn't have the CSS classes applied.

This is how i would assume it should be:
Code:
/*sprite*/ .spriteblogger-32, .spritefacebook-32, .spritepinterest-32, .spritetwitter-32 {display:inline-block; overflow:hidden; background-repeat: no-repeat; background-image:url(../images/catalogue/sprite.png);} .spriteblogger-32 {width:32px; height:32px; background-position:0.892857% 0.892857%; background-size:800.000%; } .spritefacebook-32 {width:32px; height:32px; background-position:16.0714% 0.892857%; background-size:800.000%; } .spritepinterest-32 {width:32px; height:32px; background-position:31.2500% 0.892857%; background-size:800.000%; } .spritetwitter-32 {width:32px; height:32px; background-position:46.4286% 0.892857%; background-size:800.000%; }
HTML Code:
<p class="center"><a href="https://custom-embroidered-shirts-hats.blogspot.com/" title="Custom Embroidered Shirts, Hats &amp; Apparel!"><img class="spriteblogger-32" alt="Blogger" src="http://www.v7n.com/forums/images/catalogue/sprite.png" title="Blogger"></a>&nbsp;<a href="https://www.facebook.com/Sun-Embroidery-Screen-Printing-931769516867027/" title="Facebook"><img class="spritefacebook-32" alt="Facebook" src="http://www.v7n.com/forums/images/catalogue/sprite.png"></a>&nbsp;<a href="https://www.pinterest.com/sunembroideryscreenprinting/logo-design/"><img class="spritepinterest-32" alt="Pinterest" src="http://www.v7n.com/forums/images/catalogue/sprite.png" title="Pinterest"></a>&nbsp;<a href="https://twitter.com/sunembroidery" title="Sun Embroidery Screen Printing Tweets"><img class="spritetwitter-32" alt="Twitter" src="http://www.v7n.com/forums/images/catalogue/sprite.png" title="Twitter"></a></p>
What i have done is added the classes to the images in the html, and changed .. to . in the CSS, try it out and see if it works.

Remember to change the image urls in the CSS and html to the correct location of the image on your server.
 
Reply With Quote
  #8 (permalink)  
Old 11-10-2017, 10:01 AM
SunEmbroidery's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 04-11-08
Location: Seaville, NJ
Posts: 72
iTrader: 0 / 0%
I added the correct sprite class to each <img in the html and removed the 2nd dot from each place in the CSS.

Now I see 4 groups of of 4 icons that are squished together. I can create a new sprite with more padding but I still have the four icons where there should be one. Adding the sprite classes to the html doesn't seem to have helped.

I appreciate your help!
__________________
Custom Embroidery and Screen Printing for advertising your business
 
Reply With Quote
  #9 (permalink)  
Old 11-11-2017, 06:27 AM
Super Moderator
Latest Blog:
None

 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 5,582
iTrader: 1 / 100%
Ok, i have done some adjustments and tested it, so it should work:
Code:
/*sprite*/ .spriteblogger-32, .spritefacebook-32, .spritepinterest-32, .spritetwitter-32 { display:inline-block; overflow:hidden; background-repeat: no-repeat; background-image:url(sprite.png); background-size: 100%; } .spriteblogger-32{width:32px; height:32px; background-position:0 0;} .spritefacebook-32{width:32px; height:32px; background-position: 0 33.3%;} .spritepinterest-32{width:32px; height:32px; background-position: 0 66.6%;} .spritetwitter-32{width:32px; height:32px; background-position: 0 99.9%;}
HTML Code:
<p class="center"><a href="https://custom-embroidered-shirts-hats.blogspot.com/" title="Custom Embroidered Shirts, Hats &amp; Apparel!"><span class="spriteblogger-32"></span></a>&nbsp;<a href="https://www.facebook.com/Sun-Embroidery-Screen-Printing-931769516867027/" title="Facebook"><span class="spritefacebook-32"></span></a>&nbsp;<a href="https://www.pinterest.com/sunembroideryscreenprinting/logo-design/"><span class="spritepinterest-32"></span></a>&nbsp;<a href="https://twitter.com/sunembroidery" title="Sun Embroidery Screen Printing Tweets"><span class="spritetwitter-32"></span></a></p>
I have made some changes to the background-position % and replaced image-tags with span-tags. You may need to do some fine tunning on the % if you change image-/background-size.
 
Reply With Quote
  #10 (permalink)  
Old 11-11-2017, 05:54 PM
SunEmbroidery's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 04-11-08
Location: Seaville, NJ
Posts: 72
iTrader: 0 / 0%
I must be doing something wrong. I tried your code and the result was 4 very small sets of 4 icons (each set with the four different icons) each in a diagonal pattern (16 icons total).

I tried replacing "background-image" with "background" and that resulted with 4 correctly sized and placed images of the Blogger image, the first image having the Blogger link, the second Blogger image with the Facebook link and so on. Its repeating the Blogger image even through I have Background-repeat: no repeat and the individual sprite classes on the html page. Thanks again.
__________________
Custom Embroidery and Screen Printing for advertising your business
 
Reply With Quote
  #11 (permalink)  
Old 11-12-2017, 09:45 AM
Super Moderator
Latest Blog:
None

 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 5,582
iTrader: 1 / 100%
Can you add the sprite.png to a new post or write the url to the image on your server so i can see how it looks exactly?
 
Reply With Quote
  #12 (permalink)  
Old 11-12-2017, 06:26 PM
SunEmbroidery's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 04-11-08
Location: Seaville, NJ
Posts: 72
iTrader: 0 / 0%
The url is:

https://www.sunembroideryscreenprint...log/sprite.png

I've been working on a local text site but I added the sprite to my images folder on my published site. Its also viewable on a test page: my site/contacttest.sprite.png. The social icons in the footer are 4 separate images.

The sprite image is 134px w X 32px h (2px padding between each image. I wonder if the padding is at least part of the problem? I tried a sprite with 0 padding and that produced 2 partial icons.

I used your code with my url except I changed "background-image" to "background" and added that in each separate sprite class. When I used "background-image" I saw 4 sets of 4 different tiny icons in a diagonal pattern. With my change I see 4 correctly sized and placed Blogger icons with each icon having the correct link (the 2nd Blogger icon has the Facebook link and so on).

Thanks again!
__________________
Custom Embroidery and Screen Printing for advertising your business
 
Reply With Quote
  #13 (permalink)  
Old 11-13-2017, 06:34 AM
Super Moderator
Latest Blog:
None

 
Join Date: 11-11-11
Location: Copenhagen, Denmark
Posts: 5,582
iTrader: 1 / 100%
Made some changes to the stylesheet, and tested it, so it should work:
Code:
/*sprite*/ .spriteblogger-32, .spritefacebook-32, .spritepinterest-32, .spritetwitter-32 { display:inline-block; overflow:hidden; background-repeat: no-repeat; background-image:url(sprite.png); } .spriteblogger-32{width:32px; height:32px; background-position:0 0;} .spritefacebook-32{width:32px; height:32px; background-position: 33.3% 0;} .spritepinterest-32{width:32px; height:32px; background-position: 66.6% 0;} .spritetwitter-32{width:32px; height:32px; background-position: 99.9% 0;}
You can use the html from my previous post in this thread.

You have a point with the padding, if you only added padding between the images, then you have some different widths with the images, since the different image widths would be 33px 34px 34px 33px, so i would recommend that you removed all padding from the image and add it with CSS.
 
Reply With Quote
  #14 (permalink)  
Old 11-13-2017, 06:55 PM
SunEmbroidery's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 04-11-08
Location: Seaville, NJ
Posts: 72
iTrader: 0 / 0%
Got it! Thanks so much for all your help! At first with 0 padding the images were slightly cut off but I created a sprite with 2px padding surrounding each image and changed the CSS to accommodate the new image sizes and it looks fine. Thanks again!
__________________
Custom Embroidery and Screen Printing for advertising your business
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off



V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 06:03 PM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.