Сетки/ Испытание: строим сетку [27/32] 100%, без распорок

SergSmith · 18.Февраль.2018 10:39:01

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

    <div class="top">
        <div class="header">Header</div>
        <div class="menu">Menu</div>
        <div class="layout">
            <div class="promo">Promo 1</div>
            <div class="promo">Promo 2</div>
        </div>
    </div>
    <div class="colums">
        <div class="cols">
            <div class="lout">Left</div>
            <div class="lout">Main</div>
            <div class="lout">Right</div>
        </div>
    </div>
    <div class="down">Footer</div>
    </div>
</body>

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

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

.top {
height: 150px;
background: #34495e;
padding: 10px 0;
}

.header {
width: 340px;
height: 25px;
margin: 0 auto;
padding: 5px;
background: #c0392b;
}

.menu {
width: 395px;
height: 30px;
margin: 10px 0;
padding-left: 55px;
padding-top: 5px;
background: #3498DB;
}

.layout {
width: 350px;
height: 50px;
margin: 0 auto;
}

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

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

.cols {
width: 350px;
height: 110px;
margin: 10px auto;
}

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

.lout:nth-child(2) {
width: 180px;
}

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

.down {
height: 40px;
padding-top: 5px;
padding-left: 55px;
background: #34495e;
}

Ineska · 18.Февраль.2018 10:40:12

Почему без распорок?

SergSmith · 18.Февраль.2018 10:59:56

распорка - это clearfix?

Ineska · 18.Февраль.2018 11:01:07

Да, правильно. Так почему без них?

SergSmith · 18.Февраль.2018 11:01:29

А зачем, если всё работает?))

SergSmith · 18.Февраль.2018 11:02:47

Или, получается, у меня фиксированная высота?

Ineska · 18.Февраль.2018 11:03:37

В логике не откажешь…)
А то, что контент из блоков будет вываливаться - это так, мелочи жизни.

SergSmith · 18.Февраль.2018 11:07:18

Язвить - плохой тон)). В задании про распорки ни слова, 100% должно означать, что задача выполнена ПОЛНОСТЬЮ. Как говорят в армии: “Как задача ставится - так она и выполняется”!!!)))))

Ineska · 18.Февраль.2018 11:09:43

В шагах, предшествующих испытанию, о распорках было много слов.
100% - это визуальное соответствие. А на деле сетка у вас, к сожалению, не получилась.

SergSmith · 18.Февраль.2018 15:42:05

Ineska, всё сделал, при увеличении высоты “header”, “menu” или любого из “promo” фон “мокрый асфальт” хедера тоже увеличивается по высоте. Как сделать, чтобы при вводе информации в колонки хедера они тоже ползли вниз и текст не выходил за края, где посмотреть теорию???

Ineska · 18.Февраль.2018 15:45:11

Покажите свой измененный код.

SergSmith · 18.Февраль.2018 15:58:35

Прохожу заново с 21-го урока, может, чего нарою

SergSmith · 18.Февраль.2018 16:20:43

Нарыл))) В 23-м и 26-м уроках: “удалите hidden и все увидите”. Удалил - и все само заработало. Решение моего вопроса в обучении пропущено.((((((

SergSmith · 18.Февраль.2018 18:49:18

<body>
    <div class="top">
        <div class="container clearfix">
            <div class="header block1">Header</div>
            <div class="menu block3">Menu</div>
            <div class="promo ">
                <div class="promo1">Promo 1</div>
                <div class="promo2">Promo 2</div>
            </div>    
        </div>
    </div>

    <div class="center">
        <div class="block2 clearfix">   
            <div class="column">Left</div>
            <div class="column">Main</div>
            <div class="column">Right</div>
        </div>    
    </div>   
 
    <div class="down">
        <div class="footer block3">Footer</div>
    </div>
</body>

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

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

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

.block1 {
width: 340px;
margin: 0 auto;
padding: 5px;
}

.block2 {
width: 350px;
margin: 10px auto;

}

.block3 {
padding-top: 5px;
padding-left: 55px;
margin: 10px auto;
}

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

.menu {
background: #3498DB;
min-height: 30px;
}

.promo {
width: 350px;
margin: 0 auto;
}

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

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

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

.column:nth-child(2) {
width: 180px;
}

.column:nth-child(3) {
margin-right: 0;
}

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

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

SergSmith · 19.Февраль.2018 15:18:02

Ineska, всё сделал, при увеличении высоты “header”, “menu” или любого из “promo” фон “мокрый асфальт” хедера тоже увеличивается по высоте. Как сделать, чтобы при вводе информации в колонки хедера они тоже ползли вниз и текст не выходил за края, где посмотреть теорию???

Ineska · 19.Февраль.2018 15:24:51

В какие колонки?

SergSmith · 19.Февраль.2018 15:59:23

В любые. Пусть будут Promo1 и Promo2

Ineska · 19.Февраль.2018 16:10:58

Колонки promo и так изменяются по высоте и текст не прилипает к краям.
Если вас не затруднит, продемонстрируйте свою проблему здесь.
UPD: если между словами делать пробелы, то всё правильно работает.

SergSmith · 19.Февраль.2018 16:36:10

Ineska, ты супер!!!

tggt · 03.Март.2019 10:24:15

Здравствуйте. Взгляните пожалуйста, кажется работает, тянется

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

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

font-size: 10px;
font-family: “Arial”, sans-serif;
color: white;
}
/1/3/
.top_block {
background-color: #34495e;
width: 100%;
min-height: 170px;
}
.clearfix::after {
content: “”;
display: table;
clear: both;
}
.header {
background-color: #c0392b;
float: left;
padding: 5px;
margin: 10px 50px;
min-height: 25px;
width: 340px;
}
/футер здесь/
.menu,
.footer {
background-color: #3498db;
float: left;
padding: 5px 55px;
width: 340px;
min-height: 25px;
}
.promo1,
.promo2 {
background-color: #c0392b;
width: 160px;
min-height: 50px;
padding: 5px;
margin-top: 10px;
}
.promo1 {
float: left;
margin-left: 50px;
}
.promo2 {
float: right;
margin-right: 50px;
}
/2/3/
.center_block {
background-color
width: 100%;
min-height: 130px;
}
.left_sidebar,
.right_sidebar,
.main {
background-color: #3498db;
padding: 5px;
min-height: 100px;
margin-top: 10px;
}
.left_sidebar {
float: left;
width: 60px;
margin-left: 50px;
}
.main {
float: left;
width: 180px;
margin-left: 10px;
}
.right_sidebar {
float: right;
width: 60px;
margin-right: 50px;
}
/3/3/
.footer {
background-color: #34495e;
}