CODEWITHSUNDEEP
htmlcss
Daria Yemelianova
Daria Yemelianova

Reputation: 29

HTML line is overlap the circles

In actual I get I have 2 circles and line,that overlap it. I would like to have the circle at the beginning of the line and at the end.

Could you please help me to put the line between the circles.

Editable JSFiddle

HTML: 

<div class="time-slice row">
  <div class="date-time">
    <p class="date">Fri 28 Aug</p>
    <p class="time">10:00</p>
  </div>
  <div class="circle-wrap">
    <div class="circle"></div>
  </div>
  <div class="point-title">
    <span>
      <b>Kiev Borispol (KBP)</b>
    </span>
  </div>
</div>

<div class="time-slice row">
  <div class="date-time">
    <p class="date">Fri 28 Aug</p>
    <p class="time">10:00</p>
  </div>
  <div class="circle-wrap">
    <div class="circle"></div>
  </div>
  <div class="point-title">
    <span>
      <b>Amsterdam (AMS)</b>
    </span>
  </div>
</div>

CSS:

.time-slice {
  display: flex;
  align-items: stretch;
  margin-left:20px;
  > * {
    padding: 20px;
  }
}

.circle {
  width: 16px;
  height: 16px;
  box-sizing: content-box;
  border-color: #29a8bb;
  background: #ffffff;
  border-radius: 32px;
  display: block;
  border: 2px solid blue;
}

.circle-wrap {
  position: absolute;
  > .circle {
    position: relative;
    left: -30px;
  }
}

.date-time {
  flex-shrink: 0;
  flex-basis: 100px;
}

.date,
.time {
  max-width: 90px;
  color: #999999;
  font-size: 13px;
  margin-top: 0px;
  margin-bottom: 10px;  
}

.point-title {
  border-left: 2px solid blue;
}

Thanks for any help!

Upvotes: 0

Views: 199

Answers (3)

Chonchol Mahmud
Chonchol Mahmud

Reputation: 2735

Here you are copying less css from codepen.I just put correct css here.See the change.

.time-slice {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin-left: 20px;
}
.time-slice > * {
  padding: 20px;
}
.circle {
  width: 16px;
  height: 16px;
  box-sizing: content-box;
  border-color: #29a8bb;
  background: #ffffff;
  border-radius: 32px;
  display: block;
  border: 2px solid blue;
}
.circle-wrap {
  position: absolute;
}
.circle-wrap > .circle {
  position: relative;
  left: -30px;
}
.date-time {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-flex-basis: 100px;
      -ms-flex-preferred-size: 100px;
          flex-basis: 100px;
}
.date,
.time {
  max-width: 90px;
  color: #999999;
  font-size: 13px;
  margin-top: 0px;
  margin-bottom: 10px;
}
.point-title {
  border-left: 2px solid blue;
}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105883

You could use the :not() selector to not draw a line after the last circle.

.time-slice.row:not(:last-child)  .point-title

http://codepen.io/anon/pen/OyJqMW

Upvotes: 2

Robin Huy
Robin Huy

Reputation: 1100

You can set position: relative for .time-slice and top +left for .circle-wrap then add some margin, padding.

Demo: http://codepen.io/robinhuy/pen/OyJdGX

Upvotes: 1

Related Questions