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

ramzes · 28.Январь.2016 18:24:02

ПОМОЩЬ ПО ЗАДАНИЮ!
Почему не появляется отступ текста внутри блоков?

Код:

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

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
}
.wrapper:after {
display: table;
clear: both;
content: '';
}

.header-block {
    background: #34495e;
    }
    
.wrapper {
    padding: 10px;
    margin: 0 auto;
    width: 350px;
    }
    

.header {
    height: 35px;
    background-color: #c0392b;
    }
.menu {
    width: 450px;
    height: 35px;
    background: #3498DB;
    
    }
.promo-block {
    background: #c0392b;
    float:left;
    height: 60px;
    width: 170px;
    }
.promo2 {
    margin-left: 10px;
    }
    
.content {
    height: 110px;
    background: #3498DB;
    }
.left {
    float:left;
    width: 70px;
}
.main {
    width: 190px;
    float: left;
    margin-left: 10px;
}
.right {
    width: 70px;
    float: right;
    }
.footer {
    height: 35px; 
    background: #34495e;
    }
/*
    Используемые цвета:
    #34495e - мокрый асфальт
    #c0392b - красный
    #3498DB - синий
*/

Ineska · 28.Январь.2016 19:26:11

Потому что вы их не задали. Внутренние отступы сверху и слева, где необходимо. Учтите, что отступы увеличивают размер блока, придется подправить высоту и ширину.

ramzes · 28.Январь.2016 19:56:33

Спасибо, так и сделал. Почему-то казалось, что это можно сделать одним разом для всех блоков…

Arturs · 12.Февраль.2016 23:35:18

подскажите где ошибка?
И оцените код)
``[code]

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

Header

Menu

Promo 1
Promo 2

Left

Main

right

Footer

</body>

[/code]


