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

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

Доброго времени суток! Выполнил испытание на 95%, всё сходится идеально кроме двух моментов.

  1. Основной. Не понимаю, как растянуть блок меню на всю ширину хедера. Конечно, есть вариант, не центрировать этот блок, задать ему родительскую ширину, а слово Menu отбить паддингами, но сам понимаю, что это неправильно.

  2. Менее значимое, но, как говорится, бомбит. В футере слово Footer пришлось позиционировать паддингами, потому что центровщик ставит его вровень с границей блока. Сердце подсказывает, что это не лучший вариант!
    Подскажите, пожалуйста, как решить эти косяки? Спасибо)

     <body>
 <div class="header">
     <div class="layout-positioner">
         <div class="layout-column-1 layot-column">
             Header
         </div>
         <div class="layout-column-2 layot-column">
             Menu
         </div>
         <div class="layout-column-3 layot-column">
             Promo 1
         </div>
         <div class="layout-column-4 layot-column">
             Promo 2
         </div>
     </div>
 </div>
 <div class="content">
     <div class="layout-positioner">
         <div class="layout-column-1 content-column">
             Left
         </div>
         <div class="layout-column-2 content-column">
             Main
         </div>
         <div class="layout-column-3 content-column">
             Right
         </div>
     </div>
 </div>
 <div class="footer">
     <div class="layout-positioner">
         Footer
     </div>
 </div>

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

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

.header {
background-color: #34495e;
padding-top: 10px;
}

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

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

.layot-column {
padding: 5px;
margin-bottom: 10px;
}

.header .layout-column-1 {
min-height: 25px;
background-color: #c0392b;
}

.header .layout-column-2 {
min-height: 25px;
background-color: #3498DB;
}

.header .layout-column-3 {
float: left;
width: 160px;
min-height: 50px;
margin-right: 10px;
background-color: #c0392b;
}

.header .layout-column-4 {
float: left;
width: 160px;
min-height: 50px;
background-color: #c0392b;
}

.content {
padding-top: 10px;
}

.content-column {
min-height: 100px;
margin-bottom: 10px;
padding: 5px;
background-color: #3498DB;
}

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

.content .layout-column-2 {
float: left;
width: 180px;

}

.content .layout-column-3 {
float: right;
width: 60px;
}

.footer {
min-height: 30px;
padding-top: 5px;
padding-left: 10px;
background-color: #34495e;
}

2

%D0%A1%D0%BA%D1%80%D0%B8%D0%BD
Скрин.jpg900×578 64.8 KB

3

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

4

Я уже читал эту тему, но конкретного ответа не нашел. Может вы подскажете, я вижу, вы сведущи в подобных вопросах, общая структура кода верная или где-то ошибка?

5

Если вкратце: Вам нужно изменить структуру HTML.

6

Ага, у меня была мысля задать дополнительный класс для меню, но потом решил, что это избыточно. То. есть, в СSS все более-менее неплохо?

7

Можно обойтись меньшим количеством классов.
Внимательно я не смотрел – CSS в данном случае вторичен.

8

Центровать можно либо блок, либо сам контент

В меню можно контент отцентровать доп оберткой например, а само меню растянуть
<div class="menu"><div class="layout-positioner padding">Menu</div></div>

9

Большое спасибо! Об этом я как-то не подумал)

10

Тогда другой вопрос возникает, если центровать контент, то текст располагается по краю блока. Приходится сдвигать его вправо дополнительным паддингом внутри класса, но это же какая-то лажа… Никак не могу понять, что я делаю не так(((

11

почему свойство padding это лажа? Оно для этого и создано - внутренние отступы

12

Мой перфекционизм меня добьёт))) Всё время кажется, что надо ещё оптимизировать)

13

время теряете, надо руку набивать не на упражнениях, а верстая сайты по макетам. А это отличается от упражнений

14

Прямо сейчас этим занимаюсь, верстаю по макету)