Задание 27/32 95%

Курсы §15. Сетки
1

Не могу растянуть меню по всей ширине хедера. Подскажите, как это сделать? И как еще можно оптимизировать код?

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
    <div class="layout-positioner">
    <div class="layout red header">Header</div>
    <div class="layout blue menu">Menu</div>
    <div class="promos">
    <div class="layout red promo1">Promo 1</div>
    <div class="layout red promo2">Promo 2</div>
    </div>
    </div>
    </header>
    <main>
      <div class="layout-positioner">
    <div class="layout column blue left">Left</div>
    <div class="layout column blue main">Main</div>
    <div class="layout column blue right">Right</div>
      </div>
    </main>
    <footer>
      <div class="layout-positioner">
        <div class="layout footer">Footer</div>
      </div>
    </footer>
  </body>
</html>

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 450px;
  height: 335px;

  font-size: 10px;
  font-family: "Arial", sans-serif;
  color: white;
}

.red {
  background: #c0392b;
}

.blue {
  background: #3498db;
}

.layout-positioner {
  margin: 0 auto;
  width: 350px;
}

.layout-positioner::after {
  content: "";
  display: table;
  clear: both;
}

.layout {
  margin-bottom: 10px;
  padding: 5px;
}

header {
  margin-bottom: 10px;
  background: #34495e;
  padding-top: 10px;
}

.header {
  height: 25px;
}

.menu {
  height: 25px;
}

.promo1 {
  float: left;
  width: 160px;
  height: 50px;
}

.promo2 {
  float: right;
  width: 160px;
  height: 50px;
}

.column {
  margin-right: 10px;
  float: left;
  width: 60px;
  height: 100px;
}

.main {
  width: 180px;
}

.right {
  margin-right: 0;
}

footer {
  background: #34495e;
  height: 40px;
/*
  Используемые цвета:
  #34495e – мокрый асфальт
  #c0392b – красный
  #3498db – синий
*/
2

С помощью маргина и паддинга подогнал размер под необходимый, получилось что-то типа такого:

<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="layout-positioner">
        <div class="header-header">
          Header
        </div>
        <div class="header-menu">
          Menu
        </div>
        <div class="header-promo1">
          Promo 1
        </div>
        <div class="header-promo2">
          Promo 2
       </div>
     </div>
    </div>
    <div class="main">
      <div class="layout-positioner">
        <div class="main-right">
          Right
        </div>
        <div class="main-left">
          Left
        </div>
        <div class="main-main">
          Main
        </div>
      </div>
    </div>
    <div class="footer">
      Footer
    </div>
  </body>
</html>

html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}

.layout-positioner {
width: 370px;
margin: 0 auto;
}

.layout-positioner::after {
content: “”;
display: table;
clear: both;
}

.header {
background-color: #34495e;
min-height: 100px;
}

.header-header {
float: left;
width: 340px;
height: 25px;
background-color: #c0392b;
margin: 10px 0 5px 10px;
padding: 5px;
}

.header-menu {
float: left;
width: 390px;
height: 25px;
background-color: #3498db;
padding: 5px 5px 5px 55px;
margin: 5px 0 5px -40px;
}

.header-promo1 {
float: left;
background-color: #c0392b;
width: 160px;
height: 50px;
padding: 5px;
margin: 5px 0 5px 10px;
}

.header-promo2 {
float: right;
background-color: #c0392b;
width: 160px;
height: 50px;
padding: 5px;
margin: 5px 10px 10px 0;
}

.main-left {
float: left;
background-color: #3498db;
height: 100px;
width: 60px;
margin: 10px;
padding: 5px;
}

.main-main {
float: left;
background-color: #3498db;
height: 100px;
width: 180px;
margin: 10px 0 10px 0;
padding: 5px;
}

.main-right {
float: right;
background-color: #3498db;
height: 100px;
width: 60px;
margin: 10px;
padding: 5px;
}

.footer {
background-color: #34495e;
height: 40px;
padding: 5px 55px;
}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498db – синий
*/

Может можно сделать еще лучше?

3

конечно можно: вместо height использовать min-height (т.к. блоки должны тянуться по высоте за контентом), отцентрировать содержимое футера, использовать флоаты только для колонок, а не для всего подряд и перенести промо из шапки сайта в основное содержимое (хотя последнее - спорный момент)
ну и та часть с паддингами-маргинами, которая относится к меню, очень уж некрасивая - что вы будете делать, если ширина боди увеличиться хотя бы на 10px? опять все пересчитывать-переписывать?

1 лайк
4

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