Испытание [27/32] посмотрите пожалуйста код)

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

Посмотрите пожалуйста)
Знаю, что размеры не совсем правильные… Мне интересна сама суть построения сетки и ее оформление)

   <!DOCTYPE html>
    <html lang="ru">
        <head>
            <title>Испытание: строим сетку</title>
            <meta charset="utf-8">
        </head>
        <body>
            <div class="header">
                <div class="layout-positioner">
                    <div class="Header layout-column">
                        Header
                    </div>
                    </div>
                    <div class="menu layout-column-menu">
                        Menu
                    </div>
                <div class="layout-positioner">
                    <div class="Promo1 layout-column">
                        Promo 1
                    </div>
                    <div class="Promo2 layout-column">
                        Promo 2
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="layout-positioner">
                    <div class="left layout-column">
                        Left
                    </div>
                    <div class="main layout-column">
                        Main
                    </div>
                    <div class="right layout-column">
                        Right
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="layout-positioner">
                    <div class="Footer layout-column">
                        Footer
                    </div>
                </div>
            </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 {
    width: 340px;
    margin: 0 auto;
    /*border: 2px dashed #3498db;*/
}

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

.header {
    margin-bottom: 10px;
    background: #34495e;
    height: 190px;
    }
    
.header .layout-column {
    background: #c0392b;
    }
    
.header .layout-column-menu {
    min-height: 30px;
    background: #3498DB;
    width: 390px;
    padding-left: 60px;
    padding-top: 5px;
    margin: auto;
    }

.header .Header {
    float: left;
    width: 335px;
    padding-top: 5px;
    padding-left: 5px;
    min-height: 30px;
    margin: 10px auto;
    }

.header .Promo1 {
    float: left;
    width: 155px;
    padding-left: 10px;
    min-height: 60px;
    padding-top: 5px;
    margin-top: 10px;
    }
    
.header .Promo2 {
    float: right;
    width: 155px;
    padding-left: 10px;
    min-height: 60px;
    padding-top: 5px;
    margin-top: 10px;
    }

.content {
    background: white;
    height: 100px;
    margin-bottom: 5px;
    }
    
.content .layout-column{
    background: #3498DB;
    height: 90px;
    }

.left {
    float: left;
    width: 60px;
    padding-left: 10px;
    min-height: 60px;
    padding-top: 5px;
    margin-right: 10px;
    }

.main {
    float: left;
    width: 170px;
    padding-left: 10px;
    min-height: 60px;
    padding-top: 5px;
    margin: 0px auto;
    }

.right {
    float: right;
    width: 60px;
    padding-left: 10px;
    min-height: 60px;
    padding-top: 5px;
    }

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

.Footer {
    float: left;
    width: 50px;
    padding-left: 10px;
    min-height: 20px;
    padding-top: 5px;
    }

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

Если знаете, что размеры не совпадают, может есть смысл сначала довести до 100%, а потом уже оценивать?
Разметка в целом верна, за исключением фрагмента с кодом меню (центровщик забыли). А с css-кодом еще нужно поработать.
Посмотрите темы на форуме с этим заданием. Многие ошибки вы сможете исправить самостоятельно.

3

Спасибо за быстрый ответ, буду совершенствовать)

1 лайк
4

Вот собственно написал еще раз для тренировки с нуля, теперь 100%)
Очень жду комментарий и замечаний)

   <!DOCTYPE html>
    <html lang="ru">
        <head>
            <title>Испытание: строим сетку</title>
            <meta charset="utf-8">
        </head>
        <body>
    	    <div class="head">
    		    <div class="layout-positioner">
    		    	<div class="header">Header</div>
    			</div>
    			<div class="layout-positioner_1">
    				<div class="menu">Menu</div>
    			</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="coloum1">Left</div>
    				<div class="main">Main</div>
    				<div class="coloum2">Right</div>
    			</div>
    	    </div>
            <div class="foo">
    	    <div class="layout-positioner">
    	    	<div>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;
    margin: 0;
}

.layout-positioner {
    width: 350px;
    margin: 0 auto;
    /*border: 2px dashed #3498db;*/
}

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

.head {
    background-color: #34495e;
    min-height: 160px;
    padding-top: 10px;
    margin: 0 auto;
    margin-bottom: 10px;
}

.header {
    background-color: #c0392b;
    width: 340px;
    min-height: 25px;
    padding: 5px;
    margin: auto;
    margin-bottom: 10px;
}

.layout-positioner_1 .menu {
    background-color: #3498DB;
    float: left;
    min-height: 30px;
    min-width: 395px;
    padding-left: 55px;
    padding-top: 5px;
    margin-bottom: 10px;
}

.promo1 {
    background-color: #c0392b;
    float: left;
    min-height: 55px;
    width: 165px;
    padding-left: 5px;
    padding-top: 5px;
}

.promo2 {
    background-color: #c0392b;
    float: right;
    min-height: 55px;
    width: 165px;
    padding-left: 5px;
    padding-top: 5px;
}

.coloum1 {
    background-color: #3498DB;
    float: left;
    margin: 0 auto;
    min-height: 105px;
    width: 65px;
    padding-left: 5px;
    padding-top: 5px;
    margin-bottom: 10px;
    margin-right: 10px;
}

.main {
    background-color: #3498DB;
    float: left;
    margin: 0 auto;
    min-height: 105px;
    width: 185px;
    padding-left: 5px;
    padding-top: 5px;
    margin-bottom: 10px;
    margin-right: 10px;
}

.coloum2 {
    background-color: #3498DB;
    float: right;
    margin: 0 auto;
    min-height: 105px;
    width: 65px;
    padding-left: 5px;
    padding-top: 5px;
    margin-bottom: 10px;
}

.foo {
    background-color: #34495e;
    min-height: 30px;
    margin: 0 auto;
    padding-left: 10px;
    padding-top: 5px;
}


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

html-код поправьте, а то не видно.

6

Уже поправил!)

7

Центровщик в меню не работает:

Для чего везде понаставлено margin: 0 auto; - непонятно.

А что на счет padding-right и padding-bottom?

8

Заменил на center:
.layout-positioner_1 .menu {
background-color: #3498DB;
float: center;
min-height: 30px;
min-width: 395px;
padding-left: 55px;
padding-top: 5px;
margin-bottom: 10px;

Да спасибо, не учел правопреемственность!

А обязательно они нужны? Если мы и так задаем слева и сверху. Или это просто обычно делается для лучшего восприятия, например по 5рх?

9

С помощью float нельзя отцентрировать элемент. Нет у него такого значения. Только left, right, none.

Это макет сетки. Сейчас внутри блока написано одно слово. Но предполагается, что контента может быть больше. Поэтому, чтобы контент не прилипал к границам блока, отступы задаются с каждой стороны.

10

Заменил на margin: 0 auto; для блока с меню!
Спасибо за ответы!