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


#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


#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

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