27/32 Помогите пожалуйста)

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

Всем привет. Подскажите советом, что я делаю не так?

`    <body>
    <header>
        <div class="content-pos clearfix">
        <div class="logo">Header</div>
        </div>
        <nav class="main-menu">
            <div class="content-pos clearfix">Menu</nav></div>
        <div class="content-pos clearfix">
        <div class="promo1">Promo 1</div>
        <div class="promo2">Promo 2</div>
        </div>
    </header>
    <div class="content">
    <div class="content-pos clearfix">
        <div class="columns">
        <section class="main column-1">
            Left
        </section>
        <section class="main column-2">
            Main
        </section>
        <section class="main column-3">
            Right
        </section>
    </div>
    </div>
    </div>

    <footer>
            <div class="content-pos">Footer</div>
    </footer>

    </body>
</html>`

CSS

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            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;
}

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

header,
footer {
    background: #34495e;
}

header {padding-top: 10px;}

.content-pos {
    margin: 0 auto;
    width: 350px;
}

.logo,
.main-menu,
.promo1,
.promo2 {
    margin-bottom: 10px;
}

.logo,
.main-menu {
    padding: 5px 0 20px 5px;
}

.logo {
    background: #c0392b;
}

.main-menu,
section {
    background: #3498DB;
}

.promo1,
.promo2 {
    background: #c0392b;
    width: 170px;
    padding: 5px 0 45px 5px;
}

.promo1 {
    margin-right: 10px;
    float: left;
}

.promo2 {
    float: right;
}

.columns {
    float: left;
}

.main {
    float: left;
    margin: 10px 10px 10px 0;
    min-height: 110px;
    padding: 5px 0 0 5px;
}

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

.column-1,
.column-3 {
    width: 70px;
}

.column-2 {
    width: 190px;
}

footer {
    padding: 5px 0 20px 5px;
}
/*====== CLEARFIX ======*/

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
2

:open_mouth: Что это?

Но ладно

Закрыто неверно.
А по поводу несовпадений высоты, попробуйте ее задать отдельным классам
Например,
.logo {
background: #c0392b;
height:35px;
}

3

Спасибо за ответ. Все равно не принимается решение, хотя на макете все более-менее схоже.
Насчет [quote=“Gnom, post:2, topic:3710”]
:open_mouth: Что это?

Но ладно
[/quote]

http://ru.learnlayout.com/box-sizing.html

4

Скидывайте код, где высоту указали)
За ссылочку спасибо, изучу

5

Если я правильно понял, то мне надо вместо внутренних отступов задать высоту?

6

С таким кодом еще меньше соответствия стало :unamused:

7

Нет, это не взаимосвязанные вещи. Отступы вам, правда, придется кое-где подкорректировать, чтобы надписи Menu и Footer совпали с образцом по местоположению.

8

Сбросьте свой новый код. У меня, исходя из вашего, 100% таки вышло.

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

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

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

header,
footer {
    background: #34495e;
}

header {padding-top: 10px;}

.content-pos {
    margin: 0 auto;
    width: 350px;
}

.logo,
.main-menu,
.promo1,
.promo2 {
    margin-bottom: 10px;
}

.logo,
.main-menu {
    padding: 5px 0 0 5px;
    height: 30px;
}

.logo {
    background: #c0392b;
}

.main-menu,
section {
    background: #3498DB;
}

.promo1,
.promo2 {
    background: #c0392b;
    width: 165px;
    padding: 5px 0 0 5px;
    height: 55px;
}

.promo1 {
    margin-right: 10px;
    float: left;
}

.promo2 {
    float: right;
}

.columns {
    float: left;
}

.main {
    float: left;
    margin: 10px 10px 10px 0;
    min-height: 110px;
    padding: 5px 0 0 5px;
}

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

.column-1,
.column-3 {
    width: 65px;
}

.column-2 {
    width: 185px;
}

footer {
    padding: 5px 0 0 5px;
    min-height: 30px;
}
/*====== CLEARFIX ======*/

.clearfix:after {
    content: '';
    display: table;
    clear: both;
}
10

Для logo и main-menu высота должна быть 35px

11

Promo1 promo2 высота 60px

12 
.logo,
.main-menu {
    padding: 5px 0 0 5px;
    height: 35px;
}

.logo {
    background: #c0392b;
}

.main-menu,
section {
    background: #3498DB;
}

.promo1,
.promo2 {
    background: #c0392b;
    width: 165px;
    padding: 5px 0 0 5px;
    height: 60px;
}

Еще меньше соответствий)

13

Имя файла изображения1227×1032 189 KB

14

А в Footer min-height откуда взялась?

15

вернул назад padding - ничего не изменилось, height тоже не дает результата.

16

Paddingи свои обратно верните, как было, у вас они в некоторых местах обнулены

17

Все сдаюсь)))
`

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
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;
}

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

header,
footer {
background: #34495e;
}

header {padding-top: 10px;}

.content-pos {
margin: 0 auto;
width: 350px;
}

.logo,
.main-menu,
.promo1,
.promo2 {
margin-bottom: 10px;
}

.logo,
.main-menu {
padding: 5px 0 20px 5px;
height:35px;
}

.logo {
background: #c0392b;
}

.main-menu,
section {
background: #3498DB;
}

.promo1,
.promo2 {
background: #c0392b;
width: 170px;
padding: 5px 0 45px 5px;
height:60px;
}

.promo1 {
margin-right: 10px;
float: left;
}

.promo2 {
float: right;
}

.columns {
float: left;
}

.main {
float: left;
margin: 10px 10px 10px 0;
min-height: 110px;
padding: 5px 0 0 5px;
}

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

.column-1,
.column-3 {
width: 70px;
}

.column-2 {
width: 190px;
}

footer {
padding: 5px 0 20px 5px;
}
/====== CLEARFIX ======/

.clearfix:after {
content: ‘’;
display: table;
clear: both;
}
`

1 лайк
18

Спасибо, большое, мистер Гном)
Вся соль в том, что нужно было указать высоту блоков? Или я опять что-то не правильно понял?:slight_smile:

19

Да, и всего в двух местах) ну и до ста вам с некоторыми padding надо поколдовать
Пысы: я миссис Гном:blush:

1 лайк
20

Извините, миссис Гном, впредь буду внимательнее)) и еще раз спасибо, это была моя последняя попытка в этом задании :blush:

1 лайк