Простые одноколоночные макеты сайтов в CSS

В данном уроке мы будем практиковаться создавать простые одноколоночные макеты сайтов. Давайте, например, сделаем вот такой макет:

Приступим к реализации. Каждый макет как правило начинается с общего дива с названием wrapper, содержащего весь остальной сайт:

html<div id="wrapper">
  
</div>

В нашем случае враппер будет выровнен по центу экрана:

css#wrapper {
  width: 800px;
  margin: 50px auto;
}

Также он будет иметь границу:

css#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

Давайте теперь сделаем основную структуру страницы. Она будет состоять из меню и основного содержимого - контента:

html<div id="wrapper">
  <div id="menu">
    
  </div>
  <div id="content">
    
  </div>
</div>

Добавим содержимое наших блоков:

html<div id="wrapper">
  <div id="menu">
    <a href="#">link text 1</a>
    <a href="#" class="active">link text 2</a>
    <a href="#">link text 3</a>
    <a href="#">link text 4</a>
    <a href="#">link text 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

Теперь можно добавить стили нашим блокам. Давайте добавим стиль менюшке:

css#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}
#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
  color: #484848;
  background-color: #fff;
}

А теперь добавим стили элементам контента:

css#content {
  padding: 0 30px 20px;
}
#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

Можем теперь собрать весь код вместе:

html<div id="wrapper">
  <div id="menu">
    <a href="#">link text 1</a>
    <a href="#" class="active">link text 2</a>
    <a href="#">link text 3</a>
    <a href="#">link text 4</a>
    <a href="#">link text 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

css#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}
#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
  color: #484848;
  background-color: #fff;
}

#content {
  padding: 0 30px 20px;
}
#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

Совет 1

Удобнее всего давать отступы сверху вниз. К примеру, у нас есть менюшка и контент, а между ними - пустое пространство. Очевидно, что это пространство может быть сделано нижним отступом менюшки, верхним отступом контента, или их одновременным влиянием. В этом случае лучше задать нижний отступ менюшке, а контенту убрать верхний padding и margin по умолчанию для h1.

Совет 2

Потомки не должны формировать отступ между родителями. Например, у нас есть менюшка. Нижний отступ этой менюшки можно сформировать либо margin дива с меню, либо margin ссылок. Лучше выбрать первый вариант, так как ссылки не должны действовать через голову родителя.

Совет 3

Пусть между двумя элементами есть отступ и в данном случае визуально нет разницы, что выбрать для отступа - margin или padding. В этом случае выбирайте margin, так как именно он должен создавать отступы между элементами.

Практические задания