CSS Sprites

Nu ved jeg ikke lige hvilken side du mener ..... mangler et link
Men jeg kan varmt anbefale SpriteRight - http://spriterightapp.com - hvis du programmere på en Mac

Her får du al css foræret når du laver dit sprite

Først gemmer du alle dine flag png'er i en samlet png fil, gerne med 10px mellemrum imellem hvert billede, placer dem horizontalt (For mit eksempels skyld). Gem den nye png som f.eks. sprites.png.

Smid en passende class på hvert af dine <a>'er, f.eks. eng for engelsk flag, ger for tysk:

<a href="" class="eng"></a>
<a href="" class="ger"></a>
... osv.

Herefter skal du have positionerne for de forskellige flag ud af sprites.png - hertil kan du bruge spritecow.com - eller også må du manuelt sidde med dit billedebehandlingsprogram og få noteret pixels ned. Det er ikke så voldsomt her, da alle flag er 50px bredde og med 10px mellemrum i mellem hver er det jo bare: 0, 60px, 120px, 180px osv at X positionen er. Y er altid 32px (Flagenes højde).

Og nu kan du plotte positionerne til CSS'en, start med en generel regel for alle flag, der sætter størrelse mm.:

.eng, .spa, .ger (osv) {
  width: 50px;
  height: 32px;
  float: left; /* Får at få dem til linje - eller display: inline-block, smag og behag */
  margin-right: 10px; /* Lidt luft imellem flagene */
  background: transparent url(sprites.png) 0 0 no-repeat;
}

Bagefter skal positionerne for de enkelte flag sættes op:

.ger {
  background-position: -60px 0;
}
.spa {
  background-position: -120px 0;
}

und so weiter.

Dit spørgsmål til hover forstår jeg simpelthen ikke noget af.

Tak for svar ;-) vil du have point?

Np ;)