alanreid

Скорее всего, проблему можно решить при помощи свойства float или direction (приминительно к inline-block элементу). Но нужно будет постараться.

На самом деле, здесь достаточно свойства vertical-align: top. https://jsfiddle.net/vct0uhqp/12/

Кстати говоря, код проекта (например, данного) можно загрузить на хост github.io (то есть, точно также, как и проект пользователя, доступного по адресу username.github.io). Для этого нужно в пункте “GitHub Pages” настроек проекта указать источник (source) кода (master branch, в текущем случае). Подробнее на сайте GitHub.io во вкладке “Project site”.

Ведь суть в том, чтобы поместить все в центрирующий контейнер, общий для всех секций. Он может быть резиновым с ограничением по max-width или фиксированной ширины. Я больше сомневался в том, что фон удастся вытолкнуть за контейнер, таким же образом, как и картинку. Да и проблема с размещением самого изображения тоже наводила на сомнения. Но все-таки, как оказалось, эти сложности можно обойти. Мой пример: Использую все те же псевдо-элементы, но высчитал их ширину (хотя все-равно приходится прятать переполнение (используя overflow: hidden), так как viewport units, в частности, vw не учитывает полосу вертикальной прокрутки. Для блоков со сплошным фоном это мало чего меняет внешне, зато, отлично подходит для элементов с изображением на фоне. https://codepen.io/alanreid/pen/yPEvrG Просмотрел архив: Семантика. Отсутствуют элементы section, article, main в надлежащих местах. Иконки - это декоративный элемент (то есть, не картинка, а фон) и лучше их все объединить в один спрайт. В секции видео-рецепты пропущен отступ под иконкой. Фон для статьи в последней строке можно вытолкнуть за контейнер, вместо абсолютного выравнивания (см. на блок features__img-imitation в моем примере выше). Советую сетку поменять. Из блоков контент вываливается, так как она на флоатах. Много классов. Используется content-box, в чем я преимуществ не вижу (то есть в расчет ширины блока входит внутренний отступ (padding) в процентах). Лучше свою написать, тем более для тренировки. Другой способ: Как вариант, можно использовать функцию calc() и рассчитать правый и левый отступы контейнера и с их помощью растягивать фон для нужных блоков. Правда, есть несколько минусов, но может у кого появятся идеи, как от них избавиться. Посмотреть можно в моем Github профиле.

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

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

Таблицы оцениваются семантически, только когда в разметке (в html) прописаны. А в стилях (в css) их использовать можно повсеместно.

Понял. Если какие-либо вопросы появятся — пиши в facebook. Здесь, оказывается, количество личных сообщений ограничено.

Загрузил код на Github и на Codepen на выбор. С удовольствием посмотрел бы на полный шаблон.

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 схеме. И т.д.

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

https://www.campaignmonitor.com/dev-resources/

Как вариант использовать свойство "background-image" в паре с "background-attachment: fixed" для нужных элементов. При данном значении свойства "background-attachment" "background-image" будет выравниваться относительно всего окна браузера, что позволит путем смещения элементов перекрыть border родителя.

Вариант с использованием свойства display со значением table: https://colintoh.com/blog/display-table-anti-hero#dynamic-horizontal Другие варианты: https://frontender.info/centering-css-complete-guide/