Испытание: собери слово «вечность»

Курсы §11. Позиционирование
1

охохошеньки( Не могу понять в чем дело.
Получается такая ситуация:

Безымянный.png581×615 15 KB

Вроде бы на глаз все идет ровно, но почему-то во вкладке результат данные, которые введены у меня в верхнем браузере отображаются по-другому.
Безымянный1.png402×587 12.7 KB

Различия есть, хотя по факту это одно и тоже. Из-за этого не могу пройти задание на 100%.

2

Покажите код.

3

html {
padding: 0;
}

body {
margin: 0;
padding: 20px;
}

.scene {
position: relative;
width: 260px;
height: 260px;
background: none;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
display: inline-block;
background: white;

}

/* горизонтальные элементы */
.h {
width: 50px;
height: 10px;
position: relative;

}

.h3 {
width: 40px;
left: 92px;
top: 170px
}

/* вертикальные элементы */
.v {
width: 10px;
height: 50px;
position: relative;
top: 170px;

}

/* уголки */
.corner-top {
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;
position: relative;
left: 150px;
top: 46px;
}

.corner-bottom {
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
position: relative;
left: 117px;
top: 65px;
}

/* лого */
.logo {
width: 64px;
height: 64px;
background: url(’/assets/course10/logo.png’);
margin-left: 20px;
margin-top: 24px;
}
.v2 {
left: -146px;
}

.v3 {
left: -119px;
}
.v4 {
left: -95px;
}
.v5 {
left: -8px;
}
.v6 {
left: -42px;
}
.v1{
left: -12px;
}

.h1 {
left: 20px;
top: 150px;
}
.h2 {
left: 25px;
top: 130px;
}

4

и вот еще:

Безымянный2.png572×604 14.4 KB

я явно вижу что у H левую палочку надо разместить левее, это видно, но при этом во вкладке результат там все идеально и различий нет.
Безымянный3.png478×597 13.5 KB

5

Логотип тоже надо спозиционировать. Попробуйте поменять position: relative; на position: absolute; Координаты соответственно будут другие.

6

Поменяла все на абсолюты и сошлось. Только вот вопрос остался открытым. Почему не получилось с relative?

7

У меня получилось в свое время, код на дом. компьютере. Ваш вот подогнала, не знаю, правда, действуют ли в этом задании правило на кратные отступы. К слову, там интересная картинка получается. Визуально картинка не соответствует образцу, однако проверка дает 100%.
`html {
padding: 0;
}

body {
margin: 0;
padding: 20px;
}

.scene {
position: relative;
width: 260px;
height: 260px;
background: none;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
display: inline-block;
background: white;

}

/* горизонтальные элементы */
.h {
width: 50px;
height: 10px;
position: relative;

}

.h3 {
width: 40px;
left: 92px;
top: 170px
}

/* вертикальные элементы */
.v {
width: 10px;
height: 50px;
position: relative;
top: 170px;

}

/* уголки */
.corner-top {
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;
position: relative;
left: 150px;
top: 46px;
}

.corner-bottom {
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
position: relative;
left: 116px;
top: 66px;
}

/* лого */
.logo {
width: 64px;
height: 64px;
background: url(’/assets/course10/logo.png’);
margin-left: 19px;
margin-top: 24px;
}
.v2 {
left: -146px;
}

.v3 {
left: -119px;
}
.v4 {
left: -93px;
}
.v5 {
left: -7px;
}
.v6 {
left: -41px;
}
.v1{
left: -12px;
}

.h1 {
left: 20px;
top: 150px;
}
.h2 {
left: 26px;
top: 130px;
}`

8

Дело в том, что для .scene уже задано position: relative; Координаты всего, находящегося внутри, рассчитываются относительно расположения .scene. А если у фрагментов пазла тоже position: relative; то их положение рассчитывается относительно окна браузера.

1 лайк
9

100% пройдено
html {
padding: 0;
}

body {
margin: 0;
padding: 20px;
}

.scene {
position: relative;
width: 260px;
height: 260px;
background: none;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
display: inline-block;
background: white;
}

/* горизонтальные элементы */
.h {
width: 50px;
height: 10px;
}

.h3 {
width: 40px;
}

/* вертикальные элементы */
.v {
width: 10px;
height: 50px;
}

/* уголки */
.corner-top {
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;
position: absolute;
right: 80px;
bottom: 70px;
}

.corner-bottom {
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
position: absolute;
right: 80px;
bottom: 50px;
}

/* лого */
.logo {
width: 64px;
height: 64px;
background: url(’/assets/course10/logo.png’);
position: absolute;
left: 87px;
top: 80px;
}
.v1 {
position: absolute;
left: 20px;
bottom: 40px;
}
.v2 {
position: absolute;
left: 60px;
bottom: 40px;
}
.v3 {
position: absolute;
left: 100px;
bottom: 40px;
}
.v4 {
position: absolute;
left: 140px;
bottom: 40px;
}
.v5 {
position: absolute;
left: 180px;
bottom: 40px;
}
.v6 {
position: absolute;
left: 200px;
bottom: 40px;
}
.h1 {
position: absolute;
left: 20px;
bottom: 60px;
}
.h2 {
position: absolute;
left: 80px;
bottom: 80px;
}
.h3 {
position: absolute;
left: 200px;
bottom: 40px;
}

10

position: absolute; можно прописать один раз для .h и .v, чтобы не повторяться в каждом селекторе.

2 лайка
11

Спасибо, я сразу об этом не подумал, очень хорошее и конструктивное замечание.

12

подогнал на глаз выводить 100% результат

html {
padding: 0;
}

body {
margin: 0;
padding: 20px;
}

.scene {
position: relative;
width: 260px;
height: 260px;
background: none;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
display: inline-block;
background: white;
}

/* горизонтальные элементы */
.h {
position:relative;
left: 20px;
width: 50px;
height: 10px;
}
.h1 {
position:relative;
top:150px;
}
.h2 {
position:relative;
top:130px;
left:26px;
}
.h3 {
position:relative;
top:170px;
left:92px;
width: 40px;
}

/* вертикальные элементы */
.v {position:relative;
top: 170px;
right: 10px;
line-height: 1px;
width: 10px;
height: 50px;
}
.v1{
position:relative;
right: 132px; }
.v2{
position:relative;
right: 106px; }
.v3{
position:relative;
right: 79px;}
.v4{
position:relative;
right: 53px; }

.v5{
position:relative;
right: 27px; }

.v6{
position:relative;
right: 21px; }

/* уголки */
.corner-top {
position:relative;
top:46px;
left:150px;
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;
}

.corner-bottom {
position:relative;
top:66px;
left:116px;
position:relative;
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
}

/* лого */
.logo {
width: 64px;
height: 64px;
background: url(’/assets/course10/logo.png’);
margin-left:19px;
margin-top:24px;
}

13

Не обязательно дублировать свойство position для каждого .h1, .h2… и .v1, .v2, .v3 и т. д. Достаточно прописать один раз для .h и .v
Логотип тоже позиционируется.

14

Вариант с фиксированным позиционированием не видел, так что вот 100%)
html {
padding: 0;
}

