I created a layout with 4 columns centered with margin and a triangle as an arrow-down with a star in the middle...
this is working nice in my computer:
But triangle and star are far away to be responsive, only way I achieved to position it correctly is with absolute position:
.triangle-down {
display: block;
position: absolute;
top: 0;
left: 318px;
width: 0;
height: 0;
border-left: 532px solid transparent;
border-right: 532px solid transparent;
border-top: 400px solid blue;
}
.star {
display: block;
position: absolute;
vertical-align: middle;
font-size: 250px;
text-align: center;
color: white;
top: -434px;
left: -109px;
}
How can I put the element in top of the others and make it responsive in the same way columns and it's margins?
NOTES:
layout is a countdown, but javascript is not important for the question.
You can find a functional (no JS) fiddle here
You can see actual result (with JS) here
I can use sass if necessary
How about this updated fiddle?
https://jsfiddle.net/ondrakoupil/0rtvcnon/11/
Basically, these are the changes:
use flexbox for column layout
sizes are measured using viewport-relative units (vw)
triangle is created as standard rectangular <div> and rotated via CSS - you have better control over its position and size
There are some CSS3 techniques used. For IE, you'll need to prefix them in CSS (use Autoprefixer). Other browsers should handle it "as it is".
html, body {
height: 100%;
margin: auto;
padding-left:1%;
background: yellow;
font: normal 16px 'Roboto', sans-serif;
}
.container {
margin: auto;
width: 80%;
height: 100%;
position: relative;
display: flex;
justify-content: space-between;
}
.bar {
background: red;
font-weight: 700;
text-align: center;
color: yellow;
width: 15%;
}
.init {
position:absolute;
bottom: 10px;
right: 20px;
background: yellow;
margin-left: 0px;
font-weight: 700;
text-align: right;
color: red;
}
a:link, a:visited {
color: red;
text-decoration: none;
}
::-moz-selection {
color: yellow;
background: red;
}
::selection {
color: yellow;
background: red;
}
p.numbers {
font-size: 8vw;
margin-top: 45vw;
margin-bottom: 20px;
}
p.meta, p.strings {
font-size: 2vw;
}
h1 {
font-size: 4.5em;
}
.triangle-down {
position: absolute;
top: 0;
left: 0;
right: 0;
pointer-events: none;
}
.triangle-color {
margin: auto;
width: calc(80vw / 1.4142);
height: calc(80vw / 1.4142); /* sqrt of 2 */
background-color: blue;
transform: translateY(calc(-1 * 80vw / 1.4142 / 2)) rotate(45deg);
}
.star {
position: absolute;
vertical-align: middle;
font-size: 15vw;
text-align: center;
color: white;
top: 5vw;
left: 0;
right: 0;
z-index: 1;
}
<body>
<div class="container">
<div class="triangle-down">
<div class="triangle-color"></div>
<div class="star">★</div>
</div>
<div class="bar">
<p id="d" class="numbers days">00</p>
<p class="strings">DIES</p>
</div>
<div class="bar">
<p id="h" class="numbers hours">00</p>
<p class="strings">HORES</p>
</div>
<div class="bar">
<p id="m" class="numbers minutes">00</p>
<p class="strings">MINUTS</p>
</div>
<div class="bar">
<p id="s" class="numbers seconds">00</p>
<p class="strings">SEGONS</p>
</div>
</div>
<div class="init">
ENTRA
</div>
</body>
Take a look at this. I was need to rewrite it from scratch, because you've got a lot of absolutes and they all calculated through js, as I understood. Hope, this will satisfy your requirements.
html, body {
margin: 0;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background-color: yellow;
font: normal 16px 'Roboto', sans-serif;
position: relative;
}
.triangle-aspect-keeper {
width: 50%;
padding-bottom: 50%;
position: relative;
margin-left: auto;
margin-right: auto;
}
.triangle-container {
}
.triangle-down {
width: 100%;
height: 100%;
background-color: blue;
transform: rotate(45deg);
position: absolute;
top: -50%;
left: 0;
}
.star {
font-size: 1100%;
text-align: center;
color: white;
width: 100%;
line-height: 200%; /* control star vertical position */
position: absolute;
top: 0;
left: 0;
}
.bar-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
.bar-inner-container {
margin-left: auto;
margin-right: auto;
width: calc(50% * 1.41); /* sqrt(2) = 1.41. Length of the diagonal of the square*/
height: 100%;
display: flex;
justify-content: space-between;
}
.bar:first-child {
margin-left: 0;
}
.bar {
background-color: red;
height: 100%;
width: 15%;
color: yellow;
font-weight: 700;
}
p.numbers {
font-size: 5em;
margin-top: 350%;
}
p.meta, p.strings {
font-sie: 1.5em;
}
a:link, a:visited {
color: red;
text-decoration: none;
}
.init {
position: absolute;
bottom: 0;
right: 0;
padding: 10px;
font-weight: 700;
}
<body>
<div class="container">
<div class="bar-container">
<div class="bar-inner-container">
<div class="bar bar-first">
<p id="d" class="numbers days">00</p><br>
<p class="strings">DIES</p><br>
</div>
<div class="bar bar-second">
<p id="h" class="numbers hours">00</p><br>
<p class="strings">HORES</p><br>
</div>
<div class="bar bar-third">
<p id="m" class="numbers minutes">00</p><br>
<p class="strings">MINUTS</p><br>
</div>
<div class="bar bar-fourth">
<p id="s" class="numbers seconds">00</p><br>
<p class="strings">SEGONS</p><br>
</div>
</div>
</div>
<div class="triangle-aspect-keeper">
<div class="triangle-container">
<div class="triangle-down"></div>
<div class="star">★</div>
</div>
</div>
<div class="init">
ENTRA
</div>
</div>
</body>
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
html,
body {
background: yellow;
height: 100%;
}
.container {
position: relative;
height: 100%;
}
.row {
height: 100%;
}
.col-xs-3 {
height: 100%;
}
.col-xs-3,
.col-xs-12 {
padding: 0 6.25%;
}
.bar {
color: yellow;
background: red;
min-height: 100%;
padding-top: 333%;
}
.triangle-down {
position: absolute;
width: 100%;
height: auto;
z-index: 1;
}
.triangle-color {
margin-bottom: -30%;
}
.triangle-color * {
fill: blue
}
.star * {
fill: white
}
.numbers {
font-size: 5vw;
padding-bottom: 2vw;
}
.strings {
font-size: 1.5vw;
}
<div class="container text-center">
<div class="row triangle-down">
<div class="col-xs-12">
<svg class="triangle-color" viewBox="0 0 100 40">
<polygon points="0,0 100,0 50,40"/>
</svg>
<svg class="star" viewBox="0 0 1400 188">
<polygon points="700,0 640,188 790,68 610,68 760,188"/>
</svg>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">DIES</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">HORES</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">MINUTS</div>
</div>
</div>
<div class="col-xs-3">
<div class="bar">
<div class="numbers">00</div>
<div class="strings">SEGONS</div>
</div>
</div>
</div>
</div>
You can simply do this.
HTML:
<div class="parent">
<div class="triangle">
<div class="star">
...
</div>
</div>
</div>
CSS:
.parent {
width: xx%; /*Whatever percentage*/
height: yy%; /*Whatever percentage*/
margin: 0 auto;
position: relative;
}
.triangle {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.star {
font-size: xx%; /*some percentage (assuming star is a font icon)*/
position: absolute;
top: 15vh;
margin: 0 auto;
}
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 have two sticky boxes. On hovering over a particular area inside the sticky boxes a popup opens. I want these popups to appear always on top of the sticky boxes. But increasing the z index of one hides the other. Any solution ?
Note - Removing sticky from the boxes and keeping z index of both the box same solves the problem but I need the boxes to be sticky.
.box {
margin: 40px;
padding: 20px;
background: yellow;
border: 1px solid red;
position: sticky;
}
.innerBox {
width: 100px;
height: 50px;
background: lightgreen;
position: relative;
}
.popup1 {
position: absolute;
width: 50px;
height: 150px;
top: 25px;
left: 35px;
background: red;
display: none;
}
.popup2 {
position: absolute;
width: 50px;
height: 150px;
bottom: 25px;
left: 35px;
background: black;
display: none;
}
.box1:hover .popup1 {
display: block;
}
.box2:hover .popup2 {
display: block;
}
.boxUp {
z-index: 3;
}
.boxDown {
z-index: 3;
}
<div>
<div class="box boxUp">
<div class="innerBox box1">
<p>
Hover Here
</p>
<div class="popup1">
</div>
</div>
</div>
<div class="box boxDown">
<div class="innerBox box2">
<p>
Hover Here
</p>
<div class="popup2">
</div>
</div>
</div>
</div>
Set the z-index on hover the .box
.box {
margin: 40px;
padding: 20px;
background: yellow;
border: 1px solid red;
position: sticky;
}
.innerBox {
width: 100px;
height: 50px;
background: lightgreen;
position: relative;
}
.popup1 {
position: absolute;
width: 50px;
height: 150px;
top: 25px;
left: 35px;
background: red;
display: none;
}
.popup2 {
position: absolute;
width: 50px;
height: 150px;
bottom: 25px;
left: 35px;
background: black;
display: none;
}
.box1:hover .popup1 {
display: block;
}
.box2:hover .popup2 {
display: block;
}
.box:hover {
z-index: 2;
}
<div>
<div class="box boxUp">
<div class="innerBox box1">
<p>
Hover Here
</p>
<div class="popup1">
</div>
</div>
</div>
<div class="box boxDown">
<div class="innerBox box2">
<p>
Hover Here
</p>
<div class="popup2">
</div>
</div>
</div>
</div>
I am trying to create an education timeline. There should be a vertical line (red) starting from behind the "graduation cap" and than going through all the timeline-post (green).
This is what I got so far:
.iconspace {
position: relative;
width: 40px;
height: 40px;
text-align: center;
margin: 0 auto;
border-radius: 50%;
background-color: #25b5f1;
z-index: 7;
}
.iconspace i {
font-size: 18px;
color: #FFFFFF;
line-height: 40px;
}
.iconspace:after, .iconspace::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 49.8%;
width: 3px;
height: 100%;
background-color: RED;
z-index: 5;
}
.timeline-post {
height: 100px;
width: 200px;
background-color: green;
margin: 0 auto;
margin-top: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<h3 class="entry-title" style="text-align: center;">EDUCATION</h3><span class="border"></span>
<div class="timeline">
<div class="iconspace"><i class="fa fa-graduation-cap"></i></div></div>
<div class="timeline-post">
Test 1
</div>
<div class="timeline-post">
Test 2
</div>
<div class="timeline-post">
Test 3
</div>
</div>
You need to apply the pseudo element to the container of timeline posts and not the icon, so you may do this instead :
You may change z-index value depending on your needs (above or below green elements)
.iconspace {
position: relative;
width: 40px;
height: 40px;
text-align: center;
margin: 0 auto;
border-radius: 50%;
background-color: #25b5f1;
z-index: 7;
}
.iconspace i {
font-size: 18px;
color: #FFFFFF;
line-height: 40px;
}
.timeline {
position: relative;
}
.timeline:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 49.8%;
width: 3px;
height: 100%;
background-color: RED;
z-index: -5;
}
.timeline-post {
height: 100px;
width: 200px;
background-color: green;
margin: 0 auto;
margin-top: 20px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<h3 class="entry-title" style="text-align: center;">EDUCATION</h3><span class="border"></span>
<div class="timeline">
<div class="iconspace"><i class="fa fa-graduation-cap"></i></div>
<div class="timeline-post">
Test 1
</div>
<div class="timeline-post">
Test 2
</div>
<div class="timeline-post">
Test 3
</div>
</div>
I have created a div and inside the div I have made bars for which I have to set max-height and height as 100% but I do not know what is the problem as the height 100% is not showing. Can anyone help me out with this. I want to show the bars height to be placed according to the values but the problem is the height is only showing when I am setting height in pixels it is not working when I place height as 100% I want to show the height to be 100% can anyone help me out with fixing this issue for me please would be grateful for your help.
Here is my code -
.bar_graph {
width: 341px;
height: 258px;
background-color: #fff;
position: absolute;
top: 15px;
left: 15px;
padding: 20px 12px;
display: block;
border: 1px solid #a3a3a3;
}
span.line_gr {
display: block;
background-color: #3d4a7b;
margin: auto;
width: 24px;
max-height: 177px;
margin-left: 0;
height: 100%;
}
.bars_area {
width: 238px;
float: right;
position: absolute;
bottom: -8px;
right: 0;
}
.bars {
float: left;
margin: 0 10px;
margin-top: 20px;
height: 100%;
width: 27px;
}
.bars >p {
font-size: 12px;
margin: 0;
line-height: 30px;
font-weight: bold;
}
.head_graph > h2 {
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
color: #000;
}
.bar_main {
height: 200px;
position: relative;
}
.bar_main > .line {
height: 60px;
width: 100%;
border-top: 1px solid #ccc;
line-height: 20px;
font-size: 12px;
}
<div class="bar_graph">
<div class="head_graph"><h2>Heading</h2></div>
<div class="bar_main">
<div class="line">3000,000 Mil</div>
<div class="line">200,000</div>
<div class="line">100,000</div>
<div class="line"></div>
<div class="bars_area">
<div class="bars">
<span class="line_gr"></span>
<p>2016</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2015</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2014</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2013</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2012</p>
</div>
</div>
</div>
</div>
I do not know what is the problem as the height 100% is not showing
A height in percent only works if the parent element also has a height (either set explicitly, or implicitly based on other properties, such as an absolute positioned element with top and bottom given).
Your .bars_area does not have such a height, so trying a height in percentage on the children won’t work either.
As others says it won't work. I can suggest you a different approach if you like you can do it.Use div instead of span.Remember I am just suggesting you another approach according your code not an answer.
.bar_graph {
width: 341px;
height: 258px;
background-color: #fff;
position: absolute;
top: 15px;
left: 15px;
padding: 20px 12px;
display: block;
border: 1px solid #a3a3a3;
}
.inner {
position: absolute;
width:5px;
height:200px;
background: grey;
bottom:25px;
}
span.line_gr {
display: block;
background-color: #3d4a7b;
margin: auto;
width: 24px;
max-height: 177px;
margin-left: 0;
height: 100%;
}
.bars_area {
width: 238px;
float: right;
position: absolute;
bottom: -8px;
right: 0;
}
.bars {
float: left;
margin: 0 10px;
margin-top: 20px;
height: 100%;
overflow: hidden;
}
.bars >p {
font-size: 12px;
margin: 0;
line-height: 30px;
font-weight: bold;
}
.head_graph > h2 {
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
color: #000;
}
.bar_main {
height: 200px;
position: relative;
}
.bar_main > .line {
height: 60px;
width: 100%;
border-top: 1px solid #ccc;
line-height: 20px;
font-size: 12px;
}
<div class="bar_graph">
<div class="head_graph"><h2>Heading</h2></div>
<div class="bar_main">
<div class="line">3000,000 Mil</div>
<div class="line">200,000</div>
<div class="line">100,000</div>
<div class="line"></div>
<div class="bars_area">
<div class="bars">
<div class="inner"></div>
<p>2016</p>
</div>
<div class="bars">
<div class="inner"></div>
<p>2015</p>
</div>
<div class="bars">
<div class="inner"></div>
<p>2014</p>
</div>
<div class="bars">
<div class="inner"></div>
<p>2013</p>
</div>
<div class="bars">
<div class="inner"></div>
<p>2012</p>
</div>
</div>
</div>
</div>
First set .bars_area to height 100% and then set position relative on .bars
I hope it is what you want.
.bar_graph {
width: 341px;
height: 258px;
background-color: #fff;
position: absolute;
top: 15px;
left: 15px;
padding: 20px 12px;
display: block;
border: 1px solid #a3a3a3;
}
span.line_gr {
display: block;
background-color: #3d4a7b;
margin: auto;
width: 24px;
max-height: 177px;
margin-left: 0;
height: 100%;
}
.bars_area {
width: 238px;
float: right;
position: absolute;
bottom: -8px;
right: 0;
height: 100%;
}
.bars {
float: left;
margin: 0 10px;
margin-top: 20px;
height: 100%;
width: 27px;
position: relative;
}
.bars >p {
font-size: 12px;
margin: 0;
line-height: 30px;
font-weight: bold;
}
.head_graph > h2 {
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
color: #000;
}
.bar_main {
height: 200px;
position: relative;
}
.bar_main > .line {
height: 60px;
width: 100%;
border-top: 1px solid #ccc;
line-height: 20px;
font-size: 12px;
}
<div class="bar_graph">
<div class="head_graph"><h2>Heading</h2></div>
<div class="bar_main">
<div class="line">3000,000 Mil</div>
<div class="line">200,000</div>
<div class="line">100,000</div>
<div class="line"></div>
<div class="bars_area">
<div class="bars">
<span class="line_gr"></span>
<p>2016</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2015</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2014</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2013</p>
</div>
<div class="bars">
<span class="line_gr"></span>
<p>2012</p>
</div>
</div>
</div>
</div>
The parent element should have margins and padding set to 0. Then, the child element can be given that property of height:100%;
I've definitely never identified myself as a coder, which is why I need some help. I've tried & tried to get a grid of shapes with text overlayed to change to different text whenever the mouse is hovering over it - completely different text. I looked up before & after properties but still can't get it right because of the "grid" css.
I'm hoping to have "name" on the normal shape, and then other text on the hovered shape for more information. How would I go about doing this? I've supplied a fiddle to show everything.
http://jsfiddle.net/6c4v2ypv/3/
Thank you all tremendously for your help.
CSS
.grid {
width: 100%;
max-width: 900px;
margin: 0 auto;
background: #fff;
}
.grid::after {
content: "";
display: block;
clear: both;
}
.grid-item {
width: 21.833%;
padding-bottom: 21.833%;
overflow: hidden;
float: left;
background: #BBB;
transform: rotate(45deg);
margin: 5.5%;
margin-top: -11%;
}
.grid-item:nth-child(1),
.grid-item:nth-child(2),
.grid-item:nth-child(3) {
margin-top: 5%;
}
.grid-item:nth-child(5n+4) {
margin-left: 21.9%;
}
.grid-item:nth-child(5n+6) {
clear: left;
}
.grid-item:nth-child(5n+6):last-of-type {
margin-left: 38.25%;
}
.grid-item:hover {
background: #000;
}
.grid-inner {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-45deg);
text-align: center;
padding-top: 40%;
font-size: 1em;
}
.grid-inner:hover a span {
display: none;
}
.grid-inner:hover:after {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-45deg);
text-align: center;
padding-top: 40%;
font-size: 1em;
background-color: black;
}
Maybe so?
.grid {
width: 100%;
max-width: 900px;
margin: 0 auto;
background: #fff;
}
.grid::after {
content: "";
display: block;
clear: both;
}
.grid-item {
width: 21.833%;
padding-bottom: 21.833%;
overflow: hidden;
float: left;
background: #BBB;
transform: rotate(45deg);
margin: 5.5%;
margin-top: -11%;
}
.grid-item:nth-child(1),
.grid-item:nth-child(2),
.grid-item:nth-child(3) {
margin-top: 5%;
}
.grid-item:nth-child(5n+4) {
margin-left: 21.9%;
}
.grid-item:nth-child(5n+6) {
clear: left;
}
.grid-item:nth-child(5n+6):last-of-type {
margin-left: 38.25%;
}
.grid-item:hover {
background: #000;
}
.grid-inner {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-45deg);
text-align: center;
padding-top: 40%;
font-size: 1em;
}
.grid-inner:hover a span {
display: none;
}
.grid-inner:hover:after {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-45deg);
text-align: center;
padding-top: 40%;
font-size: 1em;
background-color: black;
}
.grid-inner-hover {
opacity: 0;
}
.grid-item:hover .grid-inner-hover {
opacity: 1;
color: #fff;
}
<div class="grid">
<div class="grid-item">
<div class="grid-inner">Name 1</div>
<div class="grid-inner grid-inner-hover">Name 1 Hover</div>
</div>
<div class="grid-item">
<div class="grid-inner">Name 2</div>
<div class="grid-inner grid-inner-hover">Name 2 Hover</div>
</div>
<div class="grid-item">
<div class="grid-inner">Name 3</div>
<div class="grid-inner grid-inner-hover">Name 3 Hover</div>
</div>
<div class="grid-item">
<div class="grid-inner">Name 4</div>
<div class="grid-inner grid-inner-hover">Name 4 Hover</div>
</div>
<div class="grid-item">
<div class="grid-inner">Name 5</div>
<div class="grid-inner grid-inner-hover">Name 5 Hover</div>
</div>
<div class="grid-item">
<div class="grid-inner">Name 6</div>
<div class="grid-inner grid-inner-hover">Name 6 Hover</div>
</div>
</div>
here's a simple example:
.item1:hover span, .item2:hover span{
display: none;
}
.item1:hover:after{
content: 'ADD';
}
.item2:hover:after{
content: 'Subtract';
}
<div class="item1">
<span >first</span>
</div>
<div class="item2">
<span>second</span>
</div>
You can also add something like this in your css:
.grid-inner:hover:after{
content:'hello';
color:#fff;
transform:rotate(0deg);
}
http://jsfiddle.net/6c4v2ypv/5/