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

Nerovipys · 14.03.2018 16:40:54

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

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.03.2018 16:45:43

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

Valery_S · 14.03.2018 07:00:21

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

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

Nerovipys · 14.03.2018 07:07:15

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

Ineska · 14.03.2018 07:08:29

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

Valery_S · 14.03.2018 13:07:15

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

yanka · 31.07.2018 11:05:13

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

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.07.2018 15:14:58

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

JohnDoe · 18.04.2019 12:29:45

<!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 – синий
*/
Оцените пожалуйста, уверен можно было сделать лучше!! Долго не мог придумать как задать внутренний паддинг тексту одновременно во всех блоках, паддинг по спанам не хотел отрисовывать верхний отступ(только левый), пришлось задать контейнерам текста блочную структуру. Можно ли так поступать и как нужно делать это правильно?!