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

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

Буду премного благодарен за рекомендации по исправлению и улучшению кода

<body>
  <div class = "header">
        <div class = "positioner">
            <div class = "logo">Header</div>
        </div>
    <div class = "menu"> 
        <div class = "positioner">Menu</div>
    </div>
    <div class = "positioner">
        <div class = "promo promo1"> Promo 1 </div>
        <div class = "promo promo2"> Promo 2 </div>
    </div>
  </div>
  <div class = "content">
     <div class = "positioner">
        <div class = "left">Left</div>
        <div class = "main">Main</div>
        <div class = "right">Right</div>
     </div>
   </div>
    <div class = "footer">
        <div class = "positioner">Footer</div>
    </div>
</body>

.header {
padding-top: 10px;
width: 450px;
min-height: 160px;
background: #34495e;
margin-bottom: 10px;
}
.positioner {
width: 350px;
margin: 0 auto;
}
.positioner::after {
content: "";
display: table;
clear: both;
}
.logo { 
margin-bottom: 10px;
padding: 5px;
background: #c0392b;
width: 340px;
min-height: 25px;
}
.menu {
padding-top: 5px;
padding-left: 10px;
margin-bottom: 10px;
width: 440px;
background: #3498DB;
min-height: 30px;
}
.promo {
padding: 5px;
width: 160px;
min-height: 50px;
background: #c0392b;
}
.promo1 {
float: left;
}
.promo2 {
float: right;
}
.content {
width: 450px;
min-height: 110px;
}
.left {
padding: 5px;
background: #3498DB;
float: left;
width: 60px;
min-height: 100px;
}
.main {
padding: 5px;
background: #3498DB;
margin-left: 10px;
margin-right: 10px;
width: 180px;
min-height: 100px;
float: left;
}
.right {
padding: 5px;
background: #3498DB;
float: right;
width: 60px;
min-height: 100px;
}
.footer {
margin-top: 10px;
background: #34495e;
width: 440px;
min-height: 40px;
padding-left: 10px;
padding-top: 5px;
}
3

Исправил. Понял свою ошибку и добавил ширину в классе .content: без нее при обнулении ширины в классе body все прибивалось к левому краю страницы, а left, main и right уезжали в центр страницы. Может, есть еще какие-нибудь ошибки?

4

У Вас работает так:
27_false

Должно быть так:

27_true
27_true.png774×581 20.2 KB

…как раз это и было ошибкой.
Я блок с классом .content убрал бы вообще из HTML, но пока у него не было фиксированной ширины — он был просто лишним и не мешал.
Теперь же фрагмент кода:

     <div class = "positioner">
        <div class = "left">Left</div>
        <div class = "main">Main</div>
        <div class = "right">Right</div>
     </div>

перестал правильно работать.

Для этого и нужен .positioner.
“Уезжать в центр страницы” должно всё, а не прибиваться к левому краю…
Растягиваться по ширине окна должен только синий и голубой фон…

Не при обнулении!
Если у body, убрать или закомментировать width и height – значения этих свойств возвращаются к значениям по умолчанию — width:100%, height:100%.
Блок будет занимать всю ширину и высоту окна.

Вам нужно немного подразобраться с центровщиком, и с фиксированными размерами блоков. Часть ответов и решений проблем (если не торопиться) по-прежнему можно найти где-то здесь:

Помогите разобраться. Испытание: строим сетку [27/32]

1 лайк