Сетки / Испытание: строим сетку [27/32]

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

  1. Подскажите, пожалуйста, как сместить строку “Menu” на всю ширину. Где для этого нужно изменить значения в CSS: в значениях свойства .layout-column-1(header) или .layout-column-2(menu) ?

  2. Каким образом нужно изменить значения в CSS для перемещения всех строк и колонок вправо? Зафлоатить?)))))))

Заранее прошу прощения за топорную работу.
HTML:


Испытание: строим сетку


        <div class="header">
        <div class="layout-positioner">
            <div class="layout-column layout-column-1">Header</div>
            <div class="layout-column layout-column-2">Menu</div>
       
            <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-column layout-column-5">Left</div>
           <div class="layout-column layout-column-6">Main</div>
           <div class="layout-column layout-column-7">Right</div>
        </div>
        </div>
        <div class="footer">Footer</div>
</body>

CSS:

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

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

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

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

.text {
margin: 0 0;
padding: 5px;
}

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

}

.layout-column-2 {
width: 350px;
height: 25px;
background-color: #3498DB;
margin: 0 50px;
float: right;
margin-top: 10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}

.layout-column-1 {
width: 350px;
height: 25px;
background: #c0392b;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;

}

.layout-column-3,
.layout-column-4 {
width: 155px;
min-height: 45px;
background: #c0392b;
margin-bottom: 10px;
margin-top: 10px;
margin-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}

.layout-column-3 {
float: left;
clear: right;
}

.layout-column-4 {
float: left;
}

.features {
margin-bottom: 10px;

}

.layout-column-5,
.layout-column-6 {
margin-top: 10px;
}

.layout-column-5,
.layout-column-7 {
width: 60px;
height: 115px;
float: left;
margin-top: 10px;
background: #3498DB;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-right: 10px;
}

.layout-column-7 {
width: 180px;
height: 115px;
float: left;
margin-top: 10px;
margin-right: 10px;
background: #3498DB;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
}

.features :last-child-7nth {
margin-left: 0 0px;
}

.footer {
height: 30px;
background: #34495e;
padding: 5px 50px;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/Текст "как есть" (без применения форматирования)``Текст "как есть" (без применения форматирования)

2

Кнопка для вставки html-кода </> в редакторе сообщений.

3

Замучалась с данным заданием.
За кнопку вставки благодарю))))) Попробую вновь набрать html-код.

4

IMG_20170328_214505.jpg1427×2045 1.7 MB

IMG_20170328_214330.jpg1464×2319 1.85 MB

5

Это что-то совсем не то…
Не надо вам ничего сдвигать вправо. Вкладка “Различия” говорит о том, что не сходятся размеры блоков. Подберете правильные - и всё само сдвинется, так как будет занимать больше места по горизонтали.
Чтобы сделать меню на всю ширину, не надо включать его в центровщик. В данном случае вы должны центрировать не сам блок, а его содержимое, то есть центровщик будет внутри меню.

1 лайк