Autor Zpráva
Stalker
Profil
Ahoj,

budu kódovat web a budu tam vkládat takovýto obrázek, na kterém bude text. Jak tam nejlépe dát ten text?



Mám vytvořit div, nastavit mu pozadí a následně do něj vložit ten text?
Nebo mám napozicovat obrázek a text a pomocí z-indexu ho překrýt?
Nebo je ještě nějaký jiný, lepší způsob?

PS: obrázek by měl být klikací s nějakým hoverem.
Keeehi
Profil
Ten text zůstává nejspíše pořád stajný, takže bych to udělal co nejjednodušším způsobem.
<a href="#"><img src="obrazek.jpg" alt="IZOLACE SPODNÍCH STAVEB"></a>

Pokud to chceš ale přece jen skládat, ak by to mělo vypadat nějak takto:
<a>    -- odkaz, na pozadí obrázek, display: block
    <div></div>   -- fialové pozadí, opacity, margin-top
    <div>IZOLACE SPODNÍCH STAVEB</div> -- margin-top: -50px
</a>

ty dva divy se dají smrsknout do jednoho, ale pak se na poloprůhledné fialové pozadí nedá použít opacity, jelikož se toho už pak nezbavíš a i text by byl průhledný. Dá se to řešit pomocí rgba nebo poloprůhledným png na pozadí což však nemusí fungovat ve starších prohlížečích.
Stalker
Profil
[#2] Keeehi

Díky za reakci. Je asi pravda, že v tomto případě se nevyplatí to skládat a bude lepší použít obrázek jako celek. Ledaže bych tam vložil obrázek už s poloprůhledným fialovým pozadím a vložil tam jen text.
margin
Profil *
Stalker:
Mám vytvořit div, nastavit mu pozadí a následně do něj vložit ten text?
Nebo mám napozicovat obrázek a text a pomocí z-indexu ho překrýt?
Co se složitosti kódu týče, vyjde to skoro nastejno:
Text na obrázku pomocí pozicování
Text na obrázku pomocí background-image

Ve tvém případě není obrázek dekorační, ale ilustrační, proto bych doporučil použít IMG a CSS.
Třebas nějak takto:
<img src=http://teststranek.kvalitne.cz/images/obrazek-1.jpg>
<h3 style="
width: 320px;
margin: -3em 0 0 0;
padding: .5em 0;
text-align: center;
background: rgba(0, 0, 160, 0.4);
color: #fff;
position: relative;">
kaple svaté Kláry
</h3>
Není ošetřené RGBA pozadí, pro starří prohlížeče, možností je spousta, nejjednodušší je použít jako pozadí jednobarevný průsvitný PNG obrázek.
Trejpa
Profil
Stalker:
Řekl bych, že hlavním obsahem je text a obrázek je jen ilustrací. Vložil bych to přirozeně do sebe bez pozicování a obrázek nastavil jako pozadí odkazu. Poloprůhlednost bych řešil pomocí PNG obrázku na vnitřním bloku. Příklad.
Stalker
Profil
[#4] margin
[#5] Trejpa
Díky za další názory. Velmi jednoduché a efektivní řešení mi přijde to Marginovo s tím, že bych pozadí pod h3 dal to poloprůhledné PNG.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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