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

Vick · 20.Март.2018 22:58:29

<body>
    <div class="header">
      <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="features clearfix">
      <div class="layout-positioner">
          
                <div class="layout-column-1 layout-column">
                    Left
              </div>
          <div class="layout-column-2 layout-column">
                        Main
          </div>
          <div class="layout-column-3 layout-column">
            Right
          </div>
       </div>
    </div>
    <div class="footer">
        <div class="layout-positioner">
    Footer
        </div>
    </div>
</body>

.header {
min-height:auto;
padding-top:10px;
color: white;
background:#34495e;
}

.header .layout-column-1 {
float:none;
margin:0 50px 10px;
width: 340px;
height:30px;
padding:5px 5px 0;
background:#c0392b;
}

.header .layout-column-2 {
float:none;
height:30px;
margin-bottom:10px;
padding:5px 0 0 55px;
background:#3498DB;
}

.header .layout-column-4 {
float:right;
margin-right:50px;
margin-bottom:10px;
width:160px;
min-height:50px;
padding:5px;
background:#c0392b;
}

.header .layout-column-3 {
float:left;
margin-left: 50px ;
margin-bottom:10px;
width:160px;
min-height:50px;
padding:5px;
background:#c0392b;
}

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

.layout-positioner::after {
display: table;
content: “”;
clear: both;
}

.features .layout-column {
background:#3498DB;
margin:10px 5px;
min-height:100px;
}

.features .layout-column-1 {
float:left;
margin-left:50px;
width:60px;
padding:5px 5px;
}

.features .layout-column-3 {
float:right;
margin-right:50px;
width:60px;
padding:5px 5px;
}

.features .layout-column-2 {
float:left;
margin:10px 5px;
width:180px;
padding:5px 5px;
}

.footer {
min-height: 35px;
padding:5px 55px;
color: white;
background:#34495e;
}

Valery_S · 20.Март.2018 23:28:36

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

Kavitacia · 13.Май.2018 12:49:38

@Valery_S добрый день.
А не могли бы объяснить (показать) как вы предлагали реализовать этот момент:

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

Вы предлагаете использовать 2 разных центровщика (один для блока меню и второй для остальных блоков?) вместо одного паддинга/маржина для текста “Menu” ? Почему?

И если не сложно, покритикуйте мой вариант https://jsfiddle.net/Kavitacia/4uhLqs50/1/

Valery_S · 14.Май.2018 05:24:22

Сетка работает правильно – всё тянется по вертикали и центрируется.
Но, не центрируется меню.

Можно сказать, что центровщики разные, поскольку в HTML у каждого блока (или нескольких блоков) свой.
Но, в CSS – это один центровщик – в данном случае .layout-positioner, и свойства этого класса будут применяться ко всем блокам одинаково.

В Вашим коде меню выглядит расположенным по центру из-за padding-left: 55px;
Однако, при других размерах окна все остальные блоки будут расположены по середине, а меню всегда будет на 55px от левого края.
Измените ширину в body и это сразу станет заметно.

Поэтому да, я предлагаю и меню вложить в центровщик.
У хедера свой, у promo 1+promo 2 – свой, у меню – свой.
Но, с меню лучше поступить точно также как с футером – кроме центровщика добавить ещё блок для фона (если бы не голубой фон на всю ширину окна – можно было бы меню центрировать вместе с хедером, promo-1+promo2)

      <div class="head">
        <div class="layout-positioner">
          <div class="header">Header</div>
        </div>

        <div class="название придумайте сами"> /*для голубого фона*/
          <div class="layout-positioner">
            <div class="menu">Menu</div>
          </div>
        </div>

        <div class="layout-positioner">
/* если бы не голубой фон на всю ширину окна -- можно было бы */
/* и <div class="header">Header</div> */
/* и <div class="menu">Menu</div> вставить здесь...*/
          <div class="promo promo1">Promo 1</div>
          <div class="promo promo2">Promo 2</div>
        </div>
      </div>

_{…надеюсь не запутал…}

Kavitacia · 14.Май.2018 18:02:03

Вот именно голубой фон меня и вынудил использовать костыль " padding-left: 55px", я почему-то не додумался в этом месте до связки див_для_фона -> ценровщик -> меню, а зациклился на свойстве центровщика width: 350px - что делает невозможным фон на всю щирину.

Спасибо за ответ, не запутали. Ваше решение мне нравится.

NikViP · 15.Май.2018 07:00:16

Всем доброго дня!
Прошу понимающих посмотреть код и высказать замечания

https://jsfiddle.net/NikViP/d1ty4175/

С уважением!

      <!DOCTYPE html>
