Сетки, 27/32. Говнокод?

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

Добрый вечер. Активные форумчане, помогите пожалуйста улучшить код. Какие ошибки, недочеты есть?
PS: CSS код добавлен после html, но не показывает его пока не откроешь html, это баг какой или я неправильно вставляю?

%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA
Снимок.PNG1044×826 50.1 KB

html Испытание: строим сетку 
            Header
          </div>  
        </div>
        <div class = "menu">
            <div class = "layout-positioner">
                      Menu
            </div>
        </div>
        <div class = "layout-positioner">
           <div class = "promo">
                  Promo 1
           </div>
           <div class = "promo">
                  Promo 2
           </div>
        </div>
     
    </div>
    
    <div class = "features">
      <div class = "layout-positioner">
         <div class = "left">
        Left
         </div>
    
        <div class = "main">
            Main
        </div>
        <div class = "right">
            Right
        </div>
      </div>
    </div>
    
    <div class = "footer">
        <div class = "layout-positioner">
    Footer
        </div>
    </div>
    
   
</body>
CSS

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

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

.main-header{
background: #34495e;
min-height: 160px;
margin-bottom: 10px;
padding-top: 10px;
width: 450px;
}
.header{
width: 340px;
background: #c0392b;
min-height: 25px;
padding: 5px;
}
.layout-positioner{
margin: 0 auto;
width: 350px;
}
.layout-positioner::after{
content: “”;
display: table;
clear: both;
}
.menu{
min-height: 25px;
background: #3498DB;
padding: 5px 0 5px 10px;
margin-top: 10px;
}
.promo{
width: 160px;
background: #c0392b;
float: left;
min-height: 50px;
padding: 5px;
margin-top: 10px;
}
.promo:first-child{
margin-right: 10px;
}
.footer{
background: #34495e;
min-height: 30px;
padding: 5px;
padding-left: 15px;
}
.padding{
padding: 5px;
width: 100%;
}
.left{
background: #3498DB;
float: left;
min-height: 100px;
width: 60px;
margin-right: 10px;
padding: 5px;
}
.right{
background: #3498DB;
float: left;
min-height: 100px;
width: 60px;
padding: 5px;
}
.main{
width: 180px;
background: #3498DB;
min-height: 100px;
float: left;
margin-right: 10px;
padding: 5px;
}
.features{
margin-bottom: 10px;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/

2

И еще, объясните пожалуйста, почему центровщик(layout-positioner) для menu и footer мы задаем после самого блока menu и footer, а для остальных блоков - до?

3

Видимо, потому, что header с menu и footer имеют непрозрачный фон, который должен занимать всю ширину экрана, а центрирован должен быть лишь их контент. В случае других крупных блоков фоном может быть задан фон body, поэтому для них достаточно отцентрировать контент на их собственном прозрачном фоне.

1 лайк
4

Хм, пытаюсь понять что вы хотели донести, удается с трудом. А сам код то как? Семантика верна?

6

Не подскажете, как Вы здесь так круто постите HTML/CSS-код, чтобы он попадал под кат? Я тогда на конкретные моменты указал бы. Делаю как здесь рекомендуют – ничего не выходит.

7

Посмотрите тут: Мастерская: декоративные элементы / Испытание: карточка курса [9/18] - 100%

8

Не подскажите тоже где минусы моего кода? Вы, как я вижу, опытный юзер здесь

9

Не могу найти, где это правило используется?

10

Это неиспользуемый класс. Удалил сейчас. С width:100% сам в шоке если честно. Что касается padding - я его напрямую в другие классы записывал, как вы можете увидеть. Еще есть какие ошибки у меня в коде?

11

Ошибок не вижу. Единственное, вы могли сгруппировать общие свойства колонок, тогда код был бы короче.

12

Объединил колонки в один класс - column, немного сократил.
Простите меня за мою “криворукость”, не могу правильно вставить.

html Испытание: строим сетку 
            Header 
          </div>  
        </div>
        <div class = "menu">
            <div class = "layout-positioner">
                      Menu
            </div>
        </div>
        <div class = "layout-positioner">
           <div class = "promo">
                  Promo 1
           </div>
           <div class = "promo">
                  Promo 2
           </div>
        </div>
     
    </div>
    
    <div class = "features">
      <div class = "layout-positioner">
         <div class = "column">
        Left
         </div>
    
        <div class = "column">
            Main
        </div>
        <div class = "column">
            Right
        </div>
      </div>
    </div>
    
    <div class = "footer">
        <div class = "layout-positioner">
    Footer 
        </div>
    </div>
    
   
</body>
CSS

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

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

.main-header{
background: #34495e;
min-height: 160px;
margin-bottom: 10px;
padding-top: 10px;
width: 450px;
}
.header{
width: 340px;
background: #c0392b;
min-height: 25px;
padding: 5px;
}
.layout-positioner{
margin: 0 auto;
width: 350px;
}
.layout-positioner::after{
content: “”;
display: table;
clear: both;
}
.menu{
min-height: 25px;
background: #3498DB;
padding: 5px 0 5px 10px;
margin-top: 10px;
}
.promo{
width: 160px;
background: #c0392b;
float: left;
min-height: 50px;
padding: 5px;
margin-top: 10px;
}
.promo:first-child{
margin-right: 10px;
}
.footer{
background: #34495e;
min-height: 30px;
padding: 5px;
padding-left: 15px;
}
.column{
background: #3498DB;
float: left;
min-height: 100px;
width: 60px;
padding: 5px;
}
.column:first-child{
margin-right: 10px;
}
.column:nth-child(2){
width: 180px;
margin-right: 10px;
}
.features{
margin-bottom: 10px;
}

13

Отступ справа у колонок - это тоже общее свойство. Принято обнулять его у последнего элемента (:last-child).

14

Да, понял. Сделал. Спасибо за обратную связь