I'm trying to implement image sprites with this code

I’m getting way confused on how I would do this, and if it would even work.

Instead of using multiple images, I want to try and use only 1 if it is possible with this type of code.

I’m thinking this is the type of code it would work well with, but image sprites isn’t something I use regularly.

The code I’m trying to implement it in.

Image Sprites

image



.songa, .songb, .songc {
  background-image: url('https://i.imgur.com/uhVrgBC.png');
  background-repeat: no-repeat;
}



.songa {
background-position: -3px -3px; 
width: 198px;
height: 198px;
}

.songb {
background-position: -204px -3px; 
width: 198px;
height: 198px;
}

.songc {
background-position: -405px -3px; 
width: 198px;
height: 198px;
}

I was able to get up this far, but how come it’s not lined up correctly?

Only the 1st box is right, the other 2 the black is showing.

image

songa, b & c are stacked vertically under one another and if you remove the overflow:hidden from wrapg you would see them sitting vertically.

If all you want is a background image then just apply it to .wrapg instead and do away with those other divs unless you have some other purpose in mind.

e.g.

.wrapg {background-position:-3px -3px}

I suggest you review the old threads you had where all these details have been discussed in full and to great extent so I am not going to repeat myself as I don’t have the time or the energy at the moment I’m afraid.:slight_smile: (Your other thread on positioning is also going over old ground also and if it was just a matter of a typo or two then you would get quick answers but the questions you ask are the same ones we have answered many times. A review of your previous threads would give you all the answers you need :slight_smile: .)

3 Likes

Hi there asasass,

please take heed of what PaulOB has written, if not I will
be forced into getting deathshadow to pay you a visit. :rofl:

coothead

2 Likes

I used this:
http://getspritexy.com/

Horizontal:

.songa {
  background-position: -3px -3px;
  width: 198px;
  height: 198px;
}

.songb {
  background-position: -204px -3px;
  width: 198px;
  height: 198px;
}

.songc {
  background-position: -405px -3px;
  width: 198px;
  height: 198px;
}

image


Vertical


.songa {
  background-position: -3px -3px;
  width: 198px;
  height: 198px;
}

.songb {
background-position: -3px -204px; 
width: 198px;
height: 198px;
}

.songc {
background-position: -3px -405px; 
width: 198px;
height: 198px;
}

Wait a second, I don’t even need these, it works without them.

.songa {
background-position: -3px -3px; 
width: 198px;
height: 198px;
}

.songb {
background-position: -204px -3px; 
width: 198px;
height: 198px;
}

.songc {
background-position: -405px -3px; 
width: 198px;
height: 198px;
}
  <div class="songa"></div>
  <div  class="songb"></div>
  <div  class="songc"></div>

This is all I need:

.wrapg {
  position: relative;
  width: 606px;
  height: 204px;
  overflow: hidden;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background-position: -3px -3px;
  background-image: url('https://i.imgur.com/uhVrgBC.png');
  background-repeat: no-repeat;
}

What part of my post did you not read?

1 Like

For future reference, how would this code have been marked up as an actual image sprite?

I have an idea for something else, utilizing this same markup, so I would want to know how to do this using image sprites also.

So, then I would stack them horizontally somehow?

How do you change it from vertical to horizontal?
image

Something like this?

This doesn’t seem like the right way.

div {
  display: block;
  float: left;
  margin-right: 3px;
}

  <div>
    <div class="songa"></div>
    <div class="songb"></div>
    <div class="songc"></div>
  </div>

That would give every single div in your layout a margin which is clearly not what you want? You don’t need the surrounding div of the songs anyway.

You can then condense the first part of the css into this only.

.wrapg {
  position: relative;
  width: 606px;
  height: 204px;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}
.songa,
.songb,
.songc {
  float:left;
  background: url('https://i.imgur.com/uhVrgBC.png') no-repeat -3px -3px;
  width: 198px;
  height: 198px;
  margin-right:3px;
 }
.songb { background-position: -204px -3px;}
.songc { background-position: -405px -3px;margin-right:0;}

I’m ignoring the fact that I wouldn’t use empty elements for images anyway as I’m sure existing elements could be utilised or :before and :after could be used or each block wrapped n a parent div to make more structural sense.

As I said we’ve been over this numerous times so its up to you to look back at what’s been said before :;

1 Like

The only reason why I left them empty is I haven’t decided what images to put there yet.

I’m having trouble doing this one.

The html part is all set.
I tried setting up the CSS side, got all messed up.

Last working version with New A - L html
Only the 1st row is set on the CSS side.

If the html side is all set, then just the CSS side needs to be adjusted.

I’m guessing how I have this set up would be right then.


.songa,
.songb,
.songc,
.songd,
.songe,
.songf,
.songg,
.songh,
.songi,
.songj,
.songk,
.songl{
  float: left;
  background: url('https://i.imgur.com/NvRkvAe.png') no-repeat;
  width: 198px;
  height: 198px;
  margin-right: 3px;
}
.songa {
  background-position: -3px -3px;
  width: 198px;
  height: 198px;
}

