Autor | Zpráva | ||
---|---|---|---|
joe Profil |
#1 · Zasláno: 30. 7. 2010, 20:56:10 · Upravil/a: joe
Ahoj,
narazil jsem na takový nepěkný problém, odkaz mi nepřekryje obrázek. Neví někdo proč? Myslel jsem, že to bude nějaký bug třeba v IE, ale stejný problém je i v Opeře. Ve Firefoxu a v Safari na Windows funguje dle mě správně. <!DOCTYPE HTML> <html> <head></head> <body> <div class="test"> <img src="test.jpg" width="100" height="60"> <a href="">...</a> </div> <style> .test { position: relative; width: 120px; height: 100px; background: green; } .test img { position: relative; z-index: 9; } .test a { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; background: transparent; } </style> </body> </html> Pokud ve vyznačené části ale dáte barvu, už je odkaz nahoře. Proč? :-) |
||
Kajman_ Profil * |
#2 · Zasláno: 30. 7. 2010, 21:02:07
Nestačí nastavit u odkazu, aby měl display:block místo inline?
|
||
joe Profil |
#3 · Zasláno: 30. 7. 2010, 21:06:00
Kajman:
Pravda, to tam chybí, psal jsem to z hlavy a na tohle jsem zapomněl. Ale to nic neřeší. Doplněno. |
||
Kajman_ Profil * |
#4 · Zasláno: 30. 7. 2010, 21:17:47
Neznám specifikaci a netuším, které chování je správné, ale vypadá to, že když se dá na pozadí neexistující obrázek (nebo i průhledný) tak to asi funguje jako v jiných prohlížečích.
.test a {background: transparent url('nesmysl.gif');} |
||
joe Profil |
#5 · Zasláno: 30. 7. 2010, 21:26:55
Funguje, díky. To mě nenapadlo.
Dal jsem to sem spíš tak pro zajímavost, to vypadá jako kdyby od sebe kopírovali :-) Pokud by někdo měl stejný problém, tak ať už se rozhodne jestli dá na pozadí neexistující/průhledný obrázek a nebo to vyřeší jinak v HTML, tady by stačilo dát ten obrázek do toho odkazu. |
||
Railbot Profil |
#6 · Zasláno: 30. 7. 2010, 23:16:19 · Upravil/a: Railbot
Odkaz obrázek určitě překryje, ale problém vidím v tom, že ten odkaz nemá žádné rozměry. Je absolutně pozicovaný, takže 100% šířka i výška je nesmysl, jelikož nemá žádný nadřazený element, ze kterého by ty rozměry bral. Pokud to někde funguje, tak je to spíš berlička a nikoli správný jev.
|
||
Bubák Profil |
#7 · Zasláno: 31. 7. 2010, 00:17:06
Odkaz rozměry má, je to vidět, když se mu dá border, ale chyba se i tak projevuje. S něčím podobným jsem se kdysi už potkal, takže řešení s průhledným GIFem mna pozadí je standardní a jestli jsem zkoušel i neexistující obrázek, nevím.
Ale pozor, na serveru zpravidla bude neexistující obrázek hezký 404 HTML soubor, takže bych použil 1px transparentní GIF. |
||
joe Profil |
#8 · Zasláno: 31. 7. 2010, 00:39:55
Railbot:
Co? Vzhledem k tomu, že odkaz je uvnitř divu se třídou test, která je pozicovaná relativně, tím pádem se rozměry počítají od tohoto divu. Jako např. klasické obrázkové menu, kde se dává absolutně span do odkazu (odkaz je relativně s rozměry a tomu spanu se právě dává výška a šířka 100%, aby se to nemuselo v případě změny přepisovat na dvou místech...) Bubák: Asi bych taky volil GIF. Jen zase zbytečný soubor :-) Obejít se to dá... |
||
Bubák Profil |
#9 · Zasláno: 31. 7. 2010, 21:42:17
joe:
Pro jistotu se zeptám, v tom odkaze má bát nějaký text, který zastupují tři tečky, nebo má být prázdný? Pokud má být prázdný a tři tečky jen zviditelňují odkaz v příkladu, tak to jde jednoduše řešit tak, že v HTML obrázek přesuneš do odkazu. Nakonec, při psaní tohoto příspěvku mne napadlo naprosto jednoduché řešení, co ti brání dát týž neopakující se obrázek (test.jpg) na pozadí odkazu? |
||
joe Profil |
#10 · Zasláno: 2. 8. 2010, 00:06:59 · Upravil/a: joe
Bubák:
V tom odkazu jsem chtěl nějaký text... ale zároveň jsem nechtěl aby v tom byl jako odkaz i ten obrázek a ve finální verzi mi nevadilo, resp. jsem spíš chtěl, aby nebyl text odkazu vidět (text-ident na nějaké velké číslo) „Nakonec, při psaní tohoto příspěvku mne napadlo naprosto jednoduché řešení, co ti brání dát týž neopakující se obrázek (test.jpg) na pozadí odkazu?“Tak nebrání mi v tom nic, jen bych musel mít CSS v tom HTML (jako to je tady, normálně to mám rozdělené...) ale to je zase moc motání PHP i do CSS a to by se mi moc nechtělo. Ale šlo by to taky :) Díky za rady. |
||
panther Profil |
#11 · Zasláno: 2. 8. 2010, 01:41:33
joe:
„jen bych musel mít CSS v tom HTML [...] ale to je zase moc motání PHP i do CSS“ prosím? Tahle poznámka mi nějak utekla. O jakém míchání PHP a CSS mluvíš? Proč by muselo být CSS v HTML souboru a ne v externím stylopisu? |
||
joe Profil |
#12 · Zasláno: 2. 8. 2010, 11:50:21
panther:
Dobře, vysvětlím. Protože Bubák psal, abych použil v CSS obrázek, který je teď v kódu u <img>. Vzhledem k tomu, že tenhle celý blok je v cyklu, generovaný v PHP, tak abych to mohl udělat, musel bych i CSS generovat na serveru a nebo ho dát do HTML souboru (minimálně to překrytí) - a to se mi moc nechce. |
||
panther Profil |
#13 · Zasláno: 2. 8. 2010, 11:54:44
joe:
překrytí může být vázané na třídu (neb zaměřené kontextem) a zapsané v CSS. A že by byl background v inline-stylu, to by něčemu vadilo? Vůbec ničemu, pořád by to bylo lepší než <img> a odkaz. |
||
joe Profil |
#14 · Zasláno: 2. 8. 2010, 12:24:57
panther:
„pořád by to bylo lepší než <img> a odkaz.“ Tomuhle nerozumím, můžeš vysvětlit? „A že by byl background v inline-stylu“ Tak může, ničemu to vadit nebude, jenom se mi to nebude líbit :-) |
||
panther Profil |
#15 · Zasláno: 2. 8. 2010, 20:06:00
joe:
„Tomuhle nerozumím, můžeš vysvětlit?“ neukázal jsi obrázek, těžko soudit. Vzhledem k tomu, že ho chceš dostat pod text odkazu, domnívám se, že se jedná o dekorativní obrázek. Ten do <img> nepatří. |
||
joe Profil |
#16 · Zasláno: 2. 8. 2010, 20:41:30
panther:
Ne... jedná se o obrázek reference, ted to co má v obrázku skutečně být, to tam taky je. |
||
Časová prodleva: 14 let
|
0