Pozicování textu v obrázku – CSS – Fórum – Programujte.com

Zdravím, potřebuji do obrázku vloženého v HTML přes img dostat text. Udělal jsem to tak, že jsem pod obrázek vložil na jednu řádku značky span a ty pomocí CSS relativně napozicoval. Pomocí JS poté měním text. To ale znamená změnu pozice značky span se změnou počtu znaků. Takže nevím jak udržet text na stejném místě. Řešení je použít absolutní pozicování, ale tomu se chci vyhnout. Další možné řešení je použít DIVy, ale ty mi zase naopak zaberou místo v textu. Dá se to řešit nějak jinak v CSS? Jedinné co mi napadá, tak je v JS zjistit souřadnice obrázku a poté vložit text na souřadnice...

To by mozna chtelo obrazky ruznych moznosti. Neumim si to z popisu predstavit, co ti to dela. Mne to normalne funguje.

<style>
.a {position:relative; width:50px;}
.b {position:relative;}
.c {position:absolute; bottom:0;}
</style>
<div class=a>
  <div class=b>x x x x x x x x x x x x </div>
  <div class=c>text text text</div>
</div>

#2 peter
Ano, tohle ti pujde, ale DIV ti udělá vždy nový řádek, to je pro mě nepřípustné, když posouvám objekty do obrázku. Nahraď je SPANem a element .c pozicuj taky relativně. Poté když budeš měnit velikost textu v b tak se tě bude od toho posouvat i c.

Tak jsem to již vyřešil volbou display: inline-block a nastavením pevné šířky elementu přes width

Relativnim pozicovanim vytvaris oblast v niz pozicujes absolutne. To bylo nelogicke to pozicovat jinak.

Dalo by se to mozna obejit nastavenim vertical-align, ale to funguje prave jen na inline-block. Proste z toho, co mne napadlo, asi 10 zpusobu, mi prislo tohle jako nejlepsi. A nevim, cim ti to absolutni pozicovani neco rusi. Chtel jsi, aby text precaral obrazek. To dela. Zadne dalsi informace nebo html/css kod jsi nedal. Takze reseni splnuje dane podminky.

Proste jsem chtel nejakou ukazku toho, jak to myslis, aby to vypadalo a jak to vypada, co ti to dela ted na jakem css/html kodu.
Ale, kdyz ti to uz funguje, jak to chces, ok. Misto inline-block se da mozna pouzit display:table-cell a ostatni z table layoutu.