27 Задание на 99%, проверьте актуальность решения!

Alexander_Sakaev · 09.Апрель.2016 13:34:51

Ребята, я несколько дней ломал голову над решение, запутался.
Пожалуйста, посоветуйте, можно ли так решить или код слишком запутанный.

</head>
<body>
    <div class="header">
    <div class="layout-positioner">
        <div class=head>Header</div>
        </div>
        <div class="menu-position">
        <div class="menu">Menu</div>
        </div>
    <div class="layout-positioner">
        <div class="layout-column-1 layout-column">Promo 1
    </div>
    <div class="layout-column-2 layout-column">Promo 2
    </div>
    </div>
    </div>
    <div class="features">
        <div class="layout-positioner">
        <div class="layout-column-blue box1">Left</div>
        <div class="layout-column-blue box2">Main</div>
        <div class="layout-column-blue box3">Right</div>
   </div>
   </div>
     <div class="footer">
        <div class="layout-positioner">
            <div class="Footer1">Footer</div>
            </div>
            </div>
</body>

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
}
/*
Используемые цвета:
#34495e - мокрый асфальт
#c0392b - красный
#3498DB - синий
*/
.layout-positioner{
width:350px;
margin:0 auto;
margin-top:0px;
}
.layout-positioner:after{
content:’’;
clear:both;
display:table;
}
.header{
background:#34495e;
margin-bottom:10px;
color:white;
padding-top:10px;
padding-bottom:10px;
}
.header .layout-column{
min-height:50px;
background:#c0392b;
}
.layout-column-blue {
background-color:#3498DB;
min-height:100px;
padding:5px;
}
.box1{
width:60px;
float:left;
margin-right:10px;}
.box2{
width:180px;
float:left;
margin-right:10px;
}
.box3{
width:60px;
float:left;
}
.header .layout-column-1{
float:left;
width:160px;
padding:5px;
}
.header .layout-column-2{
float:right;
width:160px;
padding:5px;
}
.features{
margin-bottom:10px;
}

.footer{
min-height:40px;
background:#34495e;
padding:5px;
}
.feature{
padding:10px;
text-align:center;
}
.head {
background-color:#c0392b;
min-height:25px;
padding:5px;
}
.menu-position {
background-color:#3498DB;
margin-top:10px;
margin-bottom:10px;
margin-left:0px;
margin-right:0px
width:auto;
min-height:35px;}
.menu {
margin-left:55px;
padding-top:5px;
}

Ineska · 09.Апрель.2016 13:37:25

Кнопка для вставки кода </>

Ineska · 09.Апрель.2016 14:13:53

Хороший код. Можно чуть сократить, где отступы прописаны с каждой стороны, записать в одном свойстве. Что помешало сделать 100%?)

Alexander_Sakaev · 10.Апрель.2016 14:17:33

Благодарю!!!
Я выровнил Footer, и получил 100%.
Код сократил.

yxta · 11.Апрель.2016 08:39:07

Друзья, собственно говоря, у меня такая же просьба относительно актуальности кода
Насколько такое решение будет удобоваримым?

<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: строим сетку</title>
       <meta charset="utf-8">
    </head>
    <body>
        <div class="up clearfix">
            <div class="layout-positioner">
      <div class="header">  <span>Header</span> </div>
        <div class="menu">Menu</div>
        <div class="promo1">Promo 1</div>
        <div class="promo2">Promo 2</div>
        </div>
        </div>
        <div class="layout-positioner clearfix">
      <div class="left">  Left </div>
       <div class="main"> Main </div>
        <div class="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;
}
.up {
background: #34495E;
padding: 10px 0;
}
.header {
background: #C0392B;
min-height: 30px;
padding: 5px 0 0 5px
}
.menu {
background: #3498DB;
margin: 10px -50px;
padding: 5px 0 0px 55px;
min-height: 30px;
}
.promo1 {
background: #C0392B;
float: left;
width: 165px;
padding: 5px 0 0 5px;
min-height: 55px;
}
.promo2 {
background: #C0392B;
float: right;
width:165px;
padding: 5px 0 0 5px;
min-height: 55px;
}
.clearfix:after {
content: “”;
display: block;
clear: both;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
}
.left,
.main,
.right{
box-sizing: border-box;
background: #3498DB;
float:left;
min-height: 110px;
width: 70px;
padding: 5px 0 0 5px;
margin: 10px 0;
}
.main {
margin: 10px;
width: 190px;
}
.footer {
background: #34495E;
min-height: 40px;
padding: 5px 0 0 55px;
}

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

И вдогонку хотелось бы прояснить еще пару моментов:

Является ли дурным тоном использование “голого” текста в коде и соответственно необходимо ли оборачивать текст в <span>?
Насколько приемлемо решение растянуть блок “Menu” по горизонтали отрицательными маргинами?
Почему не сработал такой способ исключить из центрирования блок “Menu”?
.layout-positioner:not(.menu) {
width: 350px;
margin: 0 auto;
}

Ineska · 11.Апрель.2016 09:29:47

В идеале текст конечно должен быть обернут во что-то. В испытании демонстрируется пустая сетка, В “жизни” скажем так, любой текст в коде страницы должен быть оформлен, как заголовок, абзац, просто как span или другой подходящий элемент.
Использование отрицательных отступов, тем более больших и без особой надобности, неприемлемо.
Здесь конечно очень интересно у вас получилось: “Для всех блоков которые не имеют класс menu установить ширину 350px и отступы…” Напишите для эксперимента .layout-positioner :not(.menu) с пробелом перед :not. Работает ваш селектор, только не в ту сторону)
Лучшим для вас вариантом будет в HTML-коде блок меню не включать в обертку layout-positioner. То есть, header и два блока promo обернуть отдельно.

yxta · 11.Апрель.2016 09:42:56

Огромное мерси за столь качественный разбор полетов

crazypushok · 14.Апрель.2016 13:31:48

        100% решение [27/32]
html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
}
.hidden{
    background:#34495e;
    height:150px;
    padding-top: 10px;
    padding-bottom:10px;
    }         
.header{
    background:#c0392b;
    height:30px;
    margin-left:50px;
    margin-right:50px;
    margin-bottom:10px;
    padding-left:5px;
    padding-top:5px;
    }  
.main{
    background:#3498DB;
    height:30px;
    margin-bottom:10px;
    padding-left:55px;
    padding-top:5px;
    } 
.promo{
    background:#c0392b;
     display:inline;
    float:left;
    width:165px;
    height:55px;
    margin-bottom:10px;
    padding-left:5px;
    padding-top:5px;
    }
.promo1{
    margin-left:50px;
    margin-right:10px;
}
.promo2{
    margin-right:50px;
}

.coll{
    background:#3498DB;
    height:105px;
    display:inline-block;
    float:left;
    margin-top:10px;
    margin-bottom:10px;
    padding-left:5px;
    padding-top:5px;
    }
.col-left{
    margin-left:50px;
    width:65px;
    }  
.col-main{
    margin-right:10px;
    margin-left:10px;
    width:185px;
    }  
.col-right{    
    margin-right:50px;
    width:65px;
    }    
.footer{
    background:#34495e;
    height:35px;
    clear:both;
    padding-left:55px;
    padding-top:5px;
    }

crazypushok · 15.Апрель.2016 06:12:29

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