[27/32]Испытание

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

Привет, не понимаю как получить 100%, картинка визуально совпадает, но наложение некорректно. Помогите, прикладываю код:

  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class = "header">
      <div class = "layout-positioner">
        <div class = "header-layout">
          <p>Header</p></div>
      </div>
    </div>
    <div class = "menu">
      <div class = "layout-positioner">
        <div class = "menu-layout">
          <p>Menu</p>
        </div>
      </div>
    </div>
    <div class = "promo">
      <div class = "layout-positioner">
        <div class = "layout-column">
          <p>Promo 1</p></div>
        <div class = "layout-column">
          <p>Promo 2</p></div>
      </div>
    </div>
    <div class = "content">
      <div class = "layout-positioner">
        <div class = "layout-column">
          <p>Left</p></div>
        <div class = "layout-column">
          <p>Main</p></div>
        <div class = "layout-column">
          <p>Right</p></div>
      </div>
    </div>
    <div class = "footer">
      <div class = "layout-positioner">
        <div class = "footer-layout">
          <p>Footer</p>
        </div>
      </div>
    </div>
  </body>
</html>

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

body {
width: 450px;
height: 335px;

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}

p {
margin:0;
}

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

}

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

}

.header {
padding-top:1px;
padding-bottom:1px;
background-color:#34495e;

}

.header-layout {
background-color: #c0392b;
min-height: 35px;

}

.header-layout p {
margin:0;
padding: 5px;
}

.menu {
padding-top:1px;
padding-bottom:1px;
background-color: #3498db;
margin:0;

}

.menu .layout-positioner {
margin:5px auto 10px auto;

}

.menu-layout {
min-height:20px;
}

.menu-layout p {
margin:0;
padding-left: 5px;
}

.promo {
padding-top:1px;
padding-bottom:1px;
background-color: #34495e;
}

.promo .layout-column {
float:left;
width:170px;
min-height:60px;
margin-right:10px;
background-color:#c0392b;
}

.promo .layout-column:last-child {
margin-right: 0;
}

.promo p {
padding:5px;

}

.content {
padding-top:1px;
padding-bottom:1px;
background-color: white;
}

.content .layout-column {
float:left;
width:70px;
min-height:110px;
margin-right:10px;
background-color:#3498db;
}

.content .layout-column:nth-child(2) {
width:190px;
}

.content .layout-column:last-child {
margin-right: 0;
}

.content p {
padding:5px;
}

.footer {
padding-top:1px;
padding-bottom:1px;
background-color:#34495e;
}

.footer .layout-positioner {
margin:5px auto 0 auto;

}

.footer-layout {
min-height: 20px;

}

.footer p {
padding-left:5px;

}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498db; – синий
*/Текст "как есть" (без применения форматирования)

2

Дело в отступах, они не совпадают с макетом. Например, в случае хедера можно убрать верхний и нижний маргины у .layout-positioner и задать padding: 10px 0 для .header. Это даст нужный отступ.

1 лайк