[27/32] 100% Прошу посмотреть код

nzz · 09.Июль.2017 23:16:45

Прошу посмотреть мой код.
Для класса menu добавила отдельного центровщика, чтобы фон растянулся во всей ширине, можно ли так поступить? Или как лучше прописать этот класс?
И в каких местах еще можно было бы улучшить код?
Заранее спасибо!

в HTML:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="block1"> 
            <div class="layout-positioner">
                <div class="header">Header</div>
            </div>
            <div class="menu-positioner">
                <div class="menu">Menu</div>
            </div>
            <div class="layout-positioner">
                <div class="promo">Promo 1</div>
                <div class="promo">Promo 2</div>
            </div>
            </div>
        </div>    
        <div class="block2">
            <div class="layout-positioner">
            <div class="section left">Left</div>
            <div class="section main">Main</div>
            <div class="section right">Right</div>
            </div>
            </div>
        </div>
        <div class="block3">
            <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;
}
.block1 {
    background-color:#34495e;
    min-height:150px;
    padding: 10px 0;
}

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

Ineska · 10.Июль.2017 07:55:08

Центровщик в меню не сработал у вас.

Чтобы центровка работала, нужно писать наоборот:

<div class="menu">
      <div class="layout-positioner">Menu</div>
</div>

Дополнительный блок-обертку с классом layout-positioner можно убрать в этом фрагменте и дописать класс вторым к уже существующим блокам. Например,
<div class="block2 layout-positioner">

nzz · 10.Июль.2017 09:05:19

Спасибо большое за комментарии!
Вот , что у меня получилось

в HTML:

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

v CSS:

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

body {
width: 450px;
height: 335px;
font-family: "Arial", sans-serif;
font-size: 10px;
color: white;
}
.block1 {
background-color:#34495e;
min-height:150px;
padding: 10px 0;
}
.layout-positioner {
width: 350px;
margin: auto;
}       
.layout-positioner::after {
display: table;
content: "";
clear: both;
}
.header,
.promo {
background-color: #c0392b;
padding: 5px;
}
.header {
min-height: 25px;       
}
.menu {
background-color: #3498DB;
min-height: 25px;
margin: 10px 0;
padding: 5px 55px;
}
.promo {
float:left;
width: 160px;
min-height: 50px;
margin-right:10px
}
.promo:last-child {
margin-right:0;
}
.section {
padding: 5px;
min-height: 100px;
margin:10px 10px 10px 0;
background-color: #3498DB;
float:left;
}
.left,
.right {
width: 60px; 
 }
.main {
width: 180px; 
}
.section:last-child {
margin-right:0px;
}
.block3 {
background-color:#34495e;
}
.footer {
min-height:30px;
padding: 5px;
}

Ineska · 10.Июль.2017 09:08:46

Здесь почему лишнюю обертку не убрали?

Не должно было остаться таких больших отступов. Перепроверьте.

nzz · 10.Июль.2017 21:02:45

> <div class="block3">
> <div class="layout-positioner">
> <div class="footer">Footer</div>
> </div>
> </div>

Потому что сначала задаю фон футеру во всей ширине, затем отцентровываю и добавляю свойства для класса .footer

.menu {
background-color: #3498DB;
min-height: 25px;
margin: 10px 0;
padding: 5px 55px;
}

Вот это исправила таким образом:
в HTML

<div class="menu">
       <div class="layout-positioner">
             <div class="menu2">Menu</div>
       </div>
</div>

а в CSS:

.layout-positioner {
    width: 350px;
    margin: auto;
}       
.layout-positioner::after {
    display: table;
    content: "";
    clear: both;
}
.menu {
background-color: #3498DB;
margin: 10px 0;
}
.menu2 {
padding:5px;
min-height: 25px;
}

В Итоге так:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="block1"> 
            <div class="layout-positioner">
                <div class="header">Header</div>
            </div>
            <div class="menu">
                <div class="layout-positioner">
                    <div class="menu2">Menu</div>
                </div>
            </div>
            <div class="layout-positioner">
                <div class="promo">Promo 1</div>
                <div class="promo">Promo 2</div>
            </div>
            </div>
        </div>    
        <div class="block2 layout-positioner">
            <div class="section left">Left</div>
            <div class="section main">Main</div>
            <div class="section right">Right</div>
        </div>
       <div class="block3">
            <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;
}
.block1 {
    background-color:#34495e;
    min-height:150px;
    padding: 10px 0;
}
.layout-positioner {
    width: 350px;
    margin: auto;
}       
.layout-positioner::after {
    display: table;
    content: "";
    clear: both;
}
.header,
.promo {
    background-color: #c0392b;
    padding: 5px;
}
.header {
    min-height: 25px;       
}
.menu {
    background-color: #3498DB;
    margin: 10px 0;
}
.menu2 {
    padding:5px;
    min-height: 25px;
}
.promo {
    float:left;
    width: 160px;
    min-height: 50px;
    margin-right:10px
}
.promo:last-child {
    margin-right:0;
}
.section {
    padding: 5px;
    min-height: 100px;
    margin:10px 10px 10px 0;
    background-color: #3498DB;
    float:left;
}
.left,
.right {
    width: 60px; 
 }
.main {
    width: 180px; 
}
.section:last-child {
    margin-right:0px;
}
.block3 {
    background-color:#34495e;
}
.footer {
    padding: 5px;  
    min-height: 30px;
}

Ineska · 10.Июль.2017 21:05:41

Да, здесь вы правы.

Nurzadakhan · 13.Июль.2017 11:57:52

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

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.back {
background:#34495e;
min-height:150px;
padding: 10px 0;
}
.layout-positioner {
width: 350px;
margin: auto;
}
.layout-positioner::after {
display: table;
content: “”;
clear: both;
}
.header, .promo{
background:#c0392b;
padding:5px;
}
.header {
min-height: 25px;
}
.menu{
min-height: 25px;
margin:10px 0;
background:#3498DB;
padding:5px 55px;}

.promo{
    width:160px;
    float:left;
    min-height:50px;
    margin-right:10px;}

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

.content{background: #3498DB;
padding: 5px;
min-height: 100px;
margin-top:10px;
margin-right:10px;

float:left;}
.left,
.right {
width: 60px;
}
.main {
width: 180px;
}
.content:last-child {
margin-right:0px;
}
.footer{margin-top:10px;
background:#34495e;
min-height: 25px;
padding:5px;}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/

99%