Невозможно изменить высоту заголовка в HTML

-1

Я создал заголовок для шаблонов электронной почты наших компаний, к счастью, мне удалось найти базовый шаблон в Интернете и настроить его по нашим требованиям. Я настоящий новичок, когда дело доходит до HTML, поэтому я уверен, что в нем много ошибок. Мне нужно выяснить, как уменьшить синий баннер до 42 пикселей в высоту, но все, что я пытаюсь развалить. Мне также сказали, что мой 600 широкий вариант - очень старая школа, и это должно быть 1200. Я тоже пытался изменить это, но тогда он теряет все остальные форматирования и выглядит ужасно. Предполагается, что он будет отзывчивым, если кто-нибудь может внести какие-либо предложения по редактированию, я был бы очень благодарен.Невозможно изменить высоту заголовка в HTML

header.txt header.html

источник

2016-08-09 Becky

Я хотел бы предложить, а не пытаться взломать существующий шаблон, который вы не понимаете, вы берете немного времени, чтобы справиться с основами HTML/CSS и написать свой собственный. Пример кода, который вы даете, довольно сложный, смешивая встроенные стили со стилем, несколькими элементами таблицы и т. Д., Поэтому попытка изменить это для ваших конкретных потребностей приведет к большей работе, чем того стоит. Если вы изучите основы модели и позиционирования коробки, вы должны легко воссоздать то, что вам нужно. –

Я полностью согласен с @Sam, что было бы лучше всего в идеальном мире, но я должен быть погружен в глубокий конец с крайним сроком встречи. Может быть, когда-нибудь, когда мне дадут время, я смогу попробовать с нуля, чтобы что-то создать, но на данный момент я должен попытаться работать с тем, что у меня есть. – Becky

попробуйте изменить отступы в т.д, содержащий логотип/изображение. Чтобы уменьшить высоту синего баннера, уменьшите просадку вверху и внизу данных таблицы.

Это поможет вам, но другим способом является уменьшение высоты логотипа.

источник

2016-08-09 14:55:44 uttejh

Это сработало, спасибо! Я изменил прокладку вокруг логотипа до 1px, а затем логотип до 40 и значительно уменьшил размер. Спасибо огромное! – Becky

От взгляда на коды нет специальной высоты, которая назначается контейнерам таблиц, которые вы можете изменить, чтобы указать 42px. Самое большее, что вы можете сделать, это удалить верхнюю и нижнюю прокладки из контейнеров внутри, чтобы уменьшить высоту заголовка.

Вот пример кода с изменениями. Если вы заметили, я изменил верхнее и нижнее дополнение на 0px. Для второго td я оставил 5px для верхнего дополнения, чтобы добавить некоторые пробелы между логотипами и верхним краем экрана. Если вы хотите отредактировать ширину, я меняю ширину на 800 пикселей, но вам также нужно настроить ширину двух контейнеров внутри таблицы. Например, я изменил их с 270 пикселей на 370 пикселей каждый.

Наконец, я согласен с тем, что этот «шаблон», который вы нашли, кажется очень сложным, и было бы лучше узнать немного базовых html и css, и то, что вы пытаетесь сделать, прост и может быть выполнено с большим более простые коды. Удачи!

<center> 
     <table cellspacing="0" cellpadding="0" width="800" class="w320"> 
      <tr> 
      <td valign="top" width="370" style="background:#2980B9;padding:0px 15px 0px 15px;"> 
       <a href="https://www.hayley-group.co.uk/" style="text-decoration:none;"> 
       <img src="http://hosted.hayley-group.co.uk/shop/hayley_web_logo_white(trans).png" width="110" height="auto" alt="Hayley Group PLC Logo"/> 
       </a> 
      </td> 
      <td valign="top" width="370" style="background:#2980B9;padding:5px 15px 0px 15px"> 
       <table border="0" cellpadding="0" cellspacing="0" class="mobile-center-block" align="right"> 
       <tr> 
        <td align="right"> 
        <a href="https://www.facebook.com/HayleyGroup/"> 
        <img src="http://hosted.hayley-group.co.uk/shop/social_facebook.png" width="30" height="30" alt="social icon"/> 
        </a> 
        </td> 
        <td align="right" style="padding-left:5px"> 
        <a href="https://twitter.com/HayleyGroup"> 
        <img src="http://hosted.hayley-group.co.uk/shop/social_twitter.png" width="30" height="30" alt="social icon"/> 
        </a> 
        </td> 
        <td align="right" style="padding-left:5px"> 
        <a href="https://www.linkedin.com/company/hayley-group"> 
        <img src="http://hosted.hayley-group.co.uk/shop/social_linkedin.png" width="30" height="30" alt="social icon"/> 
        </a> 
        </td> 
       </tr> 
       </table> 
      </td> 
      </tr> 
     </table> 
</center>

источник

2016-08-09 15:08:25 McBilly

Огромное вам спасибо, это очень полезно и помогло мне понять немного лучше понять, как заполняются и работают td. Я отдам его. Сочетание того, что вы предложили и что сказал @uttejh, должно помочь мне массово! Следующий проект, научитесь самостоятельно создавать базовую страницу html! – Becky

Невозможно изменить высоту заголовка в HTML

ответ

Смежные вопросы