27/32 Размеры блоков

id858945 · 03.Октябрь.2018 12:28:29

Не совпадают размеры блоков результата с образцом (58%).
Причем визуально очень

похоже.

Просмотрите, пожалуйста, что не так:

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

<div class="name-header layout-positioner">
  Header
</div>

<div class="menu"><span class="name">Menu<span></div>
 <div class="promo layout-positioner">
  <div class="layout-column promo1">Promo 1</div>
  <div class="layout-column promo2">Promo 2</div>
 </div>

    <div class="middle-container layout-positioner">
<div class="layout-column col-1">Left</div>
<div class="layout-column col-2">Main</div>
<div class="layout-column col-3">Right</div>
    </div>
    
<div class="footer layout-positioner">
  <span class="name">Footer</span>
</div>

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

body {
width: 450px;
height: 335px;
font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}

.clearfix::after{
content:"";
display: table;
clear: both;
}

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

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

.header-container {
width: auto;
background-color: #34495e;
padding: 10px 0 0 0;
}

.layout-column {
float: left;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}

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

.header-container .name-header {
width: 350px;
min-height: 35px;
box-sizing: border-box;
padding-top: 5px;
padding-left: 5px;
margin-bottom: 10px;
background-color: #c0392b;
}

.header-container .menu {
width: 100%;
min-height: 35px;
box-sizing: border-box;
padding-top: 5px;
padding-left: 5px;
background-color:#3498db;
float:left;
}

.header-container .promo1,
.header-container .promo2 {
width: 170px;
min-height: 60px;
box-sizing: border-box;
padding-top: 5px;
padding-left: 5px;
background-color: #c0392b;
}

.middle-container .col-1,
.middle-container .col-2,
.middle-container .col-3{
min-height: 100px;
box-sizing: border-box;
padding-top: 5px;
padding-left: 5px;
background-color:#3498db;
}

.middle-container .col-1,
.middle-container .col-3{
width: 65px;
}

.middle-container .col-2 {
width: 200px;
}

.footer {
width: 100%;
height: 30px;
box-sizing: border-box;
padding-top: 5px;
padding-left: 5px;
background-color:#34495e;
float: left;
}

.name {
padding-left: 50px;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498db – синий
*/

Valery_S · 03.Октябрь.2018 13:01:39

Вопросов много!
И первый из них: где у Вас в HTML .header-container?

id858945 · 04.Октябрь.2018 07:01:41

Вот весь HTML:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="slyle.css">
  </head>
  <body>
      
  <div class="header-container layout-positioner">
    
    <div class="name-header layout-positioner">
      Header
    </div>
    
    <div class="menu"><span class="name">Menu<span></div>
     <div class="promo layout-positioner">
      <div class="layout-column promo1">Promo 1</div>
      <div class="layout-column promo2">Promo 2</div>
     </div>
      </div>
      
        <div class="middle-container layout-positioner">
    <div class="layout-column col-1">Left</div>
    <div class="layout-column col-2">Main</div>
    <div class="layout-column col-3">Right</div>
        </div>
      
    
    <div class="footer layout-positioner">
      <span class="name">Footer</span>
    </div>
   
   
  </body>
</html>

Valery_S · 04.Октябрь.2018 07:37:26

Если в CSS у Вас есть правило .header-container {…},
значит и в HTML должен быть элемент с классом header-container.

id858945 · 04.Октябрь.2018 08:36:21

Div c классом header-container в HTML есть. Может, код опять загрузился не полностью?

Valery_S · 04.Октябрь.2018 17:09:29

href=“slyle.css” исправьте на style.css, иначе таблица стилей не подключится.

<span class=“name”>Menu<span> второй span желательно закрыть
Из-за этого у Вас такая большая разница с образцом.

Останется подправить размеры некоторых блоков и будет 100%.

Но, сетка будет работать некорректно.
В частности меню и футер центроваться не будут…

Катя, Вам нужно более внимательно пройти курс “Сетки” и “Блочная модель”,
разобраться как работает центровщик, float, где и зачем нужны распорки…

Будут более конкретные вопросы – обращайтесь, отвечу!

id858945 · 09.Октябрь.2018 12:27:22

Просмотрите, пожалуйста (переделка):

HTML:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    
    <div class="header-container">
          <div class="layout-positioner">
      <div class="name-header">
          <div class="layout-positioner">
         Header
          </div>
      </div>
          </div>
      <div class="menu">
             <div class="layout-positioner">
        Menu
             </div>
      </div>
             <div class="layout-positioner">
      <div class="promo layout-column">Promo 1</div>
      <div class="promo layout-column">Promo 2</div>
             </div>
    </div>
   
    <div class="middle-container">
             <div class="layout-positioner">
      <div class="left layout-column">Left</div>
      <div class="main layout-column">Main</div>
      <div class="right layout-column">Right</div>
             </div>
    </div>
    
    <div class="footer-container">
      <div class="footer-name">
              <div class="layout-positioner">  
        Footer
              </div>
      </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;
}
 
.header-container {
  width: 100%;
  min-height: 35px;
  color: white;
  background-color:#34495e;
  padding-top: 10px;
}

.header-container .name-header {
  min-height:35px;
  width: 350px;
  color: white;
  padding:5px 0 0 5px;
  background-color: #c0392b;
  margin-bottom:10px;
  box-sizing: border-box;
}
 
.header-container .menu {
  min-height: 35px;
  color: white;
  background-color:#3498db;
  padding:5px 0 0 10px;
  box-sizing: border-box;
}
 
.header-container .promo {
  min-height: 60px;
  color: white;
  background-color: #c0392b;
  padding: 5px 0 0 5px;
  box-sizing: border-box;
}

.header-container .layout-column {
  width: 170px;
  float: left;
  margin: 10px 10px 10px 0;
}

.header-container .layout-column:last-child {
  margin-right: 0;
  float: right;
}

.middle-container .left,
.middle-container .main,
.middle-container .right {
  min-height: 110px;
  background-color:#3498db;
  color: white;
  padding: 5px 0 0 5px;
  box-sizing: border-box;
}

.middle-container {
  width: auto;
}

.middle-container .layout-column {
  width: 70px;
  float: left;
  margin: 10px 10px 10px 0;
}

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

.middle-container .layout-column:last-child {
  margin-right: 0;
  float: right;
}

.footer-container {
  width: auto;
}

.footer-name { 
  height: 35px;
  color: white;
  background-color:#34495e;
  padding:5px 0 0 10px;
  box-sizing: border-box;
}

.clearfix {
  content: "";
  display: table;
  clear: both;
}

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

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

Valery_S · 09.Октябрь.2018 22:53:22

header, menu, footer по-прежнему нужно доработать…

id858945 · 10.Октябрь.2018 05:58:17

Вопросы:

Можно использовать один общий блок-центровщик для header, menu, footer?
Можно ли центрировать текст с помощью layout-positioner или лучше задавать его положение внутренними отступами?

Valery_S · 10.Октябрь.2018 08:28:46

Нельзя. Из-за внешних блоков.
У хедера свой центровщик, у меню, свой у футера – свой.
Нежелательно. Текст и прочий контент лучше располагать внутри других блоков.

Например, здесь структура правильная.

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

А, здесь -- не очень.

<div class="footer-container">
  <div class="footer-name">
    <div class="layout-positioner">  
      Footer
    </div>
  </div>
</div>

Лучше сделать так:

<div class="footer-container">
  <div class="layout-positioner">  
    <div class="footer-name">
      Footer
    </div>
  </div>
</div>

… естественно, CSS тоже нужно будет изменить.