Испытание: строим сетку [27/32] (92%) Подскажите,оцените.

stiglitZzz · 22.Декабрь.2016 22:52:26

адекватный порядок кода ? как в целом?
и не могу понять,что здесь от меня просят.уже все марджины боттом и топ потыкал.и высоту менял…

Код, CSS

body {
margin: 0;
padding: 0;
}

body {

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

}

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

.positioner {
width: 430px;

margin: auto;

}

.maineheader {

padding-top: 10px;
margin: auto;
background: #34495e;

}

.headerblock {

padding: 5px;
width: 340px;
height: 25px;
margin: 10px auto;
margin-top: 0px;
background: #c0392b;

}
.menu {
background: #3498DB;
padding: 5px;
padding-left: 55px;
height: 25px;
margin-bottom: 10px;
}
.promo-column {
width: 350px;
min-height: 75px;

margin: auto;

}
.promo1, .promo2 {
width: 160px;
padding: 5px;
min-height: 50px;
background: #c0392b;

}
.promo1 {
float: left;
margin-right: 0px;

}
.promo2 {
float: right;
margin-right: 80px;
}

.layout-column {
margin-top: 5px;
min-height: 120px;

}
.left, .main, .right {
padding: 5px;
min-height: 100px;

}

.left {
margin-left: 40px;
float: left;
width: 60px;
background: #3498DB;

}
.main {
margin-left: 10px;
float: left;
width: 180px;
background: #3498DB;

}

.right {
margin-right: 40px;
float: right;
width: 60px;
background: #3498DB;

}

.footer {
background: #34495e;

}
.footerblock {
padding: 5px;
padding-left: 45px;
height: 35px;
}

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

Ineska · 23.Декабрь.2016 05:13:34

Код вставляется с помощью кнопки </> в редакторе сообщений.
Ширина.positioner должна быть меньше - такой, чтобы отступы слева и справа по 40px не понадобились.

stiglitZzz · 23.Декабрь.2016 12:19:21

 <body>
    <div class="maineheader">
     <div="positioner">
      <div class="headerblock">Header</div>
      <div class="menu">Menu</div>
      <div class="promo-column">
         <div class="positioner"> 
         <div class="promo1">Promo 1</div>
         <div class="promo2">Promo 2</div>
         </div>
      </div>     
     </div>
    </div>
    
    <div class="layout-column">
     <div class="positioner">
      <div class="left">Left</div>
      <div class="main">Main</div>
      <div class="right">Right</div>
     </div>
    </div>
    <div class="footer">
     <div class="positioner">
       <div class="footerblock">Footer</div>
     </div>
    </div>
    
</body>

stiglitZzz · 23.Декабрь.2016 12:21:38

и из-за отступов в 40px у меня не проходит на 100% ? в различиях подсвечивает место , как будто что-то с высотой не порядок или с вертикальными внешними отступами.

stiglitZzz · 23.Декабрь.2016 12:54:32

УРА! 100%!
уменьшил минимальную высоту общего блока с промо1 и 2, далее подстроил отступы вверх/низ.
107 CSS получилось , это адекватно ?)
html,
body {
margin: 0;
padding: 0;
}

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

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

.positioner {
width: 430px;
margin: auto;
}

.maineheader {
padding-top: 10px;
margin: auto;
background: #34495e;
}

.headerblock {
padding: 5px;
width: 340px;
height: 25px;
margin: 10px auto;
margin-top: 0px;
background: #c0392b;

}
.menu {
background: #3498DB;
padding: 5px;
padding-left: 55px;
height: 25px;
margin-bottom: 10px;
}
.promo-column {
width: 350px;
min-height: 70px;
margin: auto;
}
.promo1, .promo2 {
width: 160px;
padding: 5px;
min-height: 50px;
background: #c0392b;
}
.promo1 {
float: left;
margin-right: 0px;

}
.promo2 {
float: right;
margin-right: 80px;
}

.layout-column {
margin-top: 5px;
min-height: 120px;
margin-bottom: 5px;
}
.left, .main, .right {
margin-top: 5px;
padding: 5px;
min-height: 100px;
}

.left {
margin-left: 40px;
float: left;
width: 60px;
background: #3498DB;
}
.main {
margin-left: 10px;
float: left;
width: 180px;
background: #3498DB;
}

.right {
margin-right: 40px;
float: right;
width: 60px;
background: #3498DB;
}

.footer {
background: #34495e;
}
.footerblock {
padding: 5px;
padding-left: 45px;
height: 35px;
}

Ineska · 23.Декабрь.2016 13:47:50

Чего-то не хватает.
Про отступы по 40px + 80px (сейчас заметила) я уже говорила, это связано с неправильно выбранной шириной центровщика.
Отступы по 55px у меню и футера тоже можно считать недочетом.
Не ориентируйтесь только на визуальное соответствие.

stiglitZzz · 23.Декабрь.2016 14:08:17

правильно ли я понял,что удалив указанные вами отступы(речь про margin-right,left 40,80px , padding-left 45,55px идет?) и указав меньшую ширину центровщику(.positioner) можно выполнить на 100% с более эстетичным кодом ?

Ineska · 23.Декабрь.2016 14:10:59

Правильно поняли. Отступов 45, 55px это тоже касается.

stiglitZzz · 23.Декабрь.2016 14:13:25

просто хотел применить все знания из курса по максимуму,оказывается это как лишнее даже в испытании?)
сделал все как сказали, но в “меню” текст, не въезжает по центру.

CSS вышел таким -

html,

body {
margin: 0;
padding: 0;
}

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

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

.positioner {
width: 350px;
margin: auto;
}

.maineheader {
padding-top: 10px;
margin: auto;
background: #34495e;
}

.headerblock {
padding: 5px;
width: 340px;
height: 25px;
margin: 10px auto;
margin-top: 0px;
background: #c0392b;

}
.menu {
background: #3498DB;
padding: 5px;
height: 25px;
margin-bottom: 10px;
}
.promo-column {
width: 350px;
min-height: 70px;
margin: auto;
}
.promo1, .promo2 {
width: 160px;
padding: 5px;
min-height: 50px;
background: #c0392b;
}
.promo1 {
float: left;
margin-right: 0px;

}
.promo2 {
float: right;

}

.layout-column {
margin-top: 5px;
min-height: 120px;
margin-bottom: 5px;
}
.left, .main, .right {
margin-top: 5px;
padding: 5px;
min-height: 100px;
}

.left {

float: left;
width: 60px;
background: #3498DB;

}
.main {
margin-left: 10px;
float: left;
width: 180px;
background: #3498DB;
}

.right {

float: right;
width: 60px;
background: #3498DB;

}

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

stiglitZzz · 23.Декабрь.2016 14:14:40

.layout-positioner ?

Ineska · 23.Декабрь.2016 14:20:12

Слова class не хватает, правда?
По поводу меню, текст не будет центрироваться, пока не обернете в центровщик отдельно, как сделали для футера.

stiglitZzz · 23.Декабрь.2016 14:24:07

oops.
спасибо.
а как теперь быть с блоком меню,чтобы он растягивался ?

Ineska · 23.Декабрь.2016 14:24:53

А футер как заставили тянуться?

stiglitZzz · 23.Декабрь.2016 14:38:24

никак,цвет фона сливается.

Ineska · 23.Декабрь.2016 14:52:02

И для меню сделайте, чтобы сливался фон.
Должно получиться примерно так:
div.menu>div.positioner>div.menublock
Фон вы прописываете .menu.

stiglitZzz · 23.Декабрь.2016 16:15:35

 <body>
    <div class="mainheader">
        <div class="positioner">
        <div class="headerblock">Header</div>
        </div>
    </div>
    <div class="menu">
        <div class="positioner">
        <div class="menublock">Menu</div>
        </div>
    </div>
    <div class="mainheader">
        <div class="promo-column">
        <div class="positioner">
        <div class="promo1">Promo 1</div>
        <div class="promo2">Promo 2</div>
        </div>
        </div>
    </div>
    <div class="layout-column">
        <div class="positioner">
        <div class="left">Left</div>
        <div class="main">Main</div>
        <div class="right">Right</div>
        </div>
    </div>
    <div class="footer">
        <div class="positioner">
        <div class="footerblock">Footer</div>
        </div>
    </div>
</body>

спасибо вам.
полез в хтмл,менять классы,их порядок,в результате запутался, т.к. не совсем для себя понятно его оформил. начал код делать заново,подглядывая за размерами и некоторыми отступами.
что можете сказать о таком хтмл коде? на сколько эстетичен и понятен? следует ли постоянно следовать автоматическому отступу редактора , после перехода на новую строку, по лесенке?

CSS вышло 93 строки.
html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
.positioner::after {
content: “”;
display: table;
clear: both;
}
.positioner {
width: 350px;
margin: auto;
}

.mainheader {
padding-top: 10px;
background: #34495e;
margin: auto;
}

.headerblock {
background: #c0392b;
padding: 5px;
width: 340px;
height: 25px;
margin: auto;
margin-bottom: 10px;
}
.menu {
background: #3498DB;
}
.menublock {
margin: auto;
height: 25px;
padding: 5px;
}
.promo-column {
width: 350px;
min-height: 70px;
margin: auto;
}
.promo1, .promo2 {
padding: 5px;
width: 160px;
height: 50px;
background: #c0392b;
}
.promo1 {
float: left;
}
.promo2 {
float: right;
}
.layout-column {
margin: auto;
}
.left, .main, .right {
padding: 5px;
margin-top: 10px;
width: 60px;
min-height: 100px;
}
.left {
float: left;
background: #3498DB;
}
.main {
float: left;
width: 180px;
margin-left: 10px;
background: #3498DB;
}
.right {
float: right;
background: #3498DB;
}
.footer {
background: #34495e;
}
.footerblock {
margin-top: 10px;
height: 25px;
padding: 5px;
}

Ineska · 23.Декабрь.2016 16:26:27

Почему .mainheader два?
В целом хорошо. Остается заменить height на min-height, всё-таки сетка должна растягиваться, когда ее заполняют контентом.
Не вижу ничего плохого в лесенке)

stiglitZzz · 23.Декабрь.2016 17:49:49

а надо три?

Ineska · 23.Декабрь.2016 17:51:42

Один надо. Для второй обертки другое название подберите.

stiglitZzz · 23.Декабрь.2016 17:54:24

аа. т.к., не логично выглядит ? header ? т.к. ,ниже он используется уже не - для элементов заголовка?