NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

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

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
lukas.sei
Člen
Avatar
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
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na lukas.sei
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
Avatar
Matyáš Procházka
Člen
Avatar
Odpovídá na lukas.sei
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
Avatar
lukas.sei
Člen
Avatar
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
Avatar
adder
Člen
Avatar
Odpovídá na Matyáš Procházka
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.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na adder
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.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na lukas.sei
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.
Avatar
Tomáš123
Člen
Avatar
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.
Avatar
adder
Člen
Avatar
Odpovídá na Tomáš123
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.
Avatar
lukas.sei
Člen
Avatar
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
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.