I need to alternate the background color of the class jl-member-info but this doesn’t work. I have this code:
.uk-grid .jl-member-item .jl-member-info:nth-child(odd) {
position: relative;
padding: 0 0.9rem;
background-color: rgba(0, 198, 197, 0.89);
width: 100%;
margin-top: -95px;
}
.uk-grid .jl-member-item .jl-member-info:nth-child(even) {
position: relative;
padding: 0 0.9rem;
background-color: #090963;
width: 100%;
margin-top: -95px;
}
<div class="jl-member ">
<div class=" uk-grid-large uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-2 uk-grid-width-large-1-4" data-uk-grid-margin="">
<div class="jl-member-item default uk-row-first">
<div class="jl-member-item-img">
<img class="uk-overlay-spin" src="/templates/g5_helium/custom/images/Alain.jpg?595f26c4">
</div>
<div class="jl-member-info">
<div class="jl-member-name">Alain</div>
<div class="jl-member-role">Maire</div>
<div class="jl-member-desc"><span class="cloaked_email">mail#test.fr</span>
</div>
</div>
</div>
<div class="jl-member-item default">
<div class="jl-member-item-img">
<img class="uk-overlay-spin" src="/templates/g5_helium/custom/images/Alain.jpg?595f26c4">
</div>
<div class="jl-member-info">
<div class="jl-member-name">Alain</div>
<div class="jl-member-role">Maire</div>
<div class="jl-member-desc"><span class="cloaked_email">mail#test.fr</span>
</div>
</div>
</div>
<div class="jl-member-item default">
<div class="jl-member-item-img">
<img class="uk-overlay-spin" src="/templates/g5_helium/custom/images/Alain.jpg?595f26c4">
</div>
<div class="jl-member-info">
<div class="jl-member-name">Alain</div>
<div class="jl-member-role">Maire</div>
<div class="jl-member-desc"><span class="cloaked_email">mail#test.fr</span>
</div>
</div>
</div>
</div>
</div>
You need to recode like this, because you have only one .jl-member-info in .jl-member-item it will always be odd!
.uk-grid .jl-member-item .jl-member-info {
position: relative;
padding: 0 0.9rem;
width: 100%;
margin-top: -95px;
background-color: #090963;
}
.uk-grid .jl-member-item:nth-child(odd) .jl-member-info {
background-color: rgba(0, 198, 197, 0.89);
}
Related
I am new to HTML. In the following chart, how can I add some labels such as
Team 1up
Team blue
Team tigers
Team watermelon
Team crazyred
Team Melt
At the left side of the chart tracks all right aligned?
$(function() {
$('.progress-fill span').each(function(){
var percent = $(this).html();
$(this).parent().css('width', percent);
});
});
body {
background: #999;
}
.container {
width: 500px;
margin: 20px;
background: #fff;
padding: 20px;
overflow: hidden;
float: left;
}
.horizontal .progress-bar {
float: left;
height: 18px;
width: 100%;
padding: 3px 0;
}
.horizontal .progress-track {
position: relative;
width: 100%;
height: 20px;
background: #ebebeb;
}
.horizontal .progress-fill {
position: relative;
background: #666;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container horizontal flat">
<h2>Team performances</h2>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>100%</span>
</div>
</div>
</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>75%</span>
</div>
</div>
</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>60%</span>
</div>
</div>
</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>20%</span>
</div>
</div>
</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>34%</span>
</div>
</div>
</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>82%</span>
</div>
</div>
</div>
</div>
You can create a component called progress-group and put progress-label and progress-bar in it. progress-group takes care of responsibility for children alignment. I used flex which makes sense in this case. This gives you much more control if you want to add extra components in future.
https://codepen.io/anon/pen/oPVyYm
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container horizontal flat">
<h2>Team performances</h2>
<div class="progress-group">
<div class="progress-label">Team 1up</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>100%</span>
</div>
</div>
</div>
</div>
<div class="progress-group">
<div class="progress-label">Team blue</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>75%</span>
</div>
</div>
</div>
</div>
<div class="progress-group">
<div class="progress-label">Team tigers</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>60%</span>
</div>
</div>
</div>
</div>
<div class="progress-group">
<div class="progress-label">Team watermelon</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>20%</span>
</div>
</div>
</div>
</div>
<div class="progress-group">
<div class="progress-label">Team crazyred</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>34%</span>
</div>
</div>
</div>
</div>
<div class="progress-group">
<div class="progress-label">Team Melt</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>82%</span>
</div>
</div>
</div>
</div>
</div>
body {
background: #999;
}
.container {
width: 500px;
margin: 20px;
background: #fff;
padding: 20px;
overflow: hidden;
float: left;
}
.horizontal .progress-bar {
float: left;
height: 18px;
width: 100%;
padding: 3px 0;
}
.horizontal .progress-track {
position: relative;
width: 100%;
height: 20px;
background: #ebebeb;
}
.horizontal .progress-fill {
position: relative;
background: #666;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
}
.progress-group {
display: flex;
}
.progress-label {
width: 170px;
text-align: right;
padding-right: 10px;
}
.progress-label::after {
content: ":";
}
$(function() {
$('.progress-fill span').each(function(){
var percent = $(this).html();
$(this).parent().css('width', percent);
});
});
Something like this sir?
https://codepen.io/JABedford/pen/RYdMjV
I have simply floated the bars over to the right and decreased the width to 80% and created another span for the relevant text.
<div class="progress-bar horizontal">
<span class="name">Team Name</span>
<div class="progress-track">
<div class="progress-fill">
<span>75%</span>
</div>
</div>
body {
background: #999;
}
.container {
width: 500px;
margin: 20px;
background: #fff;
padding: 20px;
overflow: hidden;
float: left;
}
.horizontal .progress-bar {
float: right;
height: 18px;
width: 100%;
padding: 3px 0;
}
.horizontal .progress-track {
position: relative;
float: left;
width: 80%;
height: 20px;
background: #ebebeb;
}
.horizontal .progress-fill {
position: relative;
background: #666;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
}
Can you please help me, it took me so much time trying to fixe this problem.
i have 2 slider and i need to split each slide into 2 colums. The problem is that the second column which is float: right doesn't show in both sliders .
Here is a code pen that shows the problem codepen
thank you
Here is my structure:
.Dash_map_wrapSlider {
position: absolute;
overflow: hidden;
height: 100%;
width: calc(100% - 3rem);
bottom: calc(-80% + 10rem);
left: 3rem;
background: #fff;
border: 1px solid;
transition: 0.5s;
z-index: 1;}
.Dash_map_wrapSlider:hover{
bottom: 0rem;
transition: 0.5s;}
.Dash_map_wrapSlider:hover{
bottom: 0rem;
transition: 0.5s;}
.Dash_map_wrapSliderchoise {
background: #3E474F;
box-shadow: 0 .5em 1em #111;
position: absolute;
left: 0;
bottom: 0;
z-index: 900;
width: 100%;
height: 2rem;
line-height: 2rem;
text-align: center;
vertical-align: middle;}
.Dash_map_sumSlide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
background-color: #fff;
transition: left 0s .75s;}
.clsDashMap_sumSlideInput {
display: none;
height: 11rem;}
.clsDashMap_sumSlideTitle {
position : absolute;
top:0;
width: 100%;
height: 2rem;
left: inherit;
color: #fff;
background-color: #73b9ff;
text-align: center;
font-weight: bold;
font-size: 1.20rem;}
.clsDashMap_sumSlideContentBoxTitle {
font-weight: bold;
color: #666;}
.clsDashMap_sumSlideSiteContentSummary {
position : absolute;
top: 2rem;
width: 100%;
height: 16rem;
color: #000000;
background-color: aliceblue;
text-align: center;}
.clsDashMap_sumSlideContent {
position: absolute;
top: 20rem;
margin: auto;
width: 100%;
color: #000000;}
[id^="Dash"]:checked + .Dash_map_sumSlide {
left: 0;
z-index: 100;
transition: left .65s ease-out;}
.Dash_map_wrapSliderchoise label {
color: #fff;
cursor: pointer;
display: inline-block;
line-height: 2rem;
font-size: 0.75rem;
font-weight: bold;
padding: 0 1em;}
.clsDashMap_sumSlideContentBox {
margin: auto;
float: left;
padding: 10px;
text-align: center;}
<div class="Dash_map_wrapSlider">
<div style="border: 1px solid red;width: 100%;">
<input id="Dash_map_sumSlideSite" class="clsDashMap_sumSlideInput" type="radio" name="slides" checked>
<div class="Dash_map_sumSlide slide_Site " style="float: left;width: 50%;border: 2px solid yellow;">
<div class="clsDashMap_sumSlideTitle">SITE</div>
<div class="clsDashMap_sumSlideSiteContentSummary">
<div class="clsDashMap_sumSlideContentBox">
<div class="clsDashMap_sumSlideContentBoxTitle">Etat</div>
<div class="green led">OK</div>
<div class="red led">KO</div>
</div>
<div class="clsDashMap_sumSlideContentBox">
<div class="clsDashMap_sumSlideContentBoxTitle">AlarmesSite</div>
<canvas id="pieChartAlm" ></canvas>
</div>
<div class="clsDashMap_sumSlideContentBox">
<div class="clsDashMap_sumSlideContentBoxTitle">TicketsSite</div>
<canvas id="pieChartTkt" ></canvas>
</div>
</div>
<div class="clsDashMap_sumSlideContent">put here content</div>
</div>
<div class="Dash_map_sumSlide slide_Alarme" style="float: right;width: 50%; border: 2px solid green;">
<div class="clsDashMap_sumSlideTitle" >ALARME</div>
<div class="clsDashMap_sumSlideSiteContentSummary">
<div class="clsDashMap_sumSlideContentBox">
<div class="clsDashMap_sumSlideContentBoxTitle">Etat</div>
<div class="green led">OK</div>
<div class="red led">KO</div>
</div>
<div class="clsDashMap_sumSlideContentBox">
<div class="clsDashMap_sumSlideContentBoxTitle">ALARME1Alm</div>
<canvas id="pieChartAlm" ></canvas>
</div>
<div class="clsDashMap_sumSlideContentBox">
<div class="clsDashMap_sumSlideContentBoxTitle">Tickets1Alm</div>
<canvas id="pieChartTkt" ></canvas>
</div>
</div>
<div class="clsDashMap_sumSlideContent">put here content</div>
</div>
</div>
<div style="border: 1px solid red;">
<input id="Dash_map_sumSlideAlarme" class="clsDashMap_sumSlideInput" type="radio" name="slides" checked>
<div class="Dash_map_sumSlide slide_Site " style="width: 50%;border: 2px solid black;">
<div class="clsDashMap_sumSlideTitle">TECHNICIEN</div>
<div class="clsDashMap_sumSlideSiteContentSummary">
<div class="clsDashMap_sumSlideContentBox">
<div class="clsDashMap_sumSlideContentBoxTitle">Etat</div>
<div class="green led">OK</div>
<div class="red led">KO</div>
</div>
<div class="clsDashMap_sumSlideContentBox">
<div class="clsDashMap_sumSlideContentBoxTitle">Alarmes2Tech</div>
</div>
<div class="clsDashMap_sumSlideContentBox">
<div class="clsDashMap_sumSlideContentBoxTitle">Tickets2Tech</div>
</div>
</div>
<div class="clsDashMap_sumSlideContent">put here content</div>
</div>
<div class="Dash_map_sumSlide slide_Alarme" style="width: 50%; float: right;border: 2px solid darkturquoise;">
<div class="clsDashMap_sumSlideTitle" style="position: initial;">ACTION</div>
<div class="clsDashMap_sumSlideSiteContentSummary">
<div class="clsDashMap_sumSlideContentBox">
<div class="clsDashMap_sumSlideContentBoxTitle">Etat</div>
<div class="green led">OK</div>
<div class="red led">KO</div>
</div>
<div class="clsDashMap_sumSlideContentBox">
<div class="clsDashMap_sumSlideContentBoxTitle">alarme3Act</div>
</div>
<div class="clsDashMap_sumSlideContentBox">
<div class="clsDashMap_sumSlideContentBoxTitle">Tickets3Act</div>
</div>
</div>
<div class="clsDashMap_sumSlideContent">put here content</div>
</div>
</div>
Instead of float: right; give left: 50%; to the second column
Have you tried out Bootstrap Grid? I think it is just what you need.
I'm trying to achieve this CSS animation but don't know how to do it. I want to rotate the top-border around the circle but the whole thing is rotating including text. I just want to rotate the top-border on 360 degree. Here is my code snippet below:
div#skill {
/*background: url(../img/white.jpg) center no-repeat;
background-size: cover;*/
background-color: rgba(144, 0, 64,0.8);
color: #fff;
padding: 10px 0;
}
div#skill h3 {
color: #fff;
text-transform: none;
}
div#skill .row {
margin-right: -15px;
margin-left: -15px;
padding: 15px 150px;
}
div#skill .circle {
height: 120px;
width: 120px;
border: 5px solid #ccc;
border-top-color: orange;
border-radius: 60px;
background-color: #74002f;
/*Making the top border to spin*/
animation: spin 2s linear infinite;
}
div#skill .circle:after {
content: url(../img/icons/arrow-point-to-right.png);
position: absolute;
top: 25px;
right: 0;
}
div#skill .circle.last:after{
display: none;
}
.circle .caption {
font-weight: bold;
padding: 20px 24px;
}
.caption h6 {
font-size: 15px;
}
/*Animation on circle*/
#keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div id="skill">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>My development process</h3>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>1</h6>
<h6>Concept</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>2</h6>
<h6>Design</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>3</h6>
<h6>Code</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle last">
<div class="caption text-center">
<h6 class="text-center">4</h6>
<h6 class="text-center">Launch</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>about my skills</h3>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
Please help me out! Will really appreciate your help in this.Thank you in advance!
div#skill {
/*background: url(../img/white.jpg) center no-repeat;
background-size: cover;*/
background-color: rgba(144, 0, 64, 0.8);
color: #fff;
padding: 10px 0;
}
div#skill h3 {
color: #fff;
text-transform: none;
}
div#skill .row {
margin-right: -15px;
margin-left: -15px;
padding: 15px 150px;
}
div#skill .circle {
height: 120px;
width: 120px;
border: 5px solid #ccc;
border-top-color: orange;
border-radius: 50%;
background-color: #74002f;
/*Making the top border to spin*/
animation: spin 2s linear infinite;
}
div#skill .circle:after {
content: url(../img/icons/arrow-point-to-right.png);
position: absolute;
top: 25px;
right: 0;
}
div#skill .circle.last:after {
display: none;
}
.circle .caption {
font-weight: bold;
padding: 20px 24px;
}
.caption h6 {
font-size: 15px;
}
/*Animation on circle*/
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.col-md-3 {
position: relative;
}
.caption {
position: absolute;
z-index: 10;
text-align: center;
left: 65px; /* (120px width + 5+5px border )/2 */
transform: translate(-50%, 0);
}
<div id="skill">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>My development process</h3>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="caption text-center">
<h6>1</h6>
<h6>Concept</h6>
</div>
<div class="circle">
</div>
</div>
<div class="col-md-3">
<div class="caption text-center">
<h6>2</h6>
<h6>Design</h6>
</div>
<div class="circle">
</div>
</div>
<div class="col-md-3">
<div class="caption text-center">
<h6>3</h6>
<h6>Code</h6>
</div>
<div class="circle">
</div>
</div>
<div class="col-md-3">
<div class="caption text-center">
<h6 class="text-center">4</h6>
<h6 class="text-center">Launch</h6>
</div>
<div class="circle last">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>about my skills</h3>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
The solution is to make another div that will be behind the .circle with position:absolute; that how, it will "take" the .circle size but not contains the .circle content.
div#skill {
/*background: url(../img/white.jpg) center no-repeat;
background-size: cover;*/
background-color: rgba(144, 0, 64,0.8);
color: #fff;
padding: 10px 0;
}
div#skill h3 {
color: #fff;
text-transform: none;
}
div#skill .row {
margin-right: -15px;
margin-left: -15px;
padding: 15px 150px;
}
div#skill .circle {
position:relative;
height: 120px;
width: 120px;
border: 5px solid #ccc;
/*border-top-color: orange;*/
border-radius: 50%;
background-color: #74002f;
}
div#skill .circle:after {
content: url(../img/icons/arrow-point-to-right.png);
position: absolute;
top: 25px;
right: 0;
}
div#skill .circle.last:after{
display: none;
}
.circle .caption {
font-weight: bold;
padding: 20px 24px;
position:relative;
z-index:1;
}
.caption h6 {
font-size: 15px;
}
.circle-rotate {
height: 100%;
width: 100%;
border-top: 5px solid orange;
border-radius: 60px;
background-color: #74002f;
/*Making the top border to spin*/
animation: spin 2s linear infinite;
position:absolute;
top:0;
left:0;
}
/*Animation on circle*/
#keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div id="skill">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>My development process</h3>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="circle">
<div class="circle-rotate"></div>
<div class="caption text-center">
<h6>1</h6>
<h6>Concept</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>2</h6>
<h6>Design</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>3</h6>
<h6>Code</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle last">
<div class="caption text-center">
<h6 class="text-center">4</h6>
<h6 class="text-center">Launch</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>about my skills</h3>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
I'm trying to create a footer class however it seems to be at the bottom of my .body-wrap class as opposed to the actual page.
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
border: 1px black solid;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
}
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>
I'm also using a bootstrap sidebar template. Found here: http://startbootstrap.com/template-overviews/simple-sidebar/
Help would be appreciated.
Please try to add this code:
.footer-wrap {
border: 1px black solid;
position: fixed;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
width: 100%;
bottom: 0;
left: 0;
}
Use position:fixed with bottom:0 it will remain stable at bottom of page
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
border: 1px black solid;
position: fixed;
bottom:0;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
}
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>
You would need position: fixed and bottom: 0 on your footer-wrap. Check the update below!
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
border: 1px black solid;
position: fixed;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
bottom: 0;
left: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>
.body-wrap {
height: 100%;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
}
.footer-wrap {
width:100%;
border: 1px black solid;
position: absolute;
bottom:0px;
z-index: 10;
height: 3em;
margin-top: -3em;
text-align: center;
}
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="header-wrap">
<a href="#menu-toggle" class="menu-toggle">
<img class="hamburger-toggle" src="./img/menu.svg">
</a>
<img class="logo" src="./img/Spark.svg">
<img class="text-logo" src="./img/Spark-grey-text.svg">
</div>
<div class="body-wrap">
<h1>Hi Dave.</h1>
<h2>Got an idea? Share it on Spark.</h2>
</div>
<div class="footer-wrap">
<p>footer text.</p>
</div>
</div>
</div>
</div>
</div>
Add width and height to your .body-wrap and width to footer too. Changes footer position as in below codes.
.body-wrap {
width:200px;
height: 200px;
padding-top: 3%;
padding-left: 20%;
padding-right: 20%;
background:#111;
color:#fff;
}
.footer-wrap {
border: 1px black solid;
z-index: 9;
height: 3em;
text-align: center;
background:#f22;
bottom:0;
position:absolute;
width:100%;
}
I'm trying to create CSS styles that LOOK like a flip counter but don't actually function as one. I've got the general look and feel figured out, but I can't seem to get my box-shadow to overlap the display number.
This is what I have so far:
.numberwrapper {
width: 50px;
height: 90px;
background-color: black;
border-radius: 5px;
position: relative;
display: inline-block;
}
.shadow {
width: 100%;
height: 50%;
z-index: 100;
box-shadow: 0px 5px 4px -2px #888888;
}
.number {
font-family: 'Tahoma', sans-serif;
top: -90;
color: #ffffff;
font-size: 85px;
line-height: 0px;
text-align: center;
}
.bigcomma {
font-family: 'Tahoma', sans-serif;
font-size: 85px;
color: black;
}
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
1
</div>
</div>
<span class="bigcomma">,</span>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
2
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
3
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
4
</div>
</div>
Like I said, my biggest issue is that I can't get my .shadow div to show up on top of the number.
Add "position: relative" to .shadow for the z-index to kick in:
.numberwrapper {
width: 50px;
height: 90px;
background-color: black;
border-radius: 5px;
position: relative;
display: inline-block;
}
.shadow {
width: 100%;
height: 50%;
z-index: 100;
box-shadow: 0px 5px 4px -2px #888888;
position: relative;
}
.number {
font-family: 'Tahoma', sans-serif;
top: -90;
color: #ffffff;
font-size: 85px;
line-height: 0px;
text-align: center;
}
.bigcomma {
font-family: 'Tahoma', sans-serif;
font-size: 85px;
color: black;
}
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
1
</div>
</div>
<span class="bigcomma">,</span>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
2
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
3
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
4
</div>
</div>