Autor | Zpráva | ||
---|---|---|---|
hrncal.junior Profil |
#1 · Zasláno: 23. 12. 2013, 20:09:52
Ahoj,
mám menší problém s oddělovačem v menu. Jde použít jako oddělovač obrázek? A případně jak? Vůbec nic mě nenapadá. Díky moc |
||
quatzael Profil |
#2 · Zasláno: 23. 12. 2013, 22:28:03
hrncal.junior:
Podle toho čemu říkáš oddělovač.. Jestli myslíš klasicky něco vložit mezi jednotlivý menu položky, tak je asi nejsnazší tam hodit nějaký divy (floatingový jestli to máš horizontálně) a nastavit tam background-image . Obrázek coby <img> bych tam nedával, ale samozřejmě to jde..
|
||
margin Profil * |
#3 · Zasláno: 23. 12. 2013, 22:31:50
http://teststranek.kvalitne.cz/menu7.1/
V odkázaném menu je jako oddělovač border-right, ale též je možné použít vhodný obrázek, nějak takto: #menu a { background: #baf url(oddelovac.gif) right; } |
||
Kubo2 Profil |
#4 · Zasláno: 23. 12. 2013, 22:42:54
hrncal.junior:
Prvé menu som naštýloval bez oddelovača, zobrazované na riadok. V druhom menu som použil ako oddelovač pajpu, čo je tento znak: |. V tom treťom mi ako oddelovač poslúžil výrez z indikácie príspevkov na tomto serveri: Kód+živá ukážka. |
||
hrncal.junior Profil |
#5 · Zasláno: 24. 12. 2013, 15:43:35 · Upravil/a: hrncal.junior
Tak nějak to tam nemůžu dát. Menu bude vypadat takhle
Separátor bude mít cestu. img/sep.png Popište mi to prosím polopatě. Jak to bude vypadat ten zápis pro oddělovač. Nějak to nedokážu rozchodit. Děkuji Moc <div id="navigace"> <ul id="menu"> <li><a href="#">Polozka1</a></li> <li><a href="#">Polozka2</a></li> <li><a href="#">Polozka3</a></li> <li><a href="#">Polozka4</a></li> </ul> </div> Jo a ještě chci použít takovou šipku, která označí akrivní položku v menu. Když jsem ji v Css nastavil #menu li:active { background-image: url(img/menu_aktivni.png); } tak se mi zobrazila, ale jak jsou položky různě velké, tak mi to dalo třeba 2 obrázky vedle sebe, což nechci. Nevíte co s tím? děkuji |
||
Kubo2 Profil |
#6 · Zasláno: 24. 12. 2013, 16:36:15
hrncal.junior:
„tak se mi zobrazila, ale jak jsou položky různě velké, tak mi to dalo třeba 2 obrázky vedle sebe, což nechci. Nevíte co s tím? děkuji“ Vieme. background-repeat Použitie: #menu li:active { background-image: url(img/menu_aktivni.png); background-repeat: no-repeat; } |
||
hrncal.junior Profil |
#7 · Zasláno: 25. 12. 2013, 20:47:18
Kubo2:
No ale já potřebuju, aby se ten obrázek roztáhl přes položkju v menu, s tím, že ve středu bude zobáček. |
||
margin Profil * |
#8 · Zasláno: 25. 12. 2013, 21:09:23
Je nespočet možností, jak můžeš mít řešené. Dej odkaz na živou ukázku toho, co zatím máš hotové.
|
||
Kubo2 Profil |
#9 · Zasláno: 25. 12. 2013, 21:26:26
hrncal.junior:
„No ale já potřebuju, aby se ten obrázek roztáhl přes položku v menu, s tím, že ve středu bude zobáček.“ S tým ti asi pomôže background-size , nie ja.
Ja som v živej ukážke použil malý obrázok 16x16px a background-position .
|
||
margin Profil * |
#10 · Zasláno: 25. 12. 2013, 21:59:00
Kubo2:
„Ja som v živej ukážke použil malý obrázok 16x16px a background-position“ Další možnost je napasovat k zobáčku dolní border. http://kod.djpw.cz/frab Je to jen ukázka principu. ve které se "bije" levý a dolní rámeček. Pokud bych něco podobného dělal, tak bych využil toho, že v menu jsou k dispozici dva elementy, položka seznamu <li> a odkaz <a href=> . Ale bez živé ukázky řešení použitého hrncal.juniorem nemíním babrat.
|
||
hrncal.junior Profil |
#11 · Zasláno: 26. 12. 2013, 15:37:02
Kód je zde http://kod.djpw.cz/urab
|
||
margin Profil * |
#12 · Zasláno: 26. 12. 2013, 18:59:18
Nějak takhle? http://kod.djpw.cz/bsab
|
||
hrncal.junior Profil |
#13 · Zasláno: 27. 12. 2013, 12:45:39 · Upravil/a: hrncal.junior
Děkuji. Už to krásně šlape :-)
Ještě k tomu zobáčku. Ty dlouhá data jsou mám nahradit zobáčkem? Ohledně ohraničení. margin Ještě bych chtěl, aby se místo žluté čáry zobrazoval jako separator obrázek. Jakoukolv barvu s toho udělám, to problém není, ale nějak nevím, jak udělat separátor, který mám jako obrázek |
||
margin Profil * |
#14 · Zasláno: 27. 12. 2013, 13:47:55
hrncal.junior:
„Ty dlouhá data jsou mám nahradit zobáčkem?“ V těch dlouhých datech je obrázek zobáčku jako data base 64. Udělal jsem to tak proto, abych obrázek nemusel nahrávat někam na internet. Pro tebe bude vhodné použít standardní postup. V podstatě jde o to, mít dostatečně široký obrázek se zobáčkem uprostřed, vložit ho na pozadí položky (nebo odkazu) a obrázek na pozadí horizontálně centrovat. Že je obrázek na pozadí zbytečně široký, nevadí, je je formátu PNG a ten umí dlouhé proužky velmi dobře komprimovat. |
||
hrncal.junior Profil |
#15 · Zasláno: 27. 12. 2013, 15:34:45
margin:
Tak ted to konečně chápu. Mě to bylo právě divné, jak to funguje :-) |
||
Časová prodleva: 10 let
|
0