Vítejte na blog.vyvojar.cz Přihlásit | Registrovat | Pomoc

CSS sprity a seznamy

Ač nerad, přeci jen jsem občas dotlačen k práci na uživatelském rozhraní :-). V rámci jednoho webového projektu vznikl požadavek použít CSS sprity  místo odrážek.

Pokud někdo neví, co jsou to CSS sprity, tak snad pomůže tento odkaz.

Přímé použití v seznamech je ale, jak jsem posléze zjistil, problematické. Prvek seznamu je obvykle větší než obrázek ve spritu a tak je často zobrazeno ze spritu více, než by bylo vhodné. Ani můj oblíbený stackoverflow mi nenabídl řešení – většina příspěvků, co jsem našel, radila buď předělat sprite tak, aby obsahoval obrázky jen vertikálně  a nebo  navrhovala použít element div jako kontejneru.

Pouze vertikální uspořádání spritu nebylo možné – sprite byl dodán a nebylo možné jej měnit. Použítí divu se mi moc nelíbílo, kód pak vypadal tak nějak divně:

<ul>
<li class="menu">
<div class="saveIcon"></div>Save
</li>
</ul>

Mým cílem je ale mnohem obyčejnější zápis:

<ul class="menu">
<li class="save">save</li>
<li class="edit">edit</li>
</ul>
a při použití jednoduchého spritu:
sprite_example

 

dosáhnout tohoto vzhledu:

image

o vše se pak postará tento css kód:

ul.menu
{
list-style: none outside none;
padding: 0;
margin: 0;
font-weight:bold;
}

ul.menu li
{
display: inline-block;
margin-left: 20px;
}

ul.menu li:before
{
content:url(content/empty_space.gif);
background-image: url(Content/sprite_example.jpg);
background-repeat: no-repeat;
margin-right:5px;
display: inline-block;
}

li.save:before
{
background-position: 0px -53px;
}

li.edit:before
{
background-position: -45px -53px;
}

Finta spočívá v použítí průhledného obrázku s rozměry odpovídajícími ikoně ze spritu. Ostatní již odpovídá běžnému postupu při používání Css spritu.

Následně je i velmi jednoduché změnit obrázek při najetí myší, stačí doplnit tento styl:

li.save:hover:before
{
background-position: 0px 0px;
}
a výsledkem je:
image Přiložena je i jednoduchá stránka s obrázky a css stylem.
Zveřejněno 21. února 2011 23:01 by mstr
Vedeno pod:

Attachment(s): CssSpriteList.zip

Upozornění na nové komentáře

Pokud chčeš dostávat upozornění emailem na změny u toho příspěvku,tak se zaregistruj zde.zde

Odebírat komentáře k tomuto příspěvku pomocí RSS

Komentář

# This is both street

This is both street smart and ingielltent.

7. dubna 2016 23:23 by Krisalyn

# I was really confuse

I was really confused, and this answered all my <a href="http://vleqdkz.com">quieostns.</a>

8. dubna 2016 6:02 by Sailor

# If I coiumnmcated I

If I coiumnmcated I could thank you enough for this, I'd be lying. http://rckozsv.com [url=http://ymivfa.com]ymivfa[/url] [link=http://npzdymkqif.com]npzdymkqif[/link]

16. dubna 2016 16:15 by Marlie

