Pozicování textu v obrázku – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Pavelv0
Stálý člen
27. 9. 2016   #1
-
0
-

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...

Nahlásit jako SPAM
IP: 185.99.177.–
Reklama
Reklama
peter
~ Anonymní uživatel
2532 příspěvků
29. 9. 2016   #2
-
0
-

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>
Nahlásit jako SPAM
IP: 2001:718:2601:26c:5def:3d...–
Pavelv0
Stálý člen
29. 9. 2016   #3
-
0
-

#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.

Nahlásit jako SPAM
IP: 185.99.177.–
Pavelv0
Stálý člen
30. 9. 2016   #4
-
0
-

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

Nahlásit jako SPAM
IP: 185.99.177.–
peter
~ Anonymní uživatel
2532 příspěvků
30. 9. 2016   #5
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:26c:13e:8ac...–
peter
~ Anonymní uživatel
2532 příspěvků
30. 9. 2016   #6
-
0
-

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.

Nahlásit jako SPAM
IP: 2001:718:2601:26c:13e:8ac...–
Zjistit počet nových příspěvků

Přidej příspěvek

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 10 hostů

Podobná vlákna

Pozicování textu — založil LUK4S3K

Rozpoznání textu z obrázku — založil MpPozor

Pozicování — založil Peterka35

Pozicování — založil Salieri

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý