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

Даже не знаю с чего начать…
Наверное логика есть, но я её не осилю.
У меня здесь вопросов больше чем у Вас.

Откройте предыдущее задание, обратите внимание на структуру HTML.
Если не всё понятно – придётся возвратиться на несколько уроков…

Рад помочь, но Вам нужно повторить float, разобраться с центровщиком, с размерами по вертикали, с псевдораспорками…

Спасибо большое, буду разбираться дальше. Все бесплатные уроки прошла, а именно на этом много вопросов. Хочу сначала закончить все здесь, а потом идти на платные

1 лайк

Добрый вечер. И снова, я к Вам)
Еще раз большое спасибо за помощь. Новый вариант, я уже вроде все здесь внимательно перечитала, погуглила всё.

    <div class="wrapper">
        <div class="verx clearfix">
    <div class="layout-column header">Header</div>
    <div class="layout-column menu">Menu</div>
    <div class="layout-column promo1">Promo 1</div>
    <div class="layout-column promo2">Promo 2</div>
        </div>
        <div class="features clearfix">
    <div class="layout-column left">Left</div>
    <div class="layout-column main">Main</div>
    <div class="layout-column right">Right</div>
        </div>
        <div class="footer clearfix">Footer
        </div>
    </div>

</body>

и код:
.wrapper {
width: 450px;
margin: 0 auto;
}
.clearfix::after {
display: table;
content: " ";
clear: both;
}
.verx {
margin-bottom: 10px;
color: white;
background: #34495e;
}
.verx .header {
float:left;
margin-top:10px;
margin-left:50px;
padding:5px;
width: 340px;
height:25px;
background: #c0392b;
}
.verx .menu {
float: right;
margin-top:10px;
padding:5px;
padding-left:55px;
width: 390px;
height:25px;
background: #3498DB;
}
.verx .promo1 {
float: left;
margin-top:10px;
margin-left:50px;
padding:5px;
width: 160px;
height:50px;
background: #c0392b;
}
.verx .promo2 {
float: right;
margin:10px;
margin-right:50px;
padding:5px;
width: 160px;
height:50px;
background: #c0392b;
}
.features {
margin-bottom: 10px;
}
.features .layout-column {
float:left;
padding: 5px;
min-height: 100px;
background: #3498DB;
margin-left:10px;
width:60px;
}
.features .left{
margin-left:50px;
}

.features .main{
width:180px;
}

.footer {

padding:5px;
padding-left:55px;
min-height: 40px;
color: white;
background: #34495e;

}

:blush:… немножко лучше (правда, не намного).
Но, по крайней мере уже проще что-то рекомендовать.

Всё же Вам по прежнему нужно повторить float, разобраться с центровщиком, с размерами по вертикали, с псевдораспорками…

Зачем float в хедере и в меню?
Если блоков несколько – тогда флоат есть смысл применять, чтобы расположить их по горизонтали.
Но, меню и хедер не нужно обтекать ни слева, ни справа.

Центровщик появился.
И выравнивает всю сетку целиком по середине,
Но, по середине нужно расположить только блоки с контентом.
Тёмная часть футера и верхняя тёмная часть должны растянуться по ширине окна.
Центрировать нужно по отдельности хедер, меню, футер,
Promo 1 и Promo 2 лучше положить в отдельный контейнер,
И центрировать уже его – этот контейнер с Promo.

И вот в этом же контейнере уже есть смысл применять флоат для блоков Promo1,2.

Также и с тремя остальными блоками Left, Right, Main.
Отдельный контейнер --> ценрируем --> флоатим.

Далее: у Вас везде заданы жесткие размеры по вертикали.
При наполнении контентом – блоки не будут растягиваться вниз: контент либо не будет помещаться, либо вывалиться вниз за пределы блоков.
Вместо height в этом испытании лучше применять min-height.

Класс .clearfix я бы убрал, а его свойства перенёс всё в тот же центровщик.:

.имя-центровщика {              /* центровщик */
    width: 350px;
    margin-left: auto;
    margin-right: auto;
    outline: 1px dashed #0f0;   /* временное свойство */
}
.имя-центровщика::after {       /* псевдораспорка */
    display: table;
    content: "";
    clear: both;
}

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

Если мне удасться разгадать, по какой схеме Вы назначаете блокам классы – возможно, смогу ещё что-нибудь дописать…:blush:

И немного об общем подходе.
Попробуйте следующее:
Не пишите весь код HTML, потом весь CSS?
Вначале добавьте в HTML один блок – хедер, добейтесь от него по максиму.
Добавьте ему класс, в CSS классу присвойте нужные свойства, чтобы увидеть и этот блок, и что будет у него внутри.
Пригодится ли этот класс в дальнейшем ещё где-либо?
Подумайте, как этот блок будет взаимодействовать с другими блоками.
Нужно ли его завернуть в ещё один div (кстати, нужно будет).
И, если нужно, то с какой целью?

Вот так всё можно навернуть одно за другим…

2 лайка

