27/32 100% критика в студию

yuna · 09.Февраль.2017 17:22:39

Проверьте и подскажите нужно ли, и где изменить код?

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

CSS:

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

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

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

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

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


.header1 {
    background: #c0392b;
    height:25px;
    padding:5px;
    
}

.menu {
     background: #3498DB;
     height:25px;
     padding:5px 55px;
     margin-bottom:10px;
}

.column {
     background: #c0392b;
     width:160px;
     padding: 5px;
     margin-bottom:10px;
     height:50px;
}

.column1 {
    float:left;
}

.column2 {
    float:right;
}

.content {
    margin-bottom:10px;
}

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

.left {
    width:60px;
}

.main {
    width:180px;
}

.right {
    margin-right:0px;
    width:60px;
}

.footer {
    background:#34495e;
    height:50px;
    padding:5px 55px;
}

Ineska · 09.Февраль.2017 17:30:22

Вторая часть кода не форматирована (табы/пробелы для демонстрации вложенности).
Меню и футер не центрированы (отступ 55px), кое-где написано height, кое-где min-height. Объясните, от чего зависит выбираемая вами высота.

yuna · 09.Февраль.2017 18:24:23

Код отформатировала, height и min-height - это моя невнимательность:confused:, исправила все на height. А вот с центрированием не могу разобраться - подскажите как здесь это правильно сделать?

Ineska · 09.Февраль.2017 18:30:01

Почему на height?

yuna · 09.Февраль.2017 21:00:16

Перечитав тему разобралась почему нужно именно min-height, а не height (вопрос не по теме - получается, при блочной верстке сайта для блоков лучше использовать min-height?)

И вопросик - правильно ли я сделала с центрированием?
В див с классом menu добавила класс layout-positioner
>

>

> Menu
>

>

В CSS в .menu убрала padding

.menu {
background: #3498DB;
height:25px;
padding:5px 55px;
margin-bottom:10px;
}

И так само с футером.

Ineska · 09.Февраль.2017 21:02:42

Да, лучше писать min-height.
Весь переделанный код покажите.

yuna · 10.Февраль.2017 19:03:08

Вот, правильно ли с центрированием? и нужно ли ещё что-то исправить?

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

CSS:

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

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

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

.layout-positioner {
    width:350px;
    margin:auto;
    min-height:35px;
}

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


.header1 {
    background: #c0392b;
    min-height:25px;
    width:340px;
    padding:5px;
}

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

.text {
    padding:5px;
}

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

.column1 {
    float:left;
}

.column2 {
    float:right;
}

.content {
    margin-bottom:10px;
}

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

.left {
    width:60px;
}

.main {
    width:180px;
}

.right {
    margin-right:0px;
    width:60px;
}

.footer {
    background:#34495e;
}

Ineska · 10.Февраль.2017 19:07:22

Теперь всё хорошо.

Shamaev · 01.Август.2017 12:08:36

Здравствуйте! У меня такой вопрос. Как двигать дочерний див внутри родительского влево-вправо я знаю. (с помощью margin).

Как подвинуть дочерний див вниз, так, что-бы родительский оставался на месте. Не хочу использовать padding.
Если использовать margin-top то дочерний и родительский съезжают вниз ВМЕСТЕ.

Подскажите, как справиться?

Ineska · 01.Август.2017 13:36:33

А чем вам padding не угодил? (интересно)

Shamaev · 01.Август.2017 13:57:48

Если я не ошибаюсь, в предыдущих заданиях было написано что можно обойтись без padding. Можно вставлять невидимый блок какой-то. Но какой и как я не понял(.
К тому же если делать через padding, то при увеличении или при уменьшении ширины body получается не “резиново”.

Ineska · 01.Август.2017 14:03:26

Разве padding-top влияет на ширину?

Shamaev · 01.Август.2017 14:03:27

Я, конечно, попробовал вставить еще один див такого же цвета и ширины, нужной высоты. Все получилось, в сравнении нет ошибок. Но это слишком долго и муторно - каждый раз вставлять дивы, разных классов и т.д.
Я просто надеюсь что есть способ зафиксировать как то родительский див и гонять в нем дочерний как угодно.
Кстати такой же вопрос с текстом. Он прижался к диву(

Ineska · 01.Август.2017 14:06:12

По поводу текста - надо использовать padding. Если не хотите пересчитывать ширину блока, то используйте дополнительно box-sizing: border-box.

Shamaev · 01.Август.2017 14:06:35

Нет, не влияет, Вы правы!)) Совсем уж засиделся ахах)

