Не валидный код, как лучше переделать

[Anna Zharova]

Всем привет. Ну вот кажется сверстала станицу и тут меня дернуло проверить страницу на валидность и валидатор загнал меня за 101 км.

Станица http://azharova.ru/test/afisha.html

Итак, ругается он в основном вот на этот блок http://prntscr.com/3qf09s. Он сквозной блок через весь сайт.

Посоветуйте как его лучше переверстать чтобы сохранить внешний вид.

 

Вот как она работает на боевом сайте http://ezhikezhik.ru/

 

P.S. Говорили мне не используй чужую верстку, вот вам пожалуйста...

Edited June 7, 2014 by Anna Zharova

[zenw]

Не обязательно инпуты и другие блоки оборачивать в label. Лучше замените label на div, а label привяжите к инпутам через for="input-id". То есть:

<label class="what">    <span>Что</span>    <div id="middle-search-app">        <input id="search-what-field" name="term" autocomplete="off" data-bind="value: term, valueUpdate: 'afterkeydown', attr:{placeholder: placeholder}" value="" placeholder="Куда пойти с ребёнком?" type="text">        <button class="search_button"></button>        <button data-bind="visible: term, click: clearSearch" style="display: none;" class="clear-search">×</button>        <div class="search-results" data-bind="visible: search" style="display: none" onclick="_gaq.push(['_trackEvent', 'Search_1', 'Click']); yaCounter16646506.reachGoal('SEARCH_1'); return true;">            <p data-bind="visible: showLoader" class="search-preloader" style="display: none"></p>            <p data-bind="visible: allResults, click:showAllResults" class="search-show-all" style="display: none">Показать все результаты для <span data-bind="text: term"></span></p>            <p data-bind="visible: noResults" class="search-no-results">По запросу <span data-bind="text: term"></span> ничего не найдено</p>            <ul data-bind="foreach: categories, visible: showCategories"></ul>        </div>        <div class="search-overlay"></div>    </div></label>

превращается в:

<div class="what">    <label for="search-what-field">Что</label>    <div id="middle-search-app">        <input id="search-what-field" name="term" autocomplete="off" data-bind="value: term, valueUpdate: 'afterkeydown', attr:{placeholder: placeholder}" value="" placeholder="Куда пойти с ребёнком?" type="text">        <button class="search_button"></button>        <button data-bind="visible: term, click: clearSearch" style="display: none;" class="clear-search">×</button>        <div class="search-results" data-bind="visible: search" style="display: none" onclick="_gaq.push(['_trackEvent', 'Search_1', 'Click']); yaCounter16646506.reachGoal('SEARCH_1'); return true;">            <p data-bind="visible: showLoader" class="search-preloader" style="display: none"></p>            <p data-bind="visible: allResults, click:showAllResults" class="search-show-all" style="display: none">Показать все результаты для <span data-bind="text: term"></span></p>            <p data-bind="visible: noResults" class="search-no-results">По запросу <span data-bind="text: term"></span> ничего не найдено</p>            <ul data-bind="foreach: categories, visible: showCategories"></ul>        </div>        <div class="search-overlay"></div>    </div></div>

Ну и CSS соответственно поправить придется.

[Anna Zharova]

Не обязательно инпуты и другие блоки оборачивать в label. Лучше замените label на div, а label привяжите к инпутам через for="input-id". То есть:

<label class="what">    <span>Что</span>    <div id="middle-search-app">        <input id="search-what-field" name="term" autocomplete="off" data-bind="value: term, valueUpdate: 'afterkeydown', attr:{placeholder: placeholder}" value="" placeholder="Куда пойти с ребёнком?" type="text">        <button class="search_button"></button>        <button data-bind="visible: term, click: clearSearch" style="display: none;" class="clear-search">×</button>        <div class="search-results" data-bind="visible: search" style="display: none" onclick="_gaq.push(['_trackEvent', 'Search_1', 'Click']); yaCounter16646506.reachGoal('SEARCH_1'); return true;">            <p data-bind="visible: showLoader" class="search-preloader" style="display: none"></p>            <p data-bind="visible: allResults, click:showAllResults" class="search-show-all" style="display: none">Показать все результаты для <span data-bind="text: term"></span></p>            <p data-bind="visible: noResults" class="search-no-results">По запросу <span data-bind="text: term"></span> ничего не найдено</p>            <ul data-bind="foreach: categories, visible: showCategories"></ul>        </div>        <div class="search-overlay"></div>    </div></label>

превращается в:

<div class="what">    <label for="search-what-field">Что</label>    <div id="middle-search-app">        <input id="search-what-field" name="term" autocomplete="off" data-bind="value: term, valueUpdate: 'afterkeydown', attr:{placeholder: placeholder}" value="" placeholder="Куда пойти с ребёнком?" type="text">        <button class="search_button"></button>        <button data-bind="visible: term, click: clearSearch" style="display: none;" class="clear-search">×</button>        <div class="search-results" data-bind="visible: search" style="display: none" onclick="_gaq.push(['_trackEvent', 'Search_1', 'Click']); yaCounter16646506.reachGoal('SEARCH_1'); return true;">            <p data-bind="visible: showLoader" class="search-preloader" style="display: none"></p>            <p data-bind="visible: allResults, click:showAllResults" class="search-show-all" style="display: none">Показать все результаты для <span data-bind="text: term"></span></p>            <p data-bind="visible: noResults" class="search-no-results">По запросу <span data-bind="text: term"></span> ничего не найдено</p>            <ul data-bind="foreach: categories, visible: showCategories"></ul>        </div>        <div class="search-overlay"></div>    </div></div>

Ну и CSS соответственно поправить придется.

Как раз валидатор и ругается на то что все запихнули в label. Спасибо за решение попробуем его и проверим

[vera17]

Анна, попробуйте добавить больше текста в блоки event-place, anons и увидите, что происходит с вёрсткой. 

Позиционирование с помощью relative и absolut не лучший способ

[Anna Zharova]

Анна, попробуйте добавить больше текста в блоки event-place, anons и увидите, что происходит с вёрсткой. 

Позиционирование с помощью relative и absolut не лучший способ

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

 

В данной теме речь идет только о красном блоке фильтров

Edited June 7, 2014 by Anna Zharova