Глава 4. Создание макета страницы и верстка

Сравнение CSS grid и Flexbox

Здравствуйте! В этой статье я решил провести сравнение двух популярных технологий для верстки сайтов CSS Grid и Flexbox. Ещё не так давно  макет для всех страниц HTML верстался с помощью таблиц, float и других свойств CSS, которые не очень хорошо подходят для стилизации сложных веб-страниц.

Затем появился Flexbox — режим вёрстки, который был специально разработан для создания надёжных адаптивных страниц. Flexbox упростил правильное выравнивание элементов и их содержимого и теперь является предпочтительной системой CSS для большинства веб-разработчиков.

Но теперь у нас есть новый претендент на титул за звание «лучшей системы для вёрстки макетов HTML» (название титула ещё в процессе разработки»). Это CSS Grid и в ближайшее время эта система будет доступна в браузерах Firefox 52 и Chrome 57, а вскоре, как я надеюсь, и в других браузерах.

Базовый макет

Чтобы понять, каково это — создавать макеты на каждой системе, мы сделаем одну и ту же HTML-страницу дважды — один раз с помощью Flexbox, а затем на CSS Grid. Вы можете скачать оба проекта отсюда.

grid vs flexbox

Уменьшенный макет веб-страницы

Дизайн довольно простой — он состоит из выровненного по центру контейнера, внутри которого у нас есть шапка, основной раздел, боковая панель и подвал. Вот главные «испытания», которые мы должны провести, сохраняя CSS и HTML по возможности чистыми:

  1. Разместить четыре основных раздела макета.
  2. Сделать страницу адаптивной (боковая панель опускается ниже основного содержимого на маленьких экранах).
  3. Выровнять содержимое шапки — навигация слева, кнопка справа.

Как вы можете видеть, ради сравнения мы оставили всё максимально простым. Начнём с первого испытания.

Читать далее

Многоколоночный текст на CSS

Здравствуйте! В этой статье я хочу рассказать о таком свойстве  CSS3 как возможность  разделять текст на колонки. Свойство это появилось недавно, поэтому его надо использовать с префиксом, хотя возможно в будущем можно будет использовать без префикса. Свойство — это column. Причем имеются следующие свойства:

  • column-count — количество колонок
  • column-gap — задает расстояние между колонками в многоколоночном тексте
  • column-width — задает ширину колонки
  • column-rule — задает цвет, толщину и стиль линии, разделяющей колонки.

многоколоночный текст на CSS

Читать далее

Верстка на flexbox.

Здравствуйте! Сегодня в продолжении темы верстки страницы я хотел бы рассказать о FlexBox.  Модуль Flexbox-верстки (flexible box — «гибкий блок», на данный момент W3C Candidate Recommendation) ставит задачу предложить более эффективный способ верстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и / или динамический (отсюда слово «гибкий»).
Главная задумка flex-верстки в наделении контейнера способностью изменять ширину / высоту (и порядок) своих элементов для лучшего заполнения пространства (в большинстве случаев — для поддержки всех видов дисплеев и размеров экранов). Flex-контейнер растягивает элементы для заполнения свободного места или сжимает их, чтобы предотвратить выход за границы.
Самое важное, flexbox-верстка не зависит от направления в отличие от обычных лейаутов (блоки, располагаются вертикально, и инлайн-элементы, расположенные горизонтально). В то время, как обычный лэйаута отлично подходит для веб-страниц, ему не хватает гибкости для поддержки крупных или сложных приложений (особенно когда дело доходит до изменения ориентации экрана, изменения размера, растяжения, сжатия и т.п.).

Верстка на flexbox

Читать далее

Фиксированное позиционирование

Здравствуйте! Продолжаем тему Позиционирование в CSS и сегодня рассмотрим фиксированное позиционирование. Фиксированное позиционирование является распространенным способом удержать в области просмотра браузера некоторые элементы. Достаточно часто на различных сайтах можно увидеть фиксированную панель навигации, которая не изменяет своего положения вне зависимости от прокрутки.

Для фиксированного позиционирования у элементов нужно установить значение fixed для свойства position. После этого с помощью стандартных свойств left, right, top и bottom можно определить конкретную позицию фиксированного элемента.

Фиксированное позиционирование

Читать далее

Позиционирование в CSS

