27/32. Сделал на 100%, но остались вопросы...

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

Добрый день! Получилось сделать на 100 %, но помучался долго… Честно скажу с трудом дается эта тема. С хедером вообще не разобрался, единственное место , которое подсмотрел в чужом коде. Подскажите, все нормально с кодом и как можно еще потренироваться, по всей видимости у меня проблемы с иерархией тегов…

html и css ниже.

<body>
    <div class="header">
    <div class="layout-positioner">
    <div class="header-box">Header</div>
    </div>
    </div>
        <div class="menu block">
        <div class="layout-positioner">
        Menu
        </div>
        </div>
    <div class="features clearfix">
          <div class="layout-positioner">
    <div class="promo1 block">Promo 1</div>
    <div class="promo2 block">Promo 2</div>
    </div>
    </div>
    <div class="center">
    <div class="layout-positioner">
    <div class="left block">Left</div>
    <div class="main block">Main</div>
    <div class="right block">Right</div>
    </div>
    </div>
    <div class="footer block">
        <div class="layout-positioner">
        Footer
        </div>
        </div>
    </body>

CSS

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

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

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

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

.clearfix::after {
content: “”;
display: table;
clear: both;
}

.block {
margin-bottom: 10px;
margin-top: 0px;
padding: 5px;
min-height: 50px;
}

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

.header .header-box {
background-color: #c0392b;
min-height: 35px;
margin-bottom: 10px;
padding: 5px;
box-sizing: border-box;
}

.menu {
background-color: #3498DB;
min-height: 25px;
padding-left: 15px;
}

.promo1 {
background-color: #c0392b;
float: left;
width: 160px;

}
.promo2 {
background-color: #c0392b;
float: right;
width: 160px;

}

.left {
background-color: #3498DB;
float: left;
width: 60px;
min-height: 100px;
}
.main {
background-color: #3498DB;
float: left;
width: 180px;
min-height: 100px;
margin-left: 10px;
margin-right: auto;

}
.right {
background-color: #3498DB;
float: right;
width: 60px;
min-height: 100px;
margin-right: 0px;
}

.center {
width: 100%;
height: 120px;
background-color: #FFFFFF;
padding-top: 10px;
}

.footer {
padding-left: 15px;
}

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

2

В целом все правильно. Можете поработать над сокращением css-кода. Почитайте о приемах в других темах по этому заданию, например, здесь.
А еще вопрос к вам, в чем разница в использовании этих двух распорок и почему у вас их две:
.layout-positioner::after {
content: “”;
display: block;
clear: both;
}

.clearfix::after {
content: “”;
display: table;
clear: both;
}

3

Сначала делал распорку в отдельном классе clearfix. Потом везде в html удалил этот класс и просто добавил распорку в класс layout-positioner. А в css забыл забыл удалить ненужный clearfix.

В теории все хорошо объяснили, но мне не хватило логики иерархии размещения тегов и классов. Например, почему надо layout positioner размещать внутри класса header, но выше содержимого этого класса.

4

Потому что блок с классом layout-positioner центрирует содержимое блока header. (если мне правильно удалось понять ваш вопрос)

1 лайк