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

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

Прошу критики как сократить код или правильнее его оформить?!

Ссылка на урок

<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="layout-header">
        <div class="layout-positioner">
            <div class="header">
                Header
            </div>
        </div>
        <div class="layout-menu">
            <div class="layout-positioner">
                <div class="menu">
                    Menu
                </div>
            </div>
        </div>
        <div class="layout-positioner">
            <div class="promo promo_1">
                Promo 1
            </div>
            <div class="promo promo_2">
                Promo 2
            </div>
        </div>
    </div>
    <div class="layout-content">
        <div class="layout-positioner">
            <div class="text">
                Left
            </div>
            <div class="text main">
                Main
            </div>
            <div class="text">
                Right
            </div>
        </div>
    </div>
    <div class="layout-footer">
        <div class="layout-positioner">
            <div class="footer">
                Footer
            </div>
        </div>
    </div>
</body>

html,
body {
    margin: 0;
    padding: 0;
}
body {
    width: 450px;
    height: 335px;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
}
.layout-positioner {
    width: 350px;
    margin: 0 auto;
    padding: 5px;

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

.layout-header,.layout-footer {
    background: #34495e;
}
.header {
    min-height: 25px;
    padding: 5px;
    background: #c0392b;
    margin: 5px 0;
}
.menu {
    min-height: 25px;
    padding: 0 5px;
}
.promo {
    background: #c0392b;
    min-height: 50px;
    width: 160px;
    padding: 5px;
    margin: 5px 0;
}
.promo_1 {
    float: left;
}
.promo_2 {
    float: right;
}
.text,.layout-menu {
    background: #3498DB;    
}
.text {
    float: left;
    width: 60px;
    margin: 5px 10px 5px 0;
    padding: 5px;
    min-height: 100px;
}
.text:last-child {
    margin-right: 0;
}
.main {
    width: 180px;
}
.footer {
    min-height: 25px;
    padding: 0 5px;
}

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

К вашему коду замечаний нет. Всё грамотно и достаточно лаконично.

3

Спасибо большое.:+1:

4 
<!  DOCTYPE html>
    <html>
        <head>
            <title>Испытание: строим сетку</title>
            <meta charset="utf-8">
        </head>
        <body>
            <div class="layout-header">
                <div class="layuot-positioner">
                    <div class="header">
                    Header
                </div>
            </div>
            <div class="layout-menu">
                <div class="layout-positioner">
                    <div class="menu">
                    Menu
                    </div>
                </div>
          </div>
        <div class="layout-positioner">
            <div class="promo promo_1">
            Promo 1
            </div>
        <div class="layout-positioner">
            <div class="promo promo_2">
            Promo 2
            </div>
        </div>
        </div>
        <div class="layout-content">
            <div class="layout-positioner">
                <div class="column">
                Left
                </div>
                <div class="column main">
                    Main
                </div>
                <div class="column">
                    Right
               </div>
            </div>
        </div>
        <div class="layout-footer">
            <div class="layout-positioner">
                <div class="footer">
                Footer
                </div>
            </div>
        </div>
        </body>
    </html>

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

body {
    width: 450px;
    height: 335px;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
}
.layout-positioner {
    width: 350px;
    margin: 0 auto;
    padding 5px;
}
.layout-positioner:after {
    content: "";
    display: table;
    clear: both;
}
.layout-header, .layout-footer {
    background: #34495e;
}
.header {
    min-height: 25px;
    margin: 5px 55px;
    padding: 5px;
    background: #c0392b;
}

.menu {
    min-height: 30px;
    padding: 0 5px;
    background: #3498DB;
    margin: 5px 0px;
}
.promo {
    background: #c0392b;
    min-height: 50px;
    width: 155px; 
    padding: 5px;
    margin: 5px;
}
.promo_1 {
    float: left;
}
.promo_2 {
    float: right;
}
.column, .layout-menu {
    background: #3498DB;
}
.column {    
    float: left;
    min-height: 100px;
    width: 55px;
    padding: 5px;
    margin: 0 5px;
}


.column:last-child {
    margin-right: 0px;
}

.main {
    width: 180px;
}
.footer {
    min-height: 25px;
    padding: 0 5px;
}

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

Подскажите пожалуйста, что не так… второй день оттачиваю. Чуть изменяю какой-то размер или отступ - летит вся схема.

Хедер прилип к родительскому блоку, маргин не работает - что делаю не так?

Почему средний блок получился залитым в мокрый асфальт - где ошибка?
Заранее спасибо!

5

Ваш код сохраняется только в вашем браузере. Скопируйте его в сообщение. Кнопка для правильной вставки </> в редакторе сообщений.

6

Отредактировала…

7

Нижние сообщения удалила…

8

Это эффект выпадания внешних отступов, рассматривался в курсе “Блочная модель документа”.

У вас все содержимое сетки получилось обернуто в .layout-header, то есть он закрывается в самом низу. А поскольку для .layout-header задан фон, он распространился на всё.

9

Спасибо! Одновременно ещё пару ошибок нашла…