§15. Сетки


#1

Обсуждение курса «Сетки»


#2

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


#3


#4

не получается сделать последнее задание. час сижу и не пойму что не так. помогите плиз)

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:300px;
    font-family:'Arial', sans-serif;
    font-size:12px;
}
.gallery{
    padding-top: 10px;
    text-align: center;
}
.gallery .item{
    width:125px;
    margin: 0 10px;
    margin-bottom:10px;
    display: inline-block;
    text-align: left;
}
.gallery .title{
    margin-bottom:5px;
    line-height:14px;
}
.gallery .frame{
    background:#ECF0F1;
    border: 1px solid;
    padding-top: 10px;
}
.gallery .image{
    height:70px;
    background-position:50% 50%;
    background-repeat:no-repeat;
    border-top: 1px solid;
    border-bottom: 1px solid;

}
.gallery .image-1{
    background-color:#2ECC71;
    background-image:url('/assets/course13/cat_box.png');
}
.gallery .image-2{
    background-color:#3498DB;
    background-image:url('/assets/course13/cat_fish.png');
}
.gallery .image-3{
    background-color:#f1c40f;
    background-image:url('/assets/course13/cat_purr.png');
}
.gallery .image-4{
    background-color:#E67E22;
    background-image:url('/assets/course13/cat_walk.png');
}
.gallery .image-5{
    background-color:#E74C3C;
    background-image:url('/assets/course13/cat_drunk.png');
}
.gallery .date{
    color:#666;
    font-style:italic;
    font-size:11px;
    padding: 5px;
}


#5

По поводу Последняя сетка, шаг 2 [25/32].
Eсли я пишу код сама в Notepad++ (чтобы лучше усвоить информацию), у
меня хедер не растягивается на всю ширину родителя, пока ему не задашь
width: 100%, из-за чего оба дива липнут друг к другу.
А в вашем примере хедеру ширина не задается, но все прекрасно работает.
Код вот такой получается:

              <div clacc="main">
		<div class="header clearfix">
			<div class="layout-header logo">Лого</div>
			<div class="layout-header menu">Меню</div>
		</div>

<…>
Код CSS:
body{
width:500px;
margin:0 auto;
border:1px dashed black;
}

.header .layout-header{
background: red;
min-height: 50px;
}

.header .logo{
float:left;
width:200px;
}

.header .menu{
float:right;
width:100px;
}

.clearfix{
content:’’;
display:table;
clear:both;
}

Есть делать подпорку вручную с помощью дополнительного дива - все работает.
А вот псевдо почему-то не работает. Браузер Firefox 35.0.1 или IE 8. С других браузеров попробовать нет возможности.


#6

Картинка, вроде, совпадает, но результат не засчитывается. Подскажите, кто может, в чем дело?
HTML

<body>
<div class="container container1">
     <div class="layout-positioner">
    <div class="header">Header</div>
</div>
</div>
    <div class="Menu">
    <div class="layout-positioner">
        Menu
        </div>
        </div>
<div class="container container2">
     <div class="layout-positioner">
    <div class="Promo Promo_1">Promo 1</div>
    <div class="Promo Promo_2">Promo 2</div>
</div>
</div>
<div class="columns">
 <div class="layout-positioner">
    <div class="column Left">Left</div>
    <div class="column Main">Main</div>
    <div class="column Right">Right</div>
    </div>
    </div>
    <div class="Footer">
       <div class="layout-positioner">
        Footer
        </div>

CSS

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size: 10px;
color:white;
}
.container{
width:450px;
background:#34495e;
}
.container1{
height:55px;
}
.container2{
height:65px;
}
.header, .Promo{
background:#c0392b;
float: left;
padding: 5px;
}
.header{
min-height: 25px;
width: 355px;
margin: 10px 35px;
}
.Promo{
min-height: 35px;
}
.Promo_1{
width:165px;
margin: 10px 5px 10px 35px;
}
.Promo_2{
width:170px;
margin: 10px 5px;
}
.column{
background:#3498DB;
min-height: 120px;
float: left;
padding: 5px;
}
.Left, .Right{
width:75px;
}
.Left{
margin: 10px 5px 10px 35px;
}
.Main{
width:165px;
margin: 10px 5px;
}
.Right{
margin: 10px 50px 10px 5px;
}
.Menu, .Footer{
min-height: 25px;
padding: 5px 40px;
}
.Menu{
background:#3498DB;
}
.Footer{
background:#34495e;
}
.layout-positioner:after{
content:’’;
clear:both;
display:table;
}


#7

В курсе «Сетки» корявое «float-нутый блок» можно заменить на «плавающий блок».
Пожалуйста, замените, а? Не выдержал на третьей странице, читая все эти «флоатнутые», бррр… Особенно, когда увидел, что ученики начинают это употреблять… Аж передёргивает.

Float - это «плавать, держаться на поверхности». В этом смысле блок «плавает», как поплавок, а текст и строчные элементы его «обтекают», как река или «поток». Он ведь так и называется в материалах курса - «поток элементов». Слова «обтекание» и «поток» уже соответствуют этому образу, почему же такое отношение к переводу слова «плавать», «плавающий»?

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


#8

Подскажите, что это может означать (в самом верху сетки Ваш браузер видит белую полосу, хотя у меня её нет)?


