Сетки / Испытание: строим сетку [27/32] Пожалуйста замечания по коду[100%]

Kolya_Dodo · 18.Август.2016 09:49:36

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:0px auto;
}

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

.container {
    background:#34495e;
    padding:10px 0px;
}

.header {
    background: #c0392b;
    padding:5px;
    min-height:25px;
}

.menu-container {
    background: #3498DB;
} 

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

.promo {
    background:#c0392b;
    width:160px;
    min-height:50px;
    padding:5px;
    margin-top:10px;
}

.promo1 {
    float:left;
    margin-right:10x;
}

.promo2 {
     float:right;
}

.column {
    background:#3498DB;
    float:left;
    min-height:100px;
    padding:5px;
    margin:10px 0px;
}

.column-left {
   width:60px; 
   margin-right:10px;
}
.column-right {
    width:60px;
    float:right;
    margin-left:10px;
}

.column-main {
    width:180px
}

.footer {
    background:#34495e;
    padding:5px;
    min-height:25px;
    width:340px;
    margin:0px auto;
}

.footer-container {
    background:#34495e;
}

Ineska · 18.Август.2016 09:59:06

Вставьте html-код правильно с помощью кнопки </> в редакторе сообщений.

Kolya_Dodo · 18.Август.2016 10:24:03

<!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-container">
            <div class="menu">Menu</div>
            </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="column-left column">Left</div>
                <div class="column-main column">Main</div>
                <div class="column-right column">Right</div>
                </div>
                <div class="footer-container">
                <div class="footer">Footer</div>
                </div>
       
    </body>
</html>

Ineska · 18.Август.2016 10:38:18

Хорошо сделали. Явных ошибок не вижу. Можете еще поработать над сокращением кода. Например, в блоках promo можно в общие стили вынести и свойство float.

Kolya_Dodo · 18.Август.2016 10:42:24

спасибо, хотел спросить за блоки “menu” и “footer”, возможно там еще как нибудь сделать отступ от краев без использования padding и container?

Ineska · 18.Август.2016 11:16:24

layout-positioner использовать можно.

VRe · 27.Август.2016 08:04:44

<!DOCTYPE html>
<html lang="ru">
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="header-container"> 
        <div class="layout-positioner">
            <div class="Header"> Header </div>
        </div>
            <div class="Menu"> Menu </div>
        <div class="layout-positioner">
            <div class="Promo"> Promo 1 </div>
            <div class="Promo"> Promo 2 </div>
        </div>
    </div>
    <div class="body-container"> 
        <div class="layout-positioner">
            <div class="body-block"> Left </div>
            <div class="body-block Main"> Main </div>
            <div class="body-block"> Right </div>
        </div>
    </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;
}

.layout-positioner {
    width: 350px;
    margin: 0 auto;
}

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

.header-container {
    width: 100%;
    background: #34495e;
    padding: 10px 0;
}

.Header {
    min-height: 25px;
    background: #c0392b;
    padding: 5px;
}

.Menu {
    width: 340px;
    background: #3498DB;
    min-height: 25px;
    padding: 5px 55px;;    
    margin: 10px auto;
}

.Promo {
    float: left;
    width: 160px;
    background: #c0392b;
    min-height: 50px;
    padding: 5px;
    margin-right: 10px;
}

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

.body-container {
    width: 100%;
    background: #fff;
    padding: 10px 0;
}

.body-block {
    float: left;
    background: #3498DB;
    width: 60px;
    min-height: 100px;
    padding: 5px;
    margin-right: 10px;
}

.body-block:last-child {
    margin-right: 0;
}

.Main {
    width: 180px;
}

.Footer {
    width: 340px;
    background: #34495e;
    min-height: 25px;
    padding: 5px 55px;    
}

Оцените пожалуйста, если не сложно. Знаю одну ошибку - padding: 5px 55px;.
55px не надо писать, надо как Вы написали использовать layout-positioner, но если я оборачиваю Menu и Footer в него, они центрируются как и остальные блоки, а надо чтоб только содержимое? правильно понимаю? разъясните пожалуйста чуть подробней как это сделать

Ineska · 27.Август.2016 08:37:41

