Валидность HTML. Консультации по исправлению ошибок. Постоянная акция!!!

[Zhezkazganetcs]

еще 1 вопрос
как красиво сделать расположение телефонов для мобильной версии?
[spoiler]прописал телефоны

Код Выделить Развернуть

<div class="phoneNumber"><img title="375232581462" src="http://welltorg.com/image/catalog/img/phone.jpg" alt="375232581462"> <a href="tel:+375232581462"><span>+375(232)</span><b>58-14-62</b></a> <img title="375299714759" src="http://welltorg.com/image/catalog/img/velcom.jpg" alt="375299714759"> <a href="tel:+375299714759"><span>+375(29)</span><b>971-47-59</b></a> <img title="375336810707" src="http://welltorg.com/image/catalog/img/mts.jpg" alt="375336810707"> <a href="tel:+375336810707"><span>+375(33)</span><b>681-07-07</b></a> <img title="375257364250" src="http://welltorg.com/image/catalog/img/life.jpg" alt="375257364250"> <a href="tel:+375257364250"><span>+375(25)</span><b>736-42-50</b></a></div><hr>
но на мобильной версии как то криво


как исправить чтобы все телефоны со значками были с новой строки и увеличить расстояние между строками?
OpenCart Version 2.1.0.2 (rs.1)[/spoiler]

[Старый]

как исправить чтобы все телефоны со значками были с новой строки и увеличить расстояние между строками?

Нужно обернуть каждую конструкцию в слой:

Код Выделить Развернуть


<div class="NewClass">
<img title="375232581462" src="http://welltorg.com/image/catalog/img/phone.jpg" alt="375232581462">
<a href="tel:+375232581462">
<span>+375(232)</span><b>58-14-62</b>
</a>
</div>


А потом добавить стили, основной и поведение в @media.

Основной стиль для ПК наверное сами сможете прописать?

А в @media, для мобильного отображения, пригодятся следующие свойства:
display:block; - отображать как блок
width:100%; - ширина 100% (но может появиться горизонтальная прокрутка, если есть border)
clear:both; - отменить обтекание

Отступы:
margin - внешние, снаружи блока.
padding - внутренние, внутри блока.

У обоих правил принцип одинаковый:
margin:1px; - отступы установлены одновременно от каждого края.
margin:1px 2px; - первое значение отступ от верхнего и нижнего края, второе — от левого и правого.
margin:1px 2px 3px; - первое значение от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
margin:1px 2px 3px 4px; - устанавливается отступ от верхнего, правого, нижнего и левого края.

Можно указывать в других единицах, например в %.
Значения могут быть положительными и отрицательными.

auto - Указывает, что размер отступов будет автоматически рассчитан браузером.
inherit - Наследует значение родителя.

[Zhezkazganetcs]

Старый, и имел ввиду с новой строки для мобильных
а так и для пк все с новой строки, если прописывать <div class="NewClass">

Основной стиль для ПК наверное сами сможете прописать?

основной прописан
может не так как должно быть, но вроде все норм
а с мобильной версией некрасиво

[Старый]

Для ПК в основном подклассе (NewClass) пропишите ширину и выравнивание блоков по левому или по правому краю (float:left), тогда на широком экране они выстроятся в одну строку. При уменьшении разрешения, благодаря @media начнут занимать 100% ширину и выстраиваться с новой строки, один под другим.

У вас сейчас в одном слое несколько не связанных элементов - картинка (IMG), ссылка (A), строка (SPAN). Для нормального поведения их нужно объединить в блоки, т.е. блок (DIV), а в нём 1 картинка (IMG), 1 ссылка (A), 1 строка (SPAN). И так для каждого номера телефона. И только после этого можно управлять поведением этих блоков (<div class="NewClass">).

Можете попробовать привязать только картинки (.phoneNumber img {}), т.е. внутри вашего слоя с классом "phoneNumber" всё будет выстраиваться относительно картинок. Но как поведут себя остальные элементы, ссылка и строка, не знаю.
Поэтому лучше их всё-таки объединить, а потом управлять.

[Надежда Хачатурова]