#9
Испытание: строим сетку
Header
Menu
Promo 1
Promo 2
Left
Main
Right
Footer

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:335px;
font-family:‘Arial’, sans-serif;
font-size:10px;
color:white;
}
/* border:2px dashed #95a5a6;
Используемые цвета:
#34495e - мокрый асфальт
#c0392b - красный
#3498DB - синий
*/
.header-container {
padding-top:5px;
background:#34495e;

}
.header-positioner {
background:#c0392b;
width:340px;
margin:5px auto;
min-height:25px;
padding:5px;
}
.menu-positioner {
background:#3498DB;
}
.menu {
width:340px;
min-height:25px;
margin:10px auto;
padding:5px;
background:#3498DB;
}
.promo-positioner {
width:350px;
margin:10px auto;
border:2px dashed #95a5a6;
}
.promo{
background:#c0392b;
display:inline-block;
width:160px;
min-height:50px;
margin-right:10px;
padding:5px;
float:left;
}
.column {
display:inline-block;
width:60px;
min-height:100px;
background:#3498DB;
margin-right:5px;
padding:5px;
}
.column:nth-child(2) {
width:180px;
}
.promo:last-child, .column:last-child {
margin-right:0px;
}
.footer-positioner {
width:340px;
margin:0px auto;
min-height:30px;
}
.clearfix:after{
content:’’;
display:table;
clear:both;
}

Всем привет! У меня случился такой казус. Сетки / Испытание: строим сетку [27/32] В блоке, где находятся 3 столбика Left Main Right не получается корректно задать ширину столбиков и пробелы между ними. Колонку Right что-то подпирает справа на несколько пикселей. Если я задаю Right float:right; то она прилипает к правому краю, но опускается вниз на высоту элемента. Помогите кто чем может =) Добавил бордер для лучшей визуализации “подпора”.


#10

не работают некоторые задания а точнее не реагируют на св-во width


#11

Здравствуйте. Можно ли зафлоатить строчный элемент? (Знаю что можно) А есть где-то урок по этому? Или я что-то пропустил … Ну вообщем как строчный элемент(зафлоаченный) реагирует на отступы, размеры и т.д .
Спасибо!

Прошу прощения. Я уже нашел, об этом написано в курсе: Сетки / float и ширина


#12

Добрый день.

Споткнулся на непонимании описания свойства clear в шаге 14.
Поискал объяснения здесь и здесь. И все равно не понял. И полез в спеку.

Так вот: написанное в 2.1 спеке и написанное на сайте отличаются просто чрезвычайно. Если это не поменялось в 3, то, может, стоит поменять? Я понимаю, что помимо академии всегда нужно иметь другие источники, но не должно же быть так, чтобы написанное в учебнике было изначально неверным.

Что написано в курсе:

Свойство clear запрещает обтекание элемента другими элементами

Что написано в спеке:

This property indicates which sides of an element’s box(es) may
not be adjacent to an earlier floating box

, то есть примерно

Свойство определяет, какие стороны элемента не могут “прилипать” в предыдущему “зафлоаченному” элементу.

То есть свойство определяет не поведение других элементов относительно заданного, а поведение именно заданного элемента. Это, как мне кажется, лучше объясняет происходящее в примере задания.


#13

У меня вопрос, касающийся очистки clear. Вот мы добавляем распорку, будь это через html или css - не важно. Но ведь в итоге блок получается пустым, а собственно нулевой высоты. Так родитель его разве видит вообще на странице? Мне казалось, что пустой блок = отсутствие блока, ведь там даже нет символа пробел.


#14

Удалите пробел у инлайн-блоков


#15

С наступающим новым годом !
Подскажите , имеет ли право на жизнь такое решение задачи, Сетки / Испытание: строим сетку [27/32]?
Выполнено на 100%.
Или с точки зрения правильного написания кода, надо что то по другому сделать ?

<html lang="ru">
<head>
    <title>Испытание: строим сетку</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="container">
        <div class="layout positionar">
            <div class="header">Header</div>
            <div class="menu">Menu</div>
            <div class="promo1">Promo 1</div>
            <div class="promo2">Promo 2</div>
        </div>
        <div class="layout column">
            <div class="left">Left</div>
            <div class="main">Main</div>
            <div class="right">Right</div>
        </div>
        <div class="footer clearfix">Footer</div>
    </div>
</body>

CSS

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

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

.container {

}
.positionar {
background: #34495e;
min-height: 160px;
padding-top: 10px;
}

.header {
float: left;
background: #c0392b;
margin-left: 50px;
margin-right: 50px;
min-height: 25px;
width: 340px;
padding: 5px;
}

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

.promo1,
.promo2 {
background: #c0392b;
float: left;
padding: 5px;
width: 160px;
margin-top: 10px;
min-height: 50px;

}

.promo1 {
font: left;
margin-left: 50px;
margin-right: 10px;
}

.column {
padding-top: 10px;
}

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

.left {
float: left;
margin-left: 50px;
margin-right: 10px;
width: 60px;
}

.main {
float: left;
width: 180px;
}

.right {
float: right;
width: 60px;
margin-right: 50px;
margin-left: 10px;
}

.footer {
background: #34495e;
float: left;
margin-top: 10px;
padding-top: 5px;
min-height: 30px;
width: 395px;
padding-left: 55px;
}
.clearfix::after {
display: table;
content: “”;
clear: both;
}


#16

Подскажите, плиз, в чем дело. Задания 2, 3 и дальше. Нужно задать блоку ширину 150px. Ок, пишу width: 150px; но система отказывается его засчитывать. Ответ не принимается, даже если просто скопировать строчку из кода выше. Выбираю “Показать ответ” - появляется все то же самое, что написала я, но теперь ответ засчитывается как правильный. Кто знает, что это и как быть?