.songb {
  background-position: -204px -3px;
  width: 198px;
  height: 198px;
}

.songc {
  background-position: -405px -3px;
  width: 198px;
  height: 198px;
}

.songd {
  background-position: -3px -268px;
  width: 198px;
  height: 198px;
}

.songe {
  background-position: -204px -268px;
  width: 198px;
  height: 198px;
}

.songf {
  background-position: -405px -268px;
  width: 198px;
  height: 198px;
}

.songg {
  background-position: -3px -532px;
  width: 198px;
  height: 198px;
}

.songh {
  background-position: -204px -532px;
  width: 198px;
  height: 198px;
}

.songi {
  background-position: -405px -532px;
  width: 198px;
  height: 198px;
}

.songj {
  background-position: -3px -797px;
  width: 198px;
  height: 198px;
}

.songk {
  background-position: -204px -797px;
  width: 198px;
  height: 198px;
}

.songl {
  background-position: -405px -797px;
  width: 198px;
  height: 198px;
}

The margins just need to be figured out for these:

I just set them up now to how they should look.
Still margins need to be adjusted, but that’s all.

.wraph .playd {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 9px 210px;
}

.wraph .playingd {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  margin: 0 50px 0 201px;
}

.wraph .playe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 9px 210px;
}

.wraph .playinge {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  margin: 0 50px 0 201px;
}

.wraph .playf {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 9px 210px;
}

.wraph .playingf {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  margin: 0 50px 0 201px;
}

.wrapi .playg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 9px 210px;
}

.wrapi .playingg {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  margin: 0 50px 0 201px;
}

.wrapi .playh {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 9px 210px;
}

.wrapi .playingh {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  margin: 0 50px 0 201px;
}

.wrapi .playi {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 9px 210px;
}

.wrapi .playingi {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  margin: 0 50px 0 201px;
}

.wrapj .playj {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 9px 210px;
}

.wrapj .playingj {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  margin: 0 50px 0 201px;
}

.wrapj .playk {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 9px 210px;
}

.wrapj .playingk {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  margin: 0 50px 0 201px;
}

.wrapj .playl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 9px 210px;
}

.wrapj .playingl {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  margin: 0 50px 0 201px;
}

And then I have these:

These would go at the top of the CSS underneath the other one, unless do you further down closer to the other ones.


.wraph {
  position: relative;
  width: 606px;
  height: 204px;
  overflow: hidden;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapi {
  position: relative;
  width: 606px;
  height: 204px;
  overflow: hidden;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrapj {
  position: relative;
  width: 606px;
  height: 204px;
  overflow: hidden;
  margin-top: 8px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

I cleaned up the CSS a bit here:

That looks better.

I’m getting there.

Would something like this work, or do I have to do them each seperatly?

.wrapg,
.wraph,.wrapi, .wrapj .lines::before,
.wrapg,
.wraph,.wrapi, .wrapj .lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrapg,
.wraph,.wrapi, .wrapj .lines::after {
  left: 399px;
}

I put them all in separately.

Now top margin is all adjusted.

I got up this far:

This one is causing the 1st box to malfunction.
How come?

If I remove these:
.wraph .wrapi .wrapj

it works:

.wrapg .wraph .wrapi .wrapj #thevideoa,
#thevideob,
#thevideoc,
#thevideod,
#thevideoe,
#thevideof,
#thevideog,
#thevideoh,
#thevideoi,
#thevideoj,
#thevideok,
#thevideol {
  display: none;
}

Update*

If I put a comma after .wrapj, it works.

Is there supposed to be a comma there?

.wrapg .wraph .wrapi .wrapj, #thevideoa,
https://jsfiddle.net/qr9wfybv/242/

It looks good so far:
https://jsfiddle.net/qr9wfybv/248/

I just readjusted the CSS:
https://jsfiddle.net/qr9wfybv/250/

Right now I’m putting in the margins.

So far so good.

I’m now up to adjusting the image sprite to how it should be.

How does this look to you? @PaulOB

I was able to condense a lot here I found.

.wrapg {
  margin-top: 8px;
}

.wraph,
.wrapi,
.wrapj {
  margin-top: 61px;
}

.wrapg,
.wraph,
.wrapi,
.wrapj {
  position: relative;
  width: 606px;
  height: 204px;
  overflow: hidden;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

@PaulOB

Performance wise, which is suited best for this?

Do you have an opinion either one or the other?

Using Background image
https://testpage34567.blogspot.com/

  background-position: -3px -3px;
  background-image: url('https://i.imgur.com/uhVrgBC.png');
  background-repeat: no-repeat;

Using Image sprite
https://testingspriteplayers.blogspot.com/


.songa,
.songb,
.songc,
.songd,
.songe,
.songf,
.songg,
.songh,
.songi,
.songj,
.songk,
.songl {
  float: left;
  background: url('https://i.imgur.com/NvRkvAe.png') no-repeat;
  width: 198px;
  height: 198px;
  margin-right: 3px;
}