Сетки / Испытание: строим сетку [27/32] Оцените, пожалуйста!)

Nerovipys · 14.Март.2018 06:32:57

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

Header

Menu

Promo 1

Promo 2

Left

Main

Right

Footer

`

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


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

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

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

.layout-positioner {
    width: 350px;
    margin: 0 auto;
}
.head {
    width: 450px;
    background: #34495e;
    clear: both;
    padding-top: 10px;
    padding-bottom: 10px;
}

.header {
    min-height: 35px;
    background: #c0392b;
    width: 350px;   
}

.menu {  
    background: #3498DB;
    margin-top:10px;
    margin-bottom:10px;
    min-height: 35px;
}

.column1 {
    width: 170px;
    height: 60px;
    float: left;
    background:  #c0392b;  
}

.column2 {
    width: 170px;
    height: 60px;
    float: right;
    background:  #c0392b;
}

.content {
    margin-bottom:10px;
    margin-top:10px;
}

.layout-column {
   background: #3498DB;
   min-height: 110px;
   float: left;
   margin-right:10px;
}

.left {
    width: 70px;
}

.main {
    width: 190px;
}

.right {
    width: 70px;
}

.right {
     margin-right:0px;
}

.footer {
    background: #34495e;
    height: 35px;
}

p {
padding: 5px;
margin: 0;
}
    
/*
    Используемые цвета:
    #34495e – мокрый асфальт
    #c0392b – красный
    #3498DB – синий
*/

Nerovipys · 14.Март.2018 06:50:57

Использую эту функцию, но почему-то не вставляет код нормально.

Valery_S · 14.Март.2018 07:00:21

Перед кодом должна быть пустая строка.
Между левым краем и кодом должно быть не менее 4 пробелов.

.content {
    margin-bottom:10px;
    margin-top:10px;
}

Nerovipys · 14.Март.2018 07:07:15

уже как мог пробовал, не хочет, читал на форуме, что такое может быть.
В итоге вставил скрин

Ineska · 14.Март.2018 07:08:29

В меню параграф не закрыли. Это может влиять.

Valery_S · 14.Март.2018 13:07:15

@Nerovipys для начала Вам сюда:
Помогите разобраться. Испытание: строим сетку [27/32]

yanka · 31.Июль.2018 11:04:22

Оцените пожалуйста)))тяжело далось мне это задание((

CSS

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

body {
width: 450px;
height: 335px;

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
.header {
width: 450px;
height: 150px;
background-color: #34495e;
padding-top:10px;
padding-bottom:10px;
}

.container {
width: 350px;
margin-left: auto;
margin-right: auto;
}
.container::after {
display: table;
content: “”;
clear: both;
}
.header-1 {
width: 345px;
background-color: #c0392b;
margin-left: auto;
margin-right: auto;
min-height: 30px;
padding-left: 5px;
padding-top: 5px;
}
.menu {
min-height: 30px;
padding-left: 55px;
padding-top: 5px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #3498db;
}
.promo-1 {
width: 165px;
min-height: 55px;
padding-left: 5px;
padding-top: 5px;
float: left;
background-color: #c0392b;

}
.promo-2 {
width: 165px;
min-height: 55px;
padding-left: 5px;
padding-top: 5px;
float: right;
background-color: #c0392b;
}
.container-2 {
width: 450px;
height: 130px;
}
.left {
width: 65px;
min-height: 105px;
padding-left: 5px;
padding-top: 5px;
margin-top: 10px;
margin-left: 50px;
float: left;
background-color: #3498db;
}
.main {
width: 185px;
min-height: 105px;
padding-left: 5px;
padding-top: 5px;
margin-top: 10px;
margin-left: 10px;
float: left;
background-color: #3498db;
}
.right {
width: 65px;
min-height: 105px;
padding-left: 5px;
padding-top: 5px;
margin-top: 10px;
margin-left: 10px;
float: left;
background-color: #3498db;
}
.footer {
min-height: 30px;
padding-left: 55px;
padding-top: 5px;
background-color: #34495e;
}

Valery_S · 31.Июль.2018 15:14:58

Без HTML понятно – Вам нужно разобраться как работает центровщик и переделать.

JohnDoe · 18.Апрель.2019 12:13:14

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

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

body {
width: 450px;
height: 335px;

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}

.section-main {
width: 100%;
background-color: #34495e;
padding: 10px 0;
}

.header {
background-color: #c0392b;
height: 35px;
}
.content {
padding-top: 10px;
}

.promo {
background-color: #c0392b;
width: 170px;
height: 60px;
float: left;
margin-right: 10px;
}
.promo2 {
margin-right: 0;
}

.footer {
height: 35px;
background-color: #34495e;
margin-bottom: 10px;
margin-top: 10px;
}
.menu {
height: 35px;
background-color: #3498db;
margin-bottom: 10px;
margin-top: 10px;
}
.left,
.right,
.main {
background-color: #3498db;
width: 70px;
height: 110px;
margin-right: 10px;
float: left;
}
.main {
width: 190px;
}
.right {
margin-right: 0;
}
.layout-positioner {
width: 350px;
margin: 0 auto;
border: 0px;
}

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

.menu ,
.footer {
padding-left: 50px;
}

span {
display: block;
padding: 5px;
}
/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498db – синий
*/
Оцените пожалуйста, уверен можно было сделать лучше!! Долго не мог придумать как задать внутренний паддинг тексту одновременно во всех блоках, паддинг по спанам не хотел отрисовывать верхний отступ(только левый), пришлось задать контейнерам текста блочную структуру. Можно ли так поступать и как нужно делать это правильно?!