27/32 100% Пожалуйста оцените код и дайте фидбек.

Gamma · 25.Июль.2017 14:39:40

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

.top {
    background-color: #34495e;
    width: 100%;
    height: 150px;
    padding: 10px 0;
}

.top-column {
    margin: 0 50px;
}

.top-column::after {
    content: "";
    display: table;
    clear: both;
}

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

.menu {
    background-color: #3498DB;
    margin: 10px -50px;
    height: 25px;
    padding: 5px 55px;
}

.promo1, .promo2 {
    float: left;
    background-color: #c0392b;
    width: 160px;
    height: 50px;
    padding: 5px;
    
}

.promo1 {
    margin-right: 10px;
}

.middle {
    height: 110px;
    width: 100%;
    padding: 10px 0;
}

.middle-column {
    margin: 0 50px;
}

.middle-column::after {
    content: ""
    display: table;
    clear: both;
}

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

.main {
    margin: 0 10px;
    width: 180px;
}
    
.bottom {
    background-color: #34495e;
    height: 35px;
    width: 100%;
}

.bottom-column {
    margin: 0 50px;
}

.footer {
    height: 25px;
    padding: 5px;
}

Alexey_Ivanov · 25.Июль.2017 22:22:00

Нежелательно ограничивать высоту блоков - мы помним, что блоки содержат контент - текст, а он может меняться - его количество. Если зафиксировать жёстко высоту, он просто будет выпадать за пределы своего блока-контейнера, а это не есть хорошо. Поэтому задавать лучше параметр min-height: в этом случае, если текста будет много, он просто будет растягивать свой контейнер вниз и никуда не выпадет и не наслоится.
У вас 3 класса - top-column, middle-column и bottom-column - с абсолютно идентичными правилами. Почему бы не сделать 1 общий класс, например, .container/.wrapper/.center? В итоге в стилях - минус 2 класса. И ещё минус 2 селектора - псевдоклассы с распорками. Итого - минус 4 класса в стилях.
left и right - абсолютно идентичны. Я бы сделал им какой-то 1 общий класс.
Мне совсем не нравится .menu - какие-то огромные паддинги по горизонтали, отрицательные внешние отступы… Нет, переделайте. Да, возможно, разметку нужно будет чуть подправить.

Gamma · 26.Июль.2017 19:20:24

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="top">
            <div class="positioner">
                <div class="header">Header</div>
            </div>   
            <div class="menu-positioner">
                <div class="positioner">
                    <div class="menu">Menu</div>
                </div>    
            </div>    
            <div class="positioner">    
                <div class="promo1">Promo 1</div>
                <div class="promo2">Promo 2</div>
            </div>    
        </div>
        <div class="middle">
            <div class="positioner">
                <div class="flank">Left</div>
                <div class="main">Main</div>
                <div class="flank">Right</div>
            </div>    
        </div>    
        <div class="bottom">
            <div class="positioner">
                <div class="footer">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;
}

.top {
    background-color: #34495e;
    width: 100%;
    min-height: 150px;
    padding: 10px 0;
}

.positioner {
    margin: 0 50px;
}

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

.header {
    background-color: #c0392b;
    min-height: 25px;
    padding: 5px;
}
    
.menu-positioner {
    background-color: #3498DB;
    min-height: 35px;
    margin: 10px 0;
}
        
.menu {
    padding: 5px;
}

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

.promo1 {
    margin-right: 10px;
}

.middle {
    min-height: 110px;
    width: 100%;
    padding: 10px 0;
}

.flank, .main {
    float: left;
    background-color: #3498DB;
    width: 60px;
    min-height: 100px;
    padding: 5px;
}

.main {
    margin: 0 10px;
    width: 180px;
}
    
.bottom {
    background-color: #34495e;
    min-height: 35px;
    width: 100%;
}

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

Спасибо большое за фидбек.
Вот так лучше?

Alexey_Ivanov · 26.Июль.2017 19:42:26

Да, так мне лично нравится больше.

vic4884 · 10.Август.2017 09:15:15

