[27-32] Помогите разобраться и исправить ошибки

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

Подскажите, пожалуйста, в чем тут проблема. Не получается изменить высоту у Menu и Footer и с расположением текста внутри этих блоков тоже какая-то непонятка.

[27_32].PNG1426×426 50.8 KB

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

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

.top {
background-color: #34495e;
width: 450px;
padding: 10px 0;
margin-bottom: 10px;
}

.wrapper {
width: 350px;
margin: auto;
}

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

.header {
background-color: #c0392b;
min-height: 25px;
padding: 5px;
}

.menu {
width: 100%
min-height: 25px;
padding: 5px;
margin: 10px 0;
background-color: #3498DB;
}

.menu:last-child {
background-color: #34495e;
}

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

.wrapper .promo {
float: left;
}

.promo:last-child {
margin-right: 0;
}

.features {
float: left;
width: 60px;
min-height: 100px;
margin-right: 10px;
background-color: #3498DB;
padding: 5px;
}

.main {
width: 180px;
}

.right {
float: right;
margin-right: 0;
}

2

Вы странно разметили HTML: у Вас есть обёртка wrapper, которая заключает в себя header. А потом почему-то обёрткой становится menu, которая заключает саму обёртку wrapper! Это так задумано?

3

Да, для того, чтобы отцентрировать содержимое.

4

Дайте Ваш код текстом - слишком замудрён, надо вставить в мини-браузер задания и поколдовать. Да, и у Вас ошибка в слове clearfix при классе top. А вообще, код должен быть единообразным: если у Вас wrapper - это наружная обёртка, то она должна быть такой для всех блоков обёрткой и не меняться ролями, равно как и блоки-центровщики.

5 
  <div class="top clearfix">
        <div class="wrapper clearfix">
            <div class="header">Header</div>
        </div>
        <div class="menu">
            <div class="wrapper">Menu</div>
        </div>
        <div class="wrapper clearfix">
            <div class="promo">Promo 1</div>
            <div class="promo">Promo 2</div>
        </div>
    </div>
    <div class="wrapper clearfix">
        <div class="features">Left</div>
        <div class="features main">Main</div>
        <div class="features right">Right</div>
    </div>
    <div class="menu">
        <div class="wrapper">Footer</div>
    </div>
6

Спасибо, Алексей, ошибку в clearfix исправила. Насчет единообразия идея понятна. Я решила, что если свойства у блоков схожие, то почему бы не сократить код…

7

Вы знаете, короткий код - это хорошее дело. Но при этом он не должен потерять логичности и понятности.

8

У Вас в CSS в .menu после 100% пропущена “;”. Поэтому код этого класса дальше не читается до очередной “;”, которая означает окончание свойства. Браузер не может понять, как width может быть 100% min-height: 25px; Для него это одно свойство.
А урок по сеткам пересмотрите ещё раз: я тоже ещё на стадии обучения, но: вот, скажем, Вам придётся поменять цвет .menu. В Вашей разметке изменится не только полоса Меню, но и кусок в footer! Такого быть не должно. Поэтому и текст ведёт себя странно: у Вас wrapper и другие вложенные элементы блоков меняются ролями. А текст ведь отсчитывает отступы от самого последнего контейнера, в котором находится.

9

Не меняются) Просто центровщик находится то внутри, то снаружи. Но это распространенная практика.

10

Ну, пусть будет так ) Ещё не сталкивался с таким ))

11

Спасибо огромное, что нашли мою ошибку!
Исправила и теперь блок меню вывалился вправо на 10px … Буду дальше разбираться, в чем дело.
У меня футер - это последний элемент с классом .menu, и его цвет задан отдельно. Ширина у .menu 450px. Насколько я понимаю, никакая часть не должна поменять цвет. Если не сложно, поясните, возможно я ошибаюсь.

12

Свойство box-sizing должно помочь вам.

2 лайка
13

Случайно обнаружил, что даже при выпадении меню за пределы всего контейнера проверка засчитывает задание за 100%!:open_mouth:

14

А Вы попробуйте задать цвет другой wrapper-y, например. И посмотрите, как он поменяет цвета внутри других блоков. Для данной задачи это некритично. Но - это лично мои размышления - это в дальнейшем может оказаться неудобным, если потребуется что-то менять. Могу ошибаться на этот счёт.

15

Да, помогло, спасибо за наводку!
Но пришлось добавить высоту и паддинги изменить. Что-то я совсем не понимаю, из-за чего так получилось. Результат 100%

html,

body {
margin: 0;
padding: 0;
}

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

.top {
background-color: #34495e;
width: 450px;
padding: 10px 0;
margin-bottom: 10px;
}

.wrapper {
width: 350px;
margin: 0px auto;
}

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

.header {
background-color: #c0392b;
min-height: 25px;
padding: 5px;
}

.menu {
width: 450px;
min-height: 35px;
padding: 5px 0 0 10px;
margin: 10px 0;
background-color: #3498DB;
box-sizing: border-box;
}

.menu:last-child {
background-color: #34495e;
}

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

.wrapper .promo {
float: left;
}

.promo:last-child {
margin-right: 0;
}

.features {
float: left;
width: 60px;
min-height: 100px;
margin-right: 10px;
background-color: #3498DB;
padding: 5px;
}

.main {
width: 180px;
}

.right {
float: right;
margin-right: 0;
}

16

Потому что с box-sizing: border-box; отступы учитываются в составе ширины, а по умолчанию отступы прибавляются к прописанной ширине.

1 лайк