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

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

Здравствуйте, задание прошла на 100%, но очень сомневаюсь в правильности подхода. Просмотрите, пожалуйста, код.

`

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

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.header {
width: auto;
background-color: #34495e;
padding-top:10px;
padding-bottom: 10px;

}
.header .layout-column-1 {
background-color: #c0392b;
width: 345px;
height: 30px;
margin: 0 auto;
color: white;
padding-left: 5px;
padding-top: 5px;

}

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

.header .layout-column-3 {
background-color:#c0392b;
width: 165px;
height: 55px;
float: left;
margin-left: 50px;
margin-top: 10px;
padding-left: 5px;
padding-top:5px;
}

.header .layout-column-4 {
background-color:#c0392b;
width: 165px;
height: 55px;
float: right;
margin-right: 50px;
margin-top: 10px;
padding-left: 5px;
padding-top:5px;
}
.clearfix::after {
content: “”;
clear: both;
display: table;
}

.features .layout-column-1 {
background-color: #3498DB;
height: 105px;
width: 65px;
margin-left: 50px;
padding-left: 5px;
padding-top: 5px;
float:left;
}

.features .layout-column-2 {
background-color: #3498DB;
height: 105px;
width: 185px;
float:left;
padding-left: 5px;
padding-top: 5px;
margin-left: 10px;
}

.features .layout-column-3 {
background-color: #3498DB;
height: 105px;
width: 65px;
height: 105px;
padding-left: 5px;
padding-top: 5px;
float:right;
margin-right: 50px;
}
.features {
padding-top: 10px;
padding-bottom: 10px;
}
.footer {
width: auto;
background-color: #34495e;
height: 35px;
padding-left:55px;
padding-top: 5px;
}

Заранее спасибо!

2

вы бы сократили свой код если бы ввели в него позиционер, который бы с позиционировал все элементы по центру.

3

спасибо!

4

А можно еще поприставать?)
Я правильно поняла?

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

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.header {
width: auto;
background-color: #34495e;
padding-top:10px;
padding-bottom: 10px;

}
.header .layout-column-1 {
background-color: #c0392b;
width: 345px;
height: 30px;
margin: 0 auto;
color: white;
padding-left: 5px;
padding-top: 5px;

}

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

.header .layout-column-3 {
background-color:#c0392b;
width: 165px;
height: 55px;
float: left;
margin-top: 10px;
}

.header .layout-column-4 {
background-color:#c0392b;
width: 165px;
height: 55px;
float: right;
margin-top: 10px;
}
.clearfix::after {
content: “”;
clear: both;
display: table;
}

.features .layout-column-1 {
background-color: #3498DB;
height: 105px;
width: 65px;
float:left;
}

.features .layout-column-2 {
background-color: #3498DB;
height: 105px;
width: 185px;
float:left;
margin-left: 10px;

}

.features .layout-column-3 {
background-color: #3498DB;
height: 105px;
width: 65px;
float:right;
}
.features {
padding-top: 10px;
padding-bottom: 10px;
}
.footer {
width: auto;
background-color: #34495e;
height: 35px;
padding-left:55px;
padding-top: 5px;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
}
.layout-column {
padding-left: 5px;
padding-top: 5px;
}

Спасибо за помощь!`

5

Попаду за компьютер, скину код, есть идеи доработать чуть чуть, а так да вы все правильно поняли:)

1 лайк
6

попробовал вариант без огромных отступов, но он мне показался с лишней вложенностью в html коде.
А у вас в коде лишними оказались выделенные строки`.header {
width: auto;
background-color: #34495e;
padding-top:10px;
padding-bottom: 10px;

}
.header .layout-column-1 {
background-color: #c0392b;
width: 345px;
height: 30px;
margin: 0 auto;
color: white;
padding-left: 5px;
padding-top: 5px;

}`
width auto не нужен потому что блочный элемент и так растягивается на всю ширину родителя, а маргин авто не нужен потому что у вас блок вложен в позиционер, он и так будет по центру. А так можете попробовать еще несколько вариантов выполнения, как минимум можно сделать вариант без флоатов у промо, код html получиться чуть длиннее, но мы же тут для того чтоб учится)

7

Точно. Спасибо. У меня в голове такая каша, что элементарные свойства забываются и городишь огород :slight_smile: Может когда-нибудь это утрамбуется все:neutral_face:

1 лайк