Обсуждение курса «Сетки»
Подскажите как сделать отступы между двумя флоатнутыми блоками. Они слиплись, маргин и падинг не разделает их
не получается сделать последнее задание. час сижу и не пойму что не так. помогите плиз)
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;
}
По поводу Последняя сетка, шаг 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. С других браузеров попробовать нет возможности.
Картинка, вроде, совпадает, но результат не засчитывается. Подскажите, кто может, в чем дело?
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;
}
В курсе «Сетки» корявое «float-нутый блок» можно заменить на «плавающий блок».
Пожалуйста, замените, а? Не выдержал на третьей странице, читая все эти «флоатнутые», бррр… Особенно, когда увидел, что ученики начинают это употреблять… Аж передёргивает.
Float - это «плавать, держаться на поверхности». В этом смысле блок «плавает», как поплавок, а текст и строчные элементы его «обтекают», как река или «поток». Он ведь так и называется в материалах курса - «поток элементов». Слова «обтекание» и «поток» уже соответствуют этому образу, почему же такое отношение к переводу слова «плавать», «плавающий»?
Если нужен человек, чтобы поправить тексты, я готов это сделать и выслать вам исправленный вариант.
4 лайка
Подскажите, что это может означать (в самом верху сетки Ваш браузер видит белую полосу, хотя у меня её нет)?
Испытание: строим сетку
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; то она прилипает к правому краю, но опускается вниз на высоту элемента. Помогите кто чем может =) Добавил бордер для лучшей визуализации “подпора”.
Здравствуйте. Можно ли зафлоатить строчный элемент? (Знаю что можно) А есть где-то урок по этому? Или я что-то пропустил … Ну вообщем как строчный элемент(зафлоаченный) реагирует на отступы, размеры и т.д .
Спасибо!
Прошу прощения. Я уже нашел, об этом написано в курсе: Сетки / float и ширина
Добрый день.
Споткнулся на непонимании описания свойства 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
, то есть примерно
Свойство определяет, какие стороны элемента не могут “прилипать” в предыдущему “зафлоаченному” элементу.
То есть свойство определяет не поведение других элементов относительно заданного, а поведение именно заданного элемента. Это, как мне кажется, лучше объясняет происходящее в примере задания.
1 лайк
У меня вопрос, касающийся очистки clear. Вот мы добавляем распорку, будь это через html или css - не важно. Но ведь в итоге блок получается пустым, а собственно нулевой высоты. Так родитель его разве видит вообще на странице? Мне казалось, что пустой блок = отсутствие блока, ведь там даже нет символа пробел.
Удалите пробел у инлайн-блоков
С наступающим новым годом !
Подскажите , имеет ли право на жизнь такое решение задачи, Сетки / Испытание: строим сетку [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;
}
Подскажите, плиз, в чем дело. Задания 2, 3 и дальше. Нужно задать блоку ширину 150px. Ок, пишу width: 150px; но система отказывается его засчитывать. Ответ не принимается, даже если просто скопировать строчку из кода выше. Выбираю “Показать ответ” - появляется все то же самое, что написала я, но теперь ответ засчитывается как правильный. Кто знает, что это и как быть?
выполнено на 99%, не могу найти причину, при наложении всё идеально.
Header
Menu
Promo 1
Promo 2
Main
Footer
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}
header {
background: #34495e;
width: 100%;
height: 35px;
padding: 10px 0;
}
.container {
margin: 0 auto;
width: 350px;
}
header .container > div {
background: #c0392b;
height: 35px;
width: 100%;
padding: 5px 0 0 5px;
box-sizing: border-box;
}
nav {
background: #3498d8;
height: 35px;
width: 100%;
}
nav .container {
padding: 5px 0 0 10px;
}
.promo-block {
background: #34495e;
height: 80px;
}
.promo-block > div > div {
display: inline-block;
background: #c0392b;
width: 165px;
height: 55px;
margin-top: 10px;
padding: 5px 0 0 5px;
}
.promo1 {
float: left;
}
.promo2 {
float: right;
}
.promo-block::after {
content: ‘’;
display: table;
clear: both;
}
.main {
height: 120px;
padding-top: 10px;
}
.left {
float: left;
height: 105px;
width: 65px;
padding: 5px 0 0 5px;
background: #3498d8;
margin-right: 10px;
}
.main-c {
width: 185px;
display: inline-block;
background: #3498d8;
height: 105px;
padding: 5px 0 0 5px;
}
.right {
float: right;
height: 105px;
width: 65px;
padding: 5px 0 0 5px;
background: #3498d8;
}
.main::after {
clear: both;
content: ‘’;
display: table;
}
footer {
background: #34495e;
height: 35px;
}
footer .container {
padding: 5px 0 0 10px;
}
Выполнила задание на 100%, хотела бы узнать мнение опытных ребят, нормальный код? С точки зрения качества и наличия костылей:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Испытание: строим сетку</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<code>
<body>
<div class="container">
<div class="header"><div class="text">Header</div></div>
<div class="menu"><div class="text">Menu</div></div>
<div class="column1 clearfix">
<div class="promo1"><div class="text">Promo 1</div></div>
<div class="promo2"><div class="text">Promo 2</div></div>
</div>
<div class="column2">
<div class="layout-positioner">
<div class="left"><div class="text">Left</div></div>
<div class="main"><div class="text">Main</div></div>
<div class="right"><div class="text">Right</div></div>
</div>
</div>
<div class="footer"><div class="text">Footer</div></div>
</div>
</body>
</code>Текст "как есть" (без применения форматирования)
</html>
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 335px;
font-size: 10px;
font-family: "Arial", sans-serif;
color: white;
}
.container {
background-color: #34495e;
padding-top: 10px;
}
.header {
background-color: #c0392b;
margin: 0px 50px 10px 50px;
height: 35px;
}
.menu {
background-color: #3498db;
height: 35px;
}
.promo1,
.promo2 {
background-color: #c0392b;
float: left;
margin: 10px 10px 10px 50px;
height: 60px;
width: 170px;
}
.promo2 {
margin-right: 50px;
margin-left: 0px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
.layout-positioner {
width: 350px;
margin: 0px auto;
}
.layout-positioner::after {
content: "";
display: table;
clear: both;
}
.column2 {
background-color: white;
padding: 10px 0px;
}
.left,
.main,
.right {
background-color:#3498db;
float: left;
margin-right: 10px;
height: 110px;
width: 70px;
}
.main {
width: 190px;
}
.column2 .right {
margin-right: 0px;
}
.footer {
height: 40px;
}
.text {
display: block;
padding: 5px;
}
.menu .text,
.footer .text {
padding-left: 55px;
}Здравствуйте, есть проблема в испытании 32\32 , выполнил на 100% НО картинки в <div class="image image-1"></div> немного смещены влево (буквально на 1-2 Рх) , немогу понять в чем дело, на форуме не смог найти…
Вот мой Css
html,
body {
margin: 0;
padding: 0;
}
body {
width: 450px;
height: 300px;
font-size: 12px;
font-family: “Arial”, sans-serif;
}
.gallery {
padding-top: 10px;
text-align:center;
font-size:0;
}
.gallery .item {
display: inline-block;
text-align: left;
width: 125px;
margin: 0 10px;
margin-bottom: 10px;
font-size: 12px;
}
.gallery .title {
margin-bottom: 5px;
line-height: 14px;
}
.gallery .frame {
background-color: #ecf0f1;
border: 1px solid black;
padding-top: 10px;
}
.gallery .image {
height: 70px;
background-repeat: no-repeat;
background-position: 50% 50%;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
.gallery .image-1 {
background-color: #2ecc71;
background-image: url(“cat_box.png”);
}
.gallery .image-2 {
background-color: #3498db;
background-image: url(“cat_fish.png”);
}
.gallery .image-3 {
background-color: #f1c40f;
background-image: url(“cat_purr.png”);
}
.gallery .image-4 {
background-color: #e67e22;
background-image: url(“cat_walk.png”);
}
.gallery .image-5 {
background-color: #e74c3c;
background-image: url(“cat_drunk.png”);
}
.gallery .date {
font-size: 11px;
color: #666666;
font-style: italic;
padding: 5px;
}
