Прошу советов по грамотному написанию кода

Ercent · 28.Май.2017 10:22:57

Прошу посмотреть код и оценить его.

Буду ждать вашу конструктивную критику и рекомендации улучшению когда.

Спасибо.

</head>
<body>
    <div class="page-header clearfix">
    <div class="header">Header</div>
    <div class="menu">Menu</div>
    <div class="promo">Promo 1</div>
    <div class="promo">Promo 2</div>
    </div>
    <div class="features">
    <div class="features left">Left</div>
    <div class="features main">Main</div>
    <div class="features right">Right</div>
    </div>
    <div class="footer">Footer</div>
</body>

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

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

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/
.page-header {
background:#34495e;
width:450px;
height:150px;
padding:10px 0;
}
.clearfix::after {
display: table;
content: “”;
clear: both;
}

.header {
background:#c0392b;
padding:5px 5px;
margin:0 50px;
min-height:25px;
}

.menu {
background:#3498DB;
margin-top:10px;
padding-left:55px;
min-height:30px;
padding-top:5px;
}
.promo {
float:left;
background:#c0392b;
width:160px;
height:50px;
margin:10px 10px 10px 50px;
padding:5px;
}
.promo:last-child {
margin-right:0;
margin-left:0;
}

.features .left {
background:#3498db;
float:left;
height:100px;
padding:5px;
margin:10px 10px 10px 50px;
width:60px;
}

.features .main {
background:#3498db;
float:left;
height:100px;
padding:5px;
margin:10px 10px 10px 0px;
width:180px;
}

.features .right {
background:#3498db;
float:left;
height:100px;
padding:5px;
margin:10px 10px 10px 0px;
width:60px;}

.footer {
clear:both;
background:#34495e;
padding:5px 55px;
height:25px;
width:340px;
}

Ineska · 28.Май.2017 12:12:25

У одних блоков min-height, у других просто height. Чем можете пояснить свой выбор?
У вас есть псевдораспорка clearfix, но при этом для футера пришлось отдельно писать clear: both. Почему?
Центровщик содержимого отсутствует, поэтому отступы справа и слева фиксированные, 50-55px.

Ercent · 28.Май.2017 12:24:37

min-height и height объяснений нет, сперва думал, что просто высота не будет работать, потом увидел что работает, поэтому в первой части когда использовал min-height, а во второй просто height.
в конце кода забыл про псевдораспорку
не совсем понял про центровщик содержимого, не могли бы напомнить где про него почитать?

Ineska · 28.Май.2017 18:43:53

1. Лучше везде писать min-height.
3. Центровщик используется во всем курсе “Сетки”, начиная с первого шага.
Пример кода блока-центровщика:

.container {
    width: 300px; // обязательно ширина, которая меньше чем у body
    margin: 10px auto; // автоматические отступы справа и слева
}

Посмотрите тему по ссылке, там есть пример расположения блоков-центровщиков для этого задания.

Ercent · 29.Май.2017 07:21:26

спасибо, попробую все исправить.

Ercent · 29.Май.2017 08:21:29

.cont {
width: 450px; // обязательно ширина, которая меньше чем у body
margin: 10px auto; // автоматические отступы справа и слева
}
.page-header {
background:#34495e;
width:450px;
height:150px;
padding:10px 0;
}
.clearfix::after {
display: table;
content: “”;
clear: both;
}

.header {
background:#c0392b;
padding:5px 5px;
margin:0 50px;
min-height:25px;
}

.menu {
background:#3498DB;
margin-top:10px;
padding-left:55px;
min-height:30px;
padding-top:5px;
}
.promo {
float:left;
background:#c0392b;
width:160px;
height:50px;
margin:10px 10px 10px 50px;
padding:5px;
}
.promo:last-child {
margin-right:0;
margin-left:0;
}

.features .left {
background:#3498db;
float:left;
height:100px;
padding:5px;
width:60px;
margin:10px 10px 10px 50px;
}

.features .main {
background:#3498db;
float:left;
height:100px;
padding:5px;
width:180px;
margin:10px 10px 10px 0px;
}

.features .right {
background:#3498db;
float:left;
height:100px;
padding:5px;
width:60px;
margin:10px 10px 10px 0px;
}

.footer {
background:#34495e;
padding:5px 55px;
height:25px;
width:340px;
}

Такой код должен быть?

Ineska · 29.Май.2017 08:33:16

А что изменилось то?)
Отступы по 50px никуда не делись по вашему коду. И подскажите, какой была ширина у body? Ведь ширина центровщика должна быть меньше.

Ercent · 29.Май.2017 08:35:23

тогда я вообще запутался с центровщиком… 450 ширина по body.

Ineska · 29.Май.2017 08:57:35

И у центровщика вашего 450px. Тогда какие отступы могут быть справа и слева? - Никакие.
Вы посчитали, что вам нужны отступы по 50px справа и слева. Ширина body 450px. Сколько тогда остается на центровщик?

Ercent · 29.Май.2017 09:13:37

Остается 350px, оставляя только центровщик и не ставя маргины у других блоков у меня все вытягивается по body…

