obrázkové menu v css

nevím jak udělat obrázkové menu v css. našel jsem plaváčkův popis na adrese http://weblog.plavacek.net/2005-03.html#1110452481 - nicméně nemám stejně široké obrázky (mají 100, 125 a 138 px) už se tím strašně dlouho mořím... nevíte někdo jak do toho? Stránky jsou na adrese www.zs-horni.unas.cz/new.

menu ve stránce:
<ul id="menu">
<li id="skola"><a href="skola.html">Škola<span></span></a></li>
<li id="delame"><a href="about.html">Děláme<span></span></a></li>
<li id="kontakt"><a href="links.html">Kontakt<span></span></a></li>
</ul>

css:

#menu {
height: 26px; /* definice výšky obrázků */
}

#menu li {
height: 26px;
float: left;
position: relative;
list-style: none;
}

#menu a, #menu span {
display: block;
height: 26px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
#menu span {
z-index: 1;
cursor: pointer;
cursor: hand;
}
#menu span.active {
cursor: default;
}


#skola li {
width: 100px;
background: #ececec url("image/mn_skola.gif") no-repeat center top;
}

#delame li {
width: 125px;
background: #ececec url("image/mn_delame.gif") no-repeat center top;
}

#kontakt li {
width: 138px;
background: #ececec url("image/mn_kontakt.gif") no-repeat center top;
}

#skola span, #skola a {
width: 100px;
background: url("image/mn_skola.gif") no-repeat center top;
}
#skola span.active {
background: url("image/mn_skola.gif") no-repeat right top;
}
#skola a:hover span {
background: url("image/mn_skola.gif") no-repeat left top;
}


#delame span, #delame a {
width: 125px;
background: url("image/mn_delame.gif") no-repeat center top;
}
#delame span.active {
background: url("image/mn_delame.gif") no-repeat right top;
}
#delame a:hover span {
background: url("image/mn_delame.gif") no-repeat left top;
}


#kontakt span, #kontakt a {
width: 138px;
background: url("image/mn_kontakt.gif") no-repeat center top;
}
#kontakt span.active {
background: url("image/mn_delame.gif") no-repeat right top;
}
#kontakt a:hover span {
background: url("image/mn_kontakt.gif") no-repeat left top;
}

díky za případnou radu

A co takhle to pixyho řešení?

--> http://wellstyled.com/css-nopreload-rollovers.html

Já ho používám už dlouho ke své naprosté spokojenosti :)

Je tam jeden obrazek se dvěmi nebo třemi stavy (normal,hover,active) na pozadí a mění se background-position ...

hanyZi, šlo by to použít i u mě?
Chtěla bych, aby se v hoveru zobrazovalo písmo se stínem (teď je se stínem pořád). Šlo by to?
Asi ne, co... Poněvadž já bych musela každej odkaz celej nahradit jpgem a potom by ten, kdo má vypnutý obrázky měl smůlu, ne?

to hanyZ: podívám se na něj, ale plaváčkovo řešení je stejný (podobný) jako pixyho. jde o to, že když v

#menu li {
width: 100px;
height: 26px;
float: left;
position: relative;
list-style: none;
}

nastavím ono width: 100px, tak vše funguje. jenže já mám každý obrázek jinak široký, takže ono width vymažu a hodím třídy pro každé li zvlášť:

#skola li {
width: 100px;
background: #ececec url("image/mn_skola.gif") no-repeat center top;
}

#delame li {
width: 125px;
background: #ececec url("image/mn_delame.gif") no-repeat center top;
}

#kontakt li {
width: 138px;
background: #ececec url("image/mn_kontakt.gif") no-repeat center top;
}

a to nefuguje. možná to v css nejde... neřešil to někd někdo?

Laura: Nevidím důvod, proč by to nešlo:)

Prostě ten background obrázek trochu upravíš, nějak takto:

http://hanyzpage.czweb.org/grafika/kontakt1.png

a na hover u odkazu v menu nastavíš posunutí po ypsilonové ose o nějakých 50 pixlíků

background-position: 0px -50px

Takhle se návštěvníkovi zobrazí při hoveru stín. Pokud bude mít obrázky vyplé, tak se mu nezobrazí, pouze se mu ten odkaz přebarví... (Ale kdo má ještě v dnešní době vypnuté obrázky, že? :)

Pro jeden každý obrázek nastavovat jiný obrázek na pozadí asi není dobré kvůli modemářům. Jsou tu pak problémy s prvním načtením a tedy s každou položkou menu. Myslím, že se to vyplatí jako pozadí pod text, tedy jedna sada obrázků pro všechny položky - je tu pak praktická výhoda aktualizace textu.

No to je sice pravda ale v tomto konkrétním případě má každá jedna položka (png 16 barev) zhruba 500 bajtů...

eh... já to asi... kde mam ten mozek... neviděli ste ho někdo?
Mno, tak já tu budu asi tak pět hodin dumat nad radou pana hanyZe a pak jí třeba i převedu do praxe... :)
Každopádně děkuji :)

