CodeDump
Husna Husna - 7 months ago 81
jQuery Question

Vertical Line with Branches in css

I trying to draw a vertical line with multiple branches left and right sides of the line. I used

pseudo
class div after but when right side text there is a problem in positioning the arrow.Is there any other way to write this class.Can anyone suggest me how to write this class?

Any help appreciated.
enter image description here
for inspiration look at this demo



.at-timeline .timeline--details {

  position: relative;

}

.at-timeline .timeline--single {

    display: flex;

    flex-direction: row;

}

.at-timeline .timeline--details,

.at-timeline .time--date {

    flex-basis: 14%;

    padding: 15px 50px;

}

.text-right { text-align: right;}

.at-timeline .timeline--details:before {

  content: "";

  position: absolute;

  width: 35px;

  height: 2px;

  top: 17%;

  right: 0;

  background: #2783e8;

}

.at-timeline:after {

  content: "";

  position: absolute;

  width: 2px;

  height: 300%;

  top: 15%;

  left: 24%;

  background: #2783e8;

}

<div class="timeline at-timeline" style="padding: 100px;">

	<div class="timeline--single">

		<div class="timeline--details text-right">

			<h4 class="timeline--title">Title</h4>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>

		</div>

		<span class="time--date">

			<span class="date">01</span>

			<span class="month">January</span>

			<span class="year">2017</span>

		</span>

	</div>

	<div class="timeline--single">

		<span class="time--date text-right">

			<span class="date">01</span>

			<span class="month">January</span>

			<span class="year">2017</span>

		</span>

		<div class="timeline--details reverse">

			<h4 class="timeline--title">Title</h4>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>

		</div>

	</div>

	<div class="timeline--single">

		<div class="timeline--details text-right">

			<h4 class="timeline--title">Title</h4>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>

		</div>

		<span class="time--date">

			<span class="date">01</span>

			<span class="month">January</span>

			<span class="year">2017</span>

		</span>

	</div>

</div>




miguel-svq miguel-svq
Answer Source

I'd simplify the html, tracking right/left on each row and altering the elements order could be a problem and annoying for screen readers or mobile version (In a narrow screen the "two sides" could be far from best obtion, using just right side saves space) :nth-child(odd) let you change the position, alignment, etc of the elements, alternatively on each "row".

div{box-sizing:border-box;}
.timeline-item{
  color:blue;
}
.timeline{overflow:hidden;position:relative;}
.timeline:after{display:block;content:" ";width:2px;height:100%;position:absolute;left:50%;background:green;}/*vertical bar*/
h4{margin:0;}

.timeline-item .timeline-date{clear:both;float:left;width:50%;text-align:right;;padding:0 1rem 1rem;}
.timeline-item .timeline-details{float:right;width:50%;text-align:left;padding:0 1rem 1rem;position:relative;}
.timeline-item:nth-child(odd){
  color:red;
}
.timeline-item:nth-child(odd) .timeline-date{float:right;text-align:left;}
.timeline-item:nth-child(odd) .timeline-details{float:left;text-align:right}

/*branches*/
.timeline-item .timeline-details:before{display:block;content:" ";height:2px;width:1rem;background-color:green;position:absolute;top:0.5em;left:0;}
.timeline-item:nth-child(odd) .timeline-details:before{right:0;left:initial;}
<div class="timeline at-timeline">
	<div class="timeline-item">
    <div class="timeline-date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</div>
		<div class="timeline-details">
			<h4>Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
   </div>
    	
      <div class="timeline-item">
    <div class="timeline-date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</div>
		<div class="timeline-details">
			<h4>Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
   </div>
   <div class="timeline-item">
    <div class="timeline-date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</div>
		<div class="timeline-details">
			<h4>Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
   </div>
   <div class="timeline-item">
    <div class="timeline-date">
			<span class="date">01</span>
			<span class="month">January</span>
			<span class="year">2017</span>
		</div>
		<div class="timeline-details">
			<h4>Title</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non dolor ultricies, porttitor justo non, pretium mi.</p>
		</div>
   </div>
	</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Sign up

Sign up with GitHub
Latest added
I am using the same thing. I am a beautiful person.
contact_mail.php
get_response.php
ajaxupload.php
index.view.php
index.php
Does_binary_number_of_A_set_bits_divide_by_N
How to refresh recyclerview?
Clearing all images causes a crash with ClassCastException
uiautomatorviewer batch file is not opening
thingy
Handy Gardeners
Olympus DVR recording date and time extractor
multitouchtest.html
metatype_loop_question
example_loop
-1 down vote favorite I have a listing page (call it a page to list the draft blogs or unpublished blogs). When I click a blog item from the draft, it shows the details on read-only format It provides four functionalities - Close, Edit, Delete, Publish.
HS110 Python
......
alert