Здравcтвуйте! Сегодня я хочу рассказать о таком полезном свойстве в CSS как позиционирование.  CSS предоставляет возможности по позиционированию элемента, то есть мы можем поместить элемент в определенное место на странице. Основным свойством, которые управляют позиционированием в CSS, является свойство position. Это свойство может принимать одно из следующих значений:

  • static: стандартное позиционирование элемента, значение по умолчанию
  • absolute: элемент позиционируется относительно границ элемента-контейнера, если у того свойство position не равно static
  • relative: элемент позиционируется относительно его позиции по умолчанию. Как правило, основная цель относительного позиционирования заключается не в том, чтобы переместить элемент, а в том, чтобы установить новую точку привязки для абсолютного позиционированния вложенных в него элементов
  • fixed: элемент позиционируется относительно окна бразуера, это позволяет создать фиксированные элементы, которые не меняют положения при прокрутке

Не следует одновременно применять к элементу свойство float и любой тип позиционирования, кроме static (то есть тип по умолчанию).

Позиционирование в CSS

Читать далее

Создание простейшего макета

Здравствуйте! В этой статье мы обобщим знания полученные из уроков Блочная верстка (2 колонки) и Блочная верстка (3 колонки) и создадим простейший макет страницы для сайта. Макет будет 3 колоночным с основным содержимым и 2 колонками по бокам.

Для начала определим базовую структуру веб-страницы:

Создание простейшего макета

Читать далее

Выравнивание плавающих элементов

Здравствуйте! Рассмотрим некоторые проблемы при создании макетов страниц с использованием свойства float. При работе с плавающими элементами и свойством float довольно часто можно столкнуться с проблемой выпадения из страницы плавающих элементов. У этой проблемы есть различные аспекты и их решения. Рассмотрим эти аспекты.

Выравнивание плавающих элементов

Читать далее

Создание меню на CSS

Здравствуйте! В этом уроке рассмотрим как создать меню на CSS. Меню или панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы.  Фактически панель навигации — это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент <a>. Поэтому при создании панели навигации мы можем столкнуться с рядом трудностей, которые вытекают из ограничений элемента ссылки. А именно, элемент <a> является строчным, а это значит, что мы не можем указать для него ширину, высоту, отступы. По ширине ссылка автоматически занимает то место, которое ей необходимо.

Создание меню для сайта

Читать далее

Свойство display

Здравствуйте! Кроме свойства float, которое позволяет изменять позицию элемента, в CSS есть еще одно важное свойство — display. Оно позволяет управлять блоком элемента и также влиять на его позиционирование относительно соседних элементов.

Это свойство может принимать следующие значения:

  • inline: элемент становится строчным, подобно словам в строке текста
  • block: элемент становится блочным, как параграф
  • inline-block: элемент располагается как строка текста
  • list-item: элемент позиционируется как элемент списка обычно с добавление маркера виде точки или порядкового номера
  • run-in: тип блока элемента зависит от окружающих элементов
  • flexbox: позволяет осуществлять гибкое позиционирование элментов
  • table, inline-table: позволяет расположить элементы в виде таблицы
  • none: элемент не виден и удален из разметки html

 

Читать далее

Как сделать колонки одинаковыми по высоте

Здравствуйте! В продолжении темы Блочная верстка на CSS рассмотрим такой распространенный случай, когда надо сделать так чтобы колонки были одной высоты. Рассмотрим проблему на примере:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная верстка в HTML5</title>
        <style>
            body, h2, p{
                margin:0;
                padding:0;
            }
            body{
                font-size: 18px;
            }
            #header{
                background-color: #eee;
                border-bottom: 1px solid #ccc;
                height: 80px;
            }
            #menu{
                background-color: #ddd;
                float: left;
                width: 150px;
            }
            #main{
                background-color: #f7f7f7;
                border-left: 1px solid #ccc;
                margin-left: 150px;
                padding: 10px;
            }
            #footer{
                border-top: 1px solid #ccc;
                background-color: #dedede;
            }
        </style>
    </head>
    <body>
        <div id="header"><h2>Сайт MySyte.com</h2></div>
        <div id="menu">
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">Блог</a></li>
                <li><a href="#">Контакты</a></li>
                <li><a href="#">О сайте</a></li>
            </ul>
        </div>
        <div id="main">
            <h2>What is Lorem Ipsum?</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
                has been the industry...</p>
        </div>
        <div id="footer">
            <p>Copyright © MySyte.com, 2016</p>
        </div>
    </body>
</html>

Просмотреть  пример

как сделать колонки одинаковыми по высоте

Читать далее

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: