Tilonorrinco

Totalist, не работает потому, что код сокрытия адресов, который вы представили по ссылке, выполняется тогда, когда документ полностью загружен (событие onload). А обработчики, которые вы написали сами, присваиваются по ходу анализа html кода, т.е. до полной загрузки документа. Другими словами, сначала в свойство onclick ссылок записываются ваши обработчики, а потом эти обработчики перезаписываются скриптом wwt по ссылке. Исправить это просто. Вот возможные решения: 1) исправить скрипты так, чтобы они не пересекались (брать не все ссылки, а только определенную ее часть) 2) перезаписать свойства в правильном порядке (т.е. сначала выполнить скрипт сокрытия урл в строке браузера, а потом повесить ваши обработчики). Все это надо сделать внутри обработчика onload. 3) добавить в цикл условие, которое смотрит на тип ссылки (якорь/не якорь) и, в зависимости от этого, присваивает обработчик. http://jsbin.com/nuguziv/edit?js,output

Часть кода, которую вы скопировали, использует библиотеку jQuery, которую вы не подключили. Подключите библиотеку и все заработает. (нажмите кнопку run with js, чтобы активизировать скрипты) http://jsbin.com/fesujur/edit?html,js,output

Не совсем понял: почему нельзя сделать span блочным? По-моему, это самое очевидное решение (можно еще вместо span использовать блочные элементы типа p): http://jsbin.com/bebonaq/edit?html,css,js,output

http://jsbin.com/wuresob/edit?output (кликните по кнопке run with js, чтобы динамически изменять количество картинок)

https://jsfiddle.net/nrhx8sqc/1/

seemax, 1) в HTML5 в тэгах link, script, атрибут type необязателен 2) Дублируются заголовки в главной карточке товара 3) <span class="red"> -- плохое название класса, т.к. описывает внешний вид, а не сущность. Лучше <span class="sale"> или что-то в этом духе 4) нет необходимости прописывать элементу button атрибут form, т.к. эта кнопка и так уже располагается внутри формы. 5) я бы написал текст в ссылках на социальных кнопках (потом можно скрыть Indent'ом, или просто прописав font-size) 6) Дублируются изображения в галерее 7) Зачем нужен пустой footer в разметке? По-мелочи: 1) тяжело ориентироваться по стилям: - используется несколько нотаций: snake case (.to_list), kebab case (.l-out). Нужно придерживаться одной нотации - стили не информативны (можно ли сказать, не глядя в разметку, за что отвечает класс .like?) - не всегда сущности делятся корректно: тот же самый заголовок с классом like относится к галерее (т.к. это заголовок галереи). Однако в разметке галерея и ее заголовок -- это две равноправных сущности. Обратите внимание на БЭМ, сразу решите все эти проблемы. 2) в стилях элемент классу лучше не прописывать тэг (вместо ul.social лучше просто .social) То, что вы верстаете, будет использовано как шаблон, в который добавят отправленные сервером данные. А уж как они будут добавляться и куда -- решает не верстальщик. В любом случае, переписать разметку под конкретное решение не так сложно. Мне кажется так. Аналогичным образом, прописывать артикул товара в id формы -- лишнее. В форму я бы добавил только инпуты с выбором размера и кнопку. Если нужно поддерживать старые браузеры, то либо делается graceful-degradation (т.е. тени, например, просто не отображаются), либо эффекты эмулируются костыльным образом (типа вставки картинок с тенями вместо css-теней). Верстать под IE8 (Windows XP) это перебор, имхо, но заказчику виднее. Я никогда под него не верстал. В IE11 у вас кидает синтаксическую ошибку в консоль, там, где назначаете обработчики (пс вместо того, чтобы задавать обработчики через итерацию в массиве на каждую картинку в галерее, можно применить делегирование).

seemax, у вас очень необычная реализация адаптивности. Дублирование элементов и их отображение/сокрытие на разных ширинах (картинки в галерее, заголовок в первом блоке дублируется 2 раза!) -- это костыль. Если есть возможность так не делать -- лучше так не делать. Обычно без проблем удается перестроить макет через свойства order, либо через абсолютное позиционирование, либо через js (от лучшего к худшему). Макет должен складываться и раскладываться, как оригами. Ваш макет довольно непростой для верстки, т.к. сетка перестраивается слишком сильно, дочерние элементы выходят за пределы родителя и т.п. Но даже в таком макете часть большую часть задач можно решить без дублирования, через свойства order и position:absolute. В идеале, единственный элемент, который в главном блоке может скрываться -- это ссылка на социальные иконки (скрывается в мобильной и планшетной версии). Вот пример верстки сетки первого блока (большой карточки с товаром): http://jsbin.com/gojeyex/edit?css,output Про остальное напишу завтра.

Хорист, из всех возможных вариантов сверстать этот блок вы выбрали почти самый плохой Хуже только абсолютное позиционирование. Решение, которое вы выбрали плохое, потому что: 1) не семантичное: данные, которые вы размечаете не являются табличными 2) смешивается структура и оформление 3) создаются лишние элементы в разметке (куча ненужных оберток, пустой столбец, который нужен лишь для создания отступа) Конечно, при желании можно заменить табличные тэги на дивы, прописать им display:table/table-cell etc, чтобы нивелировать эти минусы, но зачем это делать, когда есть стандартные решения? (float, flexbox, inline-block). Ваше решение является нормальным в двух случаях: 1) на дворе -- начало нулевых и все строят сетки на таблицах 2) вы верстаете html-письма (тут, я, правда, не совсем уверен, никогда их не верстал)

