27/32 испытание: строим сетку (замечания по коду)

satzuru · 18.Июль.2017 17:31:00

Посмотрите пожалуйста можно ли как-то усовершенствовать. Что сделано хорошо, а что плохо. Нужна критика.
Еще есть вопрос: в центральном блоке все 3 внутренних блока флоатнуты, но родитель не схлопнулся, отчего и не нужно прописывать псевдораспорку, почему так?

<!DOCTYPE html>
    <html lang="ru">
        <head>
            <title>Испытание: строим сетку</title>
            <meta charset="utf-8">
        </head>
        <body>
       <div class="header">
             <div class="header-layout red"> Header </div>
             <div class="menu-layout blue"> Menu </div>
             <div class="promo1-layout red"> Promo 1 </div>
             <div class="promo2-layout red"> Promo 2 </div>
        </div>
    
        <div class="middle">
             <div class="left-layout blue"> Left </div>
             <div class="main-layout blue"> Main </div>
             <div class="right-layout blue"> Right </div>
        </div>
    
        <div class="footer">
             <div class="footer-layout"> Footer </div>
        </div>
    </body>
</html>


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 450px;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
}

.header,
.footer,
.middle {
    background-color: #34495e;
    padding-top: 10px;
}

.red {
    background-color: #c0392b;
    padding: 5px;
}

.blue {
    background-color: #3498DB;
    padding: 5px;
    height: 110px;
}

.header {
    height: 170px;
}

.header-layout {
    width: 350px;
    height: 35px;
    margin: 0px auto;
}

.menu-layout { 
    height: 35px;
    padding-left: 55px;  
    margin: 10px 0px;
}

.promo1-layout,
.promo2-layout {
    float: left;
    width: 170px;
    height: 60px;
    margin-left: 50px;
    margin-right: -40px;
}

.middle {
    height: 130px;
    background-color: white;
}

.left-layout,
.right-layout{
    float: left;   
    width: 70px;
    margin-left: 50px;
}

.main-layout {
    float: left;   
    width: 190px;
    margin-left: 10px;
    margin-right: -40px;
}

.footer {
    height: 40px;
    padding: 5px 55px;
}

Ineska · 18.Июль.2017 17:47:49

Потому что у всех ваших блоков фиксированные высоты.
Задание выполнено плохо, к сожалению. Почитайте несколько тем по этому заданию. Оно обсуждается почти каждый день.

satzuru · 19.Июль.2017 10:38:13

Перечитал еще раз раздел, осознал ошибки. Переделал, прокомментируете пожалуйста.
У меня так же есть несколько вопросов:

Стоит ли делать доп. класс для красного и синего фона и выносить цвет туда? Это сократит код по строчкам, но добавит громоздкости в классы, как лучше поступить?
Я обернул весь белый фон в отдельный “центральный блок”, в котором есть центровочный, а в нем колонки потому что это показалось мне рациональным. Стоило так делать в итоге или нет? С одной стороны фон и так и так белый будет, с другой лучше явно указать блок и его фон - мало ли у какого какие настройки по умолчанию.
Целесообразно ли использование box-sizing:border-box? Ранее в курсах говорилось что этот прием позволяет задавать ширину конкретно блоку, а не его содержимому. Не лучше ли рассчитывать ширину исходя из ширины блока? Конкретно в данном задании удобно и без него, т.к. размеры подобраны все округленные, но если брать ситуацию, где размеры не будут такими красивыми?
Минимальную высоту задают только тем блокам (не заголовкам) , которые потенциально могут расшириться от содержимого? Там, где точно известно что содержимое останется не измененным делать фиксированную высоту или лучше всегда указывать минимальную высоту (а вдруг что) ?

HTML:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="head-block">
            <div class="layout-positioner">
                <div class="header">Header</div>
            </div>

            <div class="layout-menu">Menu</div>
          
            <div class="layout-positioner">
                <div class="promo1 promo">Promo 1</div>
                <div class="promo2 promo">Promo 2</div>
            </div>
        </div>
        
        <div class="middle-block">
            <div class="layout-positioner">
                <div class="layout-left column">Left</div>
                <div class="layout-main column">Main</div>
                <div class="layout-right column">Right</div>
            </div>
        </div>
        
        <div class="footer">Footer</div>
    </body>
</html>

CSS:

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

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

.layout-positioner div {
    padding: 5px;
}

.layout-positioner {
    margin: 0px auto;
    width: 350px;  
}

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

.head-block {
    padding: 10px 0px;
    background: #34495e;
}

.head-block .layout-positioner {
    background: #34495e;
}

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

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

.promo {
    float: left;
    min-height: 50px;
    width: 160px;
    background: #c0392b;
}

.promo2 {
    float: right;
}

.middle-block {
    background: white;
    padding: 10px 0px;
}

.middle-block .layout-positioner {
    background: white;
}

.column {
    min-height: 100px;
    float: left;
    width: 60px;
    background: #3498DB;
}

.layout-right {
    float: right;
}

.layout-main {
    width: 180px;
    margin: 0px 10px;
}

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

Alexey_Ivanov · 19.Июль.2017 17:26:06

Такая идея да, используется. Это видно в блоке с белым фоном и синими блочками в центре. В плане цвета в данном задании - вот лично я как-то не вижу смысла этого…
Да, я бы тоже так сделал. Всё же эта часть, пусть и белая, не пустое место, а часть целого. Вдруг придётся ей задать какой-то цвет…
Очень целесообразно. Говорилось правильно. Нет, не лучше (но никто не запрещает!): прописали ширину в box-sizing и подгонка с изменениями тех же паддингов не требует пересчёта width, например… Конкретно в данном примере и вообще - можно и без него обходиться.
В принципе, любой сайт - это набор блоков с текстом, поэтому любой блок может измениться. Безусловно, можно потом переписывать его параметры и т.д. Но нужно учитывать, что блок не в вакууме, а среди других блоков. И это заберёт кучу времени, т.к. будет выпадать текст, увеличится высота - блок растолкает другие, нарушится сетка и т.д. Поэтому лучше min-height. Или обходиться без неё - паддингами (зависит от ситуации).

satzuru · 19.Июль.2017 17:28:35

спасибо