Помогите разобраться, пожалуйста ! [27/32]

EvgenySalakhetdinov · 26.Июль.2018 17:39:01

Не получается зафлоатить Right вправо ! Делал по аналогии с 26 заданием, но не понимаю в чем ошибка. Заранее спасибо ! Вот мой код и ссылка на задание: https://htmlacademy.ru/courses/65/run/27
HTML:

Испытание: строим сетку

Header

Menu

Promo 1

Promo 2

Left

Main

Right

Footer

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

body {
width: 450px;
height: 335px;

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
.clearfix::after {
content: “”;
display: table;
clear: both;
}
.layout-positioner {
width: 350px;
margin: 0 auto;

}
.layout-positioner::after {
content: “”;
display: table;
clear: both;
}

.header,
.wrapper-promo,
.footer {
background-color: #34495e;
}
.header .layout-column,
.promo-1,
.promo-2 {
background-color: #c0392b;
}
.menu,
.features .layout-column {
background-color: #3498db;
}
.header {
min-height: 55px;
}

.header .layout-column {
width: 340px;
min-height: 25px;
margin-top: 10px;
padding: 5px;

}
.menu {
min-height: 30px;
padding-top: 5px;
}
.wrapper-promo {
min-height: 80px;
}
.wrapper-promo .layout-column {
min-height: 50px;
margin-top: 10px;
}
.promo-1 {
float: left;
width: 160px;
padding: 5px;

}
.promo-2 {
float: right;
width: 160px;
padding: 5px;
}
.features {
margin: 10px;
}
.features .layout-column {
min-height: 100px;
width: 70px;
margin-right: 10px;
padding: 5px;
float: left;
}
.features .layout-column:last-child {
margin-right: 0;
}
.main {
width: 100px;
}
.footer {
min-height: 35px;
}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498db – синий
*/

EvgenySalakhetdinov · 26.Июль.2018 19:17:30

Прошу прощения за косячный код !

    <!DOCTYPE html>
    <html lang="ru">
      <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
           <div class="header">
            <div class="layout-positioner">
              <div class="layout-column">Header</div>
           </div> 
          </div>
          <div class="menu">
          <div class="layout-positioner">Menu</div>
          </div>
          <div class="wrapper-promo">
           <div class="layout-positioner">
            <div class="promo-1 layout-column">Promo 1</div>
            <div class="promo-2 layout-column">Promo 2</div>
          </div>
        </div>
        <div class="features">
          <div class="layout-positioner">
            <div class="layout-column">
              <div class="left">Left</div>
            </div>
            <div class="layout-column">
              <div class="main">Main</div>
            </div>
              <div class="layout-column">
                <div class="right">Right</div>
              </div>
          </div>  
        </div>
        <div class="footer">
          <div class="layout-positioner">Footer</div>
          </div>
       </body>
    </html>

Valery_S · 26.Июль.2018 20:28:51

Примените float: right; для .features .layout-column:last-child
И ширину средней колонки нужно будет изменить – они у Вас все три одинаковой ширины.

.main {
    width: 100px;
}

Это правило ширину колонки не изменяет: Вы изменяете ширину .main внутри блока .layout-column, но поскольку у .layout-column своя фиксированная ширина – .main просто выпадает из родителя не изменяя его ширины.

Ширина левой, правой колонок -- 60px, средней -- 180px...

EvgenySalakhetdinov · 26.Июль.2018 21:20:13

А как тогда изменить ?

Valery_S · 26.Июль.2018 22:15:29

В Вашем случае примерно так:

.features {
margin: 10px;
}
.features .layout-column {
min-height: 100px;
width: 60px;
margin-right: 10px;
padding: 5px;
float: left;
}

.features .layout-column:nth-child(2) {
width: 180px;

}
.features .layout-column:last-child {
margin-right: 0;
float: right;
}

Вообще код нескольку путанный – требует доработки… но мы же учимся…

Зачем у Вас .clearfix::after?

EvgenySalakhetdinov · 26.Июль.2018 22:22:35

Вроде как, рекомендовано оставить у вас в курсах =)

Valery_S · 26.Июль.2018 22:28:11

У Вас уже есть это правило – и оно применяется.

.layout-positioner::after {
content: "";
display: table;
clear: both;
}

А .clearfix::after висит мёртвым грузом…

EvgenySalakhetdinov · 27.Июль.2018 10:56:25

Спасибо ! А Вы можете дать пример кода, который правильный ? Я искал на форуме, но так и не нашёл…Везде код требующий доработок. Так и непонятно как должен выглядеть оптимальный код для этого задания .

Valery_S · 27.Июль.2018 11:35:48

У меня вот так:

HTML

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css.css">
        <title>Испытание: строим сетку</title>
        <link rel="stylesheet" href="style.css">
    </head>
<body>
    <div class="container">
        <div class="layout-positioner">
            <div class="header">Header</div>
        </div>
        <div class="menu-wrapper">
            <div class="layout-positioner">
                <div class="menu">Menu</div>
            </div>
        </div>
        <div class="layout-positioner">
            <div class="promo-1">Promo 1</div>
            <div class="promo-2">Promo 2</div>
        </div>
    </div>
    <div class="layout-positioner">
        <div class="column-left">Left</div>
        <div class="column-main">Main</div>
        <div class="column-right">Right</div>
    </div>
    <div class="footer-wrapper">
        <div class="layout-positioner">
             <div class="footer">Footer</div>
        </div>
    </div>
    </body>
</html>

CSS

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

body {
    width: 450px;    /* постовить своё значиние. либо исключить из правила*/
    height: 335px;   /* постовить своё значиние. либо исключить из правила*/
    font-family: "Arial", sans-serif;
    font-size: 10px;
    color: white;
}

.layout-positioner {
    width: 350px;
    margin: 0 auto;
}
.layout-positioner::after {
    display: table;
    content: "";
    clear: both;
}

.container {
    margin-bottom: 10px;
    padding: 10px 0;
    background: #34495e; 
}

.header {
    min-height: 25px;
    margin-bottom: 10px;
    padding: 5px;
    background: #c0392b;
}

.menu-wrapper {
    background: #3498db;
}

.promo-1,
.promo-2 {
    width: 160px;
    min-height: 50px;
    margin-top: 10px;
    padding: 5px;
    background: #c0392b;
}
.promo-1 {
    float: left;
}
.promo-2 {
    float: right;
}

.column-left,
.column-main,
.column-right  {
    min-height: 100px; 
    padding: 5px;
    background: #3498DB;
}
.column-left {
    float: left;
    width: 60px;
    margin-right: 10px;
}
.column-main {
    float: left;
    width: 180px;
    margin-right: 10px;
}
.column-right {
    float: right;
    width: 60px;
}

.footer-wrapper {
    margin-top: 10px;
    background: #34495e;
}

.footer, .menu {
    min-height: 25px;
    padding: 5px;
}
/*
  Используемые цвета:
  #34495e – мокрый асфальт
  #c0392b – красный
  #3498db – синий
*/