27/32

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

Добрый день! Подскажите в чем ошибка?

Unbenannt1.PNG662×847 48.8 KB

CSS:

body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
}
.wrapper {
height:150px;
background: #34495e;
padding: 10px 0px;
}
.header {
padding:5px;
background:#c0392b;
min-height: 25px;
}
.menu {
margin-top:10px;
background:#3498DB;
min-height:25px;
padding:5px;
}
.features .promo{
padding: 5px;
float:left;
width:160px;
background:#c0392b;
min-height: 50px;
margin-top:10px;
margin-right:10px;
}
.promo:last-child {
margin-right:0px;
}
.layout {
margin: 10px;
}
.left {
float:left;
padding: 5px;
min-height: 100px;
width:60px;
background: #3498DB;
margin-right:10px;
}
.main {
float:left;
padding: 5px;
min-height: 100px;
width:180px;
background:#3498DB;
margin-right:10px;
}
.right {
float:left;
padding: 5px;
min-height: 100px;
width:60px;
background: #3498DB;
}
.footer {
background:#34495e;
min-height: 40px;
padding:5px;
}
.clearfix:after {
content:’’;
display: table;
clear:both;
}
.layout-positioner {
width:350px;
margin:0 auto;
}

2

Скиньте HTML код,

Кнопка для вставки кода </>

3

Отступы не поправили отдельно для меню и футера. Похожая тема рассмотрена сегодня: 27/32 Проанализируйте код

2 лайка
4 
<body>
        <div class="wrapper">
            <div class="layout-positioner">
                <div class="header">Header</div>
            </div>
            <div class="menu">
                <div class="layout-positioner">
                    Menu
                </div>
            </div>
            <div class ="features clearfix">
                <div class="layout-positioner">
                    <div class="promo">Promo 1</div>
                    <div class="promo">Promo 2</div>
                </div>
            </div>
        </div>

        <div class="layout clearfix">
            <div class="layout-positioner">
                <div class="left">Left</div>
                <div class="main">Main</div>
                <div class="right">Right</div>
            </div>
        </div>

        <div class="footer">
               <div class="layout-positioner">Footer
               </div>
        </div>
    </body>
5

Спасибо, т.е. для футера и меню отдельно сделать класс-выравниватель с чуть меньшей шириной чем у .layout-positioner?

6

Отдельно класс не надо. У вас уже все есть.
Для футера селектор будет .footer .layout-positioner
Для меню сделайте сами.

1 лайк
7

Огромное спасибо, теперь всё понятно :smile:

1 лайк