[27/32] 100%. Прошу посмотреть код и указать на минусы и их последствия при верстке.

susdem · 26.Декабрь.2016 16:23:10

`

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

Header

Menu

Promo 1

Promo 2

Left

Main

Right

Footer

`

susdem · 26.Декабрь.2016 16:24:44

html,

body {
margin: 0;
padding: 0;

}

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

.clearfix::after {
display: table;
content: “”;
clear: both;
}
.block1 {
background-color:#34495e;
width: 450px;
margin-bottom:10px;

.header {
width: 340px;
background-color:#c0392b;
height:25px;
margin:10px 50px;
float:left;
padding:5px;
}
.menu {
background-color:#3498DB;
clear:both;
height:25px;
margin-bottom:10px;
padding:5px;
padding-left:55px;

}
.column1 {
background-color:#c0392b;
float:left;
margin-left: 50px;
width:160px;
height: 50px;
margin-bottom:10px;
padding:5px;

}
.column2 {
background-color:#c0392b;
float:left;
margin-left: 10px;
width:160px;
height: 50px;
padding:5px;
}
.block2 {
width: 450px;
}
.column3 {
background-color:#3498DB;
float:left;
margin-bottom:10px;
margin-left: 50px;
width:60px;
height:100px;
padding:5px;
}
.column4 {
background-color:#3498DB;
float:left;
margin-left: 10px;
width:180px;
height:100px;
padding:5px;
}
.column5 {
background-color:#3498DB;
float:left;
margin-left: 10px;
width:60px;
height:100px;
padding:5px;
}
.footer {
background-color:#34495e;
width: 395px;
height:35px;
clear:both;
padding:5px;
padding-left:55px
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/

Ineska · 26.Декабрь.2016 17:23:50

Блоки в сетке не центрированы, из-за чего при большем разрешении экрана весь контент будет ближе к левой стороне, а справа - пустота…
Фиксированные высоты у блоков, из-за чего невместившийся в отведенную высоту контент будет вываливаться за пределы блоков.
В верстке присутствует распорка, однако для меню и футера clear: both; прописано отдельно.
Всего лишь два блока-обертки, и во вторую вместе в тремя колонками включен футер, что по-моему нелогично и нарушает общую структуру страницы.

Почитайте темы на форуме по этому заданию. Вам есть что исправить.

susdem · 26.Декабрь.2016 18:00:03

Спасибо, что оценили и пояснили. Однако не получается внести исправления.

Когда центрую блоки, то границы “Menu” (синего цвета) тоже центруются и становятся узкими по краям(а на образце они растянуты). Я сразу обратил внимание на то, что проще отцентровать все элементы, но пришлось выставлять все вручную.
2… Я так понимаю надо выставить минимальную высоту, вместо фиксированной?
Не понимаю почему не работает распорка (или работает частично). Убираю “clear”, и “Menu” уезжает вверх. Убираю распорку и опять же все съезжает. Возвращаюсь к уроку, там все работает, а у меня как-то криво.
Надо всего лишь обернуть отдельно и прописать необходимые атрибуты?

Ineska · 26.Декабрь.2016 18:15:40

На счет минимальной высоты вы правы.
Распорка срабатывает если у блока-родителя все дочерние содержат свойство float. Поэтому и нужны еще обертки, отдельно на блок с двумя колонками и отдельно на блок с тремя колонками.
Чтобы центрировать меню, нужна еще одна отдельная обертка. Помните о том, что в случае с меню вы центрируете не сам блок, а его содержимое, поэтому блок центровщик будет внутри меню.

susdem · 28.Декабрь.2016 15:03:37

В общем, свою “писанину” не смог до ума довести, поэтому сделал “с нуля”.
Если будет возможность, то посмотрите пожалуйста.

</head>
<body>
    
<div class="block">
   <div class="block1 center clearfix">
       <div class=header>Header</div>
   </div>
   <div class="block2">
       <div class=menu>Menu</div>
   </div>
   <div class="block3 center clearfix">
      <div class="block3-1">
         <div class=promo1> Promo 1</div>
      </div>
      <div class="block3-2">
         <div class=promo2> Promo 2</div>
      </div>
   </div>
   </div>
   <div class="block4 center">
       <div class=block4-1>
          <div class=left> Left</div>
       </div>
       <div class=block4-2>
          <div class=main> Main</div>
       </div>
       <div class=block4-3>
          <div class=right> Right</div>
       </div>
   </div>
   <div class=block5>
       <div class="footer"> Footer</div>
   </div>
</body>

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

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

.block {
background-color: #34495e;
width: 450px;
padding: 10px 0px;
}
    
.block1 {
background-color: #c0392b;
float:left;
width: 350px;
min-height: 35px;
}

.header {
padding-top: 5px;
padding-left: 5px;   
}

.block2 {
 background-color: #3498DB; 
 float:left;
 width: 450px;
 min-height: 35px;
 margin: 10px auto;
}

.menu {
padding-top: 5px;
padding-left: 55px;    
}

.block3-1 {
background-color: #c0392b; 
float:left;
width: 170px;
min-height: 60px;
/*margin-left: 50px;*/
} 

.block3-2 {
background-color: #c0392b; 
float:left;
width: 170px;
min-height: 60px;
margin-left: 10px;
} 

.promo1 {
padding-top: 5px;
padding-left: 5px;
}

.promo2 {
padding-top: 5px;
padding-left: 5px;
}

.block4 {
padding: 10px 0px;    
}

.block4-1 {
background-color: #3498DB;
float:left;
width: 70px;
min-height: 110px;
margin-right: 10px;
}

.left {
padding-top: 5px;
padding-left: 5px;
}

.block4-2 {
background-color: #3498DB;
float:left;
width: 190px;
min-height: 110px;
}

.main {
padding-top: 5px;
padding-left: 5px;
}

.block4-3 {
background-color: #3498DB;
float:left;
width: 70px;
min-height: 110px;
margin-left: 10px;
}

.right {
padding-top: 5px;
padding-left: 5px;
}

.block5 {
background-color: #34495e;
float:left;
width: 450px;
min-height: 35px;
margin: 10px 0px;
}

.footer {
padding-top: 5px;
padding-left: 55px;
}

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

.center {
margin-left: 50px;
width: 350px;
}

Ineska · 28.Декабрь.2016 15:06:54

В прошлый раз код вставить правильно у вас получилось.

Ineska · 28.Декабрь.2016 15:41:13

Про кавычки забыли совсем.
Возможно картинка поможет вам правильно увидеть сетку.

.layout-positioner{
width: 350px;
margin: auto;
}
.layout-positioner::after {
display: table;
content: “”;
clear: both;
}

susdem · 28.Декабрь.2016 16:23:03

Разобрался. Все теперь на своих местах. Спасибо!
Кавычки нужны, только если я перечисляю несколько классов (свойств и т.д.) или я ошибаюсь?

Ineska · 28.Декабрь.2016 16:28:56

Где такое прочитали? Я допускаю мысль о том, что существуют некоторые необязательные элементы в синтаксисе, но… Все атрибуты в кавычках пишутся, будь то класс, идентификатор, адрес ссылки или что-то другое.

susdem · 28.Декабрь.2016 16:39:57

Понял на практике, что ничего не изменится, если не будет кавычек (за исключением вышеуказанного).

Ineska · 28.Декабрь.2016 16:44:55

В кодгайде по этому поводу вроде бы ничего не сказано.

narsil · 03.Январь.2017 23:25:32

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

Почему здесь “layout-positioner”, а не “clearfix”?

Ineska · 04.Январь.2017 05:49:42

Мог быть и clearfix, тогда у блока было бы два класса, а так только один.

inanutshell86 · 24.Февраль.2017 08:53:08

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

h1v · 20.Май.2017 15:58:00

насколько нижний скан соответствует оригиналу? имеет ли значение различия у positioner’ов?

Где можно более подробно разобрать эти позиционеры? Не могу понять для чего нужны блоки в блоках, которые также в блоках, если можно задать фон основной и сверху добавить блок, для чего такое нагромождение в 3-4 уровня? запутался с обнулениями отступов… что и у кого обнулять ((

Ineska · 20.Май.2017 16:41:00

Покажите свой код. Начнём с этого.

h1v · 22.Май.2017 20:23:48

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="header">
            <div class="layout-positioner">
                <div class="top-header">Header</div>
            </div>                                                                                 
            <div class="blue-bgc">			
                <div class="layout-positioner">
                    <div class="menu-header">Menu</div>
                </div>				
            </div>			
            <div class="layout-positioner">			
                <div class="layout-column">
                    <div class="promo">Promo 1</div>
                </div>				
                <div class="layout-column">				
                    <div class="promo">Promo 2</div>					
                </div>				
            </div>			
        </div>		
        <div class="features">
            <div class="layout-positioner">
                <div class="layout-column column1">
                    <div class="left-column">Left</div>
                </div>
                <div class="layout-column column2">
                    <div class="main-column">Main</div>
                </div>
                <div class="layout-column column3">
                    <div class="right-column">Right</div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="layout-positioner">
                <div class="footer-text">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;
}

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

}

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

/Header/
.header {
background-color: #34495e;
padding: 10px 0;
}

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

.blue-bgc {
background-color: #3498DB;
min-height: 35px;
margin: 10px 0;
}

.menu-header {
padding: 5px;
}

.header .layout-column {
float: left;
margin-right: 10px;
background-color: #c0392b;
min-height: 60px;
width: 170px;
}

.header .layout-column:last-child {
margin-right: 0px;
}

.promo {
padding: 5px;
}
/Features/
.features {
background-color: ;
}

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

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

.column2 {
width: 180px;
}

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

/Footer/
.footer {
background-color: #34495e;
min-height: 40px;
}

.footer-text {
padding: 5px;
}

Ineska · 23.Май.2017 07:50:08

Соответствует в целом. Различия в границах центровщика на пустой сетке не имеют значения.

Да, на примере пустой сетки вложенность кажется излишней.
Для задания вы могли, например, объединить два класса в один в фрагменте с промо-блоками и не выделять padding в отдельное правило. То же касается и блока с тремя колонками, где у вас получилось три лишних класса, которые никак не используются в css.

Вопрос про обнуление отступов не совсем поняла. Что и где вам пришлось обнулить в этом задании?

h1v · 23.Май.2017 20:16:55

хотя бы взять этот кусок.
да и в предшествующих заданиях было говорено про обнуления маргинов, дабы не переносились блоки, если я вообще это правильно понял. так вот не совсем ясно для меня, кому именно из этой “башни” блоков задавать обнуление и кому задавать клир… если есть 2 блока, например, хедер и меню, которые “построены” при помощью 3х и 4х блоков соответственно, как разобраться в этом?