hm... tak mně to nejde :(

nejde to, když to dám do stylopisu takhle:
a:hover {
background-position: 0px -50px;
color: black}

ale kupodivu to jde, když tam dám tohle:
a {
background: url('kontakt1.gif') no-repeat 0 0;
...
}
a:hover {
background-position: 0px -50px;
color: black}

Jenže to se mi pak samozřejmě objeví pod vším obrázek 'kontakt'...

Do odkazu bys musela dát úplně průhledný obrázek, ale:
tohle nešlo mě v Opeře 8, při prvním najetí obrázky zmizly a až podruhé to fungovalo.

Ten stín pod obrázkem, jak píše hanyZ mi kupodivu funguje všude.

Laura: No, to jsem nějak nedomyslel:) Tak co třeba každé položce menu dát nějakou jinou třídu - class menukontakt, class menuautor atd. a pak udělat

menukontakt.a { background: url('kontakt1.gif') no-repeat 0 0;}
menukontakt.a:hover { background-position: 0px -50px;}

menuautor.a { background: url('autor1.gif') no-repeat 0 0;}
menuautor.a:hover { background-position: 0px -50px;}

atd.

Teda omlouvám se, už mi hrabe, spíš nějak tak:


span.menukontakt a { background: url('kontakt1.gif') no-repeat 0 0;}
span.menukontakt a:hover { background-position: 0px -50px;}

span.menuautor a { background: url('autor1.gif') no-repeat 0 0;}
span.menuautor a:hover { background-position: 0px -50px;}

Každá položka menu by pak byla uzavřena do jednoho spanu.

<span class="menukontakt"><a href="kontakt.html">Kontakt</a><span/>

...

au, au, to bolí! Mozek je v.. kolik je? ... 23:43... už trochu out of order a tohle ho dorazilo :)
Juknu na to zítra.
Dík a dobrou ;-)

mě to funguje takhle:
no každá položka má svou třídu a předpokládám, že text nahradíš obrázkem:
img { border-style: none; }
#menu { position: absolute; top: 160px; right: 120px; width: 95px; z-index: 1; }
#menu a { display: block; width: 95px; height: 26px; text-align: right; }
a:hover.kont, a:active.kont { background: url("kont_hov.gif") no-repeat right; }
a:hover.oaut, a:active.oaut { background: url("oaut_hov.gif") no-repeat right; }

<div id="menu">
<a href="http://athos.aktualne.cz/kontakt.htm" class="kont">
<img src="kont.gif" alt="kontakt" width="76" height="26"><br></a>
<a class="oaut" href="http://athos.aktualne.cz/o_autorovi.htm">
<img src="oaut.gif" alt="o autorovi" width="95" height="26"><br></a>

ty <br> tam jsou navíc, když tak se podívej tady:
http://havs.wz.cz/test/laura.html

... a v Opeře stejně blbne první načtení, viz příspěvek nahoře:
Havel-st > Pro jeden každý obrázek nastavovat jiný obrázek ...

Havel: díky :) Jde ale o to, že potřebuju mít obrázek jen na pozadí textu. Tedy ne třeba kontakt.gif a kontakt_hover.gif, ale jen ten druhý na pozadí textu, zobrazující se jen v hoveru. S tím pixyho řešením mi to přijde ideální, ale vyzkoušet to budu moct až večer. Zvolila jsem text právě kvůli barevnému hoveru, jelikož když tam dám gif s filtrem gray, lidi s mozillou to neuvidí, ne?

A ještě otázečka: ty vůbec nespíš? :)

Tak jsem to nějak skoulela... Dílem dle vašich milých rad, dílem menší improvizací :)
Ještě jsem na to ovšem nekoukala v mozille, takže zatím nebudu moc jásat...

Laura > ty vůbec nespíš?
Mám naprosto volný režim, takže spím když se mi chce - to se někdo má, co? :)

Havel> Jo, to jo :(

Jinak mám dotaz, vlastně dva: 1) Jakto, že se mi každou chvíli zobrazuje na athosovi jiný písmo? V noci tam byla georgia nebo jak se to menuje, dopoledne times new roman nebo book antiqua (nevím přesně) a teď je tam zas georgia, ale jen na tom horním pravým menu! Furt na stejnym PC, mimochodem...
2) ozval se mi čtenář, že na macu mu nefunguje jedinej odkaz, proč? (Jiný moje stránky mu fungujou)

Hm... že mi někdo odpověděl...

Tak samozřejmě jsem se teď koukla na ty gify v hoveru v menu mozillou a samozřejmě jsou nějaký rozhozený... Nevíte někdo, jak to spravit?

Ale tentokrát mě neignorujte, ju? Díky ;-)

Ehm... asi jsem to neřekla dost jasně... HEEEJ! Koukejte mi odpovědět!

Plííís... :(

v tom stylopisu je dost syntaxních chyb, ale teď to nebudu opravovat, možná večer

Jéžiš, ty se naotravuješ ;-) Tak třeba zkus těm spanům nastavit display:block

Nějak takhle:

span.menukontakt a { background: url('kontakt1.gif'); width:80px; height: 70px; repeat: no-repeat; display:block}

No, vidíte, že to de... Jenom člověk musí ztropit scénu (to mě naučil Béla...) a hned se mu někdo věnuje ;-)
Jak jinak se může chudák začátečník domoci odborné pomoci? :)