Буду изучать с нуля, сетки еще раз. запутался… =(

Ercent · 29.Май.2017 11:50:37

.container {
width: 340px;
margin:5px auto;

}
.page-header {
background:#34495e;
width:450px;
height:160px;
padding:5px 0;
}
.clearfix::after {
display: table;
content: “”;
clear: both;
}

.header {
background:#c0392b;
padding:5px 5px;
min-height:25px;
}
.menu {
background:#3498DB;
margin-top:10px;
padding-left:55px;
min-height:30px;
padding-top:5px;
width:395px;
}
.promo {
background: #c0392b;
width:160px;
min-height:50px;
padding:5px;
float:left;
margin:10px 10px 10px 50px;
}
.promo:last-child {
margin-right:0;
margin-left:0;
}
.features .left {
background:#3498db;
float:left;
height:100px;
padding:5px;
margin:10px 10px 10px 50px;
width:60px;
}

.features .main {
background:#3498db;
float:left;
height:100px;
padding:5px;
margin:10px 10px 10px 0px;
width:180px;
}

.features .right {
background:#3498db;
float:left;
height:100px;
padding:5px;
margin:10px 10px 10px 0px;
width:60px;}

.footer {
background:#34495e;
padding:5px 55px;
height:25px;
width:345px;
}

вот код, но опять есть отступы в 55px… =((( ничего не понимаю

Ineska · 29.Май.2017 12:11:34

Покажите разметку (html-код).

Ercent · 29.Май.2017 12:25:38

        <div class="page-header clearfix">
        
        <div class="header container">Header</div>
    <div class="menu">Menu</div>
    <div class="promo container">Promo 1</div>
    <div class="promo container">Promo 2</div>
    </div>
    
    <div class="features clearfix">
        <div class="features left">Left</div>
        <div class="features main">Main</div>
        <div class="features right">Right</div>
    </div>
    <div class="footer container">Footer</div>
    </div>
</body>

Ineska · 29.Май.2017 12:34:29

Вы неправильно составили свою сетку, поэтому не получается.
.container должен быть родителем по отношению к блоку, который вы хотите выровнять по центру.
То есть например так:

<div class="container">
        <div class="header">Header</div>
</div>

Но может быть и наоборот, как в случае с .menu (когда вам нужно выровнять не сам блок, а его содержимое - фон меню располагается по всей ширине body, но само слово Menu смещено от края). Тогда так:

<div class="menu">
          <div class="container">Menu</div>
</div>

Ercent · 29.Май.2017 12:45:56

спасибо за разъяснение. пойду еще раз попробую.

Ercent · 10.Июнь.2017 14:05:22

<body>
        <div class="page-header clearfix">
        <div class="wrapper">
        <div class="header">Header</div></div>
        <div class="menu"><div class="wrapper">Menu</div></div>
        <div class="wrapper">
        <div class="promo">Promo 1</div>
        <div class="promo">Promo 2</div>
        </div></div>
        <div class="wrapper">
        <div class="features clearfix">
            <div class="left">Left</div>
            <div class="main">Main</div>
            <div class="right">Right</div></div></div>
        <div class="footer">
            <div class="wrapper">Footer</div>
        </div>
    
</body>

.wrapper {
width:350px;
margin:auto;
}
.page-header {
background:#34495e;
width:450px;
height:160px;
padding:5px 0;
}
.clearfix::after {
display: table;
content: “”;
clear: both;
}

.header {
background:#c0392b;
padding:5px 5px;
min-height:25px;
margin-bottom:10px;
margin-top:5px;
}
.menu {
background:#3498DB;
padding:5px 5px;
min-height:25px;
width:450px;
}

.promo {
background: #c0392b;
width:160px;
min-height:50px;
padding:5px;
float:left;
margin:10px 10px 10px 0px;
}
.promo:last-child {
margin-right:0;
margin-left:0;
}
.features .left {
background:#3498db;
float:left;
height:100px;
padding:5px;
margin:10px 10px 5px 0px;
width:60px;
}

.features .main {
background:#3498db;
float:left;
height:100px;
padding:5px;
margin:10px 10px 10px 0px;
width:180px;
}

.features .right {
background:#3498db;
float:right;
height:100px;
padding:5px;
margin:10px 0px 10px 0px;
width:60px;}

.footer {
background:#34495e;
padding:5px 5px;
min-height:25px;
width:450px;

}

Вот что получается, прошу прокомментировать и указать на ошибки если они есть, так же есть вопрос по Footerу и Menю…

Ineska · 10.Июнь.2017 16:47:06

Фиксированные высоты у некоторых блоков.

Дублировать ширину body для каждого блока не надо. Придется много корректировать, если ширина body изменится.
Псевдораспорка для блоков promo должна находится у ближайшего родительского блока, то есть получается у .wrapper.

Если отступы одинаковы с каждой стороны, то пишется одно значение.

Зачем обнулять то, что и так равно нулю?
Не сгруппировали общие свойства у блоков внутри .features.

Почему 5px снизу у .left, чем он такой особенный?