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

VikkiPro · 23.Февраль.2018 20:43:22

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

Испытание: строим сетку

    <div class="container">
        <div class="columns-container clearfix">
         <div class="header block">Header</div>
           <div class="column1 block">Menu</div>
        <div class="column2 block">Promo1</div>
        <div class="column3 block">Promo2</div>
       </div>
    </div>
    <div class="container1">
        <div class="bloc block1">Left</div>
        <div class="bloc block2">Main</div>
        <div class="bloc block3">Right</div>
         <div class="footer block">Footer</div>
    </div>
   </body>

html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.columns-container {
width: 450px;
min-height:165px;
background:#34495e;
}
.block {
margin-bottom: 10px;
padding: 5px;
color: white;
background: #34495e;

}
.header{
margin:10px 50px;
background: #c0392b;
width: 340px;
min-height: 25px;
}

.column1 {
padding-left:50px;
float: left;
width: 395px;
min-height: 25px;
background:#3498DB;
}

.column2 {
float: left;
width: 160px;
min-height: 50px;
margin-left:50px;
background: #c0392b;
}
.column3 {
float: right;
width: 160px;
margin-right:50px;
min-height: 50px;
background: #c0392b;
}
.container1 {
width: 450px;
padding:0px;
}
.bloc {
margin-bottom: 10px;
padding: 10px;
color: white;
background: #3498DB;
}
.block1 {
float: left;
width: 50px;
min-height: 90px;
margin-left:50px;
margin-right: 10px;
}
.block2 {
float: left;
width: 170px;
min-height: 90px;
}
.block3 {
float: right;
width: 50px;
min-height: 90px;
margin-right:50px;
}
.footer {clear: both;
padding-left:55px;
min-height: 30px;

}

Valery_S · 23.Февраль.2018 22:30:13

Отредактируйте сообщение – HTML код вставьте полностью, иначе не понятно с чего вы начали.

VikkiPro · 23.Февраль.2018 22:53:13

html это весь, просто нет слова body . В результате показывает полое попадание, кроме отступа сверху

Valery_S · 23.Февраль.2018 23:35:46

Исправлять нужно многое и в HTML и CSS, и не только потому, что не сходится с образцом.

Введите в поиске по форуму Испытание: строим сетку [27/32], – советов, подсказок будет достаточно…

VikkiPro · 24.Февраль.2018 07:45:54

Спасибо большое, буду читать

Valery_S · 24.Февраль.2018 07:54:47

Хорошо, что вы меня правильно поняли.
Готовое решение я бы мог предложить, но лучше разберитесь сами.
Начните с HTML – структура не продумана, классы перепутаны, имена классов не содержательны…

VikkiPro · 24.Февраль.2018 08:49:55

Да, я поняла, спасибо большое. Мне важно самой разобраться, чтоб дальше сложнее не было. Просто меня сбило, то что все остальное попало. Попробую перечитать еще раз теорию.

VikkiPro · 24.Февраль.2018 10:32:15

можно конечно и долго смеяться, но лень-двигатель прогресса!

VikkiPro · 03.Март.2018 21:03:25

Валерий, добрый вечер. Я все таки перечитала все сначала и переделала работу с нуля. Подскажите, насколько логично и правильно теперь. Спасибо большое. Результат 100%. Я просто совсем новичок, хотя с образованием IT.

<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="container">
        <div class="header block">Header</div>
        <div class="menu block">Menu</div>
        <div class="promo1 block">Promo 1</div>
        <div class="promo2 block">Promo 2</div>
        <div class="left block">Left</div>
        <div class="main block">Main</div>
        <div class="right block">Right</div>
        <div class="footer block">Footer</div>
    </div>
  </body>

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

.container {
background:#34495e;
width: 450px;
height:170px;
margin: 0;
}
.block {
margin-top:5px;
margin-bottom: 5px;
padding: 5px;
color:white;
}
.header{
background:#c0392b;
margin-top:10px;
margin-left:50px;
width: 340px;
height:25px;
float:left;
}
.menu{
background:#3498DB;
margin:5px 0px;
width: 390px;
height:25px;
float:left;
padding-left:55px;
}
.promo1{
background:#c0392b;
margin-left:50px;
width: 160px;
height:50px;
float:left;
}
.promo2{
background:#c0392b;
margin-right:50px;
width: 160px;
height:50px;
float:right;
}
.left{
background:#3498DB;
margin-left:50px;
margin-top:15px;
width: 60px;
height:100px;
float:left;
}
.main{
background:#3498DB;
margin-left:10px;
margin-top:15px;
width: 180px;
height:100px;
float:left;
}
.right{
background:#3498DB;
margin-right:50px;
margin-top:15px;
width: 60px;
height:100px;
float:right;
}
.footer{
background:#34495e;
margin:5px 0px;
width: 390px;
height:30px;
float:left;
padding-left:55px;
}

Valery_S · 04.Март.2018 01:56:34

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

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

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

VikkiPro · 04.Март.2018 07:46:09

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

VikkiPro · 04.Март.2018 20:28:11

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

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

}

Valery_S · 05.Март.2018 03:19:44

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

Всё же Вам по прежнему нужно повторить 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;
}

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

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

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

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

VikkiPro · 05.Март.2018 15:23:55

Оказывается, всё сложнее, чем показалось на первый взгляд. Это наверное из-за того, что я вижу в этом задании просто таблицу с блоками, которые просто нужно поставить правильно по местам. А Вы смотрите на это, зная, что дальше это будет все заполняться и что вылезут бока. Очень тяжело понять зачем нужны распорки или центровщики читая только теорию и не видя это на практике. Спасибо вам большое, благодаря Вашей помощи я начинаю копаться глубже. Ведь проходя задание и видя, что там 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;}

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

Valery_S · 05.Март.2018 22:05:56

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

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

VikkiPro · 06.Март.2018 09:53:32

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

VikkiPro · 06.Март.2018 10:27:19

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

<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 нужно добавлять в остальном.

VikkiPro · 06.Март.2018 20:06:09

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

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

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

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

Valery_S · 06.Март.2018 23:21:56

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

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

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

VikkiPro · 07.Март.2018 07:59:58

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