мне конечно стыдно , но я покажу что нагородил

    <div class="head">
        <div class="header">Header</div>
    </div>
    
    <div class="menu">Menu</div>
    
    <div class="prom">
      <div class="promo1">Promo 1</div>
      <div class="promo2">Promo 2</div>
    </div>
    
    <div class="center">
     <div class="left">Left</div>
     <div class="main clearfix">Main</div>
     <div class="right">Right</div>
    </div>
    
    <div class="footer">Footer</div>

.head{
    background:#34495e;
    min-height:45px;
    padding-top:10px;
    }
.header{
    background:#c0392b;
    min-height:25px;
    padding:5px;
    width:340px;
    margin: auto;
        }
.menu{
    background:#3498DB;
    min-height:25px;
    padding:5px;
    padding-left:55px;
    }
.prom{
    background:#34495e;
    min-height:70px;
    padding-top:10px;
    
    }
.promo1,.promo2{
    background:#c0392b;
    width:160px;
    min-height:50px;
    padding:5px;
    
    }
.promo1{
    margin-left:50px;
    float:left;
    }
.promo2{
    margin-right:50px;
    float:right;
    }
.center{
    margin-top:10px;
    margin-left:50px;
    min-height:120px;
    width:500px;
    
    }
.left,.main,.right{
    background:#3498DB;
    min-height:100px;    
    padding:5px;
    }
.left{
    float:left;
    width:60px;
    margin-right:10px;
    }
.main{
    float:left;
    width:180px;
    margin-right:10px;
    }
.right{
    float:left;
    width:60px;
    }
.footer{
    background:#34495e;
    min-height:30px;
    padding:5px 0 0 55px;
    }

Ineska · 10.Август.2017 14:32:29

Центровщика нет, clearfix в css не наблюдаю, а в html он не там, где должен быть.

vic4884 · 10.Август.2017 14:53:27

центровщика? дива с margin:0 auto;?
clearfix забыл удалить из html =)

terrence · 10.Август.2017 14:57:46

<body>
    <div class="top-menu">
        <div class="positioner">
            <div class="header">Header</div>
        </div>
        <div class="positioner-menu">
            <div class="menu">Menu</div>
        </div>
        <div class="positioner">
            <div class="promo1">Promo 1</div>
            <div class="promo2">Promo 2</div>
        </div>
    </div>
    
    <div class="content">
        <div class="positioner">
            <div class="left">Left</div>
            <div class="main">Main</div>
            <div class="right">Right</div>
        </div>
    </div>
    
    <div class="bottom">
        <div class="positioner">
            <div class="footer">Footer</div>
        </div>
    </div>

100% как еще можно его усовершенствовать?)) Оцените также плз. Спасибо

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

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

.top-menu {
    background: #34495e;
    width: 100%;
    min-height: 150px;
    box-sizing: border-box;
    padding-top: 10px;
}

.positioner {
    margin: 0 50px;
}

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

.header {
    background: #c0392b;
    min-height: 35px;
    padding: 5px;
    box-sizing: border-box;
}

.positioner-menu {
     background: #3498DB;
     min-height: 35px;
     margin: 10px 0;
}

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

.promo1, .promo2 {
    background: #c0392b;
    width: 170px;
    min-height: 60px;
    box-sizing: border-box;
    padding: 5px;
    margin-bottom: 10px;
}

.promo1 {
    float:left;
}

.promo2 {
    float:right;
}

.left, .main, .right {
    background: #3498DB;
    min-height: 110px;
    margin: 10px 0 10px 10px;
    box-sizing: border-box;
    padding: 5px;
}

.left {
    width: 70px;
    float: left;
    margin-left:0;
}

.main {
    width: 190px;
    float: left;
}

.right {
    width: 70px;
    float: right;
}

.bottom {
    background: #34495e;
    box-sizing: border-box;
    height: 35px;
    padding: 5px;
}

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

Ineska · 10.Август.2017 19:47:54

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

vic4884 · 12.Август.2017 20:43:28