Shamaev · 01.Август.2017 15:25:05

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Испытание: строим сетку</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div class="fon1">
            <div class="loyout-positioner">
            <div class="header">
                Header
            </div>
            </div>
        </div> 
        <div class="fon12">
            <div class="loyout-positioner">
                <div class="menu">
                    Menu
                </div>
            </div>
        </div>
        <div class="fon123">
            <div class="loyout-positioner">
                <div class="promo1">
                    Promo 1
                </div>
            </div>
            <div class="promo2">
                Promo 2
            </div>
        </div>
        
        <div class="content clearfix">
            <div class="loyout-positioner">
                <div class="left">Left</div>
                <div class="main">Main</div>
                <div class="right">Right</div>
            </div>
        </div>
        
        <div class="fon2">
            <div class="loyout-positioner">
                <div class="footer">
                    Footer
                </div>
            </div>
        </div> 
        
        </div>
    </body>
</html>`Текст "как есть" (без применения форматирования)`

CSS:

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

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

.fon1 {
    padding-top: 10px;
    min-height: 45px;
    background: #34495e;
}
.fon12 {
    height: 35px;
    background: #3498DB;
}
.fon123 {
    padding-top: 10px;
    margin-bottom: 10px;
    height: 70px;
    background: #34495e; 
}

.header {
    padding: 5px;
    box-sizing: border-box;
    width: 350px;
    height: 35px;
    background: #c0392b;
}

.menu {
    padding: 5px;
    box-sizing: border-box;
    width: 350px;
    height: 35px;
    background: #3498DB;
}

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

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

.left,
.main,
.right {
    padding: 5px;
    box-sizing: border-box;
    min-height: 110px;
    background: #3498DB;  
}

.left {
    margin-right: 10px;
    float: left;
    min-width: 70px;
}

.main {
    margin-right: 10px;
    float: left;
    min-width: 190px;    
}
.right {
    margin-right: 10px;
    float: left;
    min-width: 70px;
}

.content {
    margin-bottom: 10px;
}

.fon2 {
    min-height: 40px;
    background: #34495e;
}

.footer {
    padding: 5px;
    box-sizing: border-box;
    width: 350px;
    height: 40px;
    background: #34495e;
}

.loyout-positioner {
    width: 350px;
    margin: 0px auto;
    margin-right: 50px;
    /*border: 1px dashed yellow;*/
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
/*
    Используемые цвета:
    #34495e – мокрый асфальт
    #c0392b – красный
    #3498DB – синий
*/

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

Shamaev · 01.Август.2017 15:28:08

Ой, уже исправил. Задивил только Left и все встало на свои места)

Ineska · 01.Август.2017 16:38:09

Как можете объяснить выбор в использовании height и min-height в своем коде?

Shamaev · 01.Август.2017 16:41:37

Сложно)) Просто было сначала везде просто height и width. Почитал этот форум, вы написали что лучше использовать везде min-height, вот в поисках последней проблемы исправил везде на min-height.[quote=“Ineska, post:6, topic:5414, full:true”]
Да, лучше писать min-height.
[/quote]
Буду очень благодарен, если вы мне скажете в чем отличие)

Ineska · 01.Август.2017 16:49:38

Не везде вы исправили, поэтому и спросила. Min-height позволяет блоку тянуться по высоте, если контента в нём окажется больше, чем предполагается сначала. height задает фиксированную высоту, и в какой-то момент может получиться неприятность в виде вывалившегося текста (контента) за его пределы.