27 испытание. Укажите пожалуйста на недостатки. с помощью флоатов не смог сделать.

Курсы §15. Сетки
1 
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="container">
      <div class="header">Header</div>
      <div class="menu">Menu</div>
      <div class="promo promo1">Promo 1</div>
      <div class="promo promo2">Promo 2</div>
    </div>
    
    <div class="container2">
      <div class="column left">Left</div>
      <div class="column main">Main</div>
      <div class="column right">Right</div>
    </div>
     
    <div class="footer">Footer</div>
    
</body>

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.container {
display: inline-block;
background-color: #34495e;
}
.header {
box-sizing: border-box;
width: 350px;
height: 35px;
background: #c0392b;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
padding-left: 5px;
padding-top: 5px;
}
.menu {
box-sizing: border-box;
width: 450px;
background: #3498DB;
height: 35px;
margin-top: 10px;
padding-left: 55px;
padding-top: 5px;
}
.promo {
display: inline-block;
height: 60px;
margin-top: 10px;
padding-left: 5px;
padding-top: 5px;
margin-bottom: 10px;
}
.promo1 {
box-sizing: border-box;
width: 170px;
background: #c0392b;
margin-left: 50px;
}
.promo2 {
box-sizing: border-box;
width: 170px;
background: #c0392b;
margin-left: 7px;
}
.container2 {
display: inline-block;
margin-top: 10px;
}
.column {
display: inline-block;
padding-left: 5px;
padding-top: 5px;
background: #3498DB;
height: 105px;
}
.left {
width: 65px;
margin-left: 50px;
}
.main {
width: 185px;
margin-left: 7px;
}
.right {
width: 65px;
margin-left: 7px;
}
.footer {
box-sizing: border-box;
background: #34495e;
height: 35px;
margin-top: 10px;
padding-left: 55px;
padding-top: 5px;
}

2

Флоаты мне не дались, пошел дальше, и сразу после 28го задания понял, что инлайн-блоками гораздо удобнее пользоваться. можно ли игнорироовать флоаты вообще, используя лишь подобную практику с инлайн-блоками?^^

3

Вышли из положения через inline-block) Но пострадала кратность пяти ( в частности у вас получился отступ слева у блоков 7px вместо 10px, из-за пробелов у блочно-строчных элементов).
Использование padding-left: 55px; для центрирования - плохая практика, в рамках задания прокатило, но в условиях настоящей сетки значение будет гигантским.
А что с флоатами? В задании предполагается, что будете пользоваться ими. Что не понятно?

4

как-то не получается вникнуть в clearfix-ы с их свойствами и значениями, и в использование layout positioner. даже не знаю как обьяснить что именно не понятно. вот не подружился я с флолатами))) я , конечно, буду с флоатами разбираться,но инлайн-блоки показались удобнее. а как можно еще центрировать надпись menu там?

5

Надпись menu надо обернуть в параграф например и отцентрировать ее как блок.

6

При построении реальных сеток инлайн блоки увы вам не помогут)

1 лайк
7

Не знаю стоит ли +100500 плодить тем? Решил написать здесь! Как такое решение?

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

html,
body {
margin: 0;
padding: 0;
}
`
body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}

/** {/
/ margin: 0;/
/ padding: 0;/
/}*/

/.clearfix{/
/* display: table;/
/ content: “”;/
/ clear: both;/
/}*/

.layout-positioner {
width: 350px;
margin: 0 auto;
padding: 10px;
}
.layout-positioner::after {
display: table;
content: “”;
clear: both;
}
.header,
.promo {
background-color: #34495e;
}
.logo {
min-height: 25px;
background-color: #c0392b;
}
.menu {
height: 35px;
background-color: #3498DB;
}
.menu .layout-positioner {
padding-top: 0;
}
.layout-column{
float: left;
}
.promo .layout-column {
min-height: 50px;
width: 160px;
margin-right: 10px;
background-color: #c0392b;
}
.promo .layout-column:last-child{
margin-right: 0;
}
.features .layout-column{
width: 60px;
min-height: 100px;
background-color: #3498DB;
}
.features .main {
margin: 0 10px;
width: 180px;
}
.footer {
min-height: 35px;
background-color: #34495e;
}
.footer .layout-positioner {
padding-top: 0;
}
.content-text {
padding: 5px;
}

Спасибо!

8

По поводу второго nav не знаю, а так все хорошо по-моему.

9

а точно забыл поменять, сенкс)