| 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: 15 let
|
|||
0