[27/32] 100% Жду критики кода

kuku · 03.Июль.2017 17:47:09

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

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

.top {
height: 150px;
background: #34495e;
padding: 10px 0;
}
.header {
width: 340px;
min-height: 25px;
margin: 0 auto;
padding: 5px;
background: #c0392b;
color: white;
}

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

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

.center {
background: white;
min-height: 130px;
}

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

.left,
.right {
width: 60px;
}

.main {
width: 180px;
}

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

.clearfix {
width: 360px;
margin: 0 auto;
}

Ineska · 03.Июль.2017 17:52:21

html-код?

kuku · 03.Июль.2017 17:54:49

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

Ineska · 03.Июль.2017 17:59:58

Название .clearfix используют для правила распорки. В вашем коде ее нет. Почему?

kuku · 03.Июль.2017 18:00:56

Буду исправлять

kuku · 03.Июль.2017 18:02:23

Я классом вставила clearfix

Ineska · 03.Июль.2017 18:07:49

Да. но содержимое правила с селектором clearfix не является распоркой по вашему коду.
Там должно быть свойство clear: both; Помните такое?

kuku · 03.Июль.2017 18:09:37

В общем помню, но придётся ещё повторить)

kuku · 04.Июль.2017 03:45:01

В CSS-код добавила псевдораспорку:
.clearfix::after {
content: “”;
display: table;
clear: both;
}

Ineska · 04.Июль.2017 06:03:51

Добавьте центровщик в header, menu и footer.

Grigory_Grigory · 04.Июль.2017 14:38:23

А что, если для центровки использовать не конкретные значения margin, как у автора, а div с display: table-cell; vertical-align: middle; и внутри div с margin: auto;? Так, вроде, меньше рассчетов.

Ineska · 04.Июль.2017 14:41:17

Покажете на примере: http://codr.io/214519l ?

Grigory_Grigory · 04.Июль.2017 14:53:17

Не разобрался с этим инструментом, ставлю сюда. CSS добавил в шапку.

<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
		<style type="text/css"> 
html,
body {
    margin: 0;
    padding: 0;
}

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

.layout-positioner {
    width: 450px;
    display: table-cell;
    vertical-align: middle; 
    }
/*-------------------------------*/
.header {
    background: #34495e;
    height: 55px;
    }
    
.layout-header-block {
    background: #c0392b;
    width: 340px;
    height: 25px;
    margin: auto;
    padding: 5px;
    }
/*-------------------------------*/
.menu {
    background: #3498DB;
    height: 35px;
    }    

.layout-menu-block {
    background: #3498DB;
    width: 340px;
    margin: auto;
    padding: 5px;
    height: 25px;
    }

.promo {
    background: #34495e;
    height: 80px;
    }

.layout-promo-grid {
    width: 350px;
    margin: auto;
    height: 60px;
    
    }
    
.layout-promo-column {
    background: #c0392b;
    width: 160px;
    height: 50px;
    float: left;
    padding: 5px;
    }  
.promo-column1 {
    margin-right: 10px;}    
    
.main {
    background: white;
    height: 130px;
    }
    
.layout-main-grid {
    width: 350px;
    margin: auto;
    height: 110px;
    }    
    
.layout-main-column {
    background: #3498DB;
    height: 100px;
    float:left;
    padding: 5px;
    }  
    
.main-column1 {
    width: 60px;
    margin-right:10px
    }    
    
.main-column2 {
    width: 180px;
    margin-right:10px
    }
    
.main-column3 {    
    width: 60px;
    }    

.footer {
    background: #34495e;
    height: 35px;

    }    

.layout-footer-block {
    background: #34495e;
    width: 340px;
    margin: auto;
    padding: 5px;
    height: 25px;
    }

/*
    Используемые цвета:
    #34495e – мокрый асфальт
    #c0392b – красный
    #3498DB – синий
*/
		</style>
    </head>
     <body>
        <div>
            <div class='header layout-positioner'>
                <div class='layout-header-block'>
                    Header
                </div>
            </div>
        </div>
        
        <div>
            <div class='menu layout-positioner'>
                <div class='layout-menu-block'>
                    Menu
                </div>
            </div>
        </div>
        
        <div>
            <div class='promo layout-positioner'>
                <div class="layout-promo-grid">
                    <div class="layout-promo-column promo-column1">
                        Promo 1
                    </div>
                    <div class="layout-promo-column">
                        Promo 2
                    </div>
                </div>
            </div>
        </div>
        
        <div>
            <div class='main layout-positioner'> 
                <div class='layout-main-grid'>
                    <div class='layout-main-column main-column1'>
                        Left
                    </div>
                    <div class='layout-main-column main-column2'>
                        Main
                    </div>
                    <div class='layout-main-column main-column3'>
                        Right
                    </div>
                </div>
            </div>
        </div>
        
        <div >
            <div class='footer layout-positioner'>
                <div class='layout-footer-block'>
                    Footer
                </div>
            </div> 
        </div>
    </body>
</html>

Ineska · 04.Июль.2017 14:55:51

И по ссылке так же было бы)

Ineska · 04.Июль.2017 15:07:44

Идея, конечно, интересная. Но у вашего варианта есть недочеты. Почти для каждого блока отдельно margin-auto, фиксированные высоты и отсутствующие распорки.

kuku · 04.Июль.2017 16:40:15

Добавила. Но мне пришлось их зафлоатить и указать ширину и отступы
html,
body {
margin: 0;
padding: 0;
}

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

.clearfix {
width: 360px;
margin: 0 auto;
}

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

.top {
height: 150px;
background: #34495e;
padding: 10px 0;
}

.header {
float: left;
width: 340px;
min-height: 25px;
margin: 0 50px;
padding: 5px;
background: #c0392b;
color: white;
}

.menu {
float: left;
width: 340px;
min-height: 25px;
padding: 5px 55px;
margin: 10px 0;
background: #3498DB;
color: white;
}

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

.center {
background: white;
min-height: 130px;
}

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

.left,
.right {
width: 60px;
}

.main {
width: 180px;
}

.footer {
float: left;
width: 340px;
min-height: 40px;
padding: 5px 55px;
background: #34495e;
color: white;
}

Ineska · 04.Июль.2017 18:06:32

А что вы должны были добавить?

kuku · 04.Июль.2017 18:21:06

http://forum.academy/t/27-32-100-zhdu-kritiki-koda/6311/10?u=kuku

Ineska · 04.Июль.2017 18:25:51

Вот это ваш центровщик. Его в виде класса вы должны были добавить в html-код. Вы уже так делали для блоков promo.

kuku · 05.Июль.2017 11:44:13

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