Autor Zpráva
slovakCZ
Profil
Dobry den,
chtel jsem se zeptat, jake jsou moznosti reseni menu, kdy na pozadi mam obrazek se zakulacenymi rohy? ukazka je videt zde (menu uplne nahore)
http://www.nybbletech.com/
Tady maji pouzity na hover obrazky. pro kazdou polozku jeden obrazek aby docilili toho, ze jim hover sedi presne na text (resp. cele menu maji pres obrazky). Ovsem problem nastane, kdyz se texty v menu budou v prubehu chodu stranky menit. Tim padem musim tuto metodu vyloucit. Nemate nekdo napad, jak udelat takoveto pozadi ovsem tak, aby se roztahovalo dle delky textu? videl sjem to na nejake sablone pro wordpress, ovsem nemuzu ji nikde najit abych se podival jak je to resene =o/
Taurus
Profil
Tak dej každé položce tři části - levý a pravý kraj a repeat-x obrázek pro text.
slovakCZ
Profil
no jestli je moje uvaha spravna, tak kdyz ji dal 3 casti tak docilim kulatych rohu.. ovsem kdyz najedu mysi text tak se zmeni jen background pod textem a kulate casti (leva, prava) ne?... i kdyz.. ted me neco napadlo, za chvilku to zkusim az bude cas :)
Miloš
Profil
— Pro rohy použij :hover nadřazeného prvku. Nebude to sice odladěné pro IE 6, ale ostatní prohlížeče (IE7/8 ve standardu) to vezmou.
— Nebo do odkazu nacpi okolo textu dva krátké spany a rohy dej jako pozadí jim – pak to bude a:hover span {pozadí}
Radek9
Profil
<style>
#menu li {
  float: left;
  margin-right: 10px;
}
#menu li:hover {
  background: green;
}
#menu li span.left {
  width: 10px;
  height: 30px;
  float: left;
}
#menu li span.right{
  width: 10px;
  height: 30px;
  float: right;
}
#menu li:hover span.left{
  background: url("left.png");
}
#menu li:hover span.right{
 background: url("right.png");
}
</style>
<ul id="menu">
<li><span class="left"></span>neco<span class="right"></span></li>
</ul>

Nevím jestli je to dobře. Vyzkoušej to.
Bubák
Profil
Prakticky jde o jednoduchý JS obrázkový hover, příklad:
klidový stav
hover

Raději mám řešení, které popsal Taurus.
Bubák
Profil
Nevím jestli je to dobře. Vyzkoušej to.
Nebude ti to "hoverovat" v IE6 a hlavně nevidím ve tvém kódu odkazy.
Vyšel bych z toho: http://teststranek.kvalitne.cz/menu7/ a do odkazů bych přidal SPANy.
Radek9
Profil
Bubák:
Říkal jsem, že nevím ejstli to bude fungovat. Teď to zkouším a všude kromě IE 6 to funguje... Takže stačí udělat jen drobnou úpravu s odkazy.
slovakCZ
Profil
Miloš
jj tohle me taky napadlo, asi to bude nejlepsi reseni
Radek9
dekuju :) vyzkousim to k veceru ;)
habendorf
Profil
V praxi je lepší dělat to jen na dva obrázky, než na tři.
Taurus
Profil
Není nejlepší jen jeden? Možná ale přesně nechápu...
panther
Profil
Taurus
jedním obrázkem neuděláš roztahovací položky - aby měly šířku podle toho, jak jsou dlouhé.
Taurus
Profil
To mě napadlo, ale to se dá dát pořád do jednoho obrázku (i kvůli načítání).
habendorf
Profil
Taurus:

Jo, to máš pravdu. Dobrá myšlenka.
Taurus
Profil
Myslím, že Pixyho.
panther
Profil
Taurus
ale to se dá dát pořád do jednoho obrázku (i kvůli načítání).
pokud to myslíš takto, tak jeden obrázek bude stačit.

Nicméně, u menu, kde nejsou obrázky nijak velké, stačí, když budou tři obrázky, na který bude normální a hover stav (namísto šesti), aby pozadí při prvním hoveru neproblikávalo. Rozdíl při načtení stránky, pokud nějaký bude, bude dosti nepatrný.
Taurus
Profil
Stejně bych to asi radši řešil jedním:
http://jpw.odemne.com/hover-menu-jeden-obrazek/

Vaše odpověď

Mohlo by se hodit

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: