Mérei Tamás webdesigner

Tutorial: HTML + CSS image sprite menü

Szerző:   |   2011-02-17

Már megint egy menü 🙂 Viszont most egy olyan módszer amiről még nem volt szó a blogon. Meg lehetne oldani úgy is, hogy egyetlen képet használunk a menühöz, pl. úgy, hogy egymás alá tesszük a menu.png és a menu_on.png-t egyetlen képbe. Ilyenkor viszont használunk kellene a függőleges pozíció eltolást is.

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

32 hozzászólás

  1. Adam
    2013. június 13. csütörtök - 15:11

    Köszi, hogy feltöltötted cyrex! Én például nem is tudtam, hogy létezik a hover atribútum a css-ben.

  2. Barkanyi
    2012. június 9. szombat - 00:00

    Üdv Cyrex!
    Először is nagyon szépen köszönöm a tutorial-okat.
    Az lenne a kérdésem, hogy van-e valami hátránya annak, hogyha nem “sprite-osan” csinálom a menüt, hanem pl.felvágom photoshoppba a menüt külön képekre, és beleteszem divekbe. Tehát nem 1-1 kép lesz, hanem 4-4.

    • cyrex
      2012. június 12. kedd - 19:31

      A betöltődési ideje gyorsabb elvileg, ha sprite-ot használsz, mert akkor csak 1 képet kell letöltenie és azt jeleníti meg mindenhol. Egyébként én sem vagyok oda a sprite-okért.

    • tichi
      2012. augusztus 31. péntek - 12:53

      Tényleg gyorsabb spriteosan, főleg ha egy képben van a hover is. Mert amikor letölti a menü képét, akkor már a hovert is letöltötte, így nem kell rögtön akkor letöltenie amikor fölé viszed az egeret és nem lesz villódzás. 🙂

  3. Levi
    2012. május 9. szerda - 12:29

    Lenne egy problémám. Nem rendez középre semmit :/ Pl. itt a fejlécem css-e:

    div.fejlec
    {
    margin: 10px auto;
    border:solid #000000;
    position:fixed;
    background-image:url(header.jpg);
    height: 250px;
    width: 850px;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    }

    • tomi92
      2012. július 3. kedd - 20:35

      Szerintem a “radius”-oknál elég csak egyszer odaírni a 10 pixelt, próbáld úgy. 😉

    • cyrex
      2012. július 3. kedd - 21:35

      Ez tele van hibával. Minek neked fix pozíció? Border megadása és a border-radius is hibás és a background-image-hez sem ártana egy aposztróf vagy idézőjel.

  4. Szekér Donát
    2012. április 3. kedd - 18:38

    Hello Cyrex!
    Egy kérdést… Olyat szeretnék megcsinálni hogy kicsi dobozok egymás mellet 3 és ebből 2 sor. Azt nem tudom hogy ezt mivel csináljam meg úgy csináljam meg mintha táblázat lenne vagy úgy hogy a dobozokat elmentem photoshopból, majd beszúrogatom külön divekben ? Válaszodat előre is köszönöm :D. Am a videóid nagyon jók az új oldal nagyon szép, csak így tovább 😀
    Donát

  5. tamás
    2012. március 18. vasárnap - 00:21

    Helló!
    Azt szeretném megkérdezni hogy a videóit közül te melyik fajtát javaslod a legjobban.
    Válaszodat előre is kösz.Amugy tök jók a videóid

  6. mue
    2011. július 19. kedd - 22:50

    Nekem valamiért nem működik a background-image parancs így néz ki:
    background-image: url(‘menu.png’);
    A css kódot tudja olvasni tehát ne az eléréssel van gond és a menu kép is ott van ahova irányítva van.

  7. ifjuhorgasz
    2011. március 7. hétfő - 21:18

    esetleg meg tudnád mondani a cég nevét?…érdekelne…

  8. ifjuhorgasz
    2011. március 7. hétfő - 21:16

    esetleg meg tudnád mondani a cég nevét?…érdekelne…

    • cyrex
      2011. március 7. hétfő - 21:19

      Persze, nem titok, csak nem szoktam nyomatni a blogon, mert ez független a cégtől. 🙂
      Axio Kft.
      http://www.axio.hu

  9. Jokerface
    2011. március 5. szombat - 02:30

    Köszönjük az eddigi munkáidat +
    RESPECT CYREX!

  10. OwN3D By
    2011. február 26. szombat - 12:30

    Cyrex tényleg sztem sokat segítesz mindenkinek, de egy szép fórumot is indíthatnál, mert sok ember látogatja ezt a weblapot + 1 -2 szót css hiányom van 😀 meg pl.: még mindig forrásokat hiányolom, h nincs példa csak a videóban 😀 és soha nem tom mit hibázok el 🙁 😉 meg like gomb?

    • cyrex
      2011. február 26. szombat - 12:52

      Like gomb ott van a címsor alatt. A forráskódokat majd szép lassan felpakolom, itt már meg is van:
      http://www.cyrex.hu/2011/01/14/tutorial-php-egyszeru-oldalfelepites/

      Persze, csinálhatnék fórumot, csak ki válaszolna ott a kérdésekre? Nekem így is rengeteg időm rámegy a blogra, nem tudok még egy fórumot is állandóan moderálgatni. Ráadásul sokan azt gondolják, hogy ingyen dolgozom és küldözgetik nekem, hogy ezt meg azt csináljam meg nekik. Fogok írni rövidesen egy FAQ-t, ott ki is fogok térni ezekre.

      Új videó biztos nem lesz még 1 hétig, mert van egy csomó munkám és közben még költözködöm is. Utána valószínűleg fotosop vonalon fogok erősíteni. Majd márciusban minden kiderül :mrgreen:

    • OwN3D By
      2011. február 26. szombat - 12:56

      azért az egyszerű oldalfelépítésnél is én kértem 😛 xD
      magyar fotoshop cs3kell? vagy nem tudnál olyat használni?

    • White#Angel
      2012. május 11. péntek - 21:48

      Nem lenne muszáj egyedül moderálnod.
      Biztos vannak hozzád hasonló sokat tudó kockák 😀
      pl. meglehetne úgy, hogy van Moderátor, Adminisztrátor, Gobális Adminisztrátor stb. És vagy csinálnál egy “felvételt” és aki önként jelentkezik, “leteszteled” mennyit tud és adsz egy moderátort neki. Majd idővel és hozzászólás számláló alapján lehet fejlődni.
      Na? 😀

    • cyrex
      2012. május 12. szombat - 22:28

      Nem tudom mennyire lenne értelme fórumot indítani magyar nyelven. Ha nekem kell valami, beírom a gugliba angolul és első 5 találat között ott a válasz. De, ha ragaszkodtok hozzá, belőhetek valami fórum motort az oldalra. Csak aztán legyen aki használja.

    • Ps
      2012. május 14. hétfő - 21:36

      Személy szerint én hülyeségnek tartom a fórum ötletét.
      A lényegesebb dolgok itt is megtalálhatóak. (hozzászólás lehetősége, kategóriák. Stb)

      Üdv: Ps

    • hecsa
      2012. május 15. kedd - 10:23

      Sziasztok én is támogatom a fórum ötletet,biztos sokan használnánk.

    • danix99
      2012. május 21. hétfő - 18:26

      a fórum ötletet én is támogatom! Én ajánlom a simplemachinesforumot (SMF), segítenék bekonfigolni 😀

  11. Bence
    2011. február 26. szombat - 11:42

    Szia!
    Az lenne a kérdésem bár nem tudom értesz-e hozzá!? Hogy esetleg egy olyan videót teszel fel amiben a .htaccess programozást mutatod be!
    Előre is köszi!

  12. Tonek
    2011. február 25. péntek - 18:23

    Sziasztok. Elöször is köszi az összes videót. Rengeteget tanultam belőle. Aminek ez lett az eredménye:
    rcon.clans.hu/host/index.html

  13. SPiLeR
    2011. február 23. szerda - 20:11

    új videó mikorra várhtaó? 😀 ha szabad megtudnom

  14. Lexar
    2011. február 23. szerda - 16:32

    nem tudod milyen jókor jött pont ez a sprite-os menü 😀

  15. pico
    2011. február 18. péntek - 15:55

    igen énis azért csináltam mert lassú ingyenes szolgáltatótól van a web oldal és így valamivé gyorsabb de ki egészítenélek még akkor is érdemes ilyet csinálni ha menü gombjai bonyolult mintázatura szeretnéd vagy egy kis fényképre szeretnéd vagy nálam a rendes menü az egy 120×30 es a hover 180×30 és így mozog is a menü kicsiből nagyba de már ezt is meg lehet csinálni cssel

  16. Takasi98
    2011. február 18. péntek - 15:29

    Nagyon jó a videó 😀 .

    Nem tudnál olyan videót csinálni amiben feltöltő script-et csinálsz ???

  17. Menyus
    2011. február 18. péntek - 09:56

    Ez jó!!

  18. KrudyR
    2011. február 18. péntek - 09:08

    Nagyon jóóó!!! 😀

  19. pico
    2011. február 17. csütörtök - 23:59

    ááá én anno egy hétig szenvedtem az ilyen menü összevariálásával csak én még a hover-t is egy képbe helyeztem el

  20. SPiLeR
    2011. február 17. csütörtök - 21:07

    áháá 😀 újabb cyrex csemege 😀

Hozzászólás

Legújabb hozzászólások