Хорист, Вы меня неправильно поняли. "Исправил быдлокод" -- это комментарий к моему отредактированному сообщению (причина редактирования). Тот код, который я выложил в песочницу изначально был недостаточно хорош, я исправил его и в сообщении указал новую ссылку. Надеюсь, никто не увидел первую версию

http://jsbin.com/wiriwi/edit?html,css,output

Super_Saimon, Ваша функция ничего не возвращает (не прописали return). Поэтому ее значение после вывода -- undefined. PS Упс, уже ответили

AlexZaw, Просто тот узел main, на который ссылается переменная, продолжает существовать, хоть и извлекается из DOM-дерева. Cборщик мусора не удаляет этот элемент, т.к. на него ссылается переменная. Именно этот элемент и дополняется текстовым узлом ('hello'). Поэтому в консоли выводится содержимое старого main'a. А если вы после изменения body заново инициализируете эту переменную (или создадите новую переменную), то в консоли выведется уже пустой main, а старый main будет удален окончательно.

Дело, как мне кажется в том, что main изменяется уже после того, как DOM-дерево перестроено. Попробуйте переместить строку с инициализацией переменной main уже после изменения innerHTML у body, и все заработает. Мне кажется, это работает как-то так: 1) перед выполнением скрипта анализируется html-код и строится объектная модель документа (ДОМ) 2) вы инициализируете несколько переменных, они ассоциируются с конкретными элементами DOM дерева. 3) вы изменяете содержимое первого элемента(body) и полностью перестраиваете его html. DOM-дерево рендерится заново. Так как дерево заново перерисовалось, ссылка на вторую переменную уже не актуальна: она ссылается на элемент из старого дерева. Именно он и изменяется через innerHTML, а новый узел дерева остается нетронутым.

<menu> это семантический эквивалент неупорядоченного (маркированного) списка (с очень специфической областью применения). Поэтому по-умолчанию в браузерах для него заданы margin сверху и снизу и padding-left. Эти свойства и нужно обнулить.

Проблема на сайте возникает потому, что при маленькой ширине экрана контент в ячейках элементарно не влазит в таблицу (ширина которой прописана в 100% от ширины окна) и вываливается. Обратите внимание на слов "противовоспалительный", например. Здесь есть два варианта решения: 1) самый примитивный -- в html прописать длинным словам символы мягкого переноса (<wbr> или &shy;). Ширина колонок таблицы ужмется под содержание, правда выглядеть эту будет ужасно. 2) оптимальный способ -- пропишите главной обертке (body) минимальную ширину, на которой контент не вываливается, например вот так: body { min-width: 500px; }

Самое простое решение, которое приходит на ум: изображения которые накладываются на блок с box-shadow. При ховере иконка заменяется на другую. В случае с элементами, созданными через css (например, треугольниками), можно также использовать фильтр.

