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

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

Предполагаю, что Вы свою сетку не проверяете нигде, кроме учебного минибраузера.
И, из-за этого сомневаетесь – всё ли у Вас правильно.

Сделать это можно следующим образом:
Скопируйте Ваш HTML код и сохраните, например, под именем index.html.
Скопируйте Ваш CSS код и сохраните, например, под именем style.css.
Подключите style.css к Вашему index.html при помощи link.
В HTML добавьте в каждый блок немного контента, – любых слов, разделённых пробелами.
И ещё. В этом испытании нужно подправить следующее правило:

body {
   width: 450px;      /* закомментировать или исключить из правила */
   height: 335px;     /* закомментировать или исключить из правила */
   font-family: “Arial”, sans-serif;
   font-size: 10px;
   color: white;
}

Это для того, чтобы сетка могла тянуться по всей ширине и высоте окна.
Вышеперечисленные размеры нужны только для учебного минибраузера.
После изменений не забывайте сохранять файлы.

Смело открывайте в броузере, и смотрите что не так:

Верхняя часть сетки:

<div class="head">
    <div class="header">Header</div>
    <div class="menu">Menu</div>
    <div class="centrovshik">
      <div class="promo promo1">Promo 1</div>
      <div class="promo promo2" >Promo 2</div>
    </div>
</div>

Здесь Вы правильно поставили центровщик для promo.
Но, меню у Вас по прежнему не центрируется.
Хедер центрируется, но не при помощи центровщика, а свойствами magrin класса .header.
Так тоже можно, но не логично.
Удобнее и меню и хедер по-отдельности завернуть в центровщик.

Средняя часть:

<div class="stolbikiLMR">
    <div class="centrovshik">
        <div class="stolb left">Left</div>
        <div class="stolb main">Main</div>
        <div class="stolb right">Right</div>
    </div>
 </div>

div с классом stolbikiLMR можно убрать.
В общем-то он не мешает, но и смысла в нём нет… Он нигде не используется.
Остальное сделано верно.

Футер: Здесь всё отлично!

<div class="foot">
    <div class="centrovshik">
        <div class="footer">Footer</div>
    </div>
</div>

CSS:

.head {
    width: 100%;     /* это лишнее */
    padding-top:10px;
    padding-bottom:10px;
    color: white;   /* это тоже лишнее */
    background: #34495e;
 }
 
.header {
    width: 340px;        /* Вам пришлось применить из-за отсутствия центровщика в HTML */
    min-height:25px;
    margin-left: auto;   /* Вам пришлось применить из-за отсутствия центровщика в HTML */
    margin-right: auto;  /* Вам пришлось применить из-за отсутствия центровщика в HTML */
    padding:5px;
    background: #c0392b;
}

.menu {
    min-height:25px;
    padding:5px;
    padding-left:55px;   /* Вам пришлось применить из-за отсутствия центровщика в HTML */
    margin-top:10px;
    background: #3498DB
}

Вот здесь отлично – сразу понятно зачем класс .promo и зачем классы .promo1,2!

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

.promo1 {float: left;}
.promo2 {float: right;}

Здесь тоже Ok!

stolbikiLMR .stolb {    /* stolbikiLMR из HTML убрать вместе с div */
    min-height: 100px;
    padding:5px;
    margin-top:10px;
    margin-bottom:10px;
    background: #3498DB;
}

.left {float: left; width: 60px;}
.main {float: left; margin-left:10px; width: 180px; }
.right{float: right;margin-left:10px; width: 60px;}

.foot{
    min-height: 40px;     /* перенести в .footer */
    color: white;         /* можно убрать */
    background: #34495e; 
}

.footer{padding:5px;}

И вот ещё полезно знать: http://krekotun.ru/ui-developer-skills/#naming

2 лайка