Испытание: строим сетку

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

Здравствуйте, видит отличие, которое никак не исправлю, меняла внутренние отступы и в пикселях и в процентах, так и размер шрифта, ширину шрифта, и тд., все равно видит отличие.
HTML-код

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

CSS-код:
html,
body {
margin: 0;
padding: 0;
}

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

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
.header1 {
background: #34495e;
min-height: 160px;
padding-top: 10px;
}
.header {
background: #c0392b;
min-height: 30px;
margin: 0px 50px 10px 50px;
padding: 5px 0px 0px 5px;
}
.promo1,
.promo2 {
background: #c0392b;
width: 165px;
min-height: 55px;
display: inline-block;
padding: 5px 0px 0px 5px;
}
.promo1 { margin-left: 50px;}
.promo2 { margin-left: 7px; padding: 5px 0px 0px 5px; font-size: 99%}
.promo2-letters {
margin-left: 0.15%;
}
.menu {
background: #3498db;
margin-bottom: 10px;
min-height: 30px;
padding: 5px 0px 0px 55px;
}
.content { padding-top: 10px;}
.left, .main, .right { background: #3498db; min-height: 105px; padding: 5px 0px 0px 5px;}
.left { float: left; width: 65px; margin-left: 50px;}
.main { float: left; width: 185px; margin-left: 10px;}
.right { float: left; width: 65px; margin-left: 10px;}
.footer { background: #34495e; min-height: 30px; clear: both; padding: 5px 0px 0px 55px;}
.footer1 { padding-top: 10px;}
.clearfix::after {
content: “”;
display: table;
clear: both;

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

51
Снимок экрана 2018-11-08 в 20.18.51.png788×618 18.8 KB
18
Снимок экрана 2018-11-08 в 20.19.18.png822×612 20 KB
34
Снимок экрана 2018-11-08 в 20.19.34.png818×596 19.7 KB

2
3

Намудрили. Только пиксели используются. В целом код не очень. Центровщика нет, группировки стилей тоже. Ваша сетка должна быть только на флоатах. Проблемы с promo возникли именно из-за использования inline-block.

4

Спасибо, буду исправлять

6

Здравствуйте Ineska.

Я хочу вас попросить посмотреть мой код.

Может можно еще лучше как то упростить его?

Мне важно мнение учителя)

   <body>
<div class="wrapper">
  <div class="layout-positioner clearfix">
<div class="column1 header">Header</div>
</div>
<div class="column2 ">
  <div class="layout-positioner">
<div class="menu">Menu</div>
</div>
</div>
<div class="layout-positioner clearfix">
<div class="column1 promo1">Promo 1</div>
<div class="column1 promo2">Promo 2</div>
</div>
</div>
<div class="features">
  <div class="layout-positioner clearfix">
<div class="column2 left">Left</div>
<div class="column2 main">Main</div>
<div class="column2 right">Right</div>
</div>
</div>
<div class="footer">
  <div class="layout-positioner">
<div class="column-footer">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;
}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498db – синий
*/
.clearfix::after {
content:"";
display:table;
clear:both;
}

.wrapper {
padding-top:10px;
margin-bottom:10px;
}
.wrapper,.footer {
background-color:#34495e;
}
.column1 {
background-color:#c0392b;
margin-bottom:10px;
}
.column2 {
background-color:#3498db;
}
.header {
width:340px;
min-height:25px;
padding:5px;
}
.menu {
padding:5px;
width:350px;
min-height:25px;

margin-bottom:10px;
}
.promo1 {
padding:5px;
width:160px;
min-height:50px;
float:left;
margin-right:10px;

}
.promo2 {
padding:5px;
width:160px;
min-height:50px;
float:left;
}
.left {
width:60px;
padding:5px;
min-height:100px;
float:left;
margin-right:10px;
}
.main {
padding:5px;
float:left;
width:180px;
min-height:100px;

}
.right {
float:left;
width:60px;
padding:5px;
min-height:100px;
margin-right:0px;
margin-left:10px;
}
.footer {
margin-top:10px;
min-height:40px;
}
.column-footer {
padding:5px;
width:350px;
}
.layout-positioner {
width:350px;
margin:0 auto;
}

7

Это не ко мне)

Если центровщик есть, то почему часто повторяется в css-коде width: 350px;?
В целом всё правильно, но не хватает группировки стилей. Есть элементы, которые стилизованы почти одинаково. Вы могли бы сократить код.

1 лайк
8 
<div class="layout-positioner clearfix">
  <div class="column1 header">Header</div>
</div>

Здесь clearfix не нужен.

Не совсем правильно сделаны меню и футер.
Проверьте инспектором кода – вызывается по F12 или Shift+Ctrl+I.