27/32 Проанализируйте код

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

Здравствуйте, задание выполнено на 100%, но хотелось бы услышать анализ кода, увидеть где есть минусы и что можно перфекционировать.

.<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: строим сетку</title>
       <meta charset="utf-8">
    </head>
    <body>
      <div class="wrapper">    
        <div class="header">
            <div class="layout-positioner">Header
            </div>
        </div>
        <div class="menu">
            <div class="layout-positioner">Menu 
            </div>
        </div>
        <div class="promo clearfix">
            <div class="layout-positioner">
                <div class="promo-coll">Promo 1
                </div>
                <div class="promo-coll">Promo 2
                </div>
            </div>    
        </div>
        <div class="coll layout-positioner clearfix">
            <div class="collumn">Left
            </div>
            <div class="collumn">Right
            </div>
            <div class="collumn">Main
            </div>
        </div>
        <div class="footer">
          <div class="layout-positioner">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;
}

.wrapper{
    width:450px;
    margin:0 auto;
}

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

.layout-positioner{
    width: 340px;
    margin-left:auto;
    margin-right:auto;
    padding: 5px;
}

.header{
    background-color:#34495e;
    min-height:35px;
    padding-top:10px;
    padding-bottom:10px;
}

.header .layout-positioner{
    min-height:25px;
    background-color:#c0392b;
}

.menu{
    background-color:#3498DB;
    min-height:35px;
    }
    
.promo{
    background-color:#34495e;
    padding-bottom: 10px;
    padding-top: 5px;
}

.promo-coll{
    background-color:#c0392b;
    padding:5px;
    min-height:50px;
    width: 160px;
}

.promo-coll:first-child{
    float: left;
    
}

.promo-coll:last-child{
    float: right;
    }
    
.promo .layout-positioner{
    width: 350px;
}    

.collumn{
    background-color:#3498DB;
    padding:5px;
    min-height:100px;
}

.collumn:first-child{
    float: left;
    width: 60px;
    }

.collumn:last-child{
    margin-left: 80px;
    margin-right: 80px;
}

.collumn:nth-child(2){
    float: right;
    width: 60px;
}

.coll{
    padding:10px 0px;
    width: 350px;
}

.footer{
    background-color:#34495e;
    min-height:35px;
}
2

Аналогично. Делал как мог 95%. Помогите сделать CSS короче
HTML

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

CSS
.head, .bottom{
background: #34495e
}
.blue-menu, .left, .main, .right{
background: #3498DB
}
.red-header, .promo1, .promo2{
background:#c0392b
}
.layout-positioner{
width:350px;
margin:0 auto;
margin-top:0px;
padding:10px
}
.layout-positioner:after{
content:’’;
clear:both;
display:table;
}
.red-header{
padding: 5px 5px;
height:25px
}
.blue-menu{
padding: 5px 55px;
height:25px;
}
.promo1{
padding: 5px 5px;
float:left;
width: 160px;
margin-right:10px;
height: 50px;
}
.promo2{
padding: 5px 5px;
float:left;
width: 160px;
height: 50px;
}
.left{
padding: 5px 5px;
float:left;
width:60px;
margin-right:10px;
height: 100px;
}
.main{
padding: 5px 5px;
float:left;
width:180px;
margin-right:10px;
height: 100px;
}
.right{
padding: 5px 5px;
float:left;
width:60px;
height: 100px;
}
.footer{
padding-left: 5px
}

3

Tiinsa,
ваш код очень неплох. Единственное, фрагмент с тремя колонками лучше немного переделать. И в html-коде переставить местами right и main. Всё-таки main идет раньше. У вас в одной строке три колонки, значит каждой из них должно быть написано свойство float. Соответственно дальше нужно будет для main прописать ширину и отступы будут другие.

2 лайка
4

Высоту для footer сами пропишете. Я подскажу, как сделать верхний отступ.
В html-коде у вас все для этого есть. Нужно только правильно составить селектор:

<div class="bottom">
      <div class="layout-positioner">
        <div class="footer"> Footer</div>
      </div>
    </div>

Ваш блок с надписью Footer расположен внутри блока с классом layout-positioner, у которого прописаны внутренние отступы с каждой стороны 10px. Для футера сверху вам нужно только 5px. Воспользуемся контекстным селектором для этого. Вот и пригодится класс bottom, который вы нигде не использовали. Селектор будет:
.bottom . layout-positioner

P.S. Точку с запятой в конце каждого свойства ставить обязательно.

1 лайк