второй вариант, несколько отличается от первого, центровщик есть, clearfix с другим именем

<body>
<div class="top">
    <div class="header center">Header</div>
    <div class="menu">Menu</div>
      <div class="promo1">  Promo 1</div>
      <div class="promo2">Promo 2</div>
</div>
     
    <div class="content">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
    </div>
<div class="footer">Footer</div>
</body>

.center{
    margin:0 auto;
    }
.top{
    background:#34495e;
    padding-bottom:10px;
    color:white;
    }
.top:after{
    content:"";
    display:table;
    clear:both;
    }
.header{
    background:#c0392b;
    width:345px;
    min-height:30px;
    padding:5px 0 0 5px;
    position:relative;
    top:10px;
    }
.menu{
    background:#3498DB;
    height:30px;
    padding-left:55px;
    padding-top:5px;
    margin-top:20px;
    }
.promo1,.promo2{
    float:left;
    width:160px;
    background:#c0392b;
    margin-right:10px;
    margin-left:50px;
    min-height:50px;
    margin-top:10px;
    padding:5px;
}
.promo2{
    margin-left:0px;
}
.content{
    margin-top:10px;
    margin-bottom:10px;
    }
.content:after{
    content:"";
    display:table;
    clear:both;
    }
.left,.main,.right{
    float:left;
    min-height:100px;
    background:#3498DB;
    margin-right:10px;
    color:white;
    padding:5px;
    }
.left,.right{
    width:60px;
    }
.main{
    width:180px;
    }
.left{
    margin-left:50px;
    }
.footer{
    background:#34495e;
    color:white;
    padding:5px;
    padding-left:55px;
    min-height:25px;
    }

Islambek_Gafurov · 12.Август.2017 21:53:22

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
<header class="main-header">
  <div class="layout-positioner">
      <div class="header">Header</div>
  </div>
  <nav class="navigation-menu">
     <span class="layout-positioner">Menu</span>
  </nav>
     <div class="features-row layout-positioner clearfix">
        <div class="features-column-left">Promo 1</div>
        <div class="features-column-right">Promo 2</div>
    </div>
</header>
<main class="content clearfix layout-positioner">
    <div class="content-column-left">Left</div>    
    <div class="content-column-main">Main</div>    
    <div class="content-column-right">Right</div>    
</main>        
        <footer class="main-footer"> <div class="layout-positioner"> Footer</div></footer>
</body>
</html>

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

body {
    width: 450px;
    height: 335px;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
    
}
.header{
    background-color:#c0392b;
    min-height:25px;
    padding:5px;
    margin-bottom:10px;
}
.main-header{
    background:#34495e;
    padding-top:10px;
    margin-bottom:10px;
    
}
.layout-positioner{
    width:350px;
    margin:0 auto;
}
span{
display:block;
padding-left:10px;
}
.navigation-menu{
    background-color:#3498DB;
    min-height:25px;
    margin-bottom:10px;
    padding:5px;
}

.features-column-left,
.features-column-right{
    float:left; 
    min-height:50px;
    background:#c0392b;
    padding:5px;
    width:160px;
    margin-bottom:10px;
}

.features-column-left {  
   margin-right:10px;
}

.clearfix{
    content:"";
    display:table;
    clear:both;
}
.content{
    margin-bottom:10px;    
}
.content-column-main{
    float:left;
    background:#3498DB;
    width:180px;
    min-height:100px;
    padding:5px;
    
    
}
.content-column-left,
.content-column-right{
    background:#3498DB;
    width:60px;
    min-height:100px;
    padding:5px;
    margin-right:10px;
}
.content-column-left{
    float:left;    
}
.content-column-right{
    float:right;
    margin-right:0;
    margin-left:10px;
}
.main-footer{
    padding:5px 0;
    background:#34495e;
    min-height:30px;
    padding-left:10px;

}
Не знаю но у меня всегда странный код (или всё норм?) может я торопливо пишу код или всё таки практиковаться много… Оцените? и плз советуйте что нибудь