Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.73/15: Рейтинг темы: голосов - 15, средняя оценка - 4.73
0 / 0 / 0
Регистрация: 19.11.2018
Сообщений: 7
1

Вертикальная линия

20.11.2018, 10:47. Показов 2750. Ответов 10
Метки нет (Все метки)

Приветствую! Проблема у меня такая: хочу нарисовать вот такую линию слева, при этом, вот эти значки - картинки. Всё замечательно получилось, кроме этой линии, не понимаю как её нарисовать. Пытаюсь нарисовать рядом с текстом, но она получается по высоте текста, если увеличиваю высоту линии, то все остальные строки разъезжаются, помогите, пожалуйста.
Вертикальная линия
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
20.11.2018, 10:47
Ответы с готовыми решениями:

вертикальная линия
люди подскажите как сделать вертикальную линию на весь экран? делаю так <style>...

Вертикальная линия
Подскажите как сделать вертикальную черту как на картинке?

Вертикальная линия на css
div#veticalLineRight{ border-right: 2px solid #ccc; padding-right: 20px; } Как...

Вертикальная линия с кнопкой
Подскажите пожалуйста как сделать как на фото: Изображения и любые другие файлы загружайте...

10
35 / 26 / 10
Регистрация: 25.09.2018
Сообщений: 64
20.11.2018, 12:58 2
Что, если сделать таблицей? Две колонки, в левой бэкграундом картинка с линией, с повтором по вертикали. Поверх нужных горизонтальных ячеек слева добавить значки копирайта.
1
dev - investigator
Эксперт JSЭксперт HTML/CSS
2143 / 1489 / 651
Регистрация: 16.04.2016
Сообщений: 3,695
20.11.2018, 13:09 3
Лучший ответ Сообщение было отмечено Small_17 как решение

Решение

Oldshelf,
Цитата Сообщение от Oldshelf Посмотреть сообщение
Что, если сделать таблицей?
Прикольно )) Первое о чем подумал. Правда css-вариант.

Small_17, - https://codepen.io/qwerty_wasd/pen/yQPxvJ
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="module-table-wrap">
  <div class="row-item">
    <div class="column-item">С</div>
    <div class="column-item">Алло</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Алло, алло, алло</div>
  </div>
  <div class="row-item">
    <div class="column-item">С</div>
    <div class="column-item">Привет</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Привет, привет, привет</div>
  </div>
  <div class="row-item">
    <div class="column-item">С</div>
    <div class="column-item">Как дела</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Как дела, как дела, как дела</div>
  </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
.module-table-wrap {
  display: table;
}
.module-table-wrap > .row-item {
  display: table-row;
}
.module-table-wrap > .row-item:nth-of-type(even) {
  height: 100px;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child {
  border: 2px solid #000000;
  border-radius: 50%;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child::after {
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  content: "";
  height: 104px;
  width: 3px;
  background: black;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:nth-child(2) {
  font-weight: 500;
  font-size: 30px;
}
.module-table-wrap > .row-item:nth-last-child(2) > .column-item:first-child:after {
  content: none;
}
.module-table-wrap > .row-item > .column-item {
  display: table-cell;
  position: relative;
  height: 30px;
  vertical-align: middle;
  padding-left: 20px;
}
.module-table-wrap > .row-item > .column-item:first-child {
  width: 30px;
}
1
0 / 0 / 0
Регистрация: 19.11.2018
Сообщений: 7
20.11.2018, 13:49  [ТС] 4
Qwerty_Wasd, всё супер, но эти значки не являются ведь картинками, можете, пожалуйста, объяснить, как такое же с картинкой сделать?
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2143 / 1489 / 651
Регистрация: 16.04.2016
Сообщений: 3,695
20.11.2018, 14:06 5
Лучший ответ Сообщение было отмечено Small_17 как решение

Решение

Small_17, бекграунд для
CSS
1
&:nth-child(2n+1) > .column-item:first-child
https://codepen.io/qwerty_wasd/pen/yQPxvJ
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
.module-table-wrap {
  display: table;
}
.module-table-wrap > .row-item {
  display: table-row;
}
.module-table-wrap > .row-item:nth-of-type(even) {
  height: 100px;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child {
  border-radius: 50%;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  background: url(https://stickerboom.ru/files/2012/03/26/454x5f1a-300x300.png) no-repeat center;
  background-size: cover;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child::after {
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  content: "";
  height: 104px;
  width: 3px;
  background: black;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:nth-child(2) {
  font-weight: 500;
  font-size: 30px;
}
.module-table-wrap > .row-item:nth-last-child(2) > .column-item:first-child:after {
  content: none;
}
.module-table-wrap > .row-item > .column-item {
  display: table-cell;
  position: relative;
  height: 30px;
  vertical-align: middle;
  padding-left: 20px;
}
.module-table-wrap > .row-item > .column-item:first-child {
  width: 30px;
}
0
0 / 0 / 0
Регистрация: 19.11.2018
Сообщений: 7
20.11.2018, 19:20  [ТС] 6
Qwerty_Wasd, в песочнице всё, как надо. В браузере нет. Оставляю лишь Ваш код, но всё равно вижу следующее. Почему так? Объясните, пожалуйста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>.module-table-wrap {
  display: table;
   
}
.module-table-wrap > .row-item {
  display: table-row;
}
.module-table-wrap > .row-item:nth-of-type(even) {
  height: 80px;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child {
background: url(https://forum-macan.ru/images/icons/123.png) no-repeat center;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child::after {
 position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        content: "";
        height: 80px;
        width: 3px;
        background: black;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:nth-child(2) {
  font-weight: 500;
  font-size: 30px;
}</style>
<div class="module-table-wrap">
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Алло</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Алло, алло, алло</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Привет</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Привет, привет, привет</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Как дела</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Как дела, как дела, как дела</div>
  </div>
</div>
 
</body>
</html>
Миниатюры
Вертикальная линия  
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2143 / 1489 / 651
Регистрация: 16.04.2016
Сообщений: 3,695
20.11.2018, 19:40 7
Цитата Сообщение от Small_17 Посмотреть сообщение
Почему так?
не все стили скопированы потому что.
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="ru">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--[if lt IE 9]>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
    <style>
    *,
    *:after,
    *:before {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        outline: 0;
    }
    /*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
    
    .module-table-wrap {
        display: table;
    }
    
    .module-table-wrap > .row-item {
        display: table-row;
    }
    
    .module-table-wrap > .row-item:nth-of-type(even) {
        height: 100px;
    }
    
    .module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child {
        border-radius: 50%;
        padding: 0;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        background: url(https://stickerboom.ru/files/2012/03/26/454x5f1a-300x300.png) no-repeat center;
        background-size: cover;
    }
    
    .module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child::after {
        position: absolute;
        top: 100%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        content: "";
        height: 104px;
        width: 3px;
        background: black;
    }
    
    .module-table-wrap > .row-item:nth-child(2n+1) > .column-item:nth-child(2) {
        font-weight: 500;
        font-size: 30px;
    }
    
    .module-table-wrap > .row-item:nth-last-child(2) > .column-item:first-child:after {
        content: none;
    }
    
    .module-table-wrap > .row-item > .column-item {
        display: table-cell;
        position: relative;
        height: 30px;
        vertical-align: middle;
        padding-left: 20px;
    }
    
    .module-table-wrap > .row-item > .column-item:first-child {
        width: 30px;
    }
    </style>
</head>
 
<body>
    <div class="module-table-wrap">
        <div class="row-item">
            <div class="column-item"></div>
            <div class="column-item">Алло</div>
        </div>
        <div class="row-item">
            <div class="column-item"></div>
            <div class="column-item">Алло, алло, алло</div>
        </div>
        <div class="row-item">
            <div class="column-item"></div>
            <div class="column-item">Привет</div>
        </div>
        <div class="row-item">
            <div class="column-item"></div>
            <div class="column-item">Привет, привет, привет</div>
        </div>
        <div class="row-item">
            <div class="column-item"></div>
            <div class="column-item">Как дела</div>
        </div>
        <div class="row-item">
            <div class="column-item"></div>
            <div class="column-item">Как дела, как дела, как дела</div>
        </div>
    </div>
</body>
 
</html>
Скрины хром, лиса, опера, сафари
Миниатюры
Вертикальная линия   Вертикальная линия   Вертикальная линия  

Вертикальная линия  
1
0 / 0 / 0
Регистрация: 19.11.2018
Сообщений: 7
20.11.2018, 19:49  [ТС] 8
Qwerty_Wasd, тогда почему в песочнице всё отображается? Извините, что надоедаю, разобраться просто хочу
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2143 / 1489 / 651
Регистрация: 16.04.2016
Сообщений: 3,695
20.11.2018, 19:54 9
Small_17, я предоставил Вам код страницы с примером и скрины в качестве пруфов - сравните со своей.

Вертикальная линия

Добавлено через 1 минуту
Цитата Сообщение от Small_17 Посмотреть сообщение
Qwerty_Wasd, тогда почему в песочнице всё отображается?
Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
не все стили скопированы потому что.
Вами скопированы не все стили.
0
0 / 0 / 0
Регистрация: 19.11.2018
Сообщений: 7
20.11.2018, 21:15  [ТС] 10
Qwerty_Wasd, ой, да, в самом деле, спасибо огромное!) Вы волшебник
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2143 / 1489 / 651
Регистрация: 16.04.2016
Сообщений: 3,695
20.11.2018, 21:42 11
Small_17, не за что, благодарю на добром слове, удачи
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
20.11.2018, 21:42

Вертикальная линия на страницу html
Привет всем, подскажите как сделать вертикальную линию, нашел в нете что это можно сделать...

Почему вертикальная линия повторяется?
Почему вертикальная линия повторяется второй раз внизу? Сайт:...

Вертикальная линейка
Приветствую! Пытаюсь сделать линейку на css. С горизонтальной проблем нет. #ruler { overflow:...

Вертикальная линя
как сделать вертикальнуцю линию как на примере этой горизонтальной линии пример горизонтальной...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru