[27/32] Поиск ошибок в стопроцентном результате.

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

Здравствуйте! Интересно узнать нет ли грубых ошибок в коде?

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

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

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

.First, .Footer {
background: #34495e;
}

.Header, .Promo1, .Promo2 {
background: #c0392b;
}

.Menu, .Left, .Main, .Right {
background: #3498DB;
}

.First {
Float: left;
height: 170px;
}
.Header {
margin: 10px 10px 10px 50px;
width: 345px;
height: 30px;
padding: 5px 0px 0px 5px;
background: #c0392b;
}

.Menu {
width: 395px;
height: 30px;
padding: 5px 0px 0px 55px;
}

.Promo1, .Promo2 {
width: 165px;
height: 55px;
margin-top: 10px;
padding: 5px 0px 0px 5px;
}

.Promo1 {
float: left;
margin-left: 50px;
}

.Promo2 {
margin-left: 230px;
}

.Left, .Main, .Right {
float: left;
}

.Left, .Right {
width: 65px;
height: 105px;
margin-top: 10px;
padding: 5px 0px 0px 5px;
}

.Left {
margin-left: 50px;
}

.Main {
margin-left: 10px;
width: 185px;
height: 105px;
margin-top: 10px;
padding: 5px 0px 0px 5px;
}

.Right {
margin-left: 10px;
}

.Footer {
width: 395px;
height: 30px;
padding: 5px 0px 0px 55px;
margin-top: 300px;
}

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

2

Много ошибок. Одна из главных - ваш код не видно. Кнопка для корректного отображения </> в редакторе сообщений.

3 
<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="First">
        <div class="Header">Header</div>
        <div class="Menu">Menu</div>  
        <div class="Promo1">Promo 1</div>
        <div class="Promo2">Promo 2</div>
    </div>    
    <div class="Left">Left</div>
    <div class="Main">Main</div>
    <div class="Right">Right</div>
    <div class="Footer">Footer</div>
</body>
</html>
4 
html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 450px;
    height: 335px;
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
    background: white;
    Float: left;
}

.First, .Footer {
    background: #34495e;
}

.Header, .Promo1, .Promo2 {
    background: #c0392b;
}

.Menu, .Left, .Main, .Right {
    background: #3498DB;
}

.First {
    Float: left;        
    height: 170px;
}
.Header {
    margin: 10px 10px 10px 50px;
    width: 345px;
    height: 30px;
    padding: 5px 0px 0px 5px;
    background: #c0392b;
}

.Menu {
    width: 395px;
    height: 30px;
    padding: 5px 0px 0px 55px;
}

.Promo1, .Promo2 {
    width: 165px;
    height: 55px;
    margin-top: 10px;
    padding: 5px 0px 0px 5px;
}

.Promo1 {
    float: left;
    margin-left: 50px;
}

.Promo2 {
    margin-left: 230px;    
}

.Left, .Main, .Right {
    float: left;
}

.Left, .Right {
    width: 65px;
    height: 105px;
    margin-top: 10px;
    padding: 5px 0px 0px 5px;   
}

.Left {
    margin-left: 50px;
}

.Main {
    margin-left: 10px;
    width: 185px;
    height: 105px;
    margin-top: 10px;
    padding: 5px 0px 0px 5px;  
} 

.Right {
    margin-left: 10px;
}

.Footer {
        width: 395px;
        height: 30px;
        padding: 5px 0px 0px 55px;
        margin-top: 300px;
}
5

Я понимаю, что использовал не все возможности. Будьте добры, помогите понять в чём я здесь не прав!

6

Я помню о вас. Вчера не дошла до вашего вопроса, были технические проблемы.
Названия всех классов и атрибутов пишутся строчными буквами (то есть маленькими).
В своем решении вы не использовали центровщик.
Посмотрите как должно выглядеть. В теме есть картинка с расположением центровщика:


Без распорок вы тоже обошлись - использовали фиксированные высоты для блоков.
Но тогда это не сетка, а разноцветные блоки на разных фонах.
Это те ошибки, которых в большей или меньшей степени есть почти у всех, кто обращается на форум с этим заданием.
Но еще есть другие.

Это родительский блок, соседей справа или слева у него нет. Вопрос: зачем ему float?

Оцените визуально расстояние между Promo1 и Promo2. Откуда там 230px? (как раз здесь float уместен).

7

Большое спасибо!