Diskuze: HTML - Text po obrázku se zarovnává podle obrázku

lukas.sei

Člen

lukas.sei:7.1.2016 18:49

Čaute,
Tohle je další moje téma kde potřebuji pomoct s HTML.
Teď potřebuji pomoct s tímhle:
Jak vidíte text se mi po obrázku zobrazuje u dolního rohu toho obrázku. Ale já bych potřeboval aby text pokračoval uprostřed toho obrázku. Prostě tak jak je ta šipka na tom obrázku.
Předem vám děkuji.
Můj kód:

<!DOCTYPE HTML>

<HTML lang="cs-cz">
        <head>
                <meta charset="utf-8" />
                <title>První Stránka</title>

                <style>
                     p    {text-indent: 30px; margin: 20px;}

                     body {background-image: URL('pozadi2.png'); background-attachment: fixed; background-color: #ffff99; color: black; }
                     #hlavicka{background-image: url('pozadi.jpg');background-repeat: repeat-x;border: 1px solid #b3cbcb ;box-shadow: 2px 2px 7px #b3cbcb;display: block;height: 150px; /* výška divu */width: 100%; /* 100% - přes celou šířku */}

                     .ne-tlacitko {background: none; color: #D62988; padding: 0; border: 0; text-decoration: underline; cursor: pointer; font: inherit;}
                </style>

        </head>

        <body>

                      <div id="hlavicka">
                      <img src="logo.jpg"> /*obrázek*/
                      <a href="file:///C:/Users/BusterCZE/Desktop/WEB/fotoalbum.html" class="ne-tlacitko"><font size="5"><b>odkaz</b></font></a> /*text po obrázku (špatně zarovnaný)*/

                      </div>
        </body>
</HTML>

Odpovědět

7.1.2016 18:49

Matyáš Procházka

Člen

Matyáš Procházka:7.1.2016 19:07

Pokud víš přesné rozměry, jedna z možnosti je použití vertical-align

https://jsfiddle.net/ydy1q90h/4/

Nahoru Odpovědět

7.1.2016 19:07

Matyáš Procházka

Člen

Matyáš Procházka:7.1.2016 19:10

Nebo jednodušší, abys nastavil jen výšku parentu

https://jsfiddle.net/ydy1q90h/6/

Nahoru Odpovědět

7.1.2016 19:10

lukas.sei

Člen

lukas.sei:7.1.2016 19:21

dík zítra se na to podívám

Nahoru Odpovědět

7.1.2016 19:21

adder

Člen

adder:7.1.2016 19:55

Myslím, že tam máš jednu malou nečekanou chybu. Centruješ ačko, kterej je inline-block pro img, který je inline element a proto ti to vychází. Když nastavíš img display: inline-block, bude mít text nahoře. A proč to beru jako chybu? Jelikož plocha <a> přečuhuje přes spodní hranu obrázku, což by určitě nemělo dělat. Mrkni do inspektoru.

Upgrejdované tvoje řešení: https://jsfiddle.net/o5m0vkm6/

Udělejte si hezký večer.

Nahoru Odpovědět

7.1.2016 19:55

I’m going to lay this brick as perfectly as a brick can be laid.

Tomáš123

Člen

Tomáš123:7.1.2016 20:21

Img je tiež inline-block.

Nahoru Odpovědět

7.1.2016 20:21

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Tomáš123

Člen

Tomáš123:7.1.2016 20:25

Zakomentoval som ti nepotrebné CSS: kod.djpw.cz/hitb

Nahoru Odpovědět

7.1.2016 20:25

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

Tomáš123

Člen

Tomáš123:7.1.2016 20:25

Zle som skopíroval odkaz: http://kod.djpw.cz/hitb

Nahoru Odpovědět

7.1.2016 20:25

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

adder

Člen

adder:7.1.2016 20:48

Jo je, pardón.

Nahoru Odpovědět

7.1.2016 20:48

I’m going to lay this brick as perfectly as a brick can be laid.

lukas.sei

Člen

lukas.sei:8.1.2016 6:25

Všem vám moc děkuji Problém je vyřešen

Nahoru Odpovědět

8.1.2016 6:25

Naučíme tě pracovat na home-office.

Zjistit více...

Naučíme tě pracovat na home-office.

Více info »

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.