Tilonorrinco

Пользователь
  • Публикации

    37
  • Зарегистрирован

  • Посещение

  • Дней в лидерах

    5

Последний раз Tilonorrinco выиграл 18 октября

Публикации Tilonorrinco были самыми популярными!

Репутация

14 Положительная

О Tilonorrinco

  • Звание
    Участник

Информация

  • Пол
    мужской
  1. Кнопка выключить свет

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

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

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

    https://jsfiddle.net/nrhx8sqc/1/
  5. Работа получить работу

    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 у вас кидает синтаксическую ошибку в консоль, там, где назначаете обработчики (пс вместо того, чтобы задавать обработчики через итерацию в массиве на каждую картинку в галерее, можно применить делегирование).
  6. Работа получить работу

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

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

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

    http://jsbin.com/wiriwi/edit?html,css,output
  10. Вызов функции в другой функции.

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

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

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

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

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

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