Прошу оценить код и дать советы

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

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

Заранее спасибо.

===========================================================================

 <!DOCTYPE html>
<html lang="ru">
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="1.css">
</head>
<body>
    <div>
    <div class='head'>
        <div class='layout'>
            <div class='header'>Header</div></div>
            <div class='menu'><div class='layout'>Menu</div></div>
            <div class='layout'>
            <div class='promo'>Promo 1</div>
            <div class='promo2'>Promo 2</div>
        </div>
    </div>
   <div>
       <div class='layout'>
            <div class='center left'> Left</div>
            <div class='center main'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eius, accusamus officiis nulla, vitae eos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eius, accusamus officiis nulla, vitae eos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eius, accusamus officiis nulla, vitae eos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eius, accusamus officiis nulla, vitae eos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eius, accusamus officiis nulla, vitae eos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eius, accusamus officiis nulla, vitae eos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eius, accusamus officiis nulla, vitae eos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eius, accusamus officiis nulla, vitae eos.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eius, accusamus officiis nulla, vitae eos.</div>
            <div class='center right'> Right</div>
       </div>
    </div>
   <div class='footer'><div class='layout'> Footer</div></div>
   </div>
</body>

============================================================================

  • {box-sizing: border-box;}

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

}

body {
width:100%;
min-height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
/position:relative;/

}

/Блоки отцентровки/
.layout {
width: 80%;
margin: auto;
}

.layout:after {
content:’’;
display:table;
clear:both;
}

.layout:before {
height: 10px;
content:’’;
display:table;
clear:both;
}

.head {
width: 100%;
/min-height: 170px;/
background: #34495e;

}

/Блок Хедера/
.header {
width:100%;
height:35px;
background: #c0392b;
padding: 5px;
margin: 0 auto;
margin-bottom: 10px;
}

.menu {
background: #3498DB;
width:100%;
min-height:35px;
/margin-bottom: 10px;/
padding: 5px;
}

.promo, .promo2 {
background: #c0392b;
width:49%;
min-height:60px;
/margin-right: 5px;/
margin-bottom:10px;
/margin-top: 0;/
padding:5px;
float: left;
}

.promo2 {margin-right:0;
float: right;}

/Центральный Блок/

.center {
background: #3498DB;
min-height:110px;
float: left;
margin-right: 1%;
padding:5px;
}

.left {
width: 29%;
}

.right {
margin-right:0;
width:29%;
}

.main {
width: 40%;
}

/Футер/
.footer {
width:100%;
min-height: 35px;
background: #34495e;
padding:5px;
margin-top: 10px;

}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/

2

Форматируйте код правильно, а то не понятно, где у вас какой блок начинается, а где заканчивается. Отправляя код на проверку, уберите все лишние строки, в том числе и закомментированные.
Ограничили высоту header. Почему две распорки, причем вторая еще и высоту имеет?

3

про высоту совсем забыл. Вторая распорка была необходима для имитирования margin-top у всех блочных элементов, кроме футера. По той же причине у нее высота 10px. Таким образом я сократил количество кода, хотя не факт что такой вариант лучше чем классические маржины.

4

Я думаю, что оно того не стоит. И к тому же псевдоэлемент, как распорка был всегда невидимым, с нулевыми размерами.

5

Добрый день! У меня та же просьба, что и у Станислава: прошу дать советы по коду, так как выполнил задание на 100%, но реально понимаю и осознанно делал сетку не резиновой. Так получилось из-за того, что как бы я не пробовал и где бы не вставлял код с центировщиком, он совершенно никак не влиял на мой код, что я сделал не правильно и почему это могло произойти?
Буду вам очень благодарен, если вы мне поможете с решением вопроса)

> <!DOCTYPE html>
> <html lang="ru">
>     <head>
>         <title>Испытание: строим сетку</title>
>         <meta charset="utf-8">
>     </head>
>     <body>
>         <div class="base">
>             <div class="padding">
>                 <div class="header">Header</div>
>                 <div class="menu">Menu</div>
>                 <div class="promo center">
>                     <div class="promo1">Promo 1</div>
>                     <div class="promo2">Promo 2</div>
>                     <div class="clearfix"></div>
>                 </div>
>             </div>
>         </div>    
>             <div class="column">
>                 <div class="left">Left</div>
>                 <div class="main">Main</div>
>                 <div class="right">Right</div>
>                 <div class="clearfix"></div>
>             </div>
>             <div class="footer">Footer</div>
>     </body>
> </html>

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

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

.base {
background-color: #34495e;
min-height: 150px;

}

.padding {
padding: 10px 0px 10px 0px;
}

.center {
margin: 0px auto;

}

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

.header {
box-sizing: border-box;
background-color: #c0392b;
min-height: 35px;
width: 350px;
padding: 5px;
margin: 0px auto 10px;
}

.menu {
box-sizing: border-box;
background-color: #3498DB;
min-height: 35px;
width: 450px;
padding: 5px 55px;
margin: 0px 0px 10px;
}

.promo {
width: 100%;
margin: 0px 50px;
}

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

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

.column {
margin: 10px auto;
}

.left {
float: left;
background-color: #3498DB;
width: 60px;
min-height: 100px;
margin-right: 10px;
padding: 5px;
margin-left: 50px;
}

.main {
float: left;
background-color: #3498DB;
width: 180px;
min-height: 100px;
margin-right: 10px;
padding: 5px;
}

.right {
float: left;
background-color: #3498DB;
width: 60px;
min-height: 100px;
margin-right: 10px;
padding: 5px;
}

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

6

у центровщика должна быть ширина и эта ширина должна быть меньше, чем ширина родительского блока - чтобы ещё место и на маргины (за счет которых и происходит центрирование) оставалось.

И определитесь, что же именно вы хотите использовать: распорку (пустой див в HTML со свойством clear: both;) или же псевдораспорку (в HTML ничего не добавляем, в CSSпоявляется псевдоэлемент с необходимыми свойствами)

7

Tala, спасибо вам большое за помощь, попробую еще раз написать код, учитывая ваши рекомендации! А вот за распорку даже не обратил внимание, что сделал именно так)

8

плюс что бы использовать центровщик, вам нужно обернуть необходимые блоки в блок с классом center, и ему задавать margin посмотрите как написан мой код, от обычного он отличается только тем что у меня width в процентах (это я сделал для резиновости), а не в пикселях.

9

Stasvoron, спасибо за совет, просмотрел и понял о чем вы говорите! ) Буду переделывать.