Оцените код [27/32] Результат 100%

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

Я немного по другому подошел к решению задачи. Результат 100%. Хотелось бы узнать про минусы и плюсы такого подхода.

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

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

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

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

.layout-positioner {
width: 350px;
margin: 0 auto;
/border: 1px dashed #3498db;/
}

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

.headerrow {
margin-bottom: 10px;
padding-top: 10px;
background-color: #34495e;
}

.headerrow .layout-column {
margin-bottom: 10px;
}

.layout-positioner:nth-child(2) {
width: 450px;
margin: 0 auto;
/border: 1px dashed #3498db;/
}

.layout-header-column {
width: 350px;
min-height: 35px;
background-color: #c0392b;
}

.layout-menu-column {
min-height: 35px;
background-color: #3498db;
}

.layout-promo1-column {
float: left;
background-color: #c0392b;
width: 170px;
min-height: 60px;
}

.layout-promo2-column {
float: right;
width: 170px;
min-height: 60px;
background-color: #c0392b;
}

.main-content-row {
margin-bottom: 10px;
}

.main-content-row .layout-column-side {
float: left;
width: 70px;
min-height: 110px;
margin-right: 10px;
background-color: #3498db;
}

.main-content-row .layout-column {
float: left;
width: 190px;
min-height: 110px;
margin-right: 10px;
background-color: #3498db;
}

.main-content-row .layout-column-side:last-child {
margin-right: 0px;
}

.footer-row {
min-height: 50px;
background-color: #34495e;
}

/*
Стили содержания
*/

.header-content {
padding-top: 5px;
padding-left: 5px;
}

.menu-content {
padding-top: 5px;
padding-left: 55px;
}

.promo-content {
padding-top: 5px;
padding-left: 5px;
}

.main-content {
padding-top: 5px;
padding-left: 5px;
}

.footer-content {
padding-top: 5px;
padding-left: 5px;
}

3

Меню центрируется не верно.
Отступы для контента внутри блоков не равномерные…

На мой взгляд можно было обойтись меньшим количеством кода и в HTML и в CSS,
и меньшим количеством классов…

1 лайк
4

А можно прям пальцем показать на ваши замечания? Не совсем понял где именно ошибка.

5

Например, эти два правила (а, их у Вас больше):

.main-content {
padding-top: 5px;
padding-left: 5px;
}

.footer-content {
padding-top: 5px;
padding-left: 5px;
}

лучше записать короче:

.main-content, .footer-content  {
padding: 5px 0 0 5px;
}

И отступы по 5 пикселей для контента сверху и слева логичнее в данном случае сделать одинаковыми (или симметричными) со всех сторон…

.main-content, .footer-content  {
padding: 5px;
}
Для меню Вы изменили свойства центровщика: 
.layout-positioner:nth-child(2) {
    width: 450px;
    margin: 0 auto;
    /*border: 1px dashed #3498db;*/
}

Меню центрируется, но ширина остальных блоков 350px, а у меню 450px.
Вам пришлось изменить левый отступ меню, чтобы подогнать под остальные блоки:

.menu-content {
    padding-top: 5px;
    padding-left: 55px;
}

Сделайте меню так, как Вы сделали футер…

Относительно количества кода и классов... лучше сравнить с другими вариантами решения:
Один из многих...
HTML 
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css.css">
        <title>Испытание: строим сетку</title>
        <link rel="stylesheet" href="style.css">
    </head>
<body>
    <div class="container">
        <div class="layout-positioner">
            <div class="header">Header</div>
        </div>
        <div class="menu-wrapper">
            <div class="layout-positioner">
                <div class="menu">Menu</div>
            </div>
        </div>
        <div class="layout-positioner">
            <div class="promo-1">Promo 1</div>
            <div class="promo-2">Promo 2</div>
        </div>
    </div>
    <div class="layout-positioner">
        <div class="column-left">Left</div>
        <div class="column-main">Main</div>
        <div class="column-right">Right</div>
    </div>
    <div class="footer-wrapper">
        <div class="layout-positioner">
             <div class="footer">Footer</div>
        </div>
    </div>
    </body>
</html>
CSS 
html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 450px;    /* постовить своё значиние. либо исключить из правила*/
    heght: 335px;   /* постовить своё значиние. либо исключить из правила*/
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
}

.layout-positioner {
    width: 350px;
    margin: 0 auto;
}
.layout-positioner::after {
    display: table;
    content: "";
    clear: both;
}

.container {
    margin-bottom: 10px;
    padding: 10px 0;
    background: #34495e; 
}

.header {
    min-height: 25px;
    margin-bottom: 10px;
    padding: 5px;
    background: #c0392b;
}

.menu-wrapper {
    background: #3498db;
}


.promo-1,
.promo-2 {
    width: 160px;
    min-height: 50px;
    margin-top: 10px;
    padding: 5px;
    background: #c0392b;
}
.promo-1 {
    float: left;
}
.promo-2 {
    float: right;
}

.column-left,
.column-main,
.column-right  {
    min-height: 100px; 
    padding: 5px;
    background: #3498DB;
}
.column-left {
    float: left;
    width: 60px;
    margin-right: 10px;
}
.column-main {
    float: left;
    width: 180px;
    margin-right: 10px;
}
.column-right {
    float: right;
    width: 60px;
}

.footer-wrapper {
    margin-top: 10px;
    background: #34495e;
}
.footer, .menu {
    min-height: 25px;
    padding: 5px;
}