27/32 Хэлп

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

Проблема,собственно,вот в чем.Мой код ужасен(всё потому что тема для меня оказалась сложноватой),всё же я попыталась.Попытки увенчались 95-ю процентами. Прошу указать на ошибки и помочь с блоком меню))
Имя файла изображения453×583 14.7 KB

код HTML:

CSS:

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.clearfix::after {
display: table;
content: “”;
clear: both;
}
.header {
background-color: #34495e;
height: 170px;

}
.layout-positioner {
width: 350px;
margin-left: 50px;
margin-right: 50px;
padding-top: 10px;
}

.layout-column {
background-color:#c0392b;
padding: 5px;
}
.layout-column-1 {
height: 25px;
}
.layout-column-2 {
background: #3498DB;
margin:10px 0;
height: 25px;

}
.layout-column-3,
.layout-column-4 {
float: left;
margin-right:10px;
width: 160px;
height: 50px;

}
.layout-column-4 {
margin-right: 0;
}
.content {
margin-bottom: 10px;
height: 120px;
}
.content123 {
float:left;
background: #3498DB;
height: 100px;
margin-right:10px;
padding:5px;
}
.content-left {
width: 60px;
}
.content-main {
width: 180px;
}
.content-right {
margin-right: 0;
width: 60px;
}

.footer {
background: #34495e;
height: 40px;
}
.all-footer {
margin-top: -5px;
padding:0 5px;
}

2

Разместите, пожалуйста, Ваш HTML код так же, как и CSS - чтобы можно было скопировать в мини-браузер и там с ним посражаться )

4 
Держите)Только сообщите,что не так я делаю 
    <!DOCTYPE html> 
    <html lang="ru"> 
    <head> 
    <title>Испытание: строим сетку</title> 
    <meta charset="utf-8"> 
    </head> 
    <body> 
    <div class="header clearfix"> 
    <div class="layout-positioner"> 
    <div class ="layout-column-1 layout-column ">Header 
    </div> 
    <div class="layout-column-2 layout-column"> 
    Menu 
    </div> 
    <div class="layout-column-3 layout-column"> 
    Promo 1 
    </div> 
    <div class="layout-column-4 layout-column"> 
    Promo 2 
    </div> 
    </div> 
    </div> 
    <div class="content clearfix"> 
    <div class="layout-positioner"> 
    <div class="content-left content123"> 
    Left 
    </div> 
    <div class="content-main content123"> 
    Main 
    </div> 
    <div class="content-right content123"> 
    Right 
    </div> 
    </div> 
    </div> 
    <div class="footer clearfix"> 
    <div class="layout-positioner"> 
    <div class="all-footer"> 
    Footer 
    </div> 
    </div> 
    </div> 
    </body> 
    </html>
5

Любой код имеет право на существование:wink: Другой вопрос, что какой-то код требует доработки, а какой-то нет. Итак, чтобы решить Вашу задачу, я бы сделал так: удалил общий центровщик из header. Далее, создал бы доп. блок для menu, а внутрь него и вложил центровщик с содержимым:
<div class="menu"> <div class="layout-positioner"> <div class="layout-column-2 layout-column"> Menu </div> </div> </div>
Таким образом, блок .menu растянется на всю ширину родительского контейнера, ему можно задать background. А второй, layout-column, как раз подпадёт под центровщик и будет передвинут в центр. При этом, сделав одинаковым цвет эти 2-х блоков, получится как раз то, что требуется в задании. Но при всём этом нужно изменить центровщик: я бы задал ему только width и позицию в центре. Это можно сделать проще: margin: 0 auto; , а не рассчитывать пиксели. Далее, я сделал бы по разобранным ранее примерам, добавив .layout-positioner::after со свойствами .clearfix, что позволит удалить из HTML добавки к основным блокам в виде .clearfix. И насчёт высот блоков. Я бы не задавал жёсткие высоты основным блокам-контейнерам, таким как .header, .content. Их высота получится автоматически за счёт высот отдельных блоков-содержимого и отступов. Дальше, чтобы не было выпадения маргинов, я бы задал блокам-контейнерам .header, .content. паддинги сверху и снизу- это позволит убрать их из центровщика и height из .header-а. Ну, а в конце обернуть центровщиком верхний красный блок и 2 с промо. Таким образом, в самом крупном верхнем блоке будет центровщик для каждого из уровней. Да, вспомнил ещё: как я понял из подсказок знающих людей, высоты лучше задавать через min-height, а не просто height. Остальные мелочи уже увидите, как поправить, сами. Пока такие мысли…
P.S. Напоследок один момент, который лично мне помогает увидеть, где проблемы в сетке: задавайте границы в процессе её создания. Каждому блоку, разными цветами. Трудно без них порой понять, почему не получается что-то сделать. А так - Вы увидите наглядно взаимоотношения элементов, а в конце, когда закончите, просто закомментируете их или удалите.

6

Спасибо за дельные советы,попытаюсь в будущем все учесть))

1 лайк
7

Здравствуйте, прошел задание на 95%, не могу понять как сделать 100%, помогите пожалуйста.

Screenshot_2.jpg1310×622 94 KB

CSS

[details=Summary]html,
body {
margin: 0;
padding: 0;
}

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

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

.head {
background: #c0392b;
padding-top: 5px;
padding-bottom: 15px;
padding-left: 5px;
margin: 0 auto;
width: 345px;
margin-bottom: 10px;
}

.menu {
background: #3498DB;
padding-top: 5px;
padding-bottom: 20px;
padding-left: 55px;
margin-bottom: 10px;

}

.promo {
background: #c0392b;
width: 165px;
height: 55px;
margin: 0 auto;
padding-top: 5px;
padding-left: 5px;
}

.promo1 {
float: left;
margin-left: 50px;
}

.promo2 {
float: right;
margin-right: 50px;
}

.layout-column {
float: right;
width: 130px;
min-height: 105px;
margin-right: 20px;
background: #3498DB;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 5px;
padding-left: 5px;
}

.features .layout-column {
margin-right: 0px;
}

.clearfix {
margin-right: 50px;
}

.column1,
.column3 {
width: 65px;
}

.column2 {
width: 185px;
}

.footer {
background: #34495e;
clear: both;
padding: 20px;
padding-top: 5px;
padding-left: 55px;

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

8

если внимательно посмотрите на картинку задания, то увидите, что Menu и Header одинаковые по высоте. У вас же он получились разные - вот все и поехало.
Из замечаний, не влияющих на отображение, но относящихся к правильности кода: у вас нет центровщика; “clearfix” - это устоявшееся название для блока-распорки, у вас он функцию распорки не выполняет; блоки должны тянуться по высоте, поэтому для .header высоту прописывать не стоит, для борьбы с “выпадением” флоатов используйте псевдораспорку.

9

Благодарю Вас!