Autor Zpráva
kouzelnik3
Profil
Ahoj,

po hodně dlouhých letech jsem se opět dostal HTML a dalším souvisejícím věcem (tak nějak jako slepý k houslím) a jdu si pro radu. Mám HTML šablonu a když si následující kod uložíte jako obyč index.html, kromě chybějících obrázků a odkazů (ve finále si je nalinkuju, to problém není) je v části "Hody, hody... nebojte se být kreativní" i místo pro obrázek. Jen se mi jej nedaří posunout až nahoru. Nejdřív jsem si myslel, že je problém v padding-top, ale zjevně nikoliv. Vypadá to spíš na nadbytečnou tabulku, dá se říct. Obrázek je zarovnán až s následujícím textem a jakoby pod nadpisem dané sekce. Potřeboval bych, aby se mi zobrazoval zarovnaný vlevo i vedle toho nadpisu. Nejspíš to bude banalitka, ale tak nějak se do toho teprve vracím a tohle se mi nedaří. Prosím o pomoc. :)

Tady je daný kod:

<tr> 
              <td style="Margin:0;padding-bottom:10px;padding-left:20px;padding-right:20px;padding-top:5px;background-color:#b8b22b" bgcolor="#b8b22b" align="left"> 
               <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left"> 
                 <tr> 
                  <td valign="top" align="center" style="padding:0;Margin:0;width:560px"> 
                   <table width="100%" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left"> 
                     <tr> 
                      <td class="es-m-p0t es-m-p20l" align="left" style="padding:0;Margin:0;padding-top:25px;padding-left:
                      15px">
                        <h2 style="Margin:0;line-height:27px;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:21px;font-style:normal;font-weight:border;color:#FAFAFA">Hody, hody... </br>neboj se být kreativní.</h2></td> 
                     </tr> 
                   </table></td> 
                 </tr> 
               </table></td> 
             </tr> 
             <tr> 
              <td style="Margin:0;padding-top:0px;padding-bottom:10px;padding-left:15px;padding-right:0px;background-color:#b8b22b" bgcolor="#b8b22b" align="left"> 
               <!--[if mso]><table dir="ltr" cellpadding="0" cellspacing="0"><tr><td><table dir="rtl" style="width:560px" cellpadding="0" cellspacing="0"><tr><td dir="ltr" style="width:280px" valign="top"><![endif]--> 
               <table class="es-right" cellspacing="0" cellpadding="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:right"> 
                 <tr> 
                  <td class="es-m-p20b" align="left" style="padding:0;Margin:0;width:260px"> 
                   <table width="260px" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> 
                     <tr> 
                      <td style="padding:0;Margin:0;font-size:0px" align="center"><a target="_blank" href="###URL-LINK###" style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#1C2A57;font-size:14px"><img src="###URL-IMAGE###" alt style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" width="260" height="387"></a></td> 
                     </tr> 
                   </table></td> 
                 </tr> 
               </table> 
               <!--[if mso]></td><td dir="ltr" style="width:0px"></td><td dir="ltr" style="width:280px" valign="top"><![endif]--> 
               <table class="es-left" cellspacing="0" cellpadding="0" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left"> 
                 <tr> 
                  <td align="left" style="padding:0;Margin:0;width:265px"> 
                   <table width="290" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px"> 
                     <tr> 
                      <td class="es-m-p20r" align="left" style="padding:0;Margin:0;padding-top:20px;padding-left:20px"><h2 style="Margin:0;line-height:19px;mso-line-height-rule:exactly;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:normal;color:#fafafa">Vyfoť nebo použij velikonoční klasiku z galerie, vyber rámeček a veselou známku, připoj text. <strong>A velikonoční přání je na světě. </strong>Z mobilu, tabletu nebo počítače rovnou do schránky.</p> </h2></td> 
                     </tr> 
                     <tr> 
                      <td class="es-m-txt-c" align="left" style="Margin:0;padding-left:40px;padding-right:15px;padding-top:30px;padding-bottom:30px"><span class="es-button-border" style="border-style:solid;border-color:#2CB543;background:#193276;border-width:0px 0px 2px 0px;display:inline-block;border-radius:0px;width:auto;border-bottom-width:0px"><a href="h###URL-LINK###" class="es-button es-button-2" target="_blank" style="mso-style-priority:100 !important;text-decoration:none;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;color:#193276;font-size:16px;border-style:solid;border-color:#fecc0f;border-width:10px 30px;display:inline-block;background:#fecc0f;border-radius:0px;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-weight:normal;font-style:normal;line-height:22px;width:auto;text-align:center"><strong>ZJISTIT VÍCE</strong></a></span></td> 
                     </tr> 
                   </table></td> 
                 </tr> 
               </table> 
               <!--[if mso]></td></tr></table></td></tr></table><![endif]--></td> 
             </tr> 
anonym_
Profil *
kouzelnik3:
Nebylo by lépe to celé zahodit a napsat to nějak normálně? Jestli to chceš nechat takhle, přidej první tabulce width: auto.

Nástřel na 5 řádků asi takto:
<style>
img {float: right; background: yellow; width: 300px; height: 300px;}
.button {text-transform: uppercase; background: yellow; color: blue; padding: 10px 20px;}
p {width: 265px;}
</style>
<img src="https://picsum.photos/200/300">
<h2>Hody, hody... <br>neboj se být kreativní.</h2>
<p>Vyfoť nebo použij velikonoční klasiku z galerie, vyber rámeček a veselou známku, připoj text. <b>A velikonoční přání je na světě.</b> Z mobilu, tabletu nebo počítače rovnou do schránky.</p>
<a href="" class="button">Zjistit vice</a>
kouzelnik3
Profil
anonym:
Postupně to mám v plánu taky přepsat do něčeho hezčího, ale bohužel jsem tuhle šablonu dostal, že už takhle funguje dlouho, ale odešel jim ten, co to měl na starosti přede mnou a je potřeba do pátku mít odevzdáno, což vzhledem k tomu, že jsem tyhle věci viděl naposledy tak 7 let zpátky, tak to i vzhledem k jiným důležitějším věcem do hezčího nestihnu přepsat. :(

Jen upřesnění, to width:auto mám napsat kam? Já už jsem z těch zdejších pracovních požadavků trochu mimo. Pardon za hloupý dotazy.
anonym_
Profil *
kouzelnik3:
to width:auto mám napsat kam?
Čti pořádně, co jsem psal.
kouzelnik3
Profil
Nakonec se mi to povedlo překopírovat včetně formátu k tomu textu pod tím a původní <tr> smazat respektive z toho udělat prozatím komentář. Díky za nápady i tak. :)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0