Прошу помощи 27/32 прошел на 99%

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

Сам прошел на 99% и застрял, не могу понять в чём дело. Когда переключаю кнопки “Образец” и “Результат” не вижу отличия, а в различиях не могу понять что поправить. Да и подскажите где и что можно ещё сократить, а то писал из головы может где то чего и забыл. Прикрепляю код и картинку.

<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: строим сетку</title>
       <meta charset="utf-8">
    </head>
    <body>
        <div class="block1">
            <div class="header">Header</div>
        </div>
        <div class="menu">Menu</div>
        <div class="block2">
            <div class="promo promo1">Promo 1</div>
            <div class="promo promo2">Promo 2</div>
        </div>
        <div class="block3">
            <div class="left">Left</div>
            <div class="main">Main</div>
            <div class="right">Right</div>
        </div>
        <div class="footer">Footer
        </div>
    </body>
</html>



html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
}
.block1 {
    background-color: #34495e;
    width: 450px;
    height: 55px;
}
.header {
    background-color: #c0392b;
    width: 345px;
    height: 30px;
    margin-left: 50px;
    margin-top: 10px;
    padding-top: 5px;
    padding-left: 5px;
    float: left;
    
}
.menu {
    background-color: #3498d8;
    height: 30px;
    padding-left: 55px;
    padding-top: 5px;
}
.block2 {
    background-color: #34495e;
    width: 450px;
    height: 80px;
}
.promo {
    background-color: #c0392b;
    width: 165px;
    height: 55px;
    margin-top: 10px;
    padding-top: 5px;
}
.promo1 {
    float: left;
    margin-left: 50px;
    padding-left: 5px;
}
.promo2 {
    float: right;
    margin-right: 50px;
    padding-left: 5px;
}
.block3 {
    height: 130px;
}
.left {
    float: left;
    background-color: #3498d8;
    width: 65px;
    height: 105px;
    margin-left: 50px;
    margin-right:10px;
    margin-top: 10px;
    padding-left: 5px;
    padding-top: 5px;
}
.main {
    float: left;
    background-color: #3498d8;
    width: 185px;
    height: 105px;
    margin-right:10px;
    margin-top: 10px;
    padding-left: 5px;
    padding-top: 5px;
}
.right {
    float: left;
    background-color: #3498d8;
    width: 65px;
    height: 105px;
    margin-right:50px;
    margin-top: 10px;
    padding-left: 5px;
    padding-top: 5px;
}
.footer {
    background-color: #34495e;
    height: 30px;
    padding-left: 55px;
    padding-top: 5px;
}

11111.PNG536×727 25.9 KB

2

Будьте внимательны. Не тот цвет голубой у вас получился, разница всего в одном символе, но систему не обманешь. Правильный цвет #3498DB
По поводу кода никаких явных замечаний нет. Единственное, в этом задании хотелось бы посмотреть, как вы используете “распорки”, а не прописываете высоту для .block1, .block2 и .block3.
Пример кода вы можете посмотреть в этой теме.

1 лайк
3

Большое спасибо за помощь, ещё и с распорками попробую, совсем забыл про них.

1 лайк
4

А я вот так сделал:

<body>
        <div class="Main-Header">
            <div class="layout-positioner">
                <div class="Header layout-positioner2">Header</div>
                <div class="Menu">Menu</div>
                <div class="layout-positioner2">
                    <div class="Promo1">Promo 1</div>
                    <div class="Promo2">Promo 2</div>
                </div>
            </div>
        </div>
        <div class="features">
            <div class="layout-positioner layout-positioner2">
                <div class="Left">Left</div>
                <div class="Main">Main</div>
                <div class="Right">Right</div>
            </div>
        </div>
        <div class="Footer">Footer</div>
    </body>

layout-positioner - внешний ограничитель
layout-positioner2 - внутренний

Пусть и громоздко чуть вышло, зато легче потом перенастраивать всю страницу целиком, если вдруг что-то не сходится:

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

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



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

.Header {
    background:#c0392b;
    height: 30px;
    padding-left: 5px;
    padding-top: 5px;
    width:345px;
}

Единственная проблема, оказалась, .Header {, почему-то не совпадал по размерам (был больше примера) и пришлось его принудительно уменьшить.