seemax, просто это лишний оформительский элемент в разметке. Традиционно разделяют логику+контент(html), представление (css), поведение (js). В данном случае пустой div это элемент оформления, а не содержания/логики. Поэтому все подобные элементы (блоки-распорки, иконки у пунктов меню и т.п.) обычно выносят в css -- в псевдоэлемент (сейчас это можно сделать практически везде, за редким исключением). Обычно создается специальный класс clearfix и вешается на элемент, содержащий плавающие блоки, либо просто вставляется через миксин в препроцессоре.

По верстке: 1) шесть ошибок валидации html: https://validator.w3.org/nu/?showsource=yes&doc=http%3A%2F%2Fmagneto.skepton.ru%2F 2) wrapper'у прописана только максимальная ширина, в то время как шапке -- минимальная в 320 пикселей. На ширинах меньше 320 пикселей пропорции блоков нарушатся 3) логотип -- элемент содержания, а не оформления, поэтому вместо фонового изображения лучше использовать img. Скрытый text-indent'ом текст лучше прописать картинке в alt. 4) куда пропадает ссылка на гитхаб при разрешении меньше 550пх и почему? 5) часть атрибутов у элементов слайдера выглядит странно: <li class>, <form action> 6) элементы слайдера сделаны в виде изображений: как минимум ссылки должны быть сделаны ссылками 7) в датапикере -- внутри кнопки скрываемый текст. Достаточно, имхо, кнопке прописать атрибут title с этим текстом. Псевдоэлементы, формирующие стрелку (если в них есть потребность), можно повесить на этот button, и span'ы в разметке не понадобятся. Лейблы привязываются к инпутам через id, а не через name. 8) клирфикс использует псевдоэлемент, а не пустой див в разметке (так делали раньше, когда верстали для старых браузеров, которые псевдоэлементы не поддерживали) 9) тэгам header, main, footer нужно прописывать класс, т.к. их может быть несколько на странице.

seemax, некорректно -- это когда я вам вместо вопроса, который вы задали (насколько правильным является решение, которое я принял, верстая шапку сайта?), отвечаю на совсем другой, не заданный вопрос (насколько хороша моя верстка?). Есть конечно вариант ответить на два вопроса одновременно, однако в таком случае существует риск того, что вам и не нужен анализ верстки и работа по разбору будет проделана зря. Поэтому я и написал "с недосказанностью" -- не из вредности, а чтобы вы обозначили свою позицию по второму вопросу Даже в том случае, если посадка шаблона на cms не планируется, предполагается, что сайт, для которого шаблон верстается, будет жить: будут изменяться, корректироваться тексты, исчезать и появляться пункты меню и т.п. Поэтому и при верстке учитываются эти минимальные изменения -- это один из признаков хорошей верстки: при изменении контентного содержания сетка не должна разваливаться, а само это содержание должно быть доступно. Флоат вырвет элемент из потока только для блочных элементов и только в том случае, если им не сообщить об этом через свойство clear. Поэтому флоаты -- более безопасное решение, по сравнению с абсолютным позиционированием.

Критика полностью заслужена. Кстати, это не единственный минус вашей верстки. Про позиционирование: меню -- контентный элемент, т.е. его содержимое может увеличиваться (например, могут добавляться новые пункты меню). Т.к. абсолютное позиционирование вырывает элемент из потока, то другие блоки (блок родителя в первую очередь) не смогут увидеть увеличения его высоты. Конкретно в вашем примере: при добавлении пунктов меню нарушится симметрия, а потом текст "выпадет" из родительского блока. Абсолютное позиционирование используется для размещения неконтентных элементов (иконок, декоративных треугольников и т.п.). В качестве исключения его можно использовать для контентных элементов, если вы точно уверены, что они не будут изменять своих размеров и другими способами решить задачу нельзя. Например, если нужно эмулировать свойство order для старых браузеров, которые не поддерживают флексы.

