Autor Zpráva
Pavel Dumbrovský
Profil
Zdravím,
potřeboval bych trošku píchnout. Zde je problematická stránka: http://www.mrs-velkemezirici.cz/fotogalerie/

CSS
#galerka .album_text {float: left; width:175px; height: 185px; overflow: hidden; margin: 5px 0px 5px 0px; line-height: 100%;}
#galerka .album {float: left; width:165px; height: 120px; overflow: hidden; display: inline; background-image: url("pictures/album.jpg"); background-repeat: no-repeat;}
#galerka .album a {float: left; width: 114px; height: 70px; display: inline; padding: 20px 18px 15px 18px; margin: 10px 0px 0px 5px; overflow: hidden;}
#galerka .album a span {padding: 0px; width: 114px; max-height: 77px; float: left; overflow: hidden; display: block; cursor: hand;}
#galerka .album a span img {float: left; padding: 0px; margin: 0px; display: block; opacity: 0.8; filter: alpha(opacity=80);}


HTML
<div class='album_text'>
<div class='album'><a href='/fotogalerie/ryby-v-cr-okounoviti/'  title=''><span><img src="nejaky_url" width='114' height='164' alt=''></span></a></div>
<h3><a href='/fotogalerie/ryby-v-cr-okounoviti/'  title=''>Ryby v ČR - Okounovití</a></h3>Fotek: 7 | Zobrazeno: 66x
</div>


V novejch prohlížečích je to klikatelný celý, v IE 6 a 7 se link otevře pouze po kliknutí na to okolí - složka (ten span), ale obrázek je hluchej. Přitom je to napsaný v pořadí a - span - img, tak by to mělo jít. Funguje to pouze když u
#galerka .album a span
odělám float: left; overflow: hidden; display: block; , jenže to tam potřebuju mít, aby mi fungoval max-height. :(

Netušíte někdo co s tím? Nechci se spoléhat jen na JS a onclick.

Díky,
Dumbrovský
habendorf
Profil
Odkazovaná stránka neběží, takže nevím, jak to má vypadat, ale to html je nějak zbytečně složité. Začal bych redukcí, pak uvidíme co dál.
Petr ZZZ
Profil
Pavel Dumbrovský:
Pokud to chápu správně, tak se snažíš udělat klikatelný blok. Zkoušel jsi přehodit pořadí? Tedy místo

<div><a href><span><img></span></a></div>
napsat

<a href><div><span><img></span></div></a>

Připomíná mi to problém, který jsem se před nějakou dobou pokoušel řešit:
Lze nacpat element <marquee> a další bloky do odkazu?
habendorf
Profil
Tak div do a určitě ne.
Pavel Dumbrovský
Profil
Na tom html snad není nic špatnýho, je to:
<div>
  <div>
    <a>
      <span>
        <img>
     </span>
   </a>
  </div>
 </div>


První div kontejner obaluje album i s textem pod ním, druhej div obaluje jen album a to proto, aby když je fotka hodně vysoká se schovala pomocí overflow: hidden, span obaluje img proto, aby nebyla klikatelná jen fotka, ale i okolí - ten span. Asi tam hodím onclick a prdím na to..
Petr ZZZ
Profil
habendorf:
Netvrdím, že je to validní v HTML4, ale v HTML5 to validní je a v HTML4 to přinejmenším funguje.
Bubák
Profil
Pavel Dumbrovský:
span obaluje img proto, aby nebyla klikatelná jen fotka, ale i okolí - ten span
Zatím jsem to zkoumal jen zběžně a na nic jsem nepřišel, ale odkaz ten obrázek taky obaluje, takže si myslím, že bez SPANu by se dalo obejít.

Je zvláštní, že v adresním řádku se objevuje cíl odkazu, ale myš se nezmění v ručku, pokud to není deklarováno v CSS (po smazání cursor: hand;) a odkaz na obrázku nefunguje.
Pavel Dumbrovský
Profil
Bubák:
Přesně tak, to taky nechápu..
Ano bez toho spanu by to asi taky šlo, musel bych nastavit fotce padding, aby nebyla klikatelná jen ona, ale i její okolí, což jsem nechtěl, protože by s tím byly beztak komplikace, ale ty jsou i teď, takže to vyzkouším.
habendorf
Profil
Já neříkám, že je to špatně, jen že je to zbytečné. Stejně jako je zbytečné tam všechno floatovat a pak tomu zase nastavovat inline. Osobně bych vyházel tuny zbytečného kódu, a pak to teprve řešil (i když už by asi ani nebylo co řešit).
Pavel Dumbrovský
Profil
habendorf:
Někde to zbytečný je, někde ne. Ale hlavně je to úplně jedno. Zkoušel jsi to oddělávat? Já ano a je to jedno. Jedinej důvod proč to není klikatelný v IE 6 a 7 je tenhle řádek
#galerka .album a span {padding: 0px; width: 114px; max-height: 77px; float: left; overflow: hidden; display: block; cursor: hand;}

Jenže bez něj nemám tu fotku na max 77px s tím, že je to klikatelný i pod ní. Dám tam JS onclick a se*u na to, tady se akorát dozvím od habendorf že tam mám zbytečný floaty.
Pavel Dumbrovský
Profil
Jo aha, takže když nejde odkaz, tak nejde ani onclick.. :D Dobrý, tak si poradím nějakou šíleností v css.
Petr ZZZ
Profil
Pavel Dumbrovský:
Nejsem si jistý, ale ovládají explorery max-height?
Pavel Dumbrovský
Profil
Petr ZZZ:
Jak které, šestka určitě ne, sedmička už myslím ano. Ale nakonec jsem to úplně přeprasil a max-height nepoužívám vůbec.
Neužil
Profil *
Stránky mrs-velkemezirici jsou ve vývoji a ryby okounovití tam jsou jenom jako ilustrace. V budoucnu tam bude normální fotogalerie
nethor
Profil
Pavel Dumbrovský:
Nedávno jsem narazil na stejný problém.
Ve vlákně je popsáno i moje řešení.
Zajímalo by mne, jak jste tento problém řešil Vy. (stačí naťuknout :-))
margin
Profil *
nethor:
Zajímalo by mne, jak jste tento problém řešil Vy. (stačí naťuknout :-))
Stačí se podívat na "problematickou stránku", pořád funguje.
Obdobně, jako jsem poradil ve tvém vlákně, span je zbytečný, formátování, která předtím dával spanu, dal rovnou odkazu.
Nevím proč, ale tuhle radu jsi naprosto ignoroval.
nethor
Profil
margin:

Protože, jak jsem psal, ve vlákně jsem ukázku zdroje maximálně zjednodušil.
V praxi naopak potřebuji do a-tagu vnořit hned několik spanů.

PS: Odkaz na "problematickou stránku" jsem přehlédl. díky.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: