27/32 Проверьте код пожалуйста

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

Здравствуйте, прошел задание на 100%
Но как по мне ожидался от меня немного не такой код

<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: строим сетку</title>
       <meta charset="utf-8">
    </head>
    <body>
        <div class='header'>
            <div class='head'>Header</div>
            <div class='menu'>Menu</div>
            <div class='promo-1'>Promo 1</div>
            <div class='promo-2'>Promo 2</div>
        </div>
        <div class='features'>
            <div class='left'>Left</div>
            <div class='main'>Main</div>
            <div class='right'>Right</div>
        </div>
        <div class='footer'>Footer</div>
    </body>
</html>

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
}
.header{
background:#34495e;
height:170px;
width:450px;
}
.head {
position:absolute;
background:#c0392b;
width:340px;
top:10px;
left:50px;
height:25px;
padding:5px;
}
.menu{
position:absolute;
background:#3498DB;
margin-top:55px;
width:395px;
height:30px;
padding-left:55px;
padding-top:5px;
}
.promo-1{
position:absolute;
background:#c0392b;
top:100px;
left:50px;
padding:5px;
width:160px;
height:50px;
}
.promo-2{
position:absolute;
background:#c0392b;
top:100px;
left:230px;
padding:5px;
width:160px;
height:50px;
}
.features{
position:absolute;
background:white;
width:450px;
height:125px;
}
.left{
position:absolute;
background:#3498DB;
left:50px;
margin-top:10px;
width:60px;
height:100px;
padding:5px;
}
.main{
background:#3498DB;
position:absolute;
margin-left:130px;
margin-top:10px;
width:180px;
height:100px;
padding:5px;
}
.right{
position:absolute;
background:#3498DB;
margin-left:330px;
margin-top:10px;
padding:5px;
height:100px;
width:60px;
}
.footer{
position:absolute;
background:#34495e;
width:395px;
height:35px;
margin-top:130px;
padding-left:55px;
padding-top:5px;
}

2

Да, ожидалось, что вы будете сетку на флоатах строить. С помощью position: absolute; вы элементы расставили, не спорю. Но так делать не надо.

3

Переделал на float
Так правильнее ?

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
}
.header{
background:#34495e;
height:170px;
width:450px;
}
.head {
float:left;
background:#c0392b;
width:340px;
margin-left:50px;
margin-top:10px;
height:25px;
padding:5px;
}
.menu{
float:left;
background:#3498DB;
margin-top:10px;
width:395px;
height:30px;
padding-left:55px;
padding-top:5px;
}
.promo-1{
float:left;
background:#c0392b;
margin-left:50px;
margin-top:10px;
padding:5px;
width:160px;
height:50px;
}
.promo-2{
float:right;
background:#c0392b;
margin-right:50px;
margin-top:10px;
padding:5px;
width:160px;
height:50px;
}
.features{
background:white;
width:450px;
}
.left{
float:left;
background:#3498DB;
margin-left:50px;
margin-top:10px;
width:60px;
height:100px;
padding:5px;
}
.main{
background:#3498DB;
float:left;
margin-left:10px;
margin-top:10px;
width:180px;
height:100px;
padding:5px;
}
.right{
float:left;
background:#3498DB;
margin-left:10px;
margin-top:10px;
padding:5px;
height:100px;
width:60px;
}
.footer{
background:#34495e;
width:395px;
height:35px;
margin-top:130px;
padding-left:55px;
padding-top:5px;
}

4

HTML-код отформатируйте с помощью кнопки </> в редакторе сообщений, а то не видно.

5 
        <!DOCTYPE html>
<html>
    <head>
       <title>Испытание: строим сетку</title>
       <meta charset="utf-8">
    </head>
    <body>
        <div class='header'>
            <div class='head'>Header</div>
            <div class='menu'>Menu</div>
            <div class='promo-1'>Promo 1</div>
            <div class='promo-2'>Promo 2</div>
        </div>
        <div class='features'>
            <div class='left'>Left</div>
            <div class='main'>Main</div>
            <div class='right'>Right</div>
        </div>
        <div class='footer'>Footer</div>
    </body>
</html> ` `

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
}
.header{
background:#34495e;
height:170px;
width:450px;
}
.head {
float:left;
background:#c0392b;
width:340px;
margin-left:50px;
margin-top:10px;
height:25px;
padding:5px;
}
.menu{
float:left;
background:#3498DB;
margin-top:10px;
width:395px;
height:30px;
padding-left:55px;
padding-top:5px;
}
.promo-1{
float:left;
background:#c0392b;
margin-left:50px;
margin-top:10px;
padding:5px;
width:160px;
height:50px;
}
.promo-2{
float:right;
background:#c0392b;
margin-right:50px;
margin-top:10px;
padding:5px;
width:160px;
height:50px;
}
.features{
background:white;
width:450px;
}
.left{
float:left;
background:#3498DB;
margin-left:50px;
margin-top:10px;
width:60px;
height:100px;
padding:5px;
}
.main{
background:#3498DB;
float:left;
margin-left:10px;
margin-top:10px;
width:180px;
height:100px;
padding:5px;
}
.right{
float:left;
background:#3498DB;
margin-left:10px;
margin-top:10px;
padding:5px;
height:100px;
width:60px;
}
.footer{
background:#34495e;
width:395px;
height:35px;
margin-top:130px;
padding-left:55px;
padding-top:5px;
}

6

Так лучше. Посмотрите еще другие темы по этому заданию, на метод с распорками, на приемы по сокращению кода, например, эти:
27 Задание на 99%, проверьте актуальность решения!
"27/32" или "Все ли по-феншую?"

1 лайк