| Autor | Zpráva | ||
|---|---|---|---|
| milde Profil |
#1 · Zasláno: 15. 8. 2018, 18:41:10
Přeji pěkný den, chtěl bych poprosit o radu.
Mám níže uvedený css styl, a nefunguje mi aktivní zvýrazněná položka. Ještě bych se chtěl zeptat zda jde v li.active zkombinovat styl s obrázkem? Moc děkuji za pomoc Milan. CSS li.item-118, li.item-119, li.item-120, li.item-121 {
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 30%, rgba(255,255,255,1) 100%); color: rgba(255,255,255,0.5); padding: 15px 0 15px 20px;
border-bottom: 1px solid transparent;
-moz-border-image: -moz-linear-gradient(right,rgba(255,0,0,0.1) 10%, rgb(255,0,0) 100%);
-webkit-border-image: -webkit-linear-gradient(right, rgba(255,0,0,0.1) 10%, rgb(255,0,0) 100%);
border-image: linear-gradient(to left, rgba(255,0,0,0.1) 10%, rgb(255,0,0) 100%);
border-image-slice: 1;
padding: 0;
margin-bottom: 12px;
}
li.active {
background: rgb(10,0,50);
background: linear-gradient(90deg, rgba(10,0,50,1) 0%, rgba(0,0,0,1) 30%, rgba(255,255,255,1) 100%); color: rgba(255,255,255,0.5); padding: 15px 0 15px 20px;
border-bottom: 1px solid transparent;
-moz-border-image: -moz-linear-gradient(right,rgba(255,0,0,0.1) 10%, rgb(255,0,0) 100%);
-webkit-border-image: -webkit-linear-gradient(right, rgba(255,0,0,0.1) 10%, rgb(255,0,0) 100%);
border-image: linear-gradient(to left, rgba(255,0,0,0.1) 10%, rgb(255,0,0) 100%);
border-image-slice: 1;
padding: 0;
margin-bottom: 12px;
}HTML <ul> <li class="item-118 current active">Text 1</li> <li class="item-119">Text 2</li> <li class="item-120">Text 3</li> <li class="item-121">Text 4</li> </ul> |
||
| Tomášeek Profil |
milde:
„Mám níže uvedený css styl, a nefunguje mi aktivní zvýrazněná položka.“ Zápis je v pořádku (syntakticky, pořadím položek), byť je otřesný. Chyba je jinde. „Ještě bych se chtěl zeptat zda jde v li.active zkombinovat styl s obrázkem?“ Background-image.
|
||
| pk11 Profil |
#3 · Zasláno: 15. 8. 2018, 20:35:26
milde:
Ale ono ti to funguje, akorát to nevidíš, protože ten gradient je barevně podobný. Zkus si například na řádku 15 v CSS změnit: background: linear-gradient(90deg, rgba(10,0,50,1) ... background: linear-gradient(90deg, rgba(100,0,50,1) ... Tomášeek: „Zápis je ... otřesný.“ To je :) |
||
| JaPaJP Profil |
milde:
Živá ukázka |
||
| milde Profil |
#5 · Zasláno: 15. 8. 2018, 21:15:49
Tomášeek, pk11:
Moc Vám všem děkuji vyzkouším JaPaJP: Děkuji moc za ukázku. Možná jsem se v úvodu špatně vyjádřil. Jedná se mi o zvýraznění položky na které se zrovna nacházím. |
||
| JaPaJP Profil |
#6 · Zasláno: 15. 8. 2018, 21:29:22
milde:
Živá ukázka |
||
| milde Profil |
#7 · Zasláno: 15. 8. 2018, 21:37:53
JaPaJP:
Moc děkuji, nedá se ale použít css active nebo current z html zápisu pro aktivní položku? Děkuji |
||
| Tomášeek Profil |
#8 · Zasláno: 15. 8. 2018, 22:19:54
milde:
Jde, ten tvůj zápis je správně, už jsem ti to psal. Proč nečteš pozorně? Nebo nezkusíš v poslední ukázce tu třídu přepsat? |
||
| milde Profil |
#9 · Zasláno: 17. 8. 2018, 14:21:15
Tomášeek:
Moc děkuji za odpověď. Perfektní, Vaše ukázka funguje. Bohužel se mi ale nedaří přidat obrázek na pozadí. Zkoušel jsem zadat background-image: i do poslední živé ukázky, bohužel také bezvýsledně. Děkuji za pomoc Milan |
||
| Tomáš123 Profil |
#10 · Zasláno: 19. 8. 2018, 22:58:55
milde:
Ak je všeobecná vlastnosť background uvedená ako posledná v poradí, resetuje neuvedené hodnoty na predvolené. Nevidíme kam do kódu si deklaráciu umiestnil. Ideálne použi na zdieľanie problému nástroj na živé ukážky.
|
||
| milde Profil |
#11 · Zasláno: 22. 8. 2018, 09:47:09
Tomáš123:
Děkuji Vám za odpověď. Zkoušel jsem obrázek přidat do background-image : ; v předešlé živé ukázce a ten jsem zkoušel přemístit na různá místa. Vždy mi překryl nadefinované pozadí. Živá ukázka
Ve finále mi jde o to do aktivního odkazu přidat na pravou stranu červenou šipečku. Možná že by se to dalo vyřešit i jiným způsobem než obrázkem. Moc děkuji za odpověď, Milan |
||
| Tomáš123 Profil |
#12 · Zasláno: 22. 8. 2018, 11:02:22
milde:
Výborne, tým, že si priamo napísal o čo sa snažíš sme si ušetrili množstvo času. Môžeš použiť jedno z nasledujúcich riešení: 1. Odrážku priradíš inému elementu. Zmení sa teda štruktúra HTML dokumentu, ktorú by si neskôr zrejme musel aj tak učiniť. Predpokladám, že to bude nejaké menu, alebo aspoň niečo, čo má odkazy. Ukážka. 2. Ak napríklad nemôžeš meniť štruktúru HTML, obstojným riešením je viacero pozadí pre element <li>. Ukážka.
Druhé riešenie má horšiu podporu. Funguje od IE9. Existuje ešte ďalšie riešenie s poziciovaným pseudoelementom :before. Podpora by sa zlepšila o jednu verziu Exploreru. Odporúčam prvé riešenie.
|
||
| milde Profil |
#13 · Zasláno: 22. 8. 2018, 18:43:10
Tomáš123:
Moc děkuji za pomoc vše funguje, vyřešeno. Přeji pěkný den, Milan |
||
|
Časová prodleva: 5 let
|
|||
0