Старый, не подскажете, что это за предупреждение? На главной идут анонсы, поэтому 5 однотипных замечаний. Что можно изменить?

Warning: Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).
From line 183, column 5; to line 183, column 28
">↩      ↩            <h1 class="entry-title">↩         <a

[Старый]

Это можно отнести к предупреждению или скорее совету, использовать заголовок H1 как можно выше на странице.
Такой совет выводится, если до него много кода, например, на странице выводится массивный слайдер где много кадров, потом меню, потом новости и анонс. И после всего этого вдруг H1.
Просто валидаторы не понимают задумки дизайнеров. 
Канонически считается, что H1 "первый" заголовок, название публикуемой статьи, а значит должен быть как можно ближе к <body>. 
Вот и вся странность.

Подчеркну. Это не ошибка, а совет, рекомендация.

[podolspecpostach]

Добрый день. Прошу помочь мне с HTML 5 кодом для моего сайта. http://psp.co.ua/ - юридический услуги. прошу дать рекомендации по улучшению кода и стоимости Ваших услуг по исправлению кода. Заранее благодарен. Пишите на mail: psp01@ukr.net

[GulyaiVasko77]

Спасибо вам за поддержку.

[Zhezkazganetcs]

Старый, у меня в подписи сторойматериалы
как задать максимальную ширину сайта (допустим 1400px)?

[krilovsky68]

здравствуйте!
прошу помочь в следующем
(к сожалению я не специалист в этой отрасли, я адвокат. учусь чисто для себя)

есть сайт: http://advokats68.ru
я решил сделать микроразметку 

есть файл: http://www.advokats68.ru/theme/juridicheskie-uslugi1/template.php
в нем есть такая строчка:
<div class="content3"><?php get_component('block-header'); ?></div>
<div class="content2"><?php get_component('telephone-top-urist-uslugi'); ?></div>
это код который отображает текст в шапке - название коллегии и адрес.
аналогичная строчка есть в файле http://www.advokats68.ru/theme/juridicheskie-uslugi1/template-secondpadge.php

block-header и telephone-top-urist-uslugi это окошки в админ панели.

как я сделал:

файл: template.php
<div itemscope="" itemtype="http://schema.org/Organization">
<div class="content3">
<?php get_component('block-header'); ?>
</div>

<div class="content2">
<?php get_component('telephone-top-urist-uslugi'); ?>
</div>
</div>


текст в админпанели
block-header
<p><span itemprop="name">Тамбовская областная Коллегия адвокатов<br>«Юридическая фирма Приходько»</span></p>

telephone-top-urist-uslugi
<p><strong>Телефон:</strong><span itemprop="telephone"> +7 (4752) 72–93–92</span><br>
<strong>Факс:</strong><span itemprop="faxNumber"> +7 (4752) 72–40–84</span><br>
<strong>Электронная почта: </strong><span itemprop="email">prihodko_pravo@mail.ru</span><br>
<strong>Адрес:</strong> <span itemprop="postalCode">392000</span>, гор. <span itemprop="addressLocality">Тамбов</span>, ул. <span itemprop="streetAddress">Карла Маркса, дом 161, офис 25</span></p>

https://webmaster.yandex.ru/microtest.xml
выдает ошибку:
resource = http://advokats68.ru

organization
ПРЕДУПРЕЖДЕНИЕ: Не выполнено обязательное условие для структурированных сниппетов Яндекс.Справочника: поле address отсутствует или пусто
ПРЕДУПРЕЖДЕНИЕ: поле postalCode не определено в спецификации http://schema.org/Organization
ПРЕДУПРЕЖДЕНИЕ: поле addressLocality не определено в спецификации http://schema.org/Organization
ПРЕДУПРЕЖДЕНИЕ: поле streetAddress не определено в спецификации http://schema.org/Organization

    itemType = http://schema.org/Organization
    name = Тамбовская областная Коллегия адвокатов «Юридическая фирма Приходько»
    telephone = +7 (4752) 72–93–92
    faxnumber = +7 (4752) 72–40–84
    email = prihodko_pravo@mail.ru
    postalcode = 392000
    addresslocality = Тамбов
    streetaddress = Карла Маркса, дом 161, офис 25

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