I would like to add a grey lines that will separated red divs, the final result should be:
enter image description here
I have a problem with eliminate the line after last red div, my code is:
<html>
<head>
<style>
.authorsContainer{
padding-right: 15px;
padding-left: 15px;
}
.authorIconVisibility, .authorName{
float:left;
}
.booksContainer{
display: flex;
clear: both;
}
.bookContainer{
float: left;
flex: 1;
}
.bookInfo{
position: relative;
background: green;
}
.bookInfo:after{
position: absolute;
content: "";
background: #ccc;
height: 2px;
left: 25%;
right: 25%;
margin-top: 5px;
}
.bookName, .bookYear{
text-align: center;
}
.bookDescription{
position: relative;
background: red;
min-height: 100px;
margin: 10px;
}
.bookDescription:after{
position: absolute;
content: "";
background: #ccc;
width: 2px;
top: 25%;
bottom: 25%;
right: -10px;
}
</style>
</head>
<body>
<div class="authorsContainer">
<div class="authorContainer">
<div class="authorInfo">
<div class="authorIconVisibility">icon</div>
<div class="authorName">name</div>
</div>
<div class="booksContainer">
<div class="bookContainer">
<div class="bookInfo">
<div class="bookName">n1</div>
<div class="bookYear">y1</div>
</div>
<div class="bookDescription">
</div>
</div>
<div class="bookContainer">
<div class="bookInfo">
<div class="bookName">n2</div>
<div class="bookYear">y2</div>
</div>
<div class="bookDescription">
</div>
</div>
<div class="bookContainer">
<div class="bookInfo">
<div class="bookName">n3</div>
<div class="bookYear">y3</div>
</div>
<div class="bookDescription">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried to change the last css selector to
.bookContainer .bookDescription:not(:last-child):after{
position: absolute;
content: "";
background: #111;
width: 2px;
top: 25%;
bottom: 25%;
right: -10px;
}
but it does not work (there is no lines at all).
What should I change?
Related
I am trying to do a vertical bar chart like this
But I am getting like this
At bottom of my vertical bar chart, both lines are attached together, I am trying to fix that.
I am trying to set that 0 line down but it's attached
And for example, bar height should get increase 25% if we give height: 25%; on inline CSS.
.barchart-Wrapper {
display: table;
position: relative;
margin: 20px 0;
height: 252px;
}
.barChart-Container {
display: table-cell;
width: 100%;
height: 100%;
padding-left: 15px;
}
.barchart {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
border-bottom: 3px solid tomato;
}
.barchart-Col {
position: relative;
vertical-align: bottom;
display: table-cell;
height: 100%;
}
.barchart-Col + .barchart-Col {
border-left: 4px solid transparent;
}
.barchart-Bar {
position: relative;
height: 0;
transition: height 0.5s 2s;
width: 66px;
margin: auto;
}
.barchart-Bar:after {
content: attr(attr-height);
color: white;
position: absolute;
text-align: center;
width: 100%;
}
.barchart-BarFooter {
position: absolute;
text-align: center;
height: 10%;
width: 100%;
}
.barchart-BarFooter h3 {
color: darkred;
}
.barchart-TimeCol {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
.barchart-Time {
height: 25%;
vertical-align: middle;
position: relative;
}
.barchart-Time:after {
border-bottom: 3px solid black;
content: "";
position: absolute;
width: 100%;
left: 0;
top: 0em;
}
.barchart-TimeText {
position: absolute;
top: -8px;
z-index: 1;
background: white;
padding-right: 5px;
color: #4d4d4d;
font-size: 15px;
font-family: 'Avenir Medium';
}
.html-bar {
background-color: deepskyblue;
}
.css-bar {
background-color: greenyellow;
}
.js-bar {
background-color: peachpuff;
}
.python-bar {
background-color: darkolivegreen;
}
.java-bar {
background-color: cornflowerblue;
}
<div class="barchart-Wrapper">
<div class="barchart-TimeCol">
<div class="barchart-Time">
<span class="barchart-TimeText">125</span>
</div>
<div class="barchart-Time">
<span class="barchart-TimeText">100</span>
</div>
<div class="barchart-Time">
<span class="barchart-TimeText">75</span>
</div>
<div class="barchart-Time">
<span class="barchart-TimeText">50</span>
</div>
<div class="barchart-Time">
<span class="barchart-TimeText">25</span>
</div>
</div>
<div class="barChart-Container">
<div class="barchart">
<div class="barchart-Col">
<div class="barchart-Bar html-bar" style="height: 75%;"></div>
<div class="barchart-BarFooter">
<h3>HTML</h3>
</div>
</div>
<div class="barchart-Col">
<div class="barchart-Bar css-bar" style="height: 75%;"></div>
<div class="barchart-BarFooter">
<h3>CSS</h3>
</div>
</div>
<div class="barchart-Col">
<div class="barchart-Bar js-bar" style="height: 75%;"></div>
<div class="barchart-BarFooter">
<h3>JS</h3>
</div>
</div>
<div class="barchart-Col">
<div class="barchart-Bar python-bar" style="height: 75%;"></div>
<div class="barchart-BarFooter">
<h3>PYTHON</h3>
</div>
</div>
<div class="barchart-Col">
<div class="barchart-Bar java-bar" style="height: 75%;"></div>
<div class="barchart-BarFooter">
<h3>JAVA</h3>
</div>
</div>
</div>
</div>
</div>
I guess doing a small change will help. Updated barchart-Time height to be 20%. Given 100% as 125. I believe this makes sense
.barchart-Wrapper {
display: table;
position: relative;
margin: 20px 0;
height: 252px;
}
.barChart-Container {
display: table-cell;
width: 100%;
height: 100%;
padding-left: 15px;
}
.barchart {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
border-bottom: 3px solid tomato;
}
.barchart-Col {
position: relative;
vertical-align: bottom;
display: table-cell;
height: 100%;
}
.barchart-Col+.barchart-Col {
border-left: 4px solid transparent;
}
.barchart-Bar {
position: relative;
height: 0;
transition: height 0.5s 2s;
width: 66px;
margin: auto;
}
.barchart-Bar:after {
content: attr(attr-height);
color: white;
position: absolute;
text-align: center;
width: 100%;
}
.barchart-BarFooter {
position: absolute;
text-align: center;
height: 10%;
width: 100%;
}
.barchart-BarFooter h3 {
color: darkred;
}
.barchart-TimeCol {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
.barchart-Time {
height: 20%;
vertical-align: middle;
position: relative;
}
.barchart-Time:after {
border-bottom: 3px solid black;
content: "";
position: absolute;
width: 100%;
left: 0;
top: 0em;
}
.barchart-TimeText {
position: absolute;
top: -8px;
z-index: 1;
background: white;
padding-right: 5px;
color: #4d4d4d;
font-size: 15px;
font-family: 'Avenir Medium';
}
.html-bar {
background-color: deepskyblue;
}
.css-bar {
background-color: greenyellow;
}
.js-bar {
background-color: peachpuff;
}
.python-bar {
background-color: darkolivegreen;
}
.java-bar {
background-color: cornflowerblue;
}
<div class="barchart-Wrapper">
<div class="barchart-TimeCol">
<div class="barchart-Time">
<span class="barchart-TimeText">125</span>
</div>
<div class="barchart-Time">
<span class="barchart-TimeText">100</span>
</div>
<div class="barchart-Time">
<span class="barchart-TimeText">75</span>
</div>
<div class="barchart-Time">
<span class="barchart-TimeText">50</span>
</div>
<div class="barchart-Time">
<span class="barchart-TimeText">25</span>
</div>
</div>
<div class="barChart-Container">
<div class="barchart">
<div class="barchart-Col">
<div class="barchart-Bar html-bar" style="height: 75%;"></div>
<div class="barchart-BarFooter">
<h3>HTML</h3>
</div>
</div>
<div class="barchart-Col">
<div class="barchart-Bar css-bar" style="height: 50%;"></div>
<div class="barchart-BarFooter">
<h3>CSS</h3>
</div>
</div>
<div class="barchart-Col">
<div class="barchart-Bar js-bar" style="height: 75%;"></div>
<div class="barchart-BarFooter">
<h3>JS</h3>
</div>
</div>
<div class="barchart-Col">
<div class="barchart-Bar python-bar" style="height: 25%;"></div>
<div class="barchart-BarFooter">
<h3>PYTHON</h3>
</div>
</div>
<div class="barchart-Col">
<div class="barchart-Bar java-bar" style="height: 100%;"></div>
<div class="barchart-BarFooter">
<h3>JAVA</h3>
</div>
</div>
</div>
</div>
</div>
Have you tried padding/ margin on the h3 element?
Try this:
h3 {
margin-top: 10px;
}
If this doesn't work there wil be a run around like this:
h3 {
position: relative;
top: 10px
}
If neither of these solutions work, feel free to command below.
I am trying to achieve something like this:
But this is what I've managed to do.
Could you please help me to achieve desired result?
UPDATE:
Problem goes away if I remove bootstrap.css dependency. How can I make it work with bootstrap?
CodePen (add bootstrap.css in the settings to see an issue)
.time-slice {
display: flex;
align-items: stretch;
}
.time-slice > * {
padding: 20px;
}
.circle {
width: 16px;
height: 16px;
background: #ffffff;
border-radius: 32px;
display: block;
border: 2px solid #1A87B9;
}
.circle-wrap {
position: absolute;
}
.circle-wrap > .circle {
position: relative;
left: -30px;
}
.date-time {
flex-shrink: 0;
flex-basis: 60px;
}
.date,
.time {
max-width: 90px;
color: #999999;
font-size: 13px;
margin-top: 0;
margin-bottom: 10px;
}
.point-title {
border-left: 2px solid #1A87B9;
}
<div id="ticketDetails">
<h1>Details</h1>
<div class="time-slice row">
<div class="date-time">
<p class="time">10h 30min</p>
<p class="date"> </p>
</div>
<div class="circle-wrap">
<div class="circle"></div>
</div>
<div class="point-title">
<span>
<b>Amsterdam (Schiphol)</b>
</span>
</div>
</div>
<div class="time-slice row">
<div class="date-time">
<p class="date">Fri 28 Aug</p>
<p class="time">20:00</p>
</div>
<div class="circle-wrap">
<div class="circle"></div>
</div>
<div class="point-title">
<span>
<b>Manchester (MAN)</b>
</span>
</div>
</div>
</div>
The problem is in * {box-sizing: border-box} used by Bootstrap. Simply either set default box-sizing: content-box for .circle (fixed codepen demo) or take this property setting of the BS into account when you size/align your stuff.
change
.circle-wrap {
position: absolute;
> .circle {
position: relative;
left: -30px;
}
}
to
.circle-wrap {
position: absolute;
& > .circle {
position: relative;
left: -30px;
}
}
I'm trying to add navigation (Left - Right) arrows on the center of image.
But somehow I don't have images of fixed sizes. They can be of any height and width.
Here is what I tried http://jsfiddle.net/vh1fp0k0/
#case-example-cover {
width: 100%;
height: 100%;
}
#nav-container {
position: relative;
border: 1px solid red;
}
#nav-container div {
position: absolute;
top: -webkit-calc(50% - 19px);
top: -moz-calc(50% - 19px);
top: -ms-calc(50% - 19px);
top: calc(50% - 19px);
width: 38px;
height: 38px;
background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
border: 1px solid blue;
}
#case-left {
left: 0;
}
#case-right {
right: 0;
}
<div id="case-example-cover">
<div id="nav-container">
<div id="case-left"></div>
<div id="case-right"></div>
<img src="http://placehold.it/200x299" />
</div>
</div>
<br>
<div id="case-example-cover">
<div id="nav-container">
<div id="case-left"></div>
<div id="case-right"></div>
<img src="http://placehold.it/400x400" />
</div>
</div>
Desired result
How to do achieve this ?
If you make the #case-example-cover div inline-block it shrink wraps to the image size.
JSfiddle Demo
#case-example-cover {
display: inline-block;
}
#nav-container {
position: relative;
border: 1px solid red;
}
#nav-container img {
display: block;
}
#nav-container div {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
border: 1px solid blue;
}
#case-left {
left: 0;
}
#case-right {
right: 0;
}
<div id="case-example-cover">
<div id="nav-container">
<div id="case-left"></div>
<div id="case-right"></div>
<img src="http://placehold.it/200x299" />
</div>
</div>
<div id="case-example-cover">
<div id="nav-container">
<div id="case-left"></div>
<div id="case-right"></div>
<img src="http://placehold.it/400x400" />
</div>
</div>
I'm having an issue figuring out how to center a <div> within a <div> that popped up after clicking a button.
Not my example, but similar. HTML:
<div class="popup">
<div class="options">
<div class="option">
<span id="1">1</span>
</div>
<div class="option">
<span id="2">2</span>
</div>
<div class="option">
<span id="3">3</span>
</div>
<div class="option">
<span id="4">4</span>
</div>
</div>
<p></p>
<div id="persona">
<span id="5">5</span>
</div>
</div>
CSS:
.popup
{
background-color: #e3ddd1;
position: absolute;
left: 10%;
top: 10%;
height: 400px;
width: 500px;
}
#persona
{
margin-left: auto;
margin-right: auto;
}
The overlay is just used to fade out the background, and then the popup appears on top of it.
The issue is in the #persona block, how do I get it so that <div id="persona"> is centered within the popup?
Try this CSS. Working Demo
.overlay
{
background-color: rgba(0, 0, 0, 0.8);
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.popup
{
background-color: #e3ddd1;
display: table;
position: absolute;
left: 50%;
top: 50%;
margin-left: -500px;
margin-top: -200px;
height: 400px;
width: 1000px;
}
#persona
{
display: table-cell;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: middle;
}
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:
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.
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
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>
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>