<html lang="ru">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
<div class="content">
    <div class="layout-positioner">
        <div class="header">Header</div>
    </div>
    <div class="menu">
        <div class="layout-positioner">
            <div>Menu</div>
        </div>
    </div>
    <div class="layout-positioner clearfix">
        <div class="promo1">Promo 1</div>
        <div class="promo2">Promo 2</div>
    </div>
</div>
<div class="clearfix">
    <div class="layout-positioner">
        <div class="column column-left">Left</div>
        <div class="column column-main">Main</div>
        <div class="column column-right">Right</div>
    </div>
</div>
<div class="footer">
    <div class="layout-positioner">
        <div>Footer</div>
    </div>
</div>
</body>
</html>

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

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

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

.content, .footer {
background-color: #34495e;
}

.header, .promo1, .promo2 {
background-color: #c0392b;
}

.menu, .column {
background-color: #3498DB;
}

.content {
min-height: 160px;
padding-top: 10px;
margin-bottom: 10px;
}

.layout-positioner {
width: 350px;
margin: 0 auto;
}

.header {
min-height: 25px;
padding: 5px 5px;
}

.menu {
min-height: 30px;
margin: 10px 0;
padding-top: 5px;
padding-left: 10px;
}

.promo1 {
float: left;
width: 160px;
min-height: 50px;
margin-right: 10px;
padding: 5px 5px;
}

.promo2 {
float: right;
width: 160px;
min-height: 50px;
padding: 5px 5px;
}

.column {
float: left;
min-height: 100px;
padding: 5px 5px;
margin-right: 10px;
}

.column-left {
width: 60px;
}

.column-main {
width: 180px;
}

.column-right {
width: 60px;
margin-right: 0;
}

.footer {
min-height: 35px;
margin-top: 10px;
padding-top: 5px;
padding-left: 10px;
}

Valery_S · 15.Май.2018 07:39:24

Вполне приемлема!

Перед кодом должна быть пустая строка.
От левого края окна до кода должно быть не менее 4 пробелов.
Вставляете, форматируете кнопкой </> в редакторе сообщений.
(Кнопка </> добавляет к коду 4 пробела слева…)

NikViP · 15.Май.2018 12:15:50

Спасибо! Кажется получилось.

Valery_S · 15.Май.2018 18:14:07

Ваш код не совсем верно центрует меню и футер…
В этой ветке, и многих других, достаточно информации, чтобы разобраться…
Сами попробуете, или нужны подсказки?
…и не совсем логично, на мой взгляд, применяется CSS…

NikViP · 16.Май.2018 05:48:20

Благодарю, что уделили своё время!

Конечно, вначале было бы здорово поразбираться самому, но для этого хотелось бы получить от вас более конкретное замечание. “Не совсем верно центрирует” – не смог понять, что имеется ввиду. Центрирует ведь? Пробовал заменять ширину body на 100% вместо фиксированной и тестировал в “стороннем” браузере – работет, центрирует. Просмотрел варианты других – увидел дополнительный div оборачивающий “центровщик”. Если вы об этом, то вначале сделал так же. Затем, когда просматривал код в поисках лишних, ненужных элементов – эту обёртку удалил. Решил не плодить сущностей без необходимости.

По поводу “нелогичности” в CSS тоже не очень понял, но готов согласиться
Откуда взяться логичности у полного новичка?
Вы имеете в виду, что например не стоит делать отдельную запись типа:

.header, .promo1, .promo2 {
background-color: #c0392b;
}

…раз всё равно в коде дальше есть эти селекторы ( .header, .promo1, .promo2) с другими дополнительными опциями и цвет фона можно было дописать к ним?
Или речь ещё о чём-то?

Ещё раз спасибо за отклик!

Valery_S · 16.Май.2018 21:01:13

Проверял средой разработки Chrome. Вызывается по F12.

Сравним результат работы Вашего кода:

Хедер правильно отцентрирован. У контента (текста) хедера везде одинаковые отступы.

На этой картинке видно, что центровщик футера смещён вправо и вниз.
Текст (особенно когда его мало) только выглядит расположенным по центру из-за отсутствия отступов, но сам блок с контентом сдвинут…

Предлагаю переписать футер заново, заодно разберём что, где, как работает…
Начнём с чистого листа…

1 Определяем <div class="footer"></div>
Поскольку div элемент блочный – то он растянется по всей ширине родительского блока (body),
а поскольку он пока пустой, и в CSS правил для него ещё нет – по высоте будет занимать 0 пикселей. Т.е. невидимый.

2 Вкладываем в этот контейнер ещё один div.

<div class="footer">
    <div class="layout-positioner"></div>
</div>

По-прежнему ничего не видно – два блока нулевой высоты, оба растянуты по всей ширине окна…

3 Добавляем ещё контейнер.

<div class="footer">
  <div class="layout-positioner">
    <div class="footer-content">Footer</div>
  </div>
