[27/32] 100%. Прошу посмотреть и оценить код

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

Добрый день.
Я выполнил 27 задание таким образом, подскажите, насколько это корректно:

<!DOCTYPE html>
Испытание: строим сетку
Header 
<div class="menu">
  <div class="layout-positioner">
    <div class="menu-column">
      Menu
    </div>
  </div>
</div>
<div class="promo">
  <div class="layout-positioner">
    <div class="promo-column">
      Promo 1
    </div>
    <div class="promo-column">
      Promo 2
    </div>
  </div>
</div>
<div class="content">
  <div class="layout-positioner">
    <div class="content-column content-left">
      Left
    </div>
    <div class="content-column content-main">
      Main
    </div>
    <div class="content-column content-right">
      Right
    </div>
  </div>
</div>
<div class="footer">
  <div class="layout-positioner">
    <div class="footer-column">
      Footer
    </div>
  </div>
</div>

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

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

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

.layout-positioner {
  width:350px;
  margin: 0 auto;
}
.layout-positioner::after {
  content:"";
  display:table;
  clear:both;
}

.header {
  background-color:#34495e;
  padding: 10px;
}
.header-column {
  background-color:#c0392b;
  min-height:25px;
  padding:5px;
}
  
.menu {
  background-color:#3498db;
}
.menu-column {
  min-height:25px;
  padding:5px;
}

.promo {
  background-color:#34495e;
  padding:10px;
  }
.promo-column {
  background-color:#c0392b;
  min-height: 50px;
  padding:5px;
  float:left;
  width:160px;
  margin-right:10px;
}
.promo-column:last-child {
  margin-right:0px;
}
  
.content {
  padding:10px;}
.content-column {
  background-color:#3498db;
  min-height:100px;
  padding:5px;
  float:left;
  margin-right:10px;
}
.content-column:last-child {
  float:right;
  margin-right:0px;
}
.content-left{
  width:60px;
}
.content-main{
  width:180px;
}
.content-right {
  width:60px
}
  
.footer {
  background-color:#34495e;
}
.footer-column{
  padding:5px;
  min-height:25px;
}

Спасибо

1 лайк
2 
     .content {
      padding:10px;
      }

     .content-column {
      background-color:#3498db;
      min-height:100px;
      padding:5px;
      float:left;
      margin-right:10px;
     }

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

     .content-left {
      width:60px;
      }

Нужно, чтоб не только ты смог прочитать, ну и другие :slight_smile:

3

ПОМОЩЬ ПО ЗАДАНИЮ: 96%, не могу сообразить как исправить

<!DOCTYPE html>
<html lang=“ru”>
<head>
<title>Испытание: строим сетку</title>
<meta charset=“utf-8”>
<link rel=“stylesheet” href=“style.css”>
</head>
<body>
<div class=“container clearfix”>
<div class=“header layout”>Header</div>
<div class=“menu layout”>Menu</div>
<div class=“promo1 layout”>Promo 1</div>
<div class=“promo2 layout”>Promo 2</div>
</div>
<div class=“top clearfix”>
<div class=“left layout”>Left</div>
<div class=“main layout”>Main</div>
<div class=“right layout”>Right</div>
</div>
<div class=“footer clearfix”>Footer</div>
</body>
</html>

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

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

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
.container {
height:170px;
background-color: #34495e;
}
.clearfix::after {
content:"";
display: table;
clear: both;
}
.header {
background-color:#c0392b;
}

.header.layout {
float:left;
width:350px;
height: 35px;
margin-left:50px;
margin-top:10px;

}
.menu {
background-color:#3498db;
}

.menu.layout {
float:left;
width:100%;
height: 35px;
margin-top:10px;
margin-bottom: 10px;

}
.promo1 {
background-color:#c0392b;

}
.promo1.layout {
float:left;
width:170px;
height:60px;
margin-left:50px;
}
.promo2 {
background-color:#c0392b;

}
.promo2.layout {
float:left;
width:170px;
height:60px;
margin-left:10px;
}

.left {
background-color:#3498db;

}
.left.layout {
float:left;
height:110px;
width:70px;
margin-top:10px;
margin-bottom:10px;
margin-left:50px;
}
.main {
background-color:#3498db;

}
.main.layout{
float:left;
height:110px;
width:190px;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
}
.right {
background-color:#3498db;

}
.right.layout {
float:left;
height:110px;
width:70px;
margin-top:10px;
margin-bottom:10px;
margin-left:10px;}
.footer {
width:100%;
height:50px;
background-color:#34495e;
}

4

Я сделал до 90%

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

body {
width: 450px;
height: 300px;
font-size: 12px;
font-family: “Arial”, sans-serif;
}
.item:nth-child(4) {
padding-left: 80px;
}
.item:nth-child(1) {
padding-left: 7px ;

}

.item {
display: inline-block;
}
.frame {
border: 1px solid #2c3e50 ;
}
.date {
padding: 5px ;
}
.image {
margin-top: 10px ;
border-top: 1px solid #2c3e50;
border-bottom: 1px solid #2c3e50;
}
.gallery {
padding-top: 10px;
}

.gallery .item {
width: 125px;
margin: 0 10px;
margin-bottom: 10px;
margin-right: 10px;
}

.gallery .title {
margin-bottom: 5px;
line-height: 14px;
}

.gallery .frame {
background-color: #ecf0f1;
}

.gallery .image {
height: 70px;
background-repeat: no-repeat;
background-position: 50% 50%;
}

.gallery .image-1 {
background-color: #2ecc71;
background-image: url(“cat_box.png”);
}

.gallery .image-2 {
background-color: #3498db;
background-image: url(“cat_fish.png”);
}

.gallery .image-3 {
background-color: #f1c40f;
background-image: url(“cat_purr.png”);
}

.gallery .image-4 {
background-color: #e67e22;
background-image: url(“cat_walk.png”);
}

.gallery .image-5 {
background-color: #e74c3c;
background-image: url(“cat_drunk.png”);
}

.gallery .date {
font-size: 11px;
color: #666666;
font-style: italic;
}
.item:nth-child(2) {
margin: 7px ;
}

5

float можно для всех троих оставить “left”