CODEWITHSUNDEEP
htmlcss
Morpheus
Morpheus

Reputation: 997

Positioning circle and line together for timeline

I would like to implement timeline part on my website.

I have picture how it should look but I can't think any good way to do it.

How it should look:

enter image description here

Actual code: js fiddle

<div class="right ">
    what should I put here to get that circle?
</div>

Most confusing part is how to get that circle and that line together?

Could anyone suggest anything?

Thank you.

Upvotes: 1

Views: 917

Answers (3)

somethinghere
somethinghere

Reputation: 17350

Below code should work:

    
.box-with-circle {
    width: 90%;
    position: relative;
}
.box-with-circle .circle {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    margin -20px 0 0 -20px;
    border: 1px solid #000;
    background-color: #fff;
    z-index: 1;
    border-radius: 50%;
}
.box-with-circle hr {
   position: relative;
   top: 20px;
}
 <div class="box-with-circle">
    <div class="circle"></div>
    <hr />
 </div>

Upvotes: 0

George
George

Reputation: 36794

You could use :after, changing the styles to your liking.

.border needs to be positioned non-statically.

.wrapper {
  width: 1030px;
  background-color: #534741;
  height: 500px;
}
.right {
  color: #fff;
  width: 90%;
  text-align: right;
  padding: 10px 10px 0 0;
  display: block;
}
.border {
  border-bottom: 2px solid #000;
  width: 50%;
  float: right;
  margin: 10px 140px 0 10px;
  position: relative;
}
.border:after {
  /* Position and border */
  display: block;
  content: '';
  border: 2px solid #000;
  position: absolute;
  width: 32px;
  right: -34px; /*** -(Width+Border) ***/
  height: 32px;
  bottom: -18px; /***  -((Height/2)+Border)  ***/
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.text {
  float: right;
  width: 300px;
  margin-right: 90px;
}
<div class="wrapper">
  <div class="right">
    <h2>Text</h2>
  </div>
  <div class="right">
    <h3>2014</h3>
  </div>
  <div class="right "></div>
  <div class="right border"></div>
  <div class="right text">
    <p>Lorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum doloremLorem ipsum dolorem</p>
  </div>
</div>

JSFiddle

Upvotes: 1

Justinas
Justinas

Reputation: 43507

Try to make it with positioning and borer radius. Or simply use images.

.content-wrapper {
  position: relative;
  width: 400px;
  margin-bottom: 30px;
}
.line .circle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  border: 1px solid black;
  position: absolute;
  top: -25px;
}
.line {
  position: relative;
  border-bottom: 1px solid black;
}
.odd .line {
  margin-right: 50px;
}
.even .line {
  margin-left: 50px;
}
.odd .circle {
  right: -50px;
}
.even .circle {
  left: -50px;
}
.content,
.header {
  padding: 0 60px;
}
.odd .content,
.odd .header {
  text-align: right;
}
.even .content,
.even .header {
  text-align: left;
}
<div class="content-wrapper odd">
  <div class="header">Some title</div>
  <div class="line">
    <div class="circle"></div>
  </div>
  <div class="content">Loerm ipsum dolerom</div>
</div>
<div class="content-wrapper even">
  <div class="header">Some title</div>
  <div class="line">
    <div class="circle"></div>
  </div>
  <div class="content">Loerm ipsum dolerom</div>
</div>

Upvotes: 0

Related Questions