Оказывается, всё сложнее, чем показалось на первый взгляд. Это наверное из-за того, что я вижу в этом задании просто таблицу с блоками, которые просто нужно поставить правильно по местам. А Вы смотрите на это, зная, что дальше это будет все заполняться и что вылезут бока. Очень тяжело понять зачем нужны распорки или центровщики читая только теорию и не видя это на практике. Спасибо вам большое, благодаря Вашей помощи я начинаю копаться глубже. Ведь проходя задание и видя, что там 100% , ты думаешь, что всё ок и идешь дальше. А оказывается нет(((. Еще раз спасибо и мой уже 4 - 100% вариант)))

  <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>
 <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 class="foot">
        <div class="centrovshik">
            <div class="footer">Footer</div>
        </div>
 </div> 

и код:

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

.centrovshik{
width: 350px;
margin-left: auto;
margin-right: auto;}

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

.head {
width: 100%;
padding-top:10px;
padding-bottom:10px;
color: white;
background: #34495e; }

.header {
width: 340px;
min-height:25px;
margin-left: auto;
margin-right: auto;
padding:5px;
background: #c0392b;}

.menu {
min-height:25px;
padding:5px;
padding-left:55px;
margin-top:10px;
background: #3498DB}

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

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

.stolbikiLMR .stolb{
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;
color: white;
background: #34495e; }

.footer{padding:5px;}

Кстати, рамка очень помогла, Без нее я бы не справилась)

1 лайк

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

Сделать это можно следующим образом:
Скопируйте Ваш 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 лайка

Спасибо большое, я не думала, что нужно проверять это все на деле, хотя это и логично. Просто не приходило в голову, выполняла задания и всё. Теперь буду. у меня стоит Sublim Text, вроде разобралась как он работает.
У меня остался по заданию один вопрос. Зачем центровать Меню? я так понимаю этот блок должен растягиваться по всей ширине. Если обернуть в отдельный div текст, что будет в нем находиться, тогда да, есть смысл центровать текст, чтоб не делать отступ внутренний.
А Вы не похожи на человека. который учится) Вы наверное уже всё здесь прошли и работаете в этой сфере?

1 лайк

немного поправила текст:

<div class="head">

          <div class="header centerer">Header</div>
          <div class="menu">Menu</div>
      <div class="centerer">
          <div class="promo promo1">Promo 1</div>
          <div class="promo promo2" >Promo 2</div>
      </div>
 </div>
 <div class="centerer">
            <div class="column left">Left</div>
            <div class="column main">Main</div>
            <div class="column right">Right</div>
 </div>
 <div class="foot">
        <div class="centerer">
            <div class="footer">Footer</div>
        </div>
 </div>   

и код:
html,
body {
margin: 0;
padding: 0;
}

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

.centerer{
width: 350px;
margin-left: auto;
margin-right: auto;
}

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

.head {
padding-top:10px;
padding-bottom:10px;
background: #34495e;
}

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

.menu {
min-height:25px;
padding:5px;
padding-left:55px;
margin-top:10px;
background: #3498DB}

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

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

.column{
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{background:#34495e; }

.footer{padding:5px; min-height:30px;}

Все замечания учла, кроме центравщика в Меню, так как пока не могу понять зачем он , если только один div. И еще, в строчке header все равно приходится указать ширину, так как она на 10px короче центровщика. Если менять центровщик, то много padding и margin нужно добавлять в остальном.

проверила все через программу и опять миллион вопросов)))))
например почему в колонках left right слова целиком не влазят и пропадают окончания, поняла почему нужен центровщик в колонке Меню!


Вариант Ваш с центровщиком в Меню

И вариант мой с еще одним div в меню

спасибо еще раз!!! Наконец-то уже здесь всё разобрала

1 лайк

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

Нет, я такой же ученик как и Вы. В курсе дошёл до раздела “Знакомство с HTML5”…

@VikkiPro С чем-нибудь ещё разберёмся?

Конечно, давайте разбираться. Тем более я уже все проверяю в Sublime :blush:. Я вчера еще раз переделала сетки последнее задание. До этого был полный крах,много непонятного текста. Вчера все оказалась просто, добавлением всего наверное 8 строчек в код. Осталась одна загвоздка с интервалами. Прочла статью, которую в теории рекомендовали, но я почему-то пропустила :grin:, про пять способов решения этого вопроса. Но у меня закончились попытки. Сегодня после 23:00 добавят и можем разобраться с 32/32. Мне показалось, что это легкое задание, за исключением сдвига первого кота) давайте, я создам там тему, выложу свой вариант и поговорим, может я много что упустила или не учла. А так называйте любую тему, буду выкладывать свое решение и будем обсуждать. Я прошла все 19 курсов, все на 100% , но Вы же видели мои решения, они мягко сказать " не совершенны" :grinning:. Хотела уже идти на платные, но я никуда не спешу мне хочется разобраться. Раз Вам это интересно, то помогите мне, я думаю много новичков, смогут найти себе ответы здесь. Еще раз спасибо!

<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;
}

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

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

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

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

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

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

Можно сказать, что центровщики разные, поскольку в 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>

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

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

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

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

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;
}

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

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

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

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