Испытание Сетки [27/32] Правильно ли решение с прилипание хедера и вообще?)

qgosha · 11.Октябрь.2016 09:19:09


    
        Испытание: строим сетку
        
    
    
            
            
        Header
        
        Menu 
        
        Promo 1 
         Promo 2 
 
        
        
        
         Left
        Main 
        Right
        
         Footer

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-container {
background-color:#34495e;
padding-top: 5px;
}

.header {
width:340px;
background-color:#c0392b;
min-height:25px;
padding:5px;
margin:5px 0px 0px 0px;
}
.menu {
width:340px;
background-color:#3498DB;
min-height:25px;
padding:5px 55px;
margin:10px 0px 0px 0px;
}

.promo1 {
width:160px;
background-color:#c0392b;
min-height:50px;
padding:5px;
float:left;
margin:10px 0px 10px 0px;
}
.promo2 {
width:160px;
background-color:#c0392b;
min-height:50px;
padding:5px;
float:right;
margin:10px 0px 0px 10px;
}
.left {
width:60px;
background-color:#3498DB;
min-height:100px;
padding:5px;
float:left;
margin:10px 0px 10px 0px;
}
.main {
width:180px;
background-color:#3498DB;
min-height:100px;
padding:5px;
float:left;
margin:10px 0px 10px 10px;
}
.right {
width:60px;
background-color:#3498DB;
min-height:100px;
padding:5px;
float:right;
margin:10px 0px 10px 10px;
}

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

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

Ineska · 11.Октябрь.2016 09:27:26

Такого быть не должно. У вас есть центровщик .layout-positioner.

qgosha · 11.Октябрь.2016 12:53:55

Так ведь меню не заключено в центровщик или я что то не понимаю

Ineska · 11.Октябрь.2016 12:58:27

Заключено. Как и футер. Вы добавляете отступ справа и слева по 55px, но это не универсальный вариант. Отступы должны быть auto.

qgosha · 11.Октябрь.2016 13:21:24

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

Ineska · 11.Октябрь.2016 13:25:51

В данном случае вам надо заключить в центровщик именно текст внутри блока, тогда ничего сбиваться не будет.
Например:
<div class="footer">
<div class="layout-positioner">Footer</div>
</div>

qgosha · 11.Октябрь.2016 13:40:14

Спасибо, но все равно в меню и в футере без padding: 5px; ничего не выходит

Ineska · 11.Октябрь.2016 13:41:47

padding: 5px; само собой остается.

qgosha · 11.Октябрь.2016 13:44:18

Проверял с рамками, рамки убрал буквы в футере и в меню чуть уехали все равно(

Ineska · 11.Октябрь.2016 13:47:18

Покажите код.

qgosha · 11.Октябрь.2016 13:48:34

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-container {
background-color:#34495e;
padding-top: 5px;
}

.header {
width:340px;
background-color:#c0392b;
min-height:25px;
padding:5px;
margin:5px 0px 0px 0px;
}
.menu {
background-color:#3498DB;
min-height:25px;
margin:10px 0px 0px 0px;
padding: 5px;

}

.promo1 {
width:160px;
background-color:#c0392b;
min-height:50px;
padding:5px;
float:left;
margin:10px 0px 10px 0px;
}
.promo2 {
width:160px;
background-color:#c0392b;
min-height:50px;
padding:5px;
float:right;
margin:10px 0px 0px 10px;
}
.left {
width:60px;
background-color:#3498DB;
min-height:100px;
padding:5px;
float:left;
margin:10px 0px 10px 0px;
}
.main {
width:180px;
background-color:#3498DB;
min-height:100px;
padding:5px;
float:left;
margin:10px 0px 10px 10px;
}
.right {
width:60px;
background-color:#3498DB;
min-height:100px;
padding:5px;
float:right;
margin:10px 0px 10px 10px;
}

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

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

qgosha · 11.Октябрь.2016 13:49:16


    
        Испытание: строим сетку
        
    
    
            
            
        Header
        
        
Menu
 
        
        Promo 1
         Promo 2 
 
        
        
        
         Left
        Main 
        Right
        
         Footer

Ineska · 12.Октябрь.2016 06:34:57

Добавьте недостающие отступы с помощью правила для .footer .layout-positioner и .menu .layout-positioner.

qgosha · 12.Октябрь.2016 07:46:38

Спасибо большое! Так все получилось! Но есть вопрос, а в чем тогда разница если так ровнять как вы в последнем посте сказали или как я изначально ровнял в свойствах самих футера и меню - padding:5px 55px;

Ineska · 12.Октябрь.2016 07:51:05

В рамках задания может и нет разницы, но если общая ширина сетки будет больше, чем 450px, то появится проблема. Можете поэкспериментировать.

qgosha · 12.Октябрь.2016 07:52:53

Спасибо за столь своевременные ответы и помощь:)