body {
margin: 0;
padding: 20px;
}

.scene {
position: relative;
width: 260px;
height: 260px;
background: none;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
display: inline-block;
background: white;
}

/* горизонтальные элементы */
.h {
width: 50px;
height: 10px;
position:fixed;
}

.h3 {
width: 40px;
}

/* вертикальные элементы */
.v {
width: 10px;
height: 50px;
position:fixed;
}

/* уголки */
.corner-top {
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;
position:fixed;
bottom:96px;
left:170px;
}

.corner-bottom {
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
position:fixed;
bottom: 76px;
left:170px;
}

/* лого */
.logo {
width: 64px;
height: 64px;
background: url(’/assets/course10/logo.png’);
position:fixed;
bottom: 142px;
left:107px;
}
.h1 {

bottom:86px;
left:40px;

}
.v1 {

bottom:66px;
left:40px;

}
.v2 {
bottom:66px;
left:80px;
}
.h2 {
bottom: 106px;
left: 100px;
}
.v3 {
bottom:66px;
left:120px;
}
.v4 {
bottom:66px;
left:160px;
}
.v5 {
bottom:66px;
left:200px;
}
.h3 {
bottom: 66px;
left: 220px;
}
.v6 {
bottom:66px;
left: 220px;

}

15

А, в чем смысл?
Я так понимаю рамка, и всё что внутри должно быть одним целым.
И двигаться должно как одно целое…

