27/32 нужна помощь

Курсы §15. Сетки
1 
    <div class="top-container">
        <div class="layout-positioner">
            <div class="header">Header</div>
        </div>
        <div class="layout-positioner">
            <div class="menu">Menu</div>
        </div>
        <div class="layout-positioner">
            <div class="promo">Promo 1</div>
        </div>
        <div class="layout-positioner">
            <div class="promo2">Promo 2</div>
        </div>
    </div>
2

.layout-positioner {
margin: 0 auto;
width: 350px;
}
.layout-positioner::after {
content: “”;
display: table;
clear: both;
}
.top-container {
background-color: #34495e;
padding: 10px;
}

.header {
background: #c0392b;
min-height: 25px;
padding: 5px;
width: 350px;
margin: 0 auto;
}
.menu {
background: #3498DB;
min-height: 30px;
padding: 5px;
margin: 10px;
}
.promo, .promo2 {
background: #c0392b;
width: 160px;

}
.promo {
float: left;
min-height: 35px;
}
.promo2 {
float: right;
padding: 5px;
min-height: 35px;
margin-right: 10px;

}
3

не получается растянуть menu и не получается выравнять блоки promo и promo2,подскажите в чем ошибка?

4

Не надо каждый блок .promo оборачивать в layout-positioner. Обертка должна быть одна на два блока.

5

ох спасибо что помогли мне с promo!!!
а блок menu как сделать во всю длинну?

6

Таким образом:
<div class="menu">
<div class="layout-positioner">Menu</div>
</div>
Только padding: 10px; который вы задали для .top-container, не даст блоку растянуться на всю длину. Напишите padding: 10px 0;

7

спасибо большое!а можете пояснить этот момент?

8

Какой именно? Что вам не понятно?

9

почему padding: 10px 0;?и я сейчас по другому сделал не много, но с учетом Ваших поправок,но теперь опять не выходит

Header
Menu
Promo 1
Promo 2
10

У вас было padding: 10px; - то есть отступ по 10px с каждой стороны.
Отступы справа и слева не дадут блоку меню быть на всю ширину. Поэтому отступы справа и слева надо обнулить padding: 10px 0;

11

о спасибо я понял этот момент,но теперь я вот так

<div class="top-container">
    <div class="layout-positioner">
        <div class="header">Header</div>
    </div>
<div class="menu">
    <div class="layout-positioner">Menu
    </div>
</div>    
    <div class="layout-positioner">
         <div class="promo">Promo 1</div>
         <div class="promo2">Promo 2</div>
    </div>
</div>
12

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

.layout-positioner::after {
content: “”;
display: table;
clear: both;
}
.top-container {
background: #34495e;
min-height: 160px;
padding: 5px;
}
.header {
background: #c0392b;
padding: 5px;
min-height: 25px;
}
.menu {
background: #3498DB;
}
.promo {
float: left;
background: #c0392b;
padding: 5px;
width: 160px;
min-height: 55px;
}
.promo2 {
float: right;
background: #c0392b;
padding: 5px;
width: 160px;
min-height: 55px;
и вот так,и блок меню растянулся, но есть отступы

13

получается надо убрать padding у top-conteiner?

14

но теперь проблема с текстом,не могу найти ошибку

15

Какая проблема с текстом? Скрин можно?

16

текст.png1280×1024 54.6 KB

17

Можно так написать:
.menu .layout-positioner { padding-left: 5px; }

18

вот так прописал,получается мы на прямую даем команду в menu?спасибо большое Вам!
.menu .layout-positioner {
padding-top: 5px;
padding-left: 10px;
}

1 лайк
19 
<div class="top-container">
    <div class="layout-positioner">
        <div class="header">Header</div>
    </div>
<div class="menu">
    <div class="layout-positioner">Menu
    </div>
</div>    
    <div class="layout-positioner">
         <div class="promo">Promo 1</div>
         <div class="promo2">Promo 2</div>
    </div>
</div>
    <div class="layout-positioner">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>    
<div class="footer">
    <div class="layout-positioner">
        Footer
    </div>
</div>

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

.layout-positioner::after {
content: “”;
display: table;
clear: both;
}
.top-container {
background: #34495e;
min-height: 160px;
}
.header {
background: #c0392b;
padding: 5px;
min-height: 25px;
}
.menu {
background: #3498DB;
min-height: 35px;
}
.menu .layout-positioner {
padding-top: 5px;
padding-left: 10px;
}
.promo {
float: left;
background: #c0392b;
padding: 5px;
width: 160px;
min-height: 50px;
}
.promo2 {
float: right;
background: #c0392b;
padding: 5px;
width: 160px;
min-height: 50px;
}
.left, .right, .main {
background: #3498DB;
padding: 5px;
}
.left {
float: left;
width: 60px;
min-height: 100px;
}
.main {
float: left;
width: 180px;
min-height: 100px;
margin: 0 10px;
}
.right {
float: right;
width: 60px;
min-height: 100px;
}
.footer {
background: #34495e;
min-height: 35px;
}
.footer .layout-positioner {
padding-top: 5px;
padding-left: 10px;
}
все получилось огромное спасибо!
что скажите?

20

Не вынесли в общие стили для трех колонок.

.footer .layout-positioner и .menu .layout-positioner можно написать через запятую в одном правиле. А в общем хорошо.