Сетки / Испытание: строим сетку [27/32]

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

Help!!! https://jsfiddle.net/7t9agw5h/1/ Почему если в header не сделать float то margin двигает и header-top. Как вам стиль написания???

2

В целом задание выполнено плохо. Ваш центровщик ничего не центрует.

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

Если ширина центровщика такая же как у body, то какого размера будут автоматические отступы справа и слева?

Испытание на форуме разобрано много раз. Почитайте.


3

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

4

Здравствуйте. Я частично подсмотрел выполнение задания в видео на ютубе, но сделал все равно по своему. Там у него код короткий получился. А у меня что-то совсем каждый миллиметр пришлось подправлять.
Что тут не так по вашему? ))
html,
body {
margin: 0;
padding: 0;
}

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

  font-size: 10px;
  font-family: "Arial", sans-serif;
  color: white;
}
.clearfix {
  content: "";
  display: table;
  clear: both;
}
.layout-positioner {
  width: 370px;
  margin: auto;
}
.header {
  background: #34495e;
  height: 170px;
  
}
.header-block {
  background: #c0392b;
  height: 25px;
  margin: 10px;
  padding: 5px;
}
.menu-block {
  background: #3498db;
  margin-bottom: 10px;
  height: 30px;
  padding-left: 55px;
  padding-top: 5px;
}
.promo_1-block {
  background: #c0392b;
  float: left;
  margin-left: 10px;
  width: 160px;
  height: 50px;
  padding: 5px;
}
.promo_2-block {
  background: #c0392b;
  float: right;
  margin-right: 10px;
  width: 160px;
  height: 50px;
  padding: 5px;
}
.left-block {
  background: #3498db;
  float: left;
  width: 60px;
  height: 100px;
  margin: 10px;
  padding: 5px;
  
}
.main-block {
  background: #3498db;
  float: left;
  width: 180px;
  height: 100px;
  margin-top: 10px;
  padding: 5px;
  
}
.right-block {
  background: #3498db;
  float: right;
  width: 60px;
  height: 100px;
  margin: 10px;
  padding: 5px;
}
.footer-block {
  background: #34495e;
  padding-left: 55px;
  padding-top: 5px;
  height: 35px;
}

Код HTML:

<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 clearfix">
        <div class="header-block">Header</div>
      </div>
      <div class="menu-block">Menu</div>
        <div class="layout-positioner clearfix">
          <div class="promo_1-block">Promo 1</div>
          <div class="promo_2-block">Promo 2</div>
       </div>
    </div>
    
    <div class="content">
      <div class="layout-positioner clearfix">
        <div class="left-block">Left</div>
        <div class="main-block">Main</div>
        <div class="right-block">Right</div>
      </div>
    </div>
    
    <div class="footer">
      
      <div class="footer-block">Footer</div>
      </div>
    </div>
  </body>
</html>
6

Ссылку на видео на ютубе подскажите – интересно посмотреть…

Все height замените на min-height.
Меню и футер не центрируются.
Ширину центровщика лучше сделать 350px – уменьшится количество горизонтальных внешних отступов…

Подробнее в ссылках выше…

7

:slight_smile: Заменил на min-heigt, пока, конечно до конца не понял зачем это нужно. Ведь ничего не поменялось. Но, тут же вспоминаю, что в предыдущих уроках так и писали “min-height”.
С горизонтальными отступами сейчас тоже “поколдую”.
А ссылка на видео вот: Начинайте с 29:40 по таймингу смотреть.
Благодарю вас за советы.

8

min-heigt нужен для того, чтобы блоки растягивались по вертикали при наполнении контентом.

9

Да, спасибо, я прочитал после вашей поправки, для чего это необходимо. :slight_smile: