Собери вечность


#1

Прошел испытания на 100, сначала сделал чисто все элементы на абсолюте, но потом прочитал на форуме, что .v и .h желательно должны быть relative, поморочился немного и сделал, прошел так же на 100% , только вот если брать и смотреть разницу в картинке , то она как минимум нормальная такая , а при проверке все отлично,


и как вообщем то сам код написан, сносно?

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Испытание: собери слово «вечность»</title>
        <link rel="stylesheet" href="/assets/course10/style1.css">
    </head>
    <body>
        <div class="scene">
            <div class="h h1"></div>
            <div class="h h2"></div>
            <div class="h h3"></div>
            <div class="v v1"></div>
            <div class="v v2"></div>
            <div class="v v3"></div>
            <div class="v v4"></div>
            <div class="v v5"></div>
            <div class="v v6"></div>
            <div class="corner-top"></div>
            <div class="corner-bottom"></div>
            <div class="logo"></div>
        </div>
    </body>
</html>

CSS

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;
    width: 50px;
    height: 10px;
}
.h1
{
    bottom:-150px;
    left:20px;
    }
    .h2
    {
          bottom:-130px;
    left:26px;
        }
.h3 {
    bottom:-170px;
    left:92px;
    
    width: 40px;
}

/* вертикальные элементы */
.v {
    position:relative;
    top:104px;
    left:50px;
    width: 10px;
    height: 50px;
}
.v1
{
top:170px;
  left:-132px;
    }
    .v2
    {top:170px;
  left:-106px;
        
        }
        .v3
        {
           top:170px;
  left:-79px;
    }
    .v4
    {
         top:170px;
  left:-53px;
        }
        .v5
        {
            top:170px;
  left:-27px;
            }
            .v6
            {
                top:170px;
  left:-21px;
                }
        
/* уголки */
.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 {
    
    top:80px;
    left:87px;
    position:absolute;
    width: 64px;
    height: 64px;
    background: url('/assets/course10/logo.png');
}

#2

Отрицательных координат много. Попробуйте вместо отрицательных противоположные по направлению.


#3

Удалось изменить только .h, убрал там отрицательные , а в .v отрицательное left , если ее изменить на right положительное , это ничего не дает.


#4

Попробуйте заменить на right с учетом изменения этого фрагмента:
.v {
position:relative;
*/top:104px;
left:50px;*/
width: 10px;
height: 50px;
}
Классы .v и .v1, .v2 и т. д применяются к одним и тем же элементам. Координаты конфликтуют.


#5

Все, понял, исправил, спасибо)


#6

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

Открыла в опере вроде все норм.


#7

Была похожая проблема. Когда начинаешь редактировать код, картинка появляется.