Weblady

Weblady
Рейтинг
170
Регистрация
26.07.2011
Валидация html
webinfo #:

Этот заголовок относится к вложенному в article элементу section. А сам раздел  article не имеет заголовка, об этом и предупреждает валидатор.

Благодарю за помощь!

Валидация html
webinfo #:

Согласно спецификации HTML5, header не является разделообразующим элементом. Поэтому не требует заголовков.

Ваше предупреждение относится к элементам  article, которые являются разделообразующими, как и элементы section . Как туда добавить текст, не добавляя текст, – этого я подсказать не могу. В любом случае, предупреждение не является ошибкой.

Спасибо,  а вот между <article> есть  тег <h4>. Что же не нравится валидатору?

Валидация html
webinfo #:

Во-первых, не блок, а вёрстку страницы. 

Спасибо за помощь, не увидела, что все подобные блоки завернуты еще в один header.

Помогите, пожалуйста, еще с этим  предупреждением:

Warning: Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles.

Понятно, что нужно использовать теги h2-h6, есть тег h4 в <section>

А в <header> только изображение. Как правильно добавить h4, не добавляя текст?

<div class="item col-lg-3 col-md-3 col-xs-12" data-filter-by="38">
<article class="over-image show-always post-800 video type-video status-publish has-post-thumbnail hentry tag-custom-post tag-themes tag-touchsize tag-video-post tag-wordpress videos_categories-shows has-lazy-placeholder" itemscope>
<header>
<div class="image-holder">
<img class="lazy" src="assets/images/42/2016/11/placeholder-450x350.jpg" data-original="https://demo3.touchsize.com/diginex/wp-content/uploads/sites/42/2016/10/DSC233245-450x350.jpg" width="450" height="350" alt="Showing it out again" /><div class="stripes"></div>                    <a href="video/showing-it-out-again/index.html" class="post-link"></a>
<a href="video/showing-it-out-again/index.html" class="post-format-icon"><span class="icon-video"></span></a><ul class="entry-categories"><li class="term-38"> <a href="video-category/shows/index.html">Shows</a> </li></ul>                   </div>
</header>
<section>
<a href="video/showing-it-out-again/index.html"><h4 class="entry-title" itemprop="name headline">Showing it out again</h4></a><ul class="entry-meta"><li class="entry-meta-author">
<a href="author/admin/index.html" itemprop="author" itemscope>
<img alt='' src='https://secure.gravatar.com/avatar/07a586c70971fe7d764893201afa4af4?s=74&amp;amp;d=mm&amp;r=g' srcset='https://secure.gravatar.com/avatar/07a586c70971fe7d764893201afa4af4?s=148&amp;#038;d=mm&#038;r=g 2x' class='avatar avatar-74 photo' height='74' width='74' loading='lazy'/>
<span class="author-name" itemprop="name">Stefan Ciorici</span>
</a></li><li class="entry-meta-date"><i class="icon-time"></i><time datetime="2016-10-19T07:53:11+00:00">October 19, 2016</time></li><li class="entry-meta-views"><i class="icon-views"></i>816 views</li></ul>
</section>
</article>
</div>
Валидация html
Как изменить данный блок, чтобы верстка была валидной?
Валидация html
богоносец #:

Переделайте стили | забейте на валидатор | а доктайп какой? 

И не надо пользоваться странными тегами.

<!DOCTYPE html>
<html lang="en">
<head>

Это готовая тема Wordpress с themeforest. Вот демо темы https://demo3.touchsize.com/diginex/ Такая же ошибка валидации есть:

Error: The element header must not appear as a descendant of the header element.

Подскажите, пожалуйста, как правильно переделать этот блок.

Валидация html
Действительно, если загрузить только этот код, ошибку не показывает. А внутри вертски показывается такая ошибка. С чем может быть связано? Указывает именно на такие блоки.
Валидация html
Mik Foxi #:
так а вы его валидируете где и как? 

это же валидный html5 вроде?

Вот здесь проверяю, загружаю файл https://validator.w3.org/#validate_by_upload

Рамка и внутри рамки картинка
silicoid #:
поправка: для одного вида почты. (для яндекса, например)
в гугле будет все по-другому, я уж не говорю про мейл ру.
А Аутлук вообще все фоновые картинки выкинет и не поморщится

Протестировали в Яндекс, gmail и mail.ru, всё в порядке.

Рамка и внутри рамки картинка

Спасибо за ответы! Тем не менее получилось для почты решить:

<div style="background:#ffffff;margin:0 auto 0 auto;max-width:600px">
  <table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;max-width:600px;width:100%">
    <tbody>
      <tr>
        <td align="center" style="line-height:0;padding:0px" valign="top">
          <div style="background-color:#ffa5bf;width:600px;height:600px;background-image: url('https://love.romanticcollection.ru/wp-content/uploads/24177961-845c9047.jpg');background-size:500px auto;background-repeat:no-repeat;background-position: center center;">
            <div style="background-image: url('https://love.romanticcollection.ru/wp-content/uploads/love-frame.png'); width: 100%; height: 100%"> </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Рамка и внутри рамки картинка

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

Почта удаляет следующие стили изображений:

1. Должно быть:
<img style="display:block;position:absolute;left:0;top:0;width:600px;height:600px;z-index:1;"

становится:
<img style="display:block;width:600px;height:600px;"

2. Должно быть:
<img style="display:block;position:absolute;left:123px;top:129px;width:382px;height:382px;object-fit:cover;overflow:hidden;z-index:0;"
становится:
<img style="display:block;height:382px;overflow:hidden;width:382px"
1... 424344454647484950 ...56
Всего: 553