Можете проверить сетку. Все ли верно? 27/32

Курсы §15. Сетки
1 
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="header">
        <div class="layout-positioner">
            <div class="layout-column layout-column-1">
                Header
            </div>
        </div>    
          <div class="layout-positioner1"> 
            <div class="layout-column layout-column-2">
                 Menu
            </div>
        </div>
        <div class="layout-positioner">
            <div class="layout-column layout-column-3">
                Promo 1
            </div>
            <div class="layout-column layout-column-4">
                Promo 2
            </div>
        </div>
    </div>
        <div class="features">
            <div class="layout-positioner">
                <div class="layout-column1">
                    Left
                </div>
                <div class="layout-column2">
                    Main
                </div>
                <div class="layout-column3">
                    Right
                </div>
            </div>
        </div>
   
    <div class="footer">
        <div class="layout-positioner">
            Footer
        </div>
    </div>
</body>

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

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

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

}

.layout-positioner1 {
background: #3498DB;
padding-left: 55px;
padding-top: 5px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;

}

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

.header {
margin-bottom: 10px;
background: #34495e;
padding-top: 10px;
padding-bottom: 10px;
}

.header .layout-column {
min-height: 50px;

}

.header .layout-column-1 {
min-height: 25px;
margin-bottom: 10px;
background: #c0392b;

}

.header .layout-column-2 {
min-height: 30px;
margin-bottom: 10px;
}

.header .layout-column-3 {
padding: 5px;
float: left;
width: 160px;
background: #c0392b;

}

.header .layout-column-4 {
float: right;
padding: 5px;
width: 160px;
background: #c0392b;

}

.features {
margin-bottom: 10px;
}

.features .layout-column1 {
float: left;
width: 60px;
padding: 5px;
margin-right: 10px;
min-height: 100px;
background: #3498DB;
}

.features .layout-column2 {
float: left;
width: 180px;
padding: 5px;
min-height: 100px;
background: #3498DB;
}

.features .layout-column3 {
float: right;
width: 60px;
padding: 5px;
min-height: 100px;
background: #3498DB;
}

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

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

2

Почему для menu отдельный центровщик?

3 
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="header">
        <div class="layout-positioner">
            <div class="layout-column layout-column-1">
                Header
            </div>
        </div>    
            <div class="layout-column layout-column-2">
                 Menu
            </div>
        <div class="layout-positioner">
            <div class="layout-column layout-column-3">
                Promo 1
            </div>
            <div class="layout-column layout-column-4">
                Promo 2
            </div>
        </div>
    </div>
        <div class="features">
            <div class="layout-positioner">
                <div class="layout-column1">
                    Left
                </div>
                <div class="layout-column2">
                    Main
                </div>
                <div class="layout-column3">
                    Right
                </div>
            </div>
        </div>
        
    <div class="footer">
        <div class="layout-positioner">
            Footer
        </div>
    </div>
</body>

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

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

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

}

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

.header {
margin-bottom: 10px;
background: #34495e;
padding-top: 10px;
padding-bottom: 10px;
}

.header .layout-column {
min-height: 50px;

}

.header .layout-column-1 {
min-height: 25px;
margin-bottom: 10px;
background: #c0392b;
padding: 5px;

}

.header .layout-column-2 {
min-height: 30px;
margin-bottom: 10px;
background: #3498DB;
padding-left: 55px;
padding-top: 5px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
}

.header .layout-column-3 {
padding: 5px;
float: left;
width: 160px;
background: #c0392b;

}

.header .layout-column-4 {
float: right;
padding: 5px;
width: 160px;
background: #c0392b;

}

.features {
margin-bottom: 10px;
}

.features .layout-column1 {
float: left;
width: 60px;
padding: 5px;
margin-right: 10px;
min-height: 100px;
background: #3498DB;
}

.features .layout-column2 {
float: left;
width: 180px;
padding: 5px;
min-height: 100px;
background: #3498DB;
}

.features .layout-column3 {
float: right;
width: 60px;
padding: 5px;
min-height: 100px;
background: #3498DB;
}

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

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/
Вот теперь поправил с меню совсем убрал центровщик, оставил центровщик для хедера и остального контента, теперь все нормально? Раньше бы так, а то никак не получалось растянуть меню на всю ширину)

4

Не могу подобрать точные размеры. Все правильно просто надо до милиметров подобрать и все будет на все 100%

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

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

}
.fon1{
background-color:#34495e;
width: 450px;
height: 166px;
padding: 1px;
}
.header{
background-color:#c0392b;
width: 340px;
height: 26px;
padding: 5px;
margin-top: 10px;
margin-left: 50px;
}
.fon1 .Menu{
background-color:#3498DB;
height: 31px;
width: 391px;
margin-top: 10px;
padding-left: 60px;
padding-top: 5px;
}
.Promo1{
float: left;
background-color: #c0392b;
width: 160px;
height: 47px;
padding: 5px;
margin-top: 10px;
margin-left: 50px
}
.Promo2{
float: right;
background-color: #c0392b;
width: 160px;
height: 47px;
padding: 5px;
margin-top: 10px;
margin-right: 50px;
}
.fon2{
background-color: white;
width: 465px;
height: 130px;
}
.Left{
background-color: #3498DB;
width: 60px;
height: 100px;
padding: 5px;
margin-top: 10px;
margin-left: 50px;
float: left;
}
.Main{
background-color: #3498DB;
width: 181px;
height: 100px;
padding: 5px;
margin-top: 10px;
float: left;
margin-left:10px;
}
.Right{
float: right;
background-color: #3498DB;
width: 60px;
height: 100px;
padding: 5px;
margin-top: 10px;
margin-right: 64px;
margin-left: 10px;

}
.Footer{
background-color: #34495e;
height: 30px;
padding: 5px;
padding-left: 55px;
}

5

Дайте пожалуйста совет, как можно изменить блок что находится внутри центровщика? заранее спасибо!

6

Центровщик в этом испытании центрирует многие блоки.
Покажите Ваш код – так будет понятнее, что нужно изменить…

1 лайк