| Autor | Zpráva | ||
|---|---|---|---|
| slovakCZ Profil |
#1 · Zasláno: 28. 9. 2009, 15:49:35
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 |
#2 · Zasláno: 28. 9. 2009, 15:55:39
Tak dej každé položce tři části - levý a pravý kraj a repeat-x obrázek pro text.
|
||
| slovakCZ Profil |
#3 · Zasláno: 28. 9. 2009, 16:03:25
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 |
#4 · Zasláno: 28. 9. 2009, 16:08:46
— 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 |
#5 · Zasláno: 28. 9. 2009, 16:11:43 · Upravil/a: Radek9
<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 |
#6 · Zasláno: 28. 9. 2009, 16:11:57 · Upravil/a: Bubák
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 |
#7 · Zasláno: 28. 9. 2009, 16:16:19
„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 |
#8 · Zasláno: 28. 9. 2009, 16:19:24
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 |
#9 · Zasláno: 28. 9. 2009, 16:25:43
Miloš
jj tohle me taky napadlo, asi to bude nejlepsi reseni Radek9 dekuju :) vyzkousim to k veceru ;) |
||
| habendorf Profil |
#10 · Zasláno: 30. 9. 2009, 10:30:57
V praxi je lepší dělat to jen na dva obrázky, než na tři.
|
||
| Taurus Profil |
#11 · Zasláno: 30. 9. 2009, 16:56:56
Není nejlepší jen jeden? Možná ale přesně nechápu...
|
||
| panther Profil |
#12 · Zasláno: 30. 9. 2009, 17:03:18
Taurus
jedním obrázkem neuděláš roztahovací položky - aby měly šířku podle toho, jak jsou dlouhé. |
||
| Taurus Profil |
#13 · Zasláno: 1. 10. 2009, 10:40:06
To mě napadlo, ale to se dá dát pořád do jednoho obrázku (i kvůli načítání).
|
||
| habendorf Profil |
#14 · Zasláno: 1. 10. 2009, 18:24:54
Taurus:
Jo, to máš pravdu. Dobrá myšlenka. |
||
| Taurus Profil |
#15 · Zasláno: 1. 10. 2009, 22:23:15
Myslím, že Pixyho.
|
||
| panther Profil |
#16 · Zasláno: 2. 10. 2009, 09:30:27
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 |
#17 · Zasláno: 3. 10. 2009, 01:14:39
Stejně bych to asi radši řešil jedním:
http://jpw.odemne.com/hover-menu-jeden-obrazek/ |
||
|
Časová prodleva: 15 let
|
|||
0