Строим сетку: 27/32. Прошу помощи.

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

Подскажите, пожалуйста, как оторвать красный блок Header от верха родителя? Уже ставила всякие маргины и паддинги - отъезжает только вместе с родителем.

    <body>
    <div class="wrapper">
        <div class="header">
           <div class="layout-column layout-column-1">Header</div>
           <div class="layout-column layout-column-2">Menu</div>
           <div class="layout-column layout-column-3">Promo 1</div>
           <div class="layout-column layout-column-4">Promo 2</div>
        </div>
    <div class="features">
        <div class="layout-column">Left</div>
        <div class="layout-column">Main</div>
        <div class="layout-column">Right</div>
    </div>
    <div class="footer">Footer</div>
   </div>
</body>

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
}
/*
Используемые цвета:
#34495e - мокрый асфальт
#c0392b - красный
#3498DB - синий
*/
.wrapper {
width: 450px;
margin:0 auto;
min-height: 50px;

}
.header {
background: #34495e;
min-height: 180px;
margin-bottom: 10px;

}
.header .layout-column {
background: #c0392b;
min-height: 60px;
}
.header .layout-column-1 {
background: #c0392b;
min-height: 20px;
width: 330px;
margin: 0 auto;
padding: 10px;
margin-bottom: 10px;
padding-left: 5px;
padding-top: 5px;
}
.header .layout-column-2 {
background: #3498DB;
min-height: 30px;
padding-left: 50px;
padding-top: 5px;
margin-top: 30px;
}
.header .layout-column-3 {
float: left;
width: 165px;
min-height: 55px;
margin-top: 10px;
margin-left: 50px;
padding-left: 5px;
padding-top: 5px;
}
.header .layout-column-4 {
float: right;
width: 165px;
min-height: 55px;
margin-top: 10px;
margin-right: 50px;
padding-left: 5px;
padding-top: 5px;
}
.features {
margin-bottom: 10px;
}
.features .layout-column {
background: #3498DB;
min-height: 40px;
}
.features .layout-column:nth-child(1) {
float: left;
width: 65px;
min-height: 95px;
margin-left: 50px;
padding-left: 5px;
padding-top: 5px;
}
.features .layout-column:nth-child(3) {
float: right;
width: 65px;
min-height: 95px;
margin-right: 50px;
padding-left: 5px;
padding-top: 5px;
}
.features .layout-column:nth-child(2) {
float: left;
width: 185px;
min-height: 95px;
margin-left: 10px;
padding-left: 5px;
padding-top: 5px;

}
.footer {
background: #34495e;
padding: 10px;
min-height: 20px;
margin-top: 120px;
padding-left: 55px;
padding-top: 5px;
}

2

Задайте padding-top: 10px; для .header.

1 лайк
3

Всё, разобралась, спасибо.

1 лайк
4

Добрый день!Помогите ,пожалуйста,что не так??
На глаз вроде все попадает…А по факту нет…

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
}
.fon{
background-color:#34495e;
min-height:170px;

}
.header{
background-color:#c0392b;
position:relative;
width:350px;
height:35px;
left:50px;
top:10px;

}
.menu{
background-color:#3498DB;
height:35px;
position:relative;
top:10px;
}
.promo:after{
content:"";
clear:both;
display:table;
}

.promo .promo-column1{
float:left;
position:relative;
background-color:#c0392b;
height:60px;
width:170px;
left:50px;
top:10px;
margin-top:10px;
}
.promo .promo-column2{
float:right;
background-color:#c0392b;
width:160px;
height:60px;
position:relative;
margin-top:20px;
margin-right:50px;
}
.content:after{
content:"";
clear:both;
display:table;
}
.content .left{
background-color:#3498DB;
float:left;
width:75px;
height:115px;
position:relative;
left:50px;
}
.content .main{
background-color:#3498db;
float:right;
width:185px;
height:115px;
position:relative;
right:120px;
}
.content .right{
background-color:#3498db;
float:right;
width:75px;
height:115px;
position:relative;
left:160px;
}
.footer{
background-color:#34495e;
width:450px;
height:35px;
position:relative;
top:125px
}
/Стили содержания/
.header{
text-align:left;
padding-left:5px;
padding-top:5px;
}
.menu{
padding-left:55px;
}
.promo-column1{
padding-left:5px;
}
.promo-column2{
padding-left:5px;
}
.left{
padding-left:5px;
}
.main{
padding-left:5px;
}
.right{
padding-left:5px;
}
.footer{
padding-left:40px;
}
/*
Используемые цвета:
#34495e - мокрый асфальт
#c0392b - красный
#3498DB - синий
*/

6

HTML-код вставьте с помощью кнопки </> в редакторе сообщений.

8

Я с тел пишу,не могу найти эту кнопку (

9

Тогда хоть скрин, где весь код видно. Буду восстанавливать сама.

10

Screenshot_2016-04-08-10-52-50.png720×1280 160 KB

11

Еще один, пожалуйста, где видно начало.

12

Screenshot_2016-04-08-10-52-42.png720×1280 164 KB

13

На глаз проверять не надо. Система проверяет каждый пиксель. Получается, что всё смещено. Я предлагаю вам добавить внешний отступ для абзаца:
p {
margin-top: 5px;
}
А дальше корректировать отступы и размеры отдельных элементов ориентируясь на вкладку “Различия”. Правда, не знаю, насколько это удобно будет с телефона. Конечно, лучше выполнять задание на компьютере.

1 лайк
14

Сейчас попробую)Согласна,что не удобно,но жажда к знаниям не дает покоя)))

1 лайк
15

Все получилось на 97% :slight_smile:
Спасибо))

1 лайк