Сетки / Испытание: строим сетку [27/32]

netkonfet · 01.Декабрь.2017 11:31:44

Доброго времени суток.
Подскажите, что делал не так
***HTML:

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

Header

Menu

Promo 1

Promo 2

         <div class="left">
             Left
         </div>
         <div class="main">
             Main
         </div>
         <div class="right">
             Right
         </div> 
</div>
   </div><div class="footer">
        Footer
</div>
</body>

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

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

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/
.headerfont {background-color: #34495e;}
.header {background-color: #c0392b; width: 340px; height: 30px; margin-left: 50px; padding: 5px;}
.menu1 {background-color: #34495e; width: 450px;}
.menu {background-color: #3498DB; height: 30px; padding-top: 5px; padding-left: 50px;}

.promo1 {float: left; width: 165px; height: 50px;background-color: #c0392b; margin-left: 50px; padding: 5px; }
.promo2 {float: left;width: 155px; height: 50px;background-color: #c0392b; margin-left: 10px; padding: 5px;}

.menu2 {margin: 10px 50px;background-color: white; }
.left {background-color: #3498DB; float: left; width: 60px;height: 100px; margin-right: 10px; padding: 5px;}
.main {background-color: #3498DB; float: left; width: 180px;height: 100px; margin-right: 10px; padding: 5px;}
.right {background-color: #3498DB; float: right; width: 60px;height: 100px; margin-right: 0px; padding: 5px;}

.footer {background-color: #34495e; height: 30px; padding: 5px 50px;}

.clearfix { content=""; display: table; clear: both;}
.header,.menu,.promo1,.promo2 {margin-top: 10px;}
.promo1,.promo2 {margin-bottom: 10px;}

Ineska · 01.Декабрь.2017 11:42:53

Ориентируйтесь по вкладке “Различия”.
Блоки promo одинакового размера , кстати.

netkonfet · 04.Декабрь.2017 05:22:42

Спасибо. Выполнено на 100%

Kate744 · 11.Декабрь.2017 12:17:36

Добрый день.
А вот и мой код.
Получила 94%, но не знаю, как изменить положение текста внутри контейнеров без изменения размеров контейнера, и как продлить синюю полоску Menu на весь экран?
задаю дополнительный класс для

Menu, задаю фон и ширину, но из-за центровки фон начинается с заданного отступа.
Пожалуйста, подскажите.

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

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

body {
width: 450px;
height: 335px;
font-family: "Arial", sans-serif;
font-size: 10px;
color: white;
}
.header {
width: 350px;
height: 35px;
background-color:#c0392b;
margin-bottom: 10px;

}
.menu {
width: 350px;
height: 35px;
background-color:#3498DB; 
margin-bottom: 10px;
}
.promo1 {
width: 170px;
height: 60px;
background-color:#c0392b; 
float:left;
}
.promo2{
width: 170px;
height: 60px;
background-color:#c0392b; 
float:left;
margin-left:10px;
}
.layout-header {
width: 450px;
height: 160px;
background-color:#34495e; 
margin-bottom: 10px;
padding-top:10px; 
}
.left {
width: 70px;
height: 110px;
background-color:#3498DB; 
float:left;
margin-right: 10px;
}
.main {
width: 190px;
height: 110px;
background-color:#3498DB; 
float:left;
margin-right: 10px;

}
 .right {
width: 70px;
height: 110px;
background-color:#3498DB;  
float:left;
}
.footer {
width: 450px;
height:40px;
background-color:#34495e; 
margin-top: 10px;

}
.layout-positioner{
 width:350px;
 /*border: 2px dashed #3498db;*/
margin-left:50px;
margin-right: 50px;
}
.layout-positioner::after{
display:table;
content:"";
clear:both;
}

Ineska · 11.Декабрь.2017 15:00:29

Для изменения положения текста используется padding. В меню должен быть свой центровщик, такой как в футере у вас. У центровщика внешние отступы должны быть автоматическими.

olga-yakovleva · 21.Декабрь.2017 04:18:24

Если честно, второй раз начинаю проходить курс, и второй раз спотыкаюсь на этом задании. Никак оно у меня не шло. И вот, наконец-то. Оцените код, пожалуйста. Может, есть какие-то очевидные ошибки.

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

.container {
    background:#34495e;
    padding: 10px 0px;
}
.layout-positioner {
    width: 350px;
    margin: 0px auto;
}
.layout-positioner::after {
    content:"";
    display:table;
    clear:both;
}
.header {
    background:#c0392b;
    min-height:25px;
    padding: 5px;
}
.menu {
    background:#3498DB;
    padding:5px;
    min-height:25px;
    margin: 10px auto;
    padding-left:55px;
}
.promo {
    background: #c0392b;
    width: 160px;
    min-height:50px;
    padding:5px;
    margin-bottom: 0px;
}
.promo1 {
    float:left;
}
.promo2 {
    float:right;
}
.features {
    background:#3498DB;
    min-height: 100px;
    padding:5px;
    float:left;
    margin: 10px 0px;
}
.left {
    width:60px;
    margin-right:10px;
}
.main {
    width: 180px;
}
.right {
    float: right;
    width: 60px;
    margin-left: 10px;
   
}
.footer {
    background:#34495e;
    min-height: 25px;
    padding: 5px;
    padding-left:55px;
}

Ineska · 21.Декабрь.2017 05:33:26

Испытание: строим сетку [27/32]. Море решение на 100% и подробная инструкция. §15. Сетки

Прочитав задание становится понятным, что весь код нам придется писать самому. Итак, с чего же начать? Конечно же с HTML-кода. Для начала стоит определится с количеством блоков которые нам нужны. :point_up_2:Сразу хочу сказать, что я такой же ученик, поэтому мой код, возможно будет не самым коротким или самым идеальным на Ваш взгляд, но это мой код и мой способ. Я с удовольствием выслушаю все пожелания и критику дабы стать лучше. :man_student:Приступим к решению задачи. Во-первых я посчитал с…

Pavel_Tonkovich · 21.Декабрь.2017 12:18:40

Какой красивый код. На его фоне мне хочется мой просто удалить отовсюду, даже из памяти .

olga-yakovleva · 22.Декабрь.2017 01:27:13

Спасибо, конечно. Но в данный момент, после изучения темы из ответа Ineska, вижу ошибки.