Сетки / Испытание: строим сетку [27/32] Помогите плз разобраться

evgencod · 12.Март.2018 13:37:36

не сходится ширина контейнера с “Promo-1 и 2” с шириной других контейнеров выше

<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
   <div class="top">
    <div class="Header layout-positioner">Header</div>
    <div class="Menu">
        <div class="main-menu layout-positioner">Menu</div>
        </div>
        <div class="Promo-field">
        <div class="layout-positioner">
    <div class="Promo">Promo 1</div>
    <div class="Promo">Promo 2</div>
    </div>
    </div>
    </div>
    <div class="Left"></div>
    <div class="Main"></div>
    <div class="Right"></div>
    <div class="Footer"></div>
</body>

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.top{
padding:10px 0 10px 0;
width:450px;
background-color:#34495e;
}

.layout-positioner{
width:350px;
border:1px dashed red;
margin:0 auto;
}
.layout-positioner::after{
content:"";
display:table;
clear:both;
}
.Header {
padding:5px;
min-height:25px;
background-color:#c0392b;
}
.Menu{
min-height:25px;
background-color:#3498DB;
padding:5px;
margin-top:10px;
}
.main-menu{padding:5px
;}
.Promo-field{

  padding:10px;
    }

.Promo{
padding:5px;
width: 160px;
margin-right: 10px;
float:left;
background-color: #c0392b;
min-height: 50px;
}
.Promo:last-child{
margin-right:0;
}

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

*/

ruslanhimself · 12.Март.2018 13:59:32

вырви глаз оформили тему…

если ширина не сходится, значит ее нужно изменить

evgencod · 12.Март.2018 14:30:48

ширина .layout-positioner одинакова же везде,где только не менял уже ширину

Valery_S · 12.Март.2018 14:40:54

layout-positioner для блоков Promo применили правильно.
В HTML:
Для header – layout-positioner лучше сделать родительским блоком.
Для menu – layout-positioner лучше сделать родительским блоком.
Для left, main, right – layout-positioner лучше сделать родительским блоком, так же как Вы сделали для Promo…

evgencod · 12.Март.2018 14:44:13

спасибо большое,помогло)

Valery_S · 12.Март.2018 14:48:43

…недавно довольно подробно обсуждалось, возможно и Вам пригодится…
Помогите разобраться. Испытание: строим сетку [27/32]

Gantz · 04.Апрель.2018 10:30:48

Помогите разобраться…я чувствую, что накосорезил дико, не могу понять где…чувствую себя тупым бревном!

<body>
    
 <div class='header'>
    <div class="layout-positioner clearfix">
      <div class='block head'>Header</div>
    </div>
       <div class='block menu'>Menu</div>
     <div class="layout-positioner clearfix">
      <div class='block promo1'>Promo 1</div>
      <div class='block promo2'>Promo 2</div>
    </div>
  </div> 

        <div class="content">
        <div class="layout-positioner clearfix">
            <div class="block left">Left</div>
            <div class="block main">Main</div>
            <div class="block right">Right</div>
        </div>
    </div>    
    
    <div class="footer">
        <div class="layout-positioner clearfix">
            <div class="block footer">Footer</div>
        </div>
    </div>    
   
</body>

{box-sizing: border-box;}

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

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

.block {
padding: 5px;
}

.clearfix:after {
content: “”;
display: table;
clear: both;
height: 10px;

}

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

}

.header,
.footer {
background-color: #34495e;
}

.head {
background-color: #c0392b;
height: 35px;
margin-top: 10px;
}

.menu {
background-color: #3498DB;
height: 35px;
padding: 5px 0px 0px 55px;
}

.promo1 {
float: left;
background-color: #c0392b;
min-height: 60px;
width: 170px;
margin-top: 10px;

}

.promo2 {
float: right;
background-color: #c0392b;
min-height: 60px;
width: 170px;
margin-top: 10px;
}

.left, .main, .right {
background-color: #3498DB;
float: left;
min-height: 110px;
margin-top: 10px;
}

.left {
width: 70px;
margin-right: 10px;
}

.main {
width: 190px;
margin-right: 10px;
}

.right {
width: 70px;

}

.footer {
height: 35px;
}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/
Образец:
%D0%BE%D0%B1%D1%80%D0%B0%D0%B7

Результат (верхушка хедера срезается…:
%D1%80%D0%B5%D0%B7%D1%83%D0%BB%D1%8C%D1%82

Gantz · 04.Апрель.2018 12:03:07

UPD: задал .header
padding-top 5 px;

а .head
margin-top: 5px;

Результат 100%!!!.

Скажите, очень корявый код или всё в рамках дозволенного?

<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    
 <div class="header">
    <div class="layout-positioner clearfix">
      <div class='block head'>Header</div>
    </div>
       <div class='block menu'>Menu</div>
     <div class="layout-positioner clearfix">
      <div class='block promo1'>Promo 1</div>
      <div class='block promo2'>Promo 2</div>
    </div>
  </div> 

        <div class="content">
        <div class="layout-positioner clearfix">
            <div class="block left">Left</div>
            <div class="block main">Main</div>
            <div class="block right">Right</div>
        </div>
    </div>    
    
    <div class="footer">
        <div class="layout-positioner clearfix">
            <div class="block footer">Footer</div>
        </div>
    </div>

{box-sizing: border-box;}

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

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

.block {
padding: 5px;
}

.clearfix:after {
content: “”;
display: table;
clear: both;
height: 10px;

}

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

}
.header {
padding-top: 5px;
}

.header,
.footer {
background-color: #34495e;
}

.head {
background-color: #c0392b;
height: 35px;
margin-top: 5px;
}

.menu {
background-color: #3498DB;
height: 35px;
padding: 5px 0px 0px 55px;
}

.promo1 {
float: left;
background-color: #c0392b;
min-height: 60px;
width: 170px;
margin-top: 10px;

}

.promo2 {
float: right;
background-color: #c0392b;
min-height: 60px;
width: 170px;
margin-top: 10px;
}

.left, .main, .right {
background-color: #3498DB;
float: left;
min-height: 110px;
margin-top: 10px;
}

.left {
width: 70px;
margin-right: 10px;
}

.main {
width: 190px;
margin-right: 10px;
}

.right {
width: 70px;

}

.footer {
height: 35px;
}

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

Ineska · 09.Апрель.2018 16:23:27

У распорки не должно быть высоты.

Gantz · 09.Апрель.2018 18:21:04

Пардон. Это я хотел посмотреть её “в натуре” подсветить так сказать. И забыл убрать. Про отсутствие высоты знаю =)
а в целом приемлемо?

Ineska · 10.Апрель.2018 04:34:51

Меню не отцентровано.
Clearfix для header не нужен.
Еще в коде кроме min-height есть просто height. Чем можете пояснить необходимость использования двух свойств и от чего зависит выбор одного или другого?

Gantz · 10.Апрель.2018 09:30:26

Бездумный подбор…
Почему clearfix для header не нужен?

Ineska · 10.Апрель.2018 09:43:00

Потому что header не “плавающий”. Для него вы float не пишете.

Gantz · 10.Апрель.2018 13:06:51

Убрал распорку, добавил в .menu magrin-top: 10px;

 <div class="header">
    <div class="layout-positioner">
      <div class='block head'>Header</div>
    </div>
       <div class='block menu'>Menu</div>
     <div class="layout-positioner clearfix">
      <div class='block promo1'>Promo 1</div>
      <div class='block promo2'>Promo 2</div>
    </div>
  </div> 

        <div class="content">
        <div class="layout-positioner clearfix">
            <div class="block left">Left</div>
            <div class="block main">Main</div>
            <div class="block right">Right</div>
        </div>
    </div>    
    
    <div class="footer">
        <div class="layout-positioner clearfix">
            <div class="block footer">Footer</div>
        </div>
    </div>    
   
</body>

{box-sizing: border-box;}

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

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

.block {
padding: 5px;
}

.clearfix:after {
content: “”;
display: table;
clear: both;
height: 10px;

}

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

}
.header {
padding-top: 5px;
}

.header,
.footer {
background-color: #34495e;
}

.head {
background-color: #c0392b;
height: 35px;
margin-top: 5px;
}

.menu {
background-color: #3498DB;
height: 35px;
padding: 5px 0px 0px 55px;
margin-top: 10px;
}

.promo1 {
float: left;
background-color: #c0392b;
min-height: 60px;
width: 170px;
margin-top: 10px;

}

.promo2 {
float: right;
background-color: #c0392b;
height: 60px;
width: 170px;
margin-top: 10px;
}

.left, .main, .right {
background-color: #3498DB;
float: left;
height: 110px;
margin-top: 10px;
}

.left {
width: 70px;
margin-right: 10px;
}

.main {
width: 190px;
margin-right: 10px;
}

.right {
width: 70px;

}

.footer {
height: 35px;
}

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

Ineska · 10.Апрель.2018 15:15:05

Меню не отцентровано осталось, с height и min-height по-прежнему не разобрались.

Gantz · 10.Апрель.2018 19:19:46

min-height я убрал отовсюду, ничего не поменялось.
а вот с центровкой menu не могу понять вообще…если добавляю центровщик layout-positioner, то menu становится 350px…блин, чего ж я не то делаю…

Valery_S · 10.Апрель.2018 23:50:52

Зря. В этом испытании нужно использовать min-height.
Используя min-height при наполнении блоков контентом, блоки будут растягиваться по вертикали.

Меню попробуйте сделать также как и подвал.

Gantz · 12.Апрель.2018 11:34:16

спасибо!

INDIGO · 21.Апрель.2018 18:55:17

Мужик что ты творишь ???