html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
    
}
p{padding-top:5px;padding-left:5px;} 
.header ,.promo ,.footer{background-color:#34495e;}
.header{height:55px;padding-top:5px;}
.head_t{width:350px;height:35px;background-color:#c0392b; margin:10px auto;}
.menu{height:35px;background-color:#3498DB;}
    .menu p{padding-left: 55px;margin-top: 0px; }
.promo{height:80px;}
.promo p{padding-left: 5px;margin-top: 2px;}
.promo ul li{ width:170px;height:60px;list-style:none;background-color:#c0392b}
.promo ul li:nth-child(1){float:left;margin-left:10px;}
.promo ul li:nth-child(2){float:right;margin-right:50px;}

.center{height:130px;width:450px;}
.center p{padding-left: 5px;margin-top: 2px;}
.left ,.right ,.main{margin:10px auto;}
.left ,.right{width:70px;height:110px;background-color:#3498DB;float:left;}
.left{margin-left:50px;}
.main{ width:190px;background-color:#3498DB;height:110px;float:left;margin-left:10px;}
.right{float:right;margin-right:50px;}
.footer{height:35px;clear:both;}
.footer p{
  padding-left: 55px;margin-top: 2px;  
}
 
/*
    Используемые цвета:
    #34495e - мокрый асфальт
    #c0392b - красный
    #3498DB - синий
*/

Ineska · 13.Февраль.2016 15:18:14

Хороший у вас код. Единственное замечание по поводу оформления CSS - отсутствие пробелов. Нечитабельно. Поэтому так долго разбираться.
Теперь что касается ошибок.
У вас в каждом блоке есть вложенный элемент - абзац, также есть список еще. Каждый элемент имеет свои отступы по умолчанию, которые нигде не прописаны, но в браузере видны.
Их необходимо обнулить, иначе картинка не сойдется с образцом.
Вот ваш код. Выделено то, что исправлено.
html, body{
margin:0;
padding:0;
}
body {
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
}
p {
padding-top:5px;
padding-left:5px;
}
.header ,.promo ,.footer {
background-color:#34495e;
}
.header {
height:50px;
padding-top:5px;
}
.head_t {
width:350px;
height:35px;
background-color:#c0392b;
margin: 5px auto;
}
.head_t p { margin: 0;}
.menu {
height:35px;
background-color:#3498DB;
}
.menu p {
padding-left: 55px;
margin-top: 0px;
}

.promo {
height:75px;
padding-top: 5px;
}

.promo p {
padding-left: 5px;
margin: 0;
}
.promo ul {
margin: 0;
}
.promo ul li {
width:170px;
height:60px;
list-style:none;
background-color:#c0392b;
margin-top: 5px;
}
.promo ul li:nth-child(1) {
float:left;
margin-left:10px;
}
.promo ul li:nth-child(2) {
float:right;
margin-right:50px;
}
.center {
height:130px;
width:450px;
}
.center p {
padding-left: 5px;
margin: 0;
}
.left ,.right ,.main {margin:10px auto;}
.left ,.right {
width:70px;
height:110px;
background-color:#3498DB;
float:left;
}

.left {margin-left:50px;}

.main {
width:190px;
background-color:#3498DB;
height:110px;
float:left;
margin-left:10px;
}
.right {
float:right;
margin-right:50px;
}

.footer {
height:35px;
clear:both;
}
.footer p {
padding-left: 55px;
margin-top: 0;
}

Arturs · 13.Февраль.2016 23:45:21

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

nu3naeteli · 28.Февраль.2016 06:53:17

подскажите, пожалуйста, почему блок “промо 2” перескакивает на новую строчку?
codpen

Ineska · 28.Февраль.2016 07:55:21

Потому что места не хватает. И чтобы блоки выстраивались в одну строку, используйте display: inline-block;

nu3naeteli · 28.Февраль.2016 08:10:06

Мне вот это не понятно… Должно хватать. Насколько я понимаю, не хватает места, потому не срабатывает:

.promo:last-child{
margin-right:0px;
}

Где у меня ошибка?..(
Хочется сделать как в уроках перед этим испытанием…

Ineska · 28.Февраль.2016 08:38:07

Сейчас объясню. Ширина контейнера, в котором находятся два блока promo - 340px. Ширина одного блока promo 160px, плюс отступ в 10px справа у первого. Вместе получается 330px.
Но. У вас есть внутренние отступы по 5px с каждой стороны. Отступы справа и слева у каждого блока - а это значит 5px * 4 = 20px - и в итоге перебор.
В этом случае очень удобно пользоваться консолью. Там показываются все размеры и отступы.
Вот посмотрите.

Сереневым цветом показаны внутренние отступы, желтым - внешний справа.
Чтобы избавиться от такого эффекта, пользуются свойством box-sizing. Если для него задать значение border-box, то внутренние отступы не будут увеличивать размеры блока.
Подробнее о свойстве: https://webref.ru/css/box-sizing

nu3naeteli · 28.Февраль.2016 09:46:34

Точно! У меня путаница с отступами и размерами… Спасибо!!

Код нормальный получился, не подскажите?
codepen

Ineska · 28.Февраль.2016 09:50:52

Да нормальный, лишнего ничего нет. С оригиналом сходится?

nu3naeteli · 28.Февраль.2016 09:56:23

да, сходится

Ineska · 28.Февраль.2016 09:57:09

Тогда всё, поздравляю вас)

ramer · 10.Сентябрь.2016 14:41:26

Визуально совпадает а по факту нет. Почему?

Header

Menu

Promo 1

Promo 2

    </div>
    <div class="Left">Left</div>
    <div class="Main">Main</div>
    <div class="Right">Right</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;
}
.wrapper{
background: #34495e;
padding:10px 0px;
margin-bottom:10px;

.Header{
background:#c0392b;
padding:5px 30px 20px 5px;
width:300px;
margin:0px auto 10px;
}
.Menu{
background:#3498DB;
width:450px;
margin-bottom:10px;
padding:5px 30px 20px 65px;
box-sizing:border-box;
}
.Promo1 {
background:#c0392b;
width:50px;
display:inline-block;
padding:5px 107px 50px 5px;
margin:0px 0px 0px 60px;

.Promo2 {
background:#c0392b;
width:50px;
display:inline-block;
padding:5px 107px 50px 5px;
margin:0px 0px 0px 9px;

.Left{
background: #3498DB;
width:50px;
height:60px;
padding:5px 16px 50px 5px;
display:inline-block;
margin:0px 0px 0px 60px;
}

.Main{
background: #3498DB;
width:50px;
height:60px;
padding:5px 120px 50px 5px;
display:inline-block;
margin:0px 6px 0px 6px;
}

.Right{
background: #3498DB;
width:50px;
height:60px;
padding:5px 16px 50px 5px;
display:inline-block;
}
.Footer{
background: #34495e;
width:450px;
padding:5px 60px 30px 65px;
box-sizing:border-box;
margin-top:10px;

Ineska · 10.Сентябрь.2016 15:55:10

Ваша сетка только выглядит как сетка…
Предполагается, что она должна быть на флоатах.

Muzika_Natalya · 20.Сентябрь.2016 18:22:45

Здравствуйте! Проверьте пожалуйста, правильность написания кода. Результат 100%, но меня еще интересует правильность и простота формулировки. Спасибо.

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

Header

            <div class="layout-column-menu">Menu</div>
            
        <div class="layout-positioner">    
            <div class="layout-column-promo">Promo 1</div>
            <div class="layout-column-promo">Promo 2</div>
        </div>
    </div>
    
    <div class="features">
        <div class="layout-positioner">
            <div class="layout-column left">Left</div>
            <div class="layout-column main">Main</div>
            <div class="layout-column 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;
}

.layout-positioner {
width: 350px;
margin-left: auto;
margin-right: auto;

}

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

.header .layout-positioner,
.features .layout-positioner {
padding-top: 10px;
}

.header {
background-color: #34495e;
}

.layout-column-header,
.layout-column-promo {
background-color: #c0392b;
}

.layout-column-menu,
.features .layout-column {
background-color: #3498DB;
}

.layout-column-header {
height: 25px;
padding: 5px;
margin-bottom: 10px;
}

.layout-column-menu {
height: 25px;
padding: 5px 55px;
}

.layout-column-promo {
float: left;
width: 160px;
height: 50px;
padding: 5px;
margin-right: 10px;
margin-bottom: 10px;
}

.layout-positioner .layout-column-promo:last-child {
margin-right: 0;
}

.features .layout-column {
float: left;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
}

.left, .right {
width: 60px;
padding: 5px;
}

.main {
width: 180px;
padding: 5px;
}

.right {
margin-right: 0 !important;
}

.footer {
background-color: #34495e;
height: 25px;
padding: 5px 55px;
vertical-align: top;
}

Ineska · 20.Сентябрь.2016 18:24:56

Начало кода не видно.

Muzika_Natalya · 20.Сентябрь.2016 18:34:17

http://cssdeck.com/labs/kmfhtlr6

Ineska · 20.Сентябрь.2016 19:06:18

Вместо height лучше писать min-height.
Центровщик у вас не сработал для menu и footer, раз отступ в 55px пришлось использовать.
От !important в данном фрагменте можно избавиться, усилив селектор:
.right {
margin-right: 0 !important;
}

В данном случае бесполезно для footer.