27/32

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

Не хочу списывать, но обойти не получается. Направьте на путь истинный…
Никак не выходит разобщить header от основного блока, соответственно, margin не дает нужного эффекта:

.header,
.promo1,
.promo2,
.left,
.right,
.main{
padding:5px 0 0 5px;
}

.bg{
background-color:#34495E;
height: 170px;
}

.header{
background-color:#C0392B;
width:345px;
height:35px;
margin:0 auto;
}

.menu{
background-color:#3498DB;
margin-top:10px;
height:30px;
padding:5px 0 0 55px;
}

.promo1{
background-color:#C0392B;
width:165px;
height:60px;
float:left;
margin:10px 0 0 50px;
}

.promo2{
background-color:#C0392B;
width:165px;
height:60px;
float:left;
margin:10px 0 0 10px;
}

.left{
background-color:#3498DB;
float:left;
width:65px;
height:100px;
margin:10px 0 10px 50px;
}

.main{
background-color:#3498DB;
float:left;
width:185px;
height:100px;
margin:10px 10px 0 10px;
}

.right{
background-color:#3498DB;
float:right;
width:65px;
height:100px;
margin:10px 50px 10px 0;
padding:5px 0 0 5px;
}

.footer{
background-color:#34495E;
clear:both;
height:35px;
padding:5px 0 0 55px;
}

2

Распорки и центровщик обязательны для использования в этом задании. Иначе настоящая сетка не получается.

1 лайк
3

принял к сведению и пойду Вашим путем, но все же, сбивают с толку такого рода notice:[quote] Вы можете писать любой HTML и любой CSS, без каких либо ограничений.
[/quote]

4

(100%)

Вышло вот такое, если можно, подскажите, на что сделать акцент? Не покидает стойкое ощущение “топорности” моего творения. Так и не додумался как использовать псевдоклассы или, возможно, таблицу…

.header,
.promo1,
.promo2{
background-color:#C0392B;
}

.header,
.promo1,
.promo2,
.left,
.right,
.main{
padding:5px 0 0 5px;
}

.menu,
.left,
.right,
.main{
background-color:#3498DB;
}

.bg,
.footer{
background-color:#34495E;
}

.bg{
height: 160px;
padding-top:10px;
}

.header{
width:345px;
height:30px;
margin:0 auto;
}

.menu{
margin-top:10px;
height:30px;
padding:5px 0 0 55px;
}

.promo1{
width:165px;
height:55px;
float:left;
margin:10px 0 0 50px;
}

.promo2{
width:165px;
height:55px;
float:left;
margin:10px 0 0 10px;
}

.left{
float:left;
width:65px;
height:105px;
margin:10px 0 10px 50px;
}

.main{
float:left;
width:185px;
height:105px;
margin:10px 10px 0 10px;
}

.right{
float:right;
width:65px;
height:105px;
margin:10px 50px 10px 0;
padding:5px 0 0 5px;
}

.footer{
clear:both;
height:30px;
padding:5px 0 0 55px;
}

5

Переделайте свой html в соответствии с рисунком по ссылке.
[27/32] 100%. Прошу посмотреть код и указать на минусы и их последствия при верстке.
Фиксированные высоты у блоков лучше заменить на min-height.