16

Выполнил задание на 100% задав всем нужным классам (.h, .v, и т.д.) относительное позиционировние.
Прочитав ваше сообщение задумался. Вернулся к теоретической части и в главе “Точка отсчёта координат” увидел разрешение своего сомнения:

_“По умолчанию «абсолютные» элементы позиционируются в системе координат, привязанной к окну браузера. Однако, систему координат можно изменить. Если какой-нибудь из родителей «абсолютного» элемента имеет относительное позиционирование, то элемент будет позиционироваться относительно этого родителя.”

Таким образом применение к дочерним элементам класса .scene абсолютного позиционирования явится, на мой взгляд, более верным. Рамка и содержимое будут представлять собой “единое целое”. В дальнейшем, при необходимости премещения рамки, весь блок будет благополучно, не рассыпаясь перемещаться в пределах окна браузера.

Sorry за “капитанство”, но мне как начинающему очень пригождаются посты, в которых понявшие что-то объясняют это подробно. Вдруг и моё “озарение” окажется кому-то полезным :slight_smile:

P.S. И, хотя наверное это и ерунда – цифры отступов, в этом варианте, получились в основном “круглые”

html {
    padding: 0;
}

body {
    margin: 0;
    padding: 20px;
}

.scene {
    position: relative;
    width: 260px;
    height: 260px;
    background: none;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
    display: inline-block;
    background: white;
}

.h {
    position: absolute;
    width: 50px;
    height: 10px;
}

.h1 {
    width: 40px;
    left: 200px;
    top: 210px;  
}

.h2 {
    left: 20px;
    top: 190px;  
}

.h3 {
    left: 80px;
    top: 170px; 
}

.v {
    position: absolute;
    width: 10px;
    height: 50px;
}

.v1 {
   left: 20px;
   top: 170px;
}

.v2 {
   left: 60px;
   top: 170px;   
}

.v3 {
    left: 100px;
    top: 170px;        
}

.v4 {
    left: 140px;
    top: 170px;
}

.v5 {
    left: 180px;
    top: 170px;  
}

.v6 {
    left: 200px;
    top: 170px;  
}

.corner-top {
    position: absolute;
    top: 170px;
    left: 150px;
    border: 15px solid white;
    border-top-width: 20px;
    border-bottom-width: 0;
    border-top-color: transparent;
    background: none;
}

.corner-bottom {
    position: absolute;
    top: 190px;
    left: 150px;
    border: 15px solid transparent;
    border-top-width: 20px;
    border-bottom-width: 0;
    border-top-color: white;
    background: none;
}

.logo {
    position: absolute;
   top: 80px;
    left: 87px;
   width: 64px;
   height: 64px;
   background: url('/assets/course10/logo.png');
}
1 лайк
17

После расположения всех элементов по своим местам –
можно position: absolute; переместить в див,
и убрать, теперь уже не нужный, display: inline-block;

div {
position: absolute;
display: inline-block;
background: white;
}

18

Там вертикальные элементы, кроме v6 расположены на равном расстоянии друг-от-друга, я рассматривал возможность задать координаты для v1 и расположить v2-v5 внешними отступами от v1, но чет не вышло. Это реально вообще?

19

Суть задания в том, чтобы вы использовали координаты позиционирования, а не внешние отступы.

20

Это понятно. Интересно сделать то, что не понятно)))
плюс код укоротить