alanreid

Новенький
  • Публикации

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

  • Посещение

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

    1

Последний раз alanreid выиграл 2 ноября 2017

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

Репутация

2 Обычная

О alanreid

  • Звание
    Новичок

Контактная информация

  • Web site
    https://codepen.io/alanreid/ https://github.com/alanreidt/

Информация

  • Пол
    мужской
  • Откуда
    Москва
  • Интересы
    Web development

Посетители профиля

412 просмотра профиля
  1. alanreid

    Адаптивный текст на кнопке

    На самом деле, здесь достаточно свойства vertical-align: top. https://jsfiddle.net/vct0uhqp/12/
  2. Кстати говоря, код проекта (например, данного) можно загрузить на хост github.io (то есть, точно также, как и проект пользователя, доступного по адресу username.github.io). Для этого нужно в пункте “GitHub Pages” настроек проекта указать источник (source) кода (master branch, в текущем случае). Подробнее на сайте GitHub.io во вкладке “Project site”.
  3. Ведь суть в том, чтобы поместить все в центрирующий контейнер, общий для всех секций. Он может быть резиновым с ограничением по max-width или фиксированной ширины. Я больше сомневался в том, что фон удастся вытолкнуть за контейнер, таким же образом, как и картинку. Да и проблема с размещением самого изображения тоже наводила на сомнения. Но все-таки, как оказалось, эти сложности можно обойти. Мой пример: Использую все те же псевдо-элементы, но высчитал их ширину (хотя все-равно приходится прятать переполнение (используя overflow: hidden), так как viewport units, в частности, vw не учитывает полосу вертикальной прокрутки. Для блоков со сплошным фоном это мало чего меняет внешне, зато, отлично подходит для элементов с изображением на фоне. https://codepen.io/alanreid/pen/yPEvrG Просмотрел архив: Семантика. Отсутствуют элементы section, article, main в надлежащих местах. Иконки - это декоративный элемент (то есть, не картинка, а фон) и лучше их все объединить в один спрайт. В секции видео-рецепты пропущен отступ под иконкой. Фон для статьи в последней строке можно вытолкнуть за контейнер, вместо абсолютного выравнивания (см. на блок features__img-imitation в моем примере выше). Советую сетку поменять. Из блоков контент вываливается, так как она на флоатах. Много классов. Используется content-box, в чем я преимуществ не вижу (то есть в расчет ширины блока входит внутренний отступ (padding) в процентах). Лучше свою написать, тем более для тренировки. Другой способ: Как вариант, можно использовать функцию calc() и рассчитать правый и левый отступы контейнера и с их помощью растягивать фон для нужных блоков. Правда, есть несколько минусов, но может у кого появятся идеи, как от них избавиться. Посмотреть можно в моем Github профиле.
  4. alanreid

    Абсолютное позиционирование шапки сайта

    Применяется в зависимости от задач. Например, на сайте PayPal абсолютное позиционированние делает возможным эффект, возникающий при наведении на один из выпадающих пунктов шапки (появление фона из верхней части экрана). Абсолютное позиционированние здесь не требуется.
  5. Правило height: 100%; так не работает. Картинку, выравненную таким образом, будет сложно расположить, как требуется. Тем более, для данной ситуации лучше всего подходит фон (изображение выполняет декоративную функцию). При помощи функции calc() и при известной ширине контейнера можно рассчитать точное значение отступов контейнера, либо требуемую ширину картинки и ::before элемента. Но, не думаю, что использование псевдоэлементов является хорошим решением.
  6. alanreid

    Как растянуть блоки по высоте строки

    Таблицы оцениваются семантически, только когда в разметке (в html) прописаны. А в стилях (в css) их использовать можно повсеместно.
  7. Понял. Если какие-либо вопросы появятся — пиши в facebook. Здесь, оказывается, количество личных сообщений ограничено.
  8. Загрузил код на Github и на Codepen на выбор. С удовольствием посмотрел бы на полный шаблон.
  9. alanreid

    Оцените верстку

    1. Двум потомкам блока main-slider задан правый и левый margin (по одному на каждый), вместо свойства padding по сторонам для родителя. 2. Слишком много container блоков. Для данной задачи достаточно одного для footer элемента и другого для остальных. 3. Слишком мало контрольных точек для media выражений. Не хватает внутренних отступов (padding) секциям - это заментно, когда ширина экрана равна ширине container элемента (960px, примерно, с учетом вертикальной полосы прокрутки). Так как ширина элементов в одном ряду задана в абсолютных единицах, а не в процентах, то виден зазор справа в блоке facilities и footer. Также, сетка в этих блоках ломается при ширине в 918px. В добавок, элементы этих блоков и блока services выстраиваются в столбец, в то время как вокруг них полно места. При ширине в 697px, навигация уходит под logo. 4. По семантике тоже есть пара недочетов. Блоки block_facilities, block_services, footer_block, по хорошему, section элементы, а не div. Что прослеживается по outline схеме. И т.д.
  10. alanreid

    Какую спецификацию html стоит читать на данный момент ?

    Читать нужно самую последнюю опубликованную версию, на данный момент это HTML 5.1 2nd Edition (2017-10-03). У WHATWG спецификация находится в состоянии Living Standard, то есть версия документа одна и она находится в постоянной доработке. Спецификации от W3C и от WHATWG имеют различия в некоторых местах. Например, тэг hgroup является устаревшим по версии W3C.
  11. alanreid

    alanreid