I am creating a timeline but it's not displaying my design output. I have to display the first child after the image and next child before image with a full underline. I tried but my underline not displaying proper even image is not display the right way
Would you help me out in this?
I need a output like this.
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
/* background: #fff;*/
border-right: 2px solid #ff0000;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: inherit;
}
.timeline ul li:nth-child(odd),
.timeline ul li:nth-child(even){
width:50%;
float:left;
clear:right;
text-align:right;
position:relative;
}
.timeline ul li:nth-child(even){
width:50%;
float:right;
clear:left;
text-align:left;
position:relative;
}
.timeline ul li:nth-child(odd):after,
.timeline ul li:nth-child(even):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
width: 24px;
height: 20px;
background-size: 100% 100%;
}
<div class="timeline">
<ul>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
</ul>
</div>
This is not perfect or dynamic but it will get you on the right path.
use nth-child(odd/even) to select every second row
li:nth-child(odd) {
float: left;
border-right: thick solid #ff0000;
margin: 0px;
padding-right: 20px;
background-image: url('https://image.flaticon.com/icons/png/512/67/67347.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-x: 254px;
background-position-y: 18px;
}
li:nth-child(even) {
float: right;
border-left: thick solid #ff0000;
margin-right: 186px;
padding-left: 20px;
background-image: url('https://image.flaticon.com/icons/png/512/67/67347.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position-y: 18px;
}
ul{
list-style: none;
}
li{
padding: 20px 0 0 0;
}
div{
width: 777px;
}
img{
width: 20px;
}
<div class="timeline">
<ul>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
<li>
Lorem ipsum dolor sit amet, consectetu
</li>
</ul>
</div>
here is my solution :
jsFiddle
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
/* background: #fff;*/
}
.timeline ul li:nth-child(odd) {
border-right: 2px solid #ff0000;
}
.timeline ul li:nth-child(even) {
border-left: 2px solid #ff0000;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: inherit;
}
.timeline ul li:nth-child(odd){
width:50%;
float:left;
clear:right;
text-align:right;
position:relative;
}
.timeline ul li:nth-child(even){
width:49.7%;
float:right;
clear:left;
text-align:left;
position:relative;
}
.timeline ul li:nth-child(odd):after,
.timeline ul li:nth-child(odd):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
width: 24px;
height: 20px;
background-size: 100% 100%;
}
<div class="timeline">
<ul>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
</ul>
</div>
You can change a part of CSS as below: Jsfiddle
.timeline ul li:nth-child(1), .timeline ul li:nth-child(2n+1){
width: 50%;
float: left;
clear: right;
text-align: right;
position: relative;
border-right: 5px inset black; //border
left: -5px; //alignment
}
.timeline ul li:nth-child(2n){
width: 50%;
float: right;
clear: left;
text-align: left;
position: relative;
border-left: 5px inset black; //border
}
There are a couple of thing missing or wrong with your code.
You applied the border on both the divs on the same side. I fixed this by giving them both a different border.
To make sure the border was included within the size of the element I used box-sizing: border-box;.
As with some of the other answers they became jagged so I applied a width to the element of 50% - half the border size i.e. width: calc(50% - 1px). This should always result in a straight line.
You never made sure the actual :before would be displayed. So i applied the same rules for the :after to the :before.
Gave the li a small padding so it wouldn't be stuck to the border, resulting in some space for the image.
The code below should work the way you intended. As for margins and padding, you are ofcourse free to adjust them to your needs.
.timeline ul li {
list-style-type: none;
position: relative;
width: calc(50% + 1px);
margin: 0 auto;
padding-top: 50px;
box-sizing: border-box;
}
.timeline ul li::after, .timeline ul li::before {
position: absolute;
transform: translateX(-50%);
width: 24px;
height: 20px;
content: '';
}
.timeline ul li:nth-child(odd){
float:left;
clear:right;
text-align:right;
border-right: 2px solid #ff0000;
padding-right: 2em;
}
.timeline ul li:nth-child(even){
float:right;
clear:left;
text-align:left;
border-left: 2px solid #ff0000;
padding-left: 2em;
}
.timeline ul li:nth-child(odd):after{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
background-size: 100% 100%;
right: -5px;
}
.timeline ul li:nth-child(even):before{
background: url('https://image.flaticon.com/icons/png/512/67/67347.png') no-repeat;
background-size: 100% 100%;
left: 20px;
}
<div class="timeline">
<ul>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
<li>Lorem ipsum dolor sit amet, consectetu</li>
</ul>
</div>
Related
I am trying to create a scrollable horizontal timeline with a fixed width. I have overflow-x: auto on the parent container and whenever I add white-space: nowrap to that same element, the child list elements start getting cut off. I assume this is something to do with the behavior of flex-box. I have tried adding min-width: 0 to the flex elements and flex-grow: 1 but no luck.
body {
font-family: Arial, Helvetica, sans-serif;
}
.container {
height: 200px;
width: 500px;
margin: 0 auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.timeline {
display: flex;
justify-content: center;
min-width: 0;
}
.timeline ol {
list-style: none;
display: flex;
justify-content: center;
}
.timeline .horizontal-line {
position: relative;
background-color: #0d6a3d;
height: 3px;
border-radius: 4px;
margin: 5em 0;
}
.event {
margin: 0px 10px;
position: relative;
}
.date {
position: relative;
text-align: center;
top: -70px;
width: 100%;
}
.date::after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
right: auto;
height: 20px;
width: 20px;
border-radius: 50%;
border: 3px solid #00a950;
background-color: #fff;
transition: 0.3s ease;
transform: translateX(-50%);
}
.content {
width: 100%;
text-align: center;
position: relative;
top: -45px;
}
<section class="container">
<div class="timeline">
<div class="horizontal-line">
<ol>
<li class="event">
<h3 class="date">07/02/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
</ol>
</div>
</div>
</section>
Add width: fit-content; to your timeline. That gets all elements to fit in the horizontal scroll. Then you are left with the default padding-inline-start on the ol. You can remove that gap by setting padding: 0; or padding-inline-start: 0;.
body {
font-family: Arial, Helvetica, sans-serif;
}
.container {
height: 200px;
width: 500px;
margin: 0 auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.timeline {
display: flex;
justify-content: center;
min-width: 0;
width: fit-content;
}
.timeline ol {
list-style: none;
display: flex;
justify-content: center;
padding: 0;
}
.timeline .horizontal-line {
position: relative;
background-color: #0d6a3d;
height: 3px;
border-radius: 4px;
margin: 5em 0;
}
.event {
margin: 0px 10px;
position: relative;
}
.date {
position: relative;
text-align: center;
top: -70px;
width: 100%;
}
.date::after {
content: "";
position: absolute;
bottom: -28px;
left: 50%;
right: auto;
height: 20px;
width: 20px;
border-radius: 50%;
border: 3px solid #00a950;
background-color: #fff;
transition: 0.3s ease;
transform: translateX(-50%);
}
.content {
width: 100%;
text-align: center;
position: relative;
top: -45px;
}
<section class="container">
<div class="timeline">
<div class="horizontal-line">
<ol>
<li class="event">
<h3 class="date">07/02/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
<li class="event">
<h3 class="date">08/25/2020</h3>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</li>
</ol>
</div>
</div>
</section>
I am trying to create a div that is two different colors, split horizontally, with an angled(triangle) divider/indicator that points from the left side to the right side. This is the mockup I got:
I found a guide for making something very similar here (the 'Talk Bubble' example):
https://css-tricks.com/examples/ShapesOfCSS/
and here I found an example for creating a bi-colored div:
CSS: Set a background color which is 50% of the width of the window
I have a CodePen here with what I've got, and I'm just struggling a little bit to put the pieces above together to meet the mockup. I'm trying to make sure that the angled indicator is a maximum of 100% of the height of this div, as it will be with other similar divs of other colors and I don't want overlapping edges.
https://codepen.io/chjaro/pen/MGmLxb?editors=1100
#cs-results>#csBullets {
text-align: justify;
margin: 0 auto;
width: 40em;
padding-left: 100px;
font-size: 24px;
}
#csBullets>ul>li {
list-style: none;
color: #fff;
}
#csBullets>ul>li::before {
content: "\2022";
color: #188ac5 !important;
position: relative;
top: 0em;
padding-right: 10px;
}
#csTitle {
color: white;
font-size: 48px;
margin: auto;
max-width: 75%;
padding: 20px 0 50px 0;
}
#cs-what-we-did {
height: 400px;
background: linear-gradient(90deg, #9fa0a2 40%, #58595B 40%);
z-index: -3;
margin: 0;
padding: 0 20%;
}
#csBullets {
/* background-color: #9fa0a2; */
height: 400px;
margin: -9% 0 -10% 0;
padding: 8% 0
}
#csBullets:after {
content: "";
position: absolute;
left: 66%;
top: 0;
width: 0;
height: 0;
border-top: 175px solid transparent;
border-left: 150px solid #9fa0a2;
border-bottom: 200px solid transparent;
z-index: -1
}
#media screen and (max-width: 990px) {
#csBullets:after {
display: none !important;
}
#cs-what-we-did {
height: 100%;
background: linear-gradient(90deg, #9fa0a2 50%, #58595B 50%);
z-index: -3;
}
#csBullets {
height: 100%;
}
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="cs-what-we-did" class="col-lg-12 container-fluid cs-single">
<div class="sectionTitleBar">
<h2 class="sectionTitle" style="color: #fff;">Section Title</h2>
</div>
<div class="col-md-6" style="" id="csBullets">
<h3 class="sectionTitle" style="color:#fff;">Goals</h3>
<ul>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</div>
<div class="col-md-6" style="z-index: -1">
<h3 class="sectionTitle" style="color:#fff;">Results</h3>
<p style="text-align: left; color: #fff">Placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder.</p>
<p style="text-align: left; color: #fff">“Placeholder placeholder placeholder placeholder placeholder ,” Placeholder says. “Placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder
placeholder placeholder placeholder placeholder placeholder placeholder.”</p>
</div>
</div>
I would take a different approach to this and just use absolutely positioned pseudo elements to create the elements for the angle, then transform them to get the shape you want. After that you use some z-index magic to keep it behind the content in case of overlap. This way it'll always be relative to the container itself, so it'll work regardless of the container's height.
.container {
width: 100%;
display: flex;
overflow: hidden;
position: relative;
}
.title {
position: absolute;
top: 20px;
left: 0;
right: 0;
margin: 0;
text-align: center;
z-index: 3;
}
.left,
.right {
flex: 1;
padding: 50px 60px 20px;
}
.left {
z-index: 2;
background: gold;
}
.right {
background: tomato;
position: relative;
z-index: 1;
}
.right::before,
.right::after {
z-index: -1;
content: "";
background-color: gold;
position: absolute;
width: 50%;
right: 100%;
}
.right::before {
top: 0;
bottom: 48%;
transform: rotate(-15deg);
transform-origin: top right;
}
.right::after {
bottom: 0;
top: 48%;
transform: rotate(15deg);
transform-origin: bottom right;
}
<div class="container">
<h1 class="title">Lorem ipsum dolor sit amet.</h1>
<div class="left">
<h1>Lorem ipsum.</h1>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, recusandae.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda sit cupiditate facere, nihil temporibus.</li>
</ul>
</div>
<div class="right">
<h1>Lorem ipsum.</h1>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, recusandae.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda sit cupiditate facere, nihil temporibus.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda sit cupiditate facere, nihil temporibus.</li>
</ul>
</div>
</div>
How could I adjust floating elements in CSS?
For the code below I got result as on attached picture.
I would like to have left and right divs aligned vertically.
* {
margin: 10px;
padding: 10px;
}
body {
background: #C0FFC0;
}
.header {
background: #C0C0FF;
height: 100px;
}
.left {
background: #FFC0C0;
float: left;
height: 200px;
width: 25%;
}
.right {
background: #FFFFC0;
overflow: hidden;
height: 200px;
}
.bottom {
background: #C0FFFF;
clear: both;
height: 100px;
}
<div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
Just wrap left and right divs inside another div (main) and you are good to go.
* {
margin: 10px;
padding: 10px;
}
body {
background: #C0FFC0;
}
.header {
background: #C0C0FF;
height: 100px;
}
.main {
overflow: hidden;
margin: 0px;
padding: 0px;
}
.left {
background: #FFC0C0;
float: left;
height: 200px;
width: 25%;
}
.right {
background: #FFFFC0;
height: 200px;
overflow: hidden;
}
.bottom {
background: #C0FFFF;
clear: both;
height: 100px;
}
<div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="main">
<div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
I needed to create a list with a custom list-index which is vertically centered to the content of the list items.
As I am using flex already I thought the easiest might be to give the list-item a display:flex; and style it. This works, but as soon, as the list-item contains other elements it is messed up. As you can see in the example below.
Whats the best way to vertically center the list-index?
-- Updated Example --
ol {
list-style: none;
padding: 0;
width: 200px;
}
ol > li {
display: flex;
margin-top: 20px;
align-items: center;
}
ol > li:before {
color: red;
content: attr(data-count)' ›';
flex display: block;
flex-shrink: 0;
text-align: right;
min-width: 24px;
padding-right: 5px;
}
<ol>
<li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li>
<li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
I think that the best option is to wrap all elements inside li in one other element and that should fix the problem.
ul {
list-style: none;
padding: 0;
width: 200px;
}
ul > li {
display: flex;
margin-top: 20px;
align-items: center;
}
ul > li:before {
color: red;
content: '›';
flex display: block;
flex-shrink: 0;
text-align: center;
width: 30px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>
<p>Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</p>
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ul>
Solution could be to use display:table, instead of flex, in this particular case.
ol {
list-style: none;
padding: 0;
width: 200px;
display:table;
border-spacing:0 20px;
}
ol > li {
display:table-row;
vertical-align:middle;
}
ol > li:before {
color: red;
content: attr(data-count)' ›';
display:table-cell;
vertical-align:middle;
text-align: right;
white-space: nowrap;
padding-right: 10px;
}
<ol>
<li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li>
<li data-count="999 99">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
Here's a method with absolute positioning to keep the arrows vertically centered.
ol {
list-style: none;
padding: 0;
width: 200px;
}
ol > li {
margin: 20px 0 0;
padding-left: 36px;
position: relative;
}
ol > li:before {
color: red;
content: attr(data-count)' ›';
font-size: 14px;
line-height: 1;
position: absolute;
left: 0;
top: 50%; /* vertically center */
margin-top: -7px; /* and shift up based on 16px height */
}
<ol>
<li data-count="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li data-count="10">Lorem ipsum dolor sit <span>amet</span>, consectetur adipisicing elit</li>
<li data-count="999">Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
</ol>
HTML:
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
</ul>
CSS:
li::before {
content: "– " " ";
}
li {
list-style: outside none none;
padding: 0 0 0 10px;
text-indent: -10px;
}
I would like to add an extra space after the - of each li. I tried:
content: "- "
but it doesnt work. How can I add this.
thanks
thomas
You can moderate the space by adding padding-right to it.
Like this
li::before {
content: "+";
padding-right: 10px;
}
li {
list-style: outside none none;
padding: 0 0 0 10px;
text-indent: -10px;
}
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
</ul>
you could use \00a0 (unicode) in css content
content: "–\00a0\00a0\";
try: https://jsfiddle.net/Lh6ro16g/
Place :before with position: absolute and increase / decrease padding-left on <li> to set indent as much as you want. This method will allow you to have text aligned vertically even if it goes in multiple lines.
li::before {
position: absolute;
content: "–";
top: 1px;
left: 0;
}
li {
list-style: outside none none;
padding-left: 20px;
position: relative;
}
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
<li>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</li>
</ul>
you can increase / decrease space using padding-right on li as much as you want.
<ul>
<li>eins</li>
<li>zwei</li>
<li>drei</li>
enter</ul>
li:before {
content: "-";
padding-right: 20px;
}
li{
list-style:outside none;
}