-1

введите сюда описание изображения

Как верстается данная секция? Пробую background: url(img) center center no-repeat; background-size: 100% 100%; - таймлайн вроде становится, а как текст поверх него посадить не могу догнать. Через position: absolute весь таймлайн исчезает, через margin не во все стороны двигается текст и при масштабировании уезжает куда-то, так же как и через position:absolute; на всякий случай ссылка на сам timeline.png: http://cdn1.savepice.ru/uploads/2017/8/15/8fc52f20f64a232e2b96346e5e365224-full.png

2
  • А как собираетесь масштабировать таймлайн? Пропорционально? Или только сужать по ширине?
    – Cheg
    15 авг 2017 в 21:24
  • background-size: 100% 100%;
    – ur pride
    15 авг 2017 в 22:04

1 ответ 1

1

Как-то так:

body {
  background: #000;
}

.timeline {
  background: url(http://cdn1.savepice.ru/uploads/2017/8/15/8fc52f20f64a232e2b96346e5e365224-full.png) no-repeat center;
  width: 1024px;
  height: 196px;
  position: relative;
}

.ms {
  position: absolute;
  width: 140px;
}

.date {
  color: #fff;
  font-size: 12px;
  line-height: 12px;
}

.ms p {
  font-size: 13px;
  line-height: 13px;
  margin: 0;
}

.ms-top {
  top: 10px;
}

.ms-bottom {
  top: 160px;
}

.ms-1 {
  left: 80px;
  color: #1eb39e;
}

.ms-2 {
  left: 90px;
  color: #1eb39e;
}

.ms-3 {
  left: 270px;
  color: #0dccc8;
}
<div class="timeline">
  <div class="ms ms-top ms-1">
    <div class="date">Дата</div>
    <p>Текст с описанием</p>
  </div>
  <div class="ms ms-bottom ms-2">
    <div class="date">Дата</div>
    <p>Текст с описанием</p>
  </div>
  <div class="ms ms-bottom ms-3">
    <div class="date">Дата</div>
    <p>Текст с описанием</p>
  </div>
</div>

Принцип расположения оставшихся вех, думаю, понятен.

Если под масштабированием вы подразумеваете адаптивность, то задавайте left в процентах, которые высчитывайте по формуле:

кол-во пикселей * 100 / ширину таймлайна = x %

Таким образом, исходя из

80*100/1024

наши left:80px; будут эквивалентны left:7.8125%;.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.