Super_Saimon, 1. В разметке выше -- очень плохой БЭМ. БЭМ-дерево -- двухуровневое: не бывает элементов у элементов (block__elem1__elem2 -- так писать нельзя). span и a в коде также являются элементами, а значит их класс должен содержать имя блока (если здесь, конечно, не используется миксование). 2. Может быть, проблема в том, что в Хроме по-умолчанию тэгу body прописан margin: 8px. Вы действительно обнулили все стили? В приведенном выше коде margin у body не обнулен 3. Простой способ вертикальной и горизонтальной центровки абсолютно позиционированного элемента с жестко заданной высотой и шириной. Мне сложно говорить про реальную верстку, но я всегда подгоняю макет попиксельно, в т.ч. резиновые макеты. Полного соответствия добиться очень сложно из-за различий в рендеринге шрифтов различными браузерами, но этого и не нужно. Мне кажется, расхождения на 3-5 пикселей достаточно. Если эти различия -- по-вертикали, то, скорее всего, неправильно расчитываются отступы (не учитывается высота строки). Если различия -- по-горизонтали, то, вероятнее всего, дело в рендеринге шрифтов (текст получается чуть шире/уже). Нет ничего плохого в том, чтобы сначала сделать на глазок (без сложных подсчетов, достаточно инструмента "прямоугольное выделение"), а потом подогнать под макет через pixel perfect.

border'ом не получится, там процентами ширину рамки не задашь, поэтому самый простой способ -- через картинку и псевдоэлемент/фон. Я бы сделал псевдоэлементом, так проще управлять шириной изображения. http://jsbin.com/yeporafulu/edit?html,css,output

Почему-то вспомнилась серия роликов "Джедай верстки" с канала webdesignmaster. Стиль верстки чем-то похож. Вот что привлекло внимание: 1) Путаница с методологией именования классов. Где-то БЭМ (ссылки в меню), где-то без БЭМа. Нужно выбрать какую-то одну методологию и придерживаться только ее 2) Смешивается оформление и содержание. html код можно сократить в несколько раз: - Для декоративной линии под заголовком не нужно делать отдельный div в разметке. - Пять вложенных элементов в разметке для стилизации декоративной иконки с якорем -- это перебор. - Декоративные линии с красной точкой посередине под заголовком, которые верстаются как div с тремя span'ами, один из которых содержит инлайн-svg (красную точку) -- это слишком сложно. - Декоративные треугольники через svg -- это слишком сложно. Размещение неконтентного декоративного элемента (красный треугольник в блоге) по вертикальному центру через align-self + position:absolute -- это весьма необычное сочетание, которое, вдобавок, не работает в IE11. Достаточно абсолютного позиционирования и одного псевдоэлемента (треугольники делаются через border). 3) В IE11 появляется горизонтальный скролл из-за svg-элемента в разделе team, который растягивает контейнер в ширину. Нужно что-нибудь типа oveflow:hidden на родительском элементе. 4) На ширине 992 пикселя контейнер выходит за пределы блока-родителя (section) в результате чего образуется уродливая белая полоса справа.

grovskiy, Семантика дает большой простор для вкусовщины, имхо. Уж слишком все субъективно. Вот что бы я исправил: 1. тэги <header>, <footer> -- обязательно прописать класс, т.к. их может быть несколько на странице 2. слово "Доставка" в шапке сайта -- не <strong> (нет здесь смыслового выделения), а <b> или <span> 3. Слоган сайта в h1? Я бы не делал его заголовком, но тут кому как нравится 4. подвал: зачем список? Если в режиме работы он еще более-менее подходит, то для этого блока: присылайте резюме info@ggpa.ru список вообще никак не подходит.

Hasiev, 1. Одна и та же ошибка повторяется по всех трех ваших макетах: при уменьшении экрана пропорции макета нарушаются. Попробуйте уменьшить размер окна и обратите внимание на то, что творится с сеткой. В этом макете нужно будет поработать с параметрами width у блоков. Не понятно зачем блоку container задано свойство max-width в 990px, в то время как gallery-row задано свойство min-width в 1014px, зачем? Хедеру с градиентом надо будет задать минимальную ширину, т.к. при уменьшении экрана ширина этого блока, а значит и фонового изображения будет равняться ширине экрана браузера. 2. Оранжевая звездочка на фотографиях -- это не декоративный элемент, а элемент управления (по-моему, это кнопка "добавить в избранное"), поэтому лучше сделать ее ссылкой, а не псевдоэлементом 3. Иконки социальных сетей вы хорошо сделали (я о невидимом тексте), но работу нужно довести до конца и прописать картинкам alt (логотип, изображения в галерее).