27 задание

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

Подскажите пожалуйста, как Лефт, Мэйн и Райт поместить в одну строку, а не как у меня. спасибо

HTML

<html>
<head>
   <title>Испытание: строим сетку</title>
   <meta charset="utf-8">
</head>
<body>
    <div class="header">  Header 
    </div>
    <div class="menu"> Menu
    </div>
    <div class="Promo">
    <div class="promo promo1"> Promo1 </div> 
    <div class="promo promo2"> Promo2 </div>
    
    </div>
    
    <div class ="blue">
    <div class="blue left">  Left </div>

    <div class="blue main"> Main </div>
    
    <div class="blue 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;
background:#34495e;
}

.header {background: #c0392b;width:350px;height:35px;margin:10px 50px 10px 50px;}

.menu, .left, .right, .main {background: #3498DB;}
.promo1, .promo2 {background: #c0392b;}
.footer {background:white; color: black;}

.menu {height:35px;margin-bottom:10px;}

.promo1 {height:60px;width:170px;float:left;margin-left:40px;}

.promo2 {height:60px;width:170px;margin-bottom:10px;float:right;margin-right:60px;}

.promo {margin:bottom:20px;}

.blue {clear:both; margin-bottom:10px;}

.left {height:120px;width:70px;margin-left:40px;float:left;padding:5px;}
.main {height:120px; width:200px;margin-left:130px; float:left;padding:5px;}

.right {height:120px;width:70px;margin-left:350px;float:right;padding:5px;}

.footer {clear:both; width:450px;height:35px}

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

2

3

Не жалейте пробелов при написании CSS-кода. Это важно.
При создании сеток надо уметь считать общее занимаемое пространство.
Об этом подробно рассказывается в курсе “Блочная модель”.
Давайте посчитаем.
Ширина контейнера .blue отдельно не задана, значит берется во внимание ширина body - это 450px.
У вас внутри контейнера находится три элемента. Их общая ширина не должна превышать ширину body.
В соответствии с блочной моделью размер элемента складывается из ширины, высоты, внутренних отступов и внешних отступов.
Если вы сложите все составляющие у ваших блоков, то 450px не получится.
Поэтому каждый из них “требует” свободного места и у вас получается “лесенка”.
Уменьшите внешние отступы слева.

1 лайк
4

не совсем понял…даже поигравшись с ширинами и отступами, например задав даже ширину по 5px для left main right они стали просто узкими, поигравшись с отступами логично стали изменяться отступы слева в зависимости от назначенных значений…просто для Промо1 и Промо2 все получилось, а для этих нет . почему не пойму. left i main зафлоачены влево, right зафлоаченый вправо

5

27.32Promo1Promo2.png1282×376 35.5 KB

6

зато вот что получается убрав в классе blue свойство clear:both

7

111.png1366×768 167 KB

8

ВОТ, ВРОДЕ ПОХОЖЕ…а если не сложно, подскажите как сделать нужные области белым цветом

<html>
    <head>
       <title>Испытание: строим сетку</title>
       <meta charset="utf-8">
    </head>
    <body>
        <div class="header">  Header 
        </div>
        <div class="menu"> Menu
        </div>
        <div class="Promo">
        <div class="promo promo1"> Promo1 </div> 
        <div class="promo promo2"> Promo2 </div>
        
        </div>
        
        <div class ="blue">
        <div class="blue left">  Left </div>

        <div class="blue main"> Main </div>
        
        <div class="blue right"> Right </div>
        
        </div>
        </div>
        <div class="footer"> Footer 
        </div>
    </body>
</html>

CSS

    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
    background:#34495e;
}



.header {background: #c0392b;
        width:350px;
        height:35px;
        margin:10px 50px 10px 50px;
        padding: 5px 0 0 5px;}

.menu, .left, .right, .main {background: #3498DB;}
.promo1, .promo2 {background: #c0392b;}
.footer {background: #34495e;}


.menu {height:35px;margin-bottom:10px;padding: 5px 0 0 55px;}

.promo1 {height:50px;width:170px;

        float:left;        margin-left:40px;    padding: 5px 0 0 5px;}

.promo2 {height:50px;width:170px;

         margin-bottom:10px; float:right; margin-right:50px;padding: 5px 0 0 5px;}

.promo {margin:bottom:40px;}

.blue {margin-bottom:10px;}


.left {height:100px;
       width:70px;
       padding: 5px 0 0 5px;
       float:left;
       margin-left:40px;    
       clear:both;}
.main {height:100px; 
       width:200px;
             float:left;
              margin-left:10px;
       padding:5px 0 0 5px;}

.right {height:100px;
        width:65px;
        margin-left:10px;
        float:left;
        padding:5px 0 0 5px;}
        
        

.footer {clear:both; width:450px;height:35px;padding: 5px 0 0 55px;}

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

222.png1366×768 155 KB

10

Давайте будем исходить из того, что все области изначально белые, а вот некоторые из них “покрашены” в другие цвета. Не надо задавать синий цвет для body.
Вместо этого header, promo1, promo2 можно обернуть в блок с такой же шириной как у body и задать синий цвет для него.
Обращайте внимание на код в примерах. Например, код в 25 задании этого курса немного похож на то, что от вас требуется сделать в испытании: https://htmlacademy.ru/courses/65/run/25

11

Обернул Header Menu Prom1 Prom2 в класс Blackblue. также пробовал оборачивать отдельно Prom1, Prom2 в другой класс, которому присваивал соответствующий фон, но фон оставался белым в нужной области. почему-то только Header обернулся в нужный цвет. И еще Header прилип к “потолку”, когда делаю Margin, то он отпрыгивает сверху вместе с фоном, оставляя сверху белый отступ, а в нужном образце, к которому стремлюсь весь фон сверху темно-синего цвета.

    <div class="blackblue"> 
        
    <div class="header">  Header  </div> 
    
    
    <div class="menu"> Menu  </div> 
    
    <div class="promo1"> Promo1 </div> 
    <div class="promo2"> Promo2 </div>
    
    
    </div>
    
    <div class ="blue">
        
    <div class="blue left">  Left </div>

    <div class="blue main"> Main </div>
    
    <div class="blue 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;

}

.header {background: #c0392b;
width:350px;
height:35px;
margin:0px 50px 10px 50px;
padding: 5px 0 0 5px;}

.menu, .left, .right, .main {background: #3498DB;}
.promo1, .promo2 {background: #c0392b;}
.footer {background: #34495e;}

.menu {height:35px;margin-bottom:10px;padding: 5px 0 0 55px;}

.promo1 {height:50px;width:170px;

    float:left;        margin-left:40px;    padding: 5px 0 0 5px;}

.promo2 {height:50px;width:170px;

     margin-bottom:10px; float:right; margin-right:50px;padding: 5px 0 0 5px;}

.blackblue {background: #34495e;}

.blue {margin-bottom:10px;}

.left {height:100px;
width:70px;
padding: 5px 0 0 5px;
float:left;
margin-left:40px;
clear:both;}
.main {height:100px;
width:200px;
float:left;
margin-left:10px;
padding:5px 0 0 5px;}

.right {height:100px;
width:65px;
margin-left:10px;
float:left;
padding:5px 0 0 5px;}

.footer {clear:both; width:400px;height:35px;padding: 5px 0 0 55px;margin-bottom:0px;}

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

12

3333.png1366×768 147 KB

13

Всё правильно вы делаете. Только вы забыли сказать браузеру высоту вашего блока-обёртки. А если этому блоку вы зададите еще и внешний отступ снизу в 10px, будет еще лучше.
По поводу белой полосы сверху, вернитесь к теории по ссылке: https://htmlacademy.ru/courses/44/run/10
Избавиться от этого эффекта вы сможете, добавив внутренний отступ сверху в 10px для блока с классом blackblue.
Дальше вам нужно будет подправить размеры header и других блоков. Это уже не сложно.
Не торопитесь. “Сетки” - это важная тема. Время потраченное на это испытание точно не будет упущенным зря.

1 лайк