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

Vytvoření nového komentáře

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