Autor Zpráva
joe
Profil
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 *
Nestačí nastavit u odkazu, aby měl display:block místo inline?
joe
Profil
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 *
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
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
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
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
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
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
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
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
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
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
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
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
panther:
Ne... jedná se o obrázek reference, ted to co má v obrázku skutečně být, to tam taky je.

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:

0