# [url=http://carins

 [url=http://carinsurancevol.pw/CA/Bakersfield/cheap-liability-insurance-in-bakersfield-california/]cheap liability insurance in Bakersfield California[/url]   [url=http://carinsurancedix.top/CA/San-Marino/auto-insurance-companies-with-reasonable-quote-in-san-marino-ca/]auto insurance companies with reasonable quote in San Marino CA[/url]   [url=http://carinsurancevol.pw/CA/La-Verne/cheapest-insurance-la-verne-under-25/]cheapest insurance La Verne under 25[/url]   [url=http://carinsurancequotesufz.pw/LA/Pineville/car-insurance-pineville-quotes/]car insurance Pineville quotes[/url]

19. dubna 2016 3:45 by Jennis

# cover personal [url

cover personal [url=http://safeinauto.com]insurance auto[/url] easily teachers [url=http://autoinsurancegl.net]cheapest car insurance[/url] coverage quality something happens [url=http://autoinsurancend.info]cheap auto insurance[/url] very important case [url=http://autoinsurancersr.top]auto insurance quotes[/url] techniques

22. dubna 2016 15:36 by Darold

# [url=http://carins

 [url=http://carinsurancedhk.top/CA/Santa-Maria/us-agency-car-insurance/]us agency car insurance Santa Maria CA[/url]   [url=http://autoinsurancequotesoirw.info/CO/Littleton/]auto insurance quotes Littleton CO[/url]   [url=http://autoinsuranceoie.info/MI/Novi/cheapest-auto-insurance-in/]cheapest auto insurance in Novi MI[/url]   [url=http://autoinsurancequoteyom.pw/GA/Valdosta/list-of-car-insurances-in/]list of car insurances in Valdosta GA[/url]   [url=http://autoinsurancequoteupp.top/KS/Overland-Park/cheap-full-coverage-car-insurance/]cheap full coverage car insurance Overland Park KS[/url]

23. dubna 2016 17:24 by Pink

# [url=http://carins

 [url=http://carinsurancequoteoc.info/NC/Thomasville/cheap-non-owners-insurance/]cheap non owners insurance Thomasville NC[/url]   [url=http://carinsurancequotelv.info/NC/Burlington/us-agency-car-insurance/]us agency car insurance Burlington NC[/url]   [url=http://autoinsurancequoteish.pw/NY/Bellmore/us-agency-car-insurance/]us agency car insurance Bellmore NY[/url]   [url=http://autoinsurancequoteish.pw/TX/Whitney/cheap-full-coverage-auto-insurance/]cheap full coverage auto insurance Whitney TX[/url]

4. května 2016 15:31 by Welcome

# would spend [url=ht

would spend [url=http://carinsurancert.top]car cheap insurance[/url] company combined into [url=http://carinsurancebro.com]car insurance[/url] accidents owner should [url=http://carinsurancemath.com/]insurance car[/url] something happens

18. června 2016 5:22 by Honney

# discount [url=http:

discount [url=http://fallenandwounded.org/free_car_insurance_quotes.html]car insurance free quotes[/url] insurance

13. září 2016 21:43 by Tessica

# [url=http://lookup

9. října 2016 10:09 by Taimi

# [url=http://privat

20. října 2016 5:45 by Aira

# [url=http://autoin

 [url=http://autoinsurancequotesnoz.us/]free car insurance[/url]   [url=http://cheapestcarinsurancesq.top/]nj car insurance quotes[/url]   [url=http://carinsuranceratesmv.info/]cheap car insurance[/url]   [url=http://carinsurancezan.top/]quote car insurance[/url]

4. prosince 2016 6:45 by Kamberley

# b56cvu2x

wh0cd651945 [url=http://sildenafilcitrate2017.com/]sildenafil[/url]

25. dubna 2017 3:00 by Caseydix

# qtcwsxfm

[url=http://aceon.world/]aceon[/url]

28. června 2017 13:58 by Bennysop

# 4vyurlh1nzin

1ugwvqgw6qwlzf1e8h

[url=http://google.us]google[/url]

<a href=http://google.us>google</a>

5ntonslhab8e2eig6y

3. července 2017 6:05 by JerryTus

# 4nijeasa

wh0cd507306 [url=http://trazodone50mg.us.com/]Trazodone 50 Mg[/url] [url=http://azithromycin.us.org/]azithromycin prescriptions[/url]

19. července 2017 7:20 by AlfredKiz

# ush7yiko

wh0cd54066 [url=http://genericcymbalta.us.com/]Generic Cymbalta[/url]

21. července 2017 9:02 by Bennysop

# cx9zu88k

wh0cd299278 [url=http://buymotilium.us.com/]motilium no prescription[/url] [url=http://gabapentin.us.com/]neurontin online[/url] [url=http://hoodia.us.com/]Buy Hoodia[/url]

25. července 2017 3:42 by EugeneHar

# j8zmbuom

wh0cd380424 [url=http://advairgeneric.us.com/]advair diskus mail order[/url] [url=http://toradolonline.us.com/]buy toradol[/url] [url=http://buycymbalta.us.org/]purchase cymbalta online[/url]

25. července 2017 13:30 by Bennysop

# ulgscfr3

wh0cd249709 [url=http://diflucanoverthecounter.pro/]order diflucan online[/url] [url=http://atarax.news/]atarax anxiety[/url] [url=http://buyelocon.reisen/]elocon[/url]

27. července 2017 9:40 by Charleszoomi

# gx1qzi2k

wh0cd323174 [url=http://zetia.us.org/]zetia price[/url] [url=http://plavixgeneric.us.com/]Plavix Generic[/url] [url=http://retina.us.org/]retin a[/url]

27. července 2017 10:38 by Bennysop

# n0r2lydi

wh0cd139932 [url=http://medrol.schule/]medrol price[/url] [url=http://nolvadex.systems/]nolvadex[/url] [url=http://revia.mba/]revia[/url] [url=http://amoxil.mba/]amoxil[/url] [url=http://methotrexate.shop/]methotrexate[/url] [url=http://celebrex.store/]celebrex without prescription[/url]

31. července 2017 2:36 by TracyAstew

# rldt0083

wh0cd473962 [url=http://avodart.mba/]avodart[/url] [url=http://detrol.reisen/]detrol er[/url] [url=http://vermox.zone/]vermox[/url] [url=http://celexa.work/]i found it[/url] [url=http://diflucan.world/]buy fluconazol without prescription[/url] [url=http://strattera.fail/]strattera[/url]

2. srpna 2017 0:42 by AlfredKiz

# fl37jwk4

wh0cd478679 [url=http://buybaclofen.us.org/]buy baclofen[/url] [url=http://trazodone.us.org/]site here[/url]

6. srpna 2017 14:01 by Michaelalind

# 825snf3e

wh0cd934878 [url=http://buyindocin.us.org/]indocin 50 mg tablets[/url] [url=http://prozacgeneric.us.com/]Prozac Generic[/url]

7. srpna 2017 18:03 by Charleszoomi

# fqinb9fb

wh0cd126656 [url=http://acyclovir800mg.us.com/]acyclovir 800mg[/url] [url=http://viagra50mg.us.com/]more[/url]

8. srpna 2017 3:37 by Charleszoomi

# xegfgge0

wh0cd718279 [url=http://celexageneric.us.org/]Buy Celexa[/url] [url=http://motrin800.us.org/]motrin 800[/url] [url=http://clomid50mg.us.org/]GENERIC CLOMID[/url]

23. srpna 2017 21:29 by Charleszoomi

# txht1fzd

wh0cd826587 [url=http://triamterene.mba/]triamterene blood pressure[/url] [url=http://buyarimidex.store/]look at this[/url] [url=http://buy-benicar.store/]benicar[/url]

26. srpna 2017 16:59 by Michaelalind

# 7w0pul1t

wh0cd690550 [url=http://flagyl.world/]flagyl[/url] [url=http://buyelimite.reisen/]cost of permethrin cream[/url]

28. srpna 2017 17:12 by AaronPex

# no fax easy payday loan

cash advance madisonville ky

     [url=http://paydayfastnowz.com/] cash advance[/url]

   <a href="http://paydayfastnowz.com/"> payday express</a>

   personal loans cash now

28. srpna 2017 20:02 by MaoisesFum

# w3lnbcrf

wh0cd735408 [url=http://citalopram20mg.us.org/]Purchase Citalopram[/url] [url=http://tadalafil247.us.com/]generic tadalafil[/url]

30. srpna 2017 6:18 by AaronPex

# kz9um55r

wh0cd270649 [url=http://stromectol247.us.com/]stromectol prices comparison[/url]

31. srpna 2017 4:34 by Kennethgic

# 1mzlpvkj

[url=http://buycialisonline.us.org/]Cialis Online[/url]

1. září 2017 9:50 by AaronPex

# wrz7kftp

[url=http://buycialisonline.us.org/]look at this[/url]

1. září 2017 10:34 by Brettjinee

# c1an1cnd

[url=http://buycialisonline.us.org/]buy cialis over the counter[/url]

1. září 2017 10:54 by AlfredKiz

# gk09gxxn

[url=http://buycialisonline.us.org/]buy cialis online[/url]

1. září 2017 11:29 by Kennethgic

# 3ot2uel7

[url=http://buycialisonline.us.org/]buy cialis online[/url]

1. září 2017 11:39 by Charleszoomi

# 32oxd5pc

[url=http://buycialisonline.us.org/]cialis price[/url]

1. září 2017 11:44 by Charleszoomi

# g7kfql26

[url=http://buycialisonline.us.org/]cialis[/url]

1. září 2017 11:52 by Bennysop

# xnyfi6js

[url=http://buycialisonline.us.org/]Buy Cialis Online[/url]

1. září 2017 12:11 by Brettjinee

# rgcxuo5c

[url=http://buycialisonline.us.org/]buy cialis online[/url]

1. září 2017 13:08 by Charleszoomi

# uqkcqg5b

[url=http://buycialisonline.us.org/]Buy Cialis[/url]

1. září 2017 14:15 by Charleszoomi

# 6w73spo2

[url=http://buycialisonline.us.org/]Cialis Price[/url]

1. září 2017 14:22 by Charleszoomi

# d2hnelmy

[url=http://buycialisonline.us.org/]cialis online prescription[/url]

1. září 2017 15:44 by Kennethgic

# lqjvh0m9

[url=http://buycialisonline.us.org/]buy cialis online[/url]

1. září 2017 16:14 by Kennethgic

# j9pkictf

[url=http://buycialisonline.us.org/]cialis best price[/url]

1. září 2017 16:39 by AlfredKiz

# gxf8x5sh

[url=http://buycialisonline.us.org/]where to buy cialis over the counter[/url]

1. září 2017 18:28 by AlfredKiz

# w1beem0k

[url=http://buycialisonline.us.org/]cialis from canada[/url]

1. září 2017 18:38 by AaronPex

# sgcngtwk

[url=http://cialis247.us.com/]Cheap Cialis From Canada[/url]

2. září 2017 5:34 by Bennysop

# l20kdm7q

[url=http://paxil247.us.com/]paxil by mail[/url]

2. září 2017 5:38 by AaronPex

# ywh38ho2

wh0cd1176531 [url=http://lasix.live/]lasix[/url] [url=http://buy-levaquin.shop/]generic levaquin[/url] [url=http://avodart.zone/]generic dutasteride[/url]

3. září 2017 8:19 by Michaelalind

# 0galyy1k

[url=https://essayonline.us.com/]This Site[/url]

3. září 2017 18:58 by MikeNob

# fqktnj4y

wh0cd882643

4. září 2017 9:40 by Kennethgic

# 7hkzvegj

wh0cd1984738 [url=http://buyabilify.shop/]abilify[/url] [url=http://yasmin.work/]buy yasmin[/url]

4. září 2017 12:53 by Billyfeabs

# 61l8bbmk

wh0cd1764341 [url=http://tadalafil.fail/]tadalafil[/url]

4. září 2017 21:18 by AaronPex

# 3b7avwso

wh0cd993302 [url=http://lisinopril.store/]zestoretic[/url]

5. září 2017 0:36 by Bennysop

# atkdgdeb

wh0cd2719486 [url=http://buyviagra.directory/]viagra[/url] [url=http://zetia.fail/]zetia generic alternative[/url]

5. září 2017 0:37 by Michaelalind

# vfo2003i

wh0cd2572547 [url=http://avodart.reisen/]avodart[/url] [url=http://methotrexate.tools/]methotrexate[/url] [url=http://retinaa.pro/]cheap retin a micro[/url]

5. září 2017 9:06 by Charleszoomi

# s2crduja

wh0cd1323489 [url=http://amoxicillin.us.com/]amoxicillin tablets for sale[/url]

5. září 2017 13:14 by AlfredKiz

# qndy1soh

[url=https://loansforbadcredit.us.com/]emergency loan no credit check[/url]

6. září 2017 14:26 by JohnNob

# dhre4ffm

wh0cd127835 [url=http://citalopramhbr.reisen/]citalopram[/url] [url=http://buy-methotrexate.reisen/]methotrexate[/url]

6. září 2017 23:36 by Kennethgic

# 5lu68jd9

wh0cd4188997 [url=http://cialis.us.com/]cialis pharmacy[/url]

7. září 2017 21:28 by AaronPex

# ij5cj53i

wh0cd4629844 [url=http://cephalexin500.reisen/]keflex online[/url]

8. září 2017 9:35 by AaronPex

# ns4opojl

wh0cd5291102 [url=http://buy-ventolin.reisen/]buy ventolin[/url] [url=http://buy-avana.store/]buy avana[/url] [url=http://fluoxetine20mg.pro/]fluoxetine[/url]

9. září 2017 1:09 by Charleszoomi

# l8zx637q

wh0cd99213 [url=http://propecia.us.com/]read full article[/url]

9. září 2017 16:51 by Bennysop

# x6108bxa

wh0cd6687108 [url=http://effexorgeneric.pro/]effexor generic cost[/url] [url=http://medrol.zone/]medrol[/url] [url=http://buy-anafranil.store/]anafranil weight loss[/url]

10. září 2017 21:12 by Brettjinee

# nwtzm7nt

wh0cd5731964 [url=http://retinaa.pro/]retin-a cream 0.1[/url]

11. září 2017 2:30 by Michaelalind

# s8o3tzr2

wh0cd7936154 [url=http://trazodone.tools/]trazodone[/url] [url=http://tretinoincream025.pro/]tretinoin cream[/url] [url=http://citalopramhbr20mg.shop/]citalopram[/url]

11. září 2017 18:06 by Michaelalind

# kbel8e15

wh0cd7642294 [url=http://buyneurontin.reisen/]buy neurontin[/url]

12. září 2017 13:34 by Charleszoomi

# g2knwdvl

wh0cd8303560 [url=http://buy-seroquel.reisen/]cost of seroquel xr[/url]

13. září 2017 14:06 by Charleszoomi

# sqydfu0y

[url=https://paydayloans.us.org/]payday loans online direct lenders no credit check[/url]

16. září 2017 17:12 by Jamescip

# nlfkedvo

[url=https://paydayloans.us.org/]payday loans online[/url]

18. září 2017 23:06 by JohnDyefe

# ldlvlfhy

[url=https://paydayloans.us.org/]payday loans[/url]

19. září 2017 16:03 by JohnDyefe

# btvyuyrm

[url=https://paydayloans.us.org/]instant payday loans online direct lenders[/url]

20. září 2017 7:18 by JohnDyefe

# svrrogbc

[url=https://essayonline.us.com/]homepage here[/url]

23. září 2017 6:04 by JohnDyefe

# arkokdki

[url=https://essayonline.us.com/]essay online[/url]

24. září 2017 14:00 by JohnDyefe

# jctjgsgb

[url=https://essayonline.us.com/]write my essay online[/url]

25. září 2017 6:07 by JohnDyefe

Vytvoření nového komentáře

(povinný) 
povinný 
(povinný) 
Opiš čísla, která vidíš na obrázku:
 
Vyvojar.cz na prodej!