27/32 Правильный ли такой вариант?

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

HTML

`

Испытание: строим сетку
Header
Menu
Promo 1
Promo 2
Left
Main
Right
Footer
`

CSS

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}

.header-container {
background: #34495e;
height: 160px;
padding-top: 10px;
margin: 0px 0px 10px 0px;
}

.header {
background: #c0392b;
height: 30px;
width: 345px;
margin: 0px auto 10px auto;
padding: 5px 0px 0px 5px;
}

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

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

.menu {
background: #3498DB;
height: 30px;
padding: 5px 0px 0px 10px;
margin: 0px 0px 10px 0px;
}

.promo-1 {
float: left;
background: #c0392b;
width: 165px;
margin-right: 10px;
height: 55px;
padding: 5px 0px 0px 5px;
}

.promo-2 {
float: left;
background: #c0392b;
width: 165px;
height: 55px;
padding: 5px 0px 0px 5px;
}

.l-sidebar {
background: #3498DB;
float: left;
width: 65px;
height: 105px;
padding: 5px 0px 0px 5px;
margin-right: 10px;
}

.content {
background: #3498DB;
float: left;
width: 185px;
height: 105px;
padding: 5px 0px 0px 5px;
margin-right: 10px;
}

.r-sidebar {
background: #3498DB;
float: left;
width: 65px;
height: 105px;
padding: 5px 0px 0px 5px;
}

.footer {
background: #34495e;
margin-top: 10px;
height: 30px;
padding: 5px 0px 0px 10px;
}``

2

В целом правильный, кроме фиксированной высоты у блоков. Надо заменить на min-height.
А над оптимизацией кода еще надо поработать. Много повторяющихся свойств у элементов.
Например, записей такого рода:

В качестве примера можете посмотреть этот вариант: 27/32: Как решить проблему выпадающего элемента в испытании?
Там конечно тоже есть ошибки, но чтобы понять принцип группировки свойств, он сгодится.

3

Спасибо большое, понял какие глупые ошибки имеются, но на счёт паддингов немного запутался.
А был ли бы вариант такой лучше, к примеру в конце:

.menu,
.header {
padding: 5px 0px 0px 5px;
}

4

Да, только в правило добавить все блоки, где используются такие отступы.
А еще красивее:
.menu,
.header {
padding: 5px;
}

5

Разумеется, спасибо большооооееее :slight_smile:

1 лайк