</div>

Теперь должен быть текст “Footer”.
Если Вы по-прежнему в мнибраузере курса – текст не видно из-за белого цвета шрифта, определённого в body.
Измените временно цвет – и надпись появится.

Наконец-то хоть что-то. Теперь видим какой-никакой контент.
Этот текст растянул по высоте div с классом footer-content.
.footer-content растянул по высоте .layout-positioner,
а тот в свою очередь растянул .footer.

Теперь достаточно эйчтиэмэля для написания сиэсэса.

4 Глядя на макет добавляем правило для .footer-content

.footer-content {
    min-height: 35px;          /* минимальная высота */
    padding: 5px;              /* отступы со всех сторон */
    background-color: #34495e; /* фоновый цвет */
}

Белый цвет, определённый в body можно возвращать.
Теперь все немного нагляднее. При любом контенте (почти при любом) будут одинаковые отступы со всех сторон.
Блок будет растягиваться по высоте.

5 Определяем центровщик:

.layout-positioner {
    width: 350px;
    margin: 0 auto;
    outline: 1px dashed red;   /* временное свойство для наглядности расположения блока */
}

У центровщика одна задача – центрировать по горизонтали (не по вертикали) своё содержимое по отношению к родительскому блоку.
В данном случае родительским блоком является div c классом .footer.
А .footer по-прежнему растянут на всю ширину.

6 И последнее – то, что вначале было не совсем очевидно.
Зачем понадобился контейнер .footer?
Для фонового цвета за пределами центровщика.

.footer {
    background-color: #34495e;  /* фоновый цвет */
}

Так же строится и меню.
…да и всё остальное в этом испытании строится похожим образом…

.content {
min-height: 160px;
Минимальная высота не нужна – блок растягивается содержимым…

.menu {
min-height: 30px;
margin: 10px 0;
padding-top: 5px;
padding-left: 10px;
}
.footer {
min-height: 35px;
margin-top: 10px;
padding-top: 5px;
padding-left: 10px;
}
Эти правила Вы определили для родительских контейнеров центровщика – и подвинули центровщик вниз и вправо… (на второй картинке результат)

    <div class="layout-positioner clearfix">
        <div class="promo1">Promo 1</div>
        <div class="promo2">Promo 2</div>
    </div>
</div>
<div class="clearfix">              /* почему .clearfix здесь?*/
    <div class="layout-positioner"> /* почему не здесь? */
        <div class="column column-left">Left</div>
        <div class="column column-main">Main</div>
        <div class="column column-right">Right</div>
    </div>
</div>

padding: 5px 5px;  /* можно короче */
padding: 5px;      /* вот так */

.header, .promo1, .promo2 { /* здесь нет ошибок */
    background-color: #c0392b;
}

NikViP · 17.Май.2018 04:19:14

“Ваше величество! Вы знаете, что я старик честный, старик прямой.
Я прямо говорю правду в глаза, даже если она неприятна.
Позвольте вам сказать прямо, ваше величество…
Позвольте мне сказать вам прямо, грубо, по-стариковски: вы великий человек, государь!
Мне себя не перебороть. Я ещё раз повторю - простите мне мою разнузданность - вы великан! Светило!”

А, если серъёзно – очень глубоко! Да!

Перечитал ваш ответ уже несколько раз. Ещё буду!

Спасибо!!!

Valery_S · 17.Май.2018 04:30:41

“Ах какой ты! Ах, ах!”

NikViP · 17.Май.2018 05:16:46

С одной стороны не считаю себя вправе заставлять вас возвращаться к тщательно пережёванному для меня вопросу. С другой, не хочу показаться бездумным потребителем!

Просто удаление минимальной высоты не работает. Блок НЕ растягивается содержимым.
Чтобы это (растягивание) случилось пришлось подумать (“Что характЕрно!” ) и добавить margin-bottom: 10px; блоку “Promo2”. Тогда да, блок .content растянулся.

И, да, я тоже за красоту:

"padding: 5px 5px; /* можно короче */
padding: 5px; /* вот так */"

Отсюда вопрос – как вернее (красивее)?

Так:
{ margin: 0 10px 10px 0;}

Или так:
{ margin-right: 10px;
margin-bottom: 10px;
}

Valery_S · 17.Май.2018 05:40:52

Здесь дело не в красоте.
Эти два правила не равнозначны.

{ margin: 0 10px 10px 0;} переопределит размеры со всех сторон.

{ margin-right: 10px;
margin-bottom: 10px;
} переопределит только справа и снизу.
Это не значит, что сверху и слева будет ноль.
Сверху и слева останутся значения определённые ранее – это может быть и 99px, и -20px.

NikViP · 17.Май.2018 07:14:16