Помогите!

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

написал вот такое вот…
html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
}
.wrapper {

}
.head {
background: #34495e;
height:170px;
}
.layout-positioner {
width: 350px;
margin:auto;
}
/*
Используемые цвета:
#34495e - мокрый асфальт
#c0392b - красный
#3498DB - синий
*/
.clearfix {
clear: both;
}
.move {
background: #34495e;
min-height: 10px;
}
.header {
float:left;
width: 340px;
margin-bottom: 10px;
margin-top: 10px;
min-height:25px;
background:#c0392b;
padding: 5px;
}
.menu {
background: #3498DB;
width:395px;
min-height:25px;
padding: 5px 0px 5px 55px;
margin-top:45px;
margin-bottom: 10px;
}
.promo1 {
float: left;
width: 160px;
padding: 5px;
min-height:50px;
background:#c0392b;
}
.promo2 {
float: right;
width: 160px;
padding: 5px;
min-height:50px;
background:#c0392b;
}
.left {
float: left;
width: 60px;
min-height: 100px;
padding:5px;
margin-top: 10px;
margin-right: 10px;
background: #3498DB;
}
.main {
float: left;
width:180px;
min-height: 100px;
padding: 5px;
margin-top:10px;
background: #3498DB;
}
.right {
float: right;
width: 60px;
min-height: 100px;
padding:5px;
margin-top: 10px;
background: #3498DB;
}
.footer {
background: #34495e;
padding:5px 0px 10px 55px;
min-height:20px;
margin-top: 10px;
}
то что обложка лишняя мне понятно, но вот хотелось бы понять насколько неправильно я всё сделал, и насколько я дурачек

2

А HTML-код вы писали?

3

да. скинуть?

4

Конечно) Не хотелось бы тратить время на угадывание вашей разметки)

5

извиняюсь)))

<head>
   <title>Испытание: строим сетку</title>
   <meta charset="utf-8">
</head>
<body>
    <div class="wrapper">
        <div class="head">
            <div class="layout-positioner">
                <div class="move">
                <div class="header">Header</div>
                </div>
            </div>
                <div class="menu">Menu</div>
            <div class="layout-positioner">    
                <div class="promo1">Promo 1</div>
                <div class="promo2">Promo 2</div>
                <div class="clearfix"></div>
            </div>
        </div>
            <div class="layout-positioner">    
                <div class="left">Left</div>
                <div class="main">Main</div>
                <div class="right">Right</div>
                <div class="clearfix"></div>
            </div>
        <div class="footer">Footer</div>
    </div>
</body>
6

я там много че напутал, и не поудалял…:frowning:

7

мне просто хотелось бы понять насколько неправильно я всё написал :persevere:

8 
<body>
           <div class="head">
            <div class="layout-positioner">
                <div class="move">
                <div class="header">Header</div>
                </div>
            </div>
                <div class="menu">Menu</div>
            <div class="layout-positioner clearfix">    
                <div class="promo1">Promo 1</div>
                <div class="promo2">Promo 2</div>
            </div>
        </div>
            <div class="layout-positioner clearfix">    
                <div class="left">Left</div>
                <div class="main">Main</div>
                <div class="right">Right</div>
            </div>
            <div class="clearfix">
        <div class="footer">Footer</div>
        </div>
</body>

Еще так можно, чтобы без лишних пустых блоков. CSS соответственно подправить, где необходимо.

9

Спасибо большое. Но хотелось бы узнать, а в процентах насколько я был прав?

10

У вас задание выполнено на 100%. Замечаний нет, кроме тех, что вы и сами видите.

1 лайк
11

спасибо. оно само все в последний момент сложилось а по началу лажа…

12

Да, сетка как пазл)

1 лайк