Телеграмм чат группы css

Привет! Ребята, а подскажите, пожалуйста, как в css сделать такую линию вертикальную в центре страницы, чтобы там размещать такие кружки с цифрами, а по бокам такие блоки?

Я неопытный еще, не могу мозгами пока сообразить как должен код строиться и какие стили применять в такой ситуации.

Может кто-то натолкнуть на мысли? (А если возможно с вашей стороны, показать в codepen, если не затруднит)

источник

11:09пожаловаться #4

BC

Bad Coder in CSS — русскоговорящее сообщество

Никита

Привет! Ребята, а подскажите, пожалуйста, как в css сделать такую линию вертикальную в центре страницы, чтобы там размещать такие кружки с цифрами, а по бокам такие блоки?

Я неопытный еще, не могу мозгами пока сообразить как должен код строиться и какие стили применять в такой ситуации.

Может кто-то натолкнуть на мысли? (А если возможно с вашей стороны, показать в codepen, если не затруднит)

абсолютное позиционирование)

источник

11:10пожаловаться #5

АГ

Андрей Гуртовой... in CSS — русскоговорящее сообщество

Никита

Привет! Ребята, а подскажите, пожалуйста, как в css сделать такую линию вертикальную в центре страницы, чтобы там размещать такие кружки с цифрами, а по бокам такие блоки?

Я неопытный еще, не могу мозгами пока сообразить как должен код строиться и какие стили применять в такой ситуации.

Может кто-то натолкнуть на мысли? (А если возможно с вашей стороны, показать в codepen, если не затруднит)

https://sberbankaktivno.ru/regional/rospensioner_kazan
посмотри как сделано тут например

источник

11:11пожаловаться #6

АГ

Андрей Гуртовой... in CSS — русскоговорящее сообщество

в основном абсолютное позиционирование с растягиванием линии при помощи calc: height: calc(100% - 90px);

источник

11:12пожаловаться #7

Н

Никита in CSS — русскоговорящее сообщество

Андрей Гуртовой

в основном абсолютное позиционирование с растягиванием линии при помощи calc: height: calc(100% - 90px);

Андрей, правильно понимаю, что нужно 3 дива

div1 div2 div3
Блок текста ЛИНИЯ Блок текста

источник

11:16пожаловаться #8

Н

Никита in CSS — русскоговорящее сообщество

и див2 - позиционирование абсолют

источник

11:17пожаловаться #9

АГ

Андрей Гуртовой... in CSS — русскоговорящее сообщество

не совсем.

изначально у тебя есть такой список из блоков текста
БЛОК
БЛОК
БЛОК

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

нужно контейнерам с блоком текста сделать position: relative, и затем добавить внутри блоков элементы точек и линий.

точка может быть спозиционирована как угодно а линию нужно position: absolute; затем установить позиционирования left, top, ширину высоту ( в виде calc вычислений) и вроде всё...

сек. я примерчик щас найду

источник

11:19пожаловаться #10

Н

Никита in CSS — русскоговорящее сообщество

Вот мне бы примерчик глянуть наглядно, я на 60% понял, но визуал бы увидеть, вообще было бы супер

источник

11:21пожаловаться #11

АГ

Андрей Гуртовой... in CSS — русскоговорящее сообщество

я не нашёл :(

источник

11:25пожаловаться #12