27/32 Выполнил на 100% но остался не понятный момент.

Курсы §15. Сетки
1 
   Доброго времени суток. Возник вопрос по "layout-positioner". Он отцентровал все блоки кроме header, его пришлось выставлять вручную. Подскажите, в чем может быть дело?

<body> <div class="headmenu"> <div class="header"> <div class="layout-positioner"> Header </div> </div> <div class="menu"> <div class="layout-positioner"> Menu </div> </div> <div class="block1"> <div class="layout-positioner"> <div class="layout-column"> Promo 1 </div> <div class="layout-column"> Promo 2 </div> </div> </div> </div> <div class="block2"> <div class="layout-positioner"> <div class="layout-column-1 layout-column"> Left </div> <div class="layout-column-2 layout-column"> Main </div> <div class="layout-column-1 layout-column"> Right </div> </div> </div> <div class="footer"> <div class="layout-positioner"> Footer </div> </div> </body>

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

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

}
.headmenu {
background: #34495e;
height:160px;
padding-top: 10px;

}
.header {
height: 25px;
background: #c0392b;
color: white;
width: 340px;
margin-bottom: 10px;
padding: 5px;
margin-left: 50px;

}
.menu {
height: 25px;
background: #3498DB;
color: white;
margin-bottom: 10px;
padding: 5px 0 5px 10px;
}
.layout-column {
float: left;
width: 160px;
min-height: 50px;
background: #c0392b;
margin-right: 10px;
color: white;
padding: 5px
}
.block1 .layout-column:last-child {
margin-right: 0;
}
.block2 .layout-column-1 {
margin-top: 10px;
margin-right: 10px;
float: left;
width: 60px;
height: 100px;
background: #3498DB;
padding: 5px;
}
.block2 .layout-column-2 {
margin-top: 10px;
margin-right: 10px;
float:left;
width: 180px;
height: 100px;
background: #3498DB;
padding: 5px;
}
.block2 .layout-column-1:last-child {
margin-right: 0;
}
.footer {
height: 25px;
background: #34495e;
color: white;
margin-top: 10px;
padding: 5px 0 5px 10px;
}
.layout-positioner {
width: 350px;
margin: 0 auto;

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

2

по поводу позиционера не могу сказать, я с телефона, но излишняя вложенность в html коде есть однозначно, можно короче, и в css у вас лишние свойства присутствуют, одно из них высота headmenu, блок всегда растягивается на высоту контента, так что задаватт явную высоту тут не нужно, позже я думаю ineska вам даст конкретные рекомендации. :slight_smile:

3

Спасибо…)
По поводу layout-positioner. Здесь надо наоборот блоки в разметке поставить:
`

Header
...
` И, как уже сказал Алексей. есть лишние свойства. А у меня конкретно вопрос по этому фрагменту: `
Left
Main
Right
` Для чего в данном случае используется класс layout-column, примененный выше для колонок promo? Он у вас задает только белый цвет текста. Все остальные свойства переопределены в layuot-column-1 и layuot-column-2. Учитывая, что цвет текста в данном задании только белый, то можно прописать его для body. Ваш исправленный мной вариант: html, body { margin: 0; padding: 0; }

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.headmenu {
background: #34495e;
/height:160px;/
padding-top: 10px;
padding-bottom: 10px;
}
.header {
height: 25px;
background: #c0392b;
/color: white;/
/width: 340px;/
margin-bottom: 10px;
padding: 5px;
/margin-left: 50px;/

}
.menu {
height: 25px;
background: #3498DB;
/color: white;/
margin-bottom: 10px;
padding: 5px 0 5px 10px;
}
.layout-column {
float: left;
width: 160px;
min-height: 50px;
background: #c0392b;
margin-right: 10px;
/color: white;/
padding: 5px;
}
.block1 .layout-column:last-child {
margin-right: 0;
}
.block2 .layout-column-1 {
margin-top: 10px;
margin-right: 10px;
float: left;
width: 60px;
height: 100px;
background: #3498DB;
padding: 5px;
}
.block2 .layout-column-2 {
margin-top: 10px;
margin-right: 10px;
float:left;
width: 180px;
height: 100px;
background: #3498DB;
padding: 5px;
}
.block2 .layout-column-1:last-child {
margin-right: 0;
}
.footer {
height: 25px;
background: #34495e;
/color: white;/
margin-top: 10px;
padding: 5px 0 5px 10px;
}
.layout-positioner {
width: 350px;
margin: 0 auto;

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

1 лайк
4

Большое спасибо. Теперь все встало на свои места.:slight_smile: