27/32 Помогите, почему header не центруется...?


#1
<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="head">
      <div class="header">
       <div class="layout-positioner">
        Header
       </div>
      </div>
      <div class="menu">
       <div class="layout-positioner">
        Menu
       </div>
      </div>
      <div class="layout-column">
       <div class="layout-positioner">
        <div class="promo layout-column-1">Promo 1</div>
        <div class="promo layout-column-2">Promo 2</div>
      </div>
     </div>
   </div>
    <div class="bars layout-column-3">Left</div>
    <div class="bars layout-column-4">Main</div>
    <div class="bars layout-column-5">Right</div>
    <div class="foter">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;
}
.head {
background-color: #34495e;
min-height: 170px;
}

.header {
background-color: #c0392b;
min-height: 25px;
width: 340px;
padding: 5px;
margin-top: 10px;
}

.menu {
background-color: #3498db;
min-height: 25px;
padding: 5px;
margin-bottom: 10px;
margin-top: 10px;
}

.promo{
width: 160px;
min-height: 50px;
padding:5px;
background: #c0392b;
}

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

.layout-column-2 {
float: left;
}

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

.layout-positioner {
border: 2px dashed white;
width: 350px;
margin: 0 auto;
}

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


#2

Поменяйте местами чтобы получилось так:

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

…все блоки с контентом должны быть внутри центровщиков.


#3

Спасибо! Вы - кладязь! )) Ничего, что теперь layout-positioner охватывает header явно вместе с margin-top: 10px; (это видно по пунктирной границе - той, что сверху над хедером - она отходит от него на 10px), это нормально?! не страшно? так и должно получиться? П.С. про блоки с контентом - я поняла!


#4

Таки что-то не то с этим padding-ом сверху над header… Вот, что получается, когда убираю пунктирную границу…Header прилипает к верху…


#5

Всё, убрала margin-top: 10px; у header и поставила padding-top: 10px; у .head, то, вроде бы, получилось ))


#6

Почти правильно:

У .head {…} уберите min-height. Блок растянется по вертикали контентом.
А внутренний отступ должен быть не только сверху, но и снизу.

В .header {…} ширина тоже не нужна. По умолчанию дивы растягиваются по ширине родителя,
в данном случае по ширине layout-positioner.


Временно вместо border используйте оutline.
outline не изменяет размеры блоков – просто показывает где они находятся…


#7

Спасибо огромное!! Всё поняла, всё усвоила! Пока кроме outline - но я найду и почитаю )) Может ещё подскажете, что не так у меня с menu, почему слово “Menu” не на своем месте…?


#8

Сейчас у вас просто слово “Menu”.
И находится в правом верхнем углу контейнера layout-positioner.
Для Menu нужно добавить еще один див с классом, и в свойствах этого класса добавить отступы по 5px с каждой стороны… всё также как и в хедере…


Текстом без видео и картинок неудобно рассказывать... Сделайте так:
  <div class="menu-wrapper">
    <div class="layout-positioner">
      <div class="menu">Menu</div>
    </div>
  </div>

.menu-wrapper {
   margin:10px 0;
   background-color: #3498db;
}

.menu {
  min-height: 25px;
  padding: 5px;
  background-color: #3498db;
}

#9

Гы ))) Вот, что я сделала пока не видела вашего нового коммента - наверное, не правильно, но помогло… Постаралась соскринить всю нужную информацию… (Сейчас переосмыслю вами предложенный код…)


#10

В общем, это то же самое, только я взяла ваши обозначения… Так не подходит? Или лучше все-таки для .menu-wrapper задавать меньше разных параметров - типа, как для “обёртки” (оболочки), а для .menu - больше, чтобы быть по точнее именно для дива, в которм находится текст…?


#11

Ни “больше” и ни “меньше”.
Просто те свойства, которые нужны…

.menu-wrapper {
  background-color: #3498db;
  min-height: 35px; / *не нужен, потому, что растягивается содержимым */
  margin-bottom: 10px;
  margin-top: 10px;
}

.menu {
  min-height: 25px; /* здесь нужен */
  padding: 5px;
  background-color: #3498db;  /* это свойство можно убрать,  повторяет цвет фона */
}

#12

Всё! Спасибо! Всё поняла - то, что вы объяснили! Очень вам признательна за помощь! Извините, помучила вас вопросами сегодня ))) Благодаря вам, начала разбираться по-немногу )) Спасибо!!!


#13

Спрашивайте, вопросами меня замучить не просто…


#14

признавайтесь, Вам htmlacademy доплачивает? :wink:


#15

Кому адресован вопрос? )) Мне или Valery_S ? ))


#16

Добрый вечер )) Я уже сразу к вам с вопросом - не подскажете, почему сайт не видит сделанную часть (3 голубые колонки)…? На проверке показвает, как-будто их нет…


#17

Вот уже сделала всё… а сайт не видит при проверке… Почему не видит, не знаете, в чём ошибка…?


#18

Сделала html-файл с link на css-файл и открыла в браузере, вот результат ))) Оно по вертикали и не должно тянуться? )))


#19

а как сделать чтобы menu находилься внутри блока layout-positioner и при этом ширина было как у боди?
У меня получается только как у родителя, то есть 350px


#20

Предполагаю, что у где-то лишний </div>.
После Promo-2 посмотрите внимательно.
Или проверьте код по адресу https://validator.w3.org/nu/#textarea

Когда контента будет больше – должно растянуться. Попробуйте.


Вставьте весь код здесь, или в одной из песочниц.
Посмотрим, что можно изменить, “улучшить”…