Вы сами сказали, что центрировать надо не сам блок, а его содержимое.
Вот так будет:
<div class="Menu">
<div class="layout-positioner">Menu</div>
</div>
А в css не ограничивайте ширину у .Menu и уберите тот некрасивый отступ:
.Menu {
/width: 340px;/
background: #3498DB;
min-height: 25px;
padding: 5px;
margin: 10px auto;
}
Правда придется добавить еще одно правило, для отступа слева:
.Menu .layout-positioner {
padding-left: 10px;
}
Footer попробуйте разобрать сами.

VRe · 27.Август.2016 12:22:30

Теперь понятно. Большое спасибо за помощь!

Vitaly_Tsymbal · 27.Ноябрь.2016 17:36:57

На счет вот этого момента

Menu

можно background по краям на :before и :after прицепить, что бы они при наполнении контекстом основного блока menu, тоже выравнивались по высоте блока menu.

Gag_Harutyunyan · 06.Декабрь.2017 13:21:51

Оцените пожалуйста еще один код
Код думаю слишком “плохим” получился
Хоть с первого раза.

HMTL

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

 *,*::before, *::after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}

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

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

header {
    background-color: #34495e;
    padding-top: 10px;
    padding-bottom: 10px;
}

footer {
     background-color: #34495e;
     min-height: 35px;
     padding: 5px 55px 0;
}



.block2 {
    width: 350px;
    margin: 0 auto;
    
}
.layout-positioner:after {
    content: "";
    display: table;
    clear: both;
    
}

.header {
    width: 350px;
    padding-top: 5px;
    margin: 0 auto;
    padding-left: 5px;
    background: #c0392b;
    min-height: 35px;
}

.menu {
    width: 100%;
    margin-top: 10px;
    padding-left: 55px;
    padding-top: 5px;
    margin-bottom: 10px;
    min-height: 35px;
    background: #3498DB;
}

.promo1 {
    padding: 5px 0 0 5px;
    float: left;
    margin-right: 10px;
    width: 170px;
    min-height: 60px;
    background: #c0392b;
}

.promo2 {
    padding: 5px 0 0 5px;
    float: left;
    width: 170px;
    min-height: 60px;
    background: #c0392b;
}

.left {
    padding: 5px 0 0 5px;
    margin-top: 10px;
    float: left;
    background: #3498DB;
    width: 70px;
    min-height: 110px;
}

.main {
    padding: 5px 0 0 5px;
    margin: 10px;
    float: left;
    background: #3498DB;
    width: 190px;
    min-height: 110px;
}

.right {
    padding: 5px 0 0 5px;
    margin-top: 10px;
    float: left;
    background: #3498DB;
    width: 70px;
    min-height: 110px;
}

Gag_Harutyunyan · 06.Декабрь.2017 13:53:47

Конечный код. Тоже 100%

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

*,*::before, *::after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}

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

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

header {
    background-color: #34495e;
    padding-top: 10px;
    padding-bottom: 10px;
}

footer {
     background-color: #34495e;
     min-height: 35px;
     padding: 5px 55px 0;
}

.layout-positioner {
    width: 350px;
    margin: 0 auto;
    
}
.layout-positioner:after {
    content: "";
    display: table;
    clear: both;
    
}

.header {
    width: 350px;
    padding-top: 5px;
    margin: 0 auto;
    padding-left: 5px;
    background: #c0392b;
    min-height: 35px;
}

.menu {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 55px;
    padding-top: 5px;
    min-height: 35px;
    background: #3498DB;
}

.promo1 {
    float: left;
    padding: 5px 0 0 5px;
    margin-right: 10px;
    width: 170px;
    min-height: 60px;
    background: #c0392b;
}

.promo2 {
    float: left;
    padding: 5px 0 0 5px;
    width: 170px;
    min-height: 60px;
    background: #c0392b;
}

.left {
    float: left;
    padding: 5px 0 0 5px;
    margin-top: 10px;
    background: #3498DB;
    width: 70px;
    min-height: 110px;
}

.main {
    float: left;
    padding: 5px 0 0 5px;
    margin: 10px;
    background: #3498DB;
    width: 190px;
    min-height: 110px;
}

.right {
    float: right;
    padding: 5px 0 0 5px;
    margin-top: 10px;
    background: #3498DB;
    width: 70px;
    min-height: 110px;
}

Ineska · 06.Декабрь.2017 19:01:39

Повторяетесь, а ведь у вас есть центровщик .layout-positioner.
Меню и футер не центрованы.