Autor | Zpráva | ||
---|---|---|---|
suky Profil |
#1 · Zasláno: 16. 1. 2011, 13:42:26
Ahoj,
potřeboval bych poradit s následujícím problémem. Mám div, ve kterém je obrázek o pevných rozměrech, černý průsvitný proužek a popis obrázku. Mým cílem je udělat celý div klikací jako odkaz. Na Webkitu a Firefoxu to jede bez problémů, ale IE si s tím neví rady a já si zase nevím rady s ním. +-----------------------+ | | | | | | +-----------------------+ | Text na průsvit... | +-----------------------+ XHTML <div class="imagebox"> <img src="./image-thumb.jpg" alt="Image description"/> <div class="transparent"></div> <div class="title">Text na průsvitném proužku</div> <div class="link"><a href="#"></a></div> </div> CSS .imagebox { position: relative; float: left; display: inline; margin: 0 23px 0 22px; width: 260px; height: 190px; /* stíny */ } .transparent { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; background-color: #000; filter: alpha(opacity=60); -moz-opacity: 0.6; -khtml-opacity: 0.6; opacity: 0.6; } .title { position: absolute; left: 0; top: 156px; /* formátování textu */ } .link { position: absolute; bottom: 0; left: 0; width: 260px; height: 190px; } .link a { display: block; width: 260px; height: 190px; } |
||
margin Profil * |
#2 · Zasláno: 16. 1. 2011, 14:16:36
Pravděpodobně je to tím, že odkaz nemá žádné pozadí, nejrychlejší náprava bude, že jako pozadí odkazu použiješ průhledný 1px (klidně i větší) GIF.
DIV .link máš zbytečný, mohl jsi napozicovat rovnou odkaz. Já bych to postavil nějak takto: <a class="imagebox" href="#"> <img src="./image-thumb.jpg" alt="Image description"> <span class="transparent"></span> <span class="title">Text na průsvitném proužku</span> </a> Pochopitelně, že CSS by se muselo upravit. |
||
suky Profil |
#3 · Zasláno: 16. 1. 2011, 21:18:46
margin:
Paráda, děkuji. Nejsem kodér a takovéto složitější konstrukce si nedokážu představit! |
||
Časová prodleva: 13 let
|
0