I'm trying to fill a div with an carousel. I got it to work but the carousel wouldn't fill the width of the entire div and I can't seem to be able to get it to work.
I made a jsfiddle to let you see:
https://jsfiddle.net/svdvem97/
I'd like to fill the div with just a little bit of padding on the sides, but whatever I try, the width of the carousel wouldn't change.
Thanks in advance.
#wrapper
{
background: rgba(162,162,162,.1);
}
#banner-wrapper
{
overflow: hidden;
padding: 3em 0em;
background: #E24E2A;
}
#banner
{
overflow: hidden;
width: 1000px;
padding: 0px 100px;
text-align: center;
color: rgba(255,255,255,.7);
border-bottom: 2px solid #E3E3E3;
}
#banner a
{
color: rgba(255,255,255,.9);
}
#banner .box-left
{
float: left;
}
#banner .box-right
{
float: right;
}
#banner h2
{
margin: 0em;
padding: 0em;
font-weight: 400;
font-size: 1.6em;
color: #F8F8FF;
}
#banner span
{
display: block;
padding-top: 0.20em;
text-transform: uppercase;
font-size: 1.2em;
color: #A2A2A2;
}
.carousel {
position:relative;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
margin-top: 10px;
margin-bottom: 10px;
}
.carousel-inner {
position: relative;
overflow: hidden;
}
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
}
.carousel-item img {
display: block;
height: auto;
max-width: 100%;
}
.carousel-control {
background: rgba(0, 0, 0, 0.28);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: none;
font-size: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.8);
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-indicators li {
display: inline-block;
margin: 0 5px;
}
.carousel-bullet {
color: #fff;
cursor: pointer;
display: block;
font-size: 35px;
}
.carousel-bullet:hover {
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
color: #428bca;
}
#title {
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
<div id="wrapper" class= "container">
<div id="banner" class="container">
<div class="carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item">
<img src="https://fakeimg.pl/2000x300/0079D8/fff/?text=Test">
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="https://fakeimg.pl/2000x300/DC5732/fff/?text=Test">
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="http://fakeimg.pl/2000x300/289672/fff/?text=Test">
</div>
<label for="carousel-3" class="carousel-control prev control-1">‹</label>
<label for="carousel-2" class="carousel-control next control-1">›</label>
<label for="carousel-1" class="carousel-control prev control-2">‹</label>
<label for="carousel-3" class="carousel-control next control-2">›</label>
<label for="carousel-2" class="carousel-control prev control-3">‹</label>
<label for="carousel-1" class="carousel-control next control-3">›</label>
<ol class="carousel-indicators">
<li>
<label for="carousel-1" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-2" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-3" class="carousel-bullet">•</label>
</li>
</ol>
</div>
</div>
</div>
</div>
Added style to #banner class
#wrapper
{
background: rgba(162,162,162,.1);
}
#banner-wrapper
{
overflow: hidden;
padding: 3em 0em;
background: #E24E2A;
}
#banner
{
overflow: hidden;
/* set width to 100% */
width: 98%;
/* delete the padding */
/* added margin */
margin :0 1%;
text-align: center;
color: rgba(255,255,255,.7);
border-bottom: 2px solid #E3E3E3;
}
#banner a
{
color: rgba(255,255,255,.9);
}
#banner .box-left
{
float: left;
}
#banner .box-right
{
float: right;
}
#banner h2
{
margin: 0em;
padding: 0em;
font-weight: 400;
font-size: 1.6em;
color: #F8F8FF;
}
#banner span
{
display: block;
padding-top: 0.20em;
text-transform: uppercase;
font-size: 1.2em;
color: #A2A2A2;
}
.carousel {
position:relative;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
margin-top: 10px;
margin-bottom: 10px;
}
.carousel-inner {
position: relative;
overflow: hidden;
}
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
}
.carousel-item img {
display: block;
height: auto;
max-width: 100%;
}
.carousel-control {
background: rgba(0, 0, 0, 0.28);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: none;
font-size: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.8);
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-indicators li {
display: inline-block;
margin: 0 5px;
}
.carousel-bullet {
color: #fff;
cursor: pointer;
display: block;
font-size: 35px;
}
.carousel-bullet:hover {
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
color: #428bca;
}
#title {
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
<div id="wrapper" class= "container">
<div id="banner" class="container">
<div class="carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item">
<img src="https://fakeimg.pl/2000x300/0079D8/fff/?text=Test">
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="https://fakeimg.pl/2000x300/DC5732/fff/?text=Test">
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="http://fakeimg.pl/2000x300/289672/fff/?text=Test">
</div>
<label for="carousel-3" class="carousel-control prev control-1">‹</label>
<label for="carousel-2" class="carousel-control next control-1">›</label>
<label for="carousel-1" class="carousel-control prev control-2">‹</label>
<label for="carousel-3" class="carousel-control next control-2">›</label>
<label for="carousel-2" class="carousel-control prev control-3">‹</label>
<label for="carousel-1" class="carousel-control next control-3">›</label>
<ol class="carousel-indicators">
<li>
<label for="carousel-1" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-2" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-3" class="carousel-bullet">•</label>
</li>
</ol>
</div>
</div>
</div>
</div>
1) you defined padding:0 100px; this shift #banner to right.
2) you use of width:1000px,if width browser be less than 1000px,scroll is created,so use width:100% and max-width:1000px;
#banner {
width: 100%;<----------------------Changed
padding: 0;<-----------------------Changed
max-width:1000px;<-----------------Changed
//more code...
}
#wrapper {
background: rgba(162,162,162,.1);
}
#banner-wrapper {
overflow: hidden;
padding: 3em 0em;
background: #E24E2A;
}
#banner {
overflow: hidden;
width: 100%;
max-width:1000px;
padding: 0px;
text-align: center;
color: rgba(255,255,255,.7);
border-bottom: 2px solid #E3E3E3;
}
#banner a {
color: rgba(255,255,255,.9);
}
#banner .box-left {
float: left;
}
#banner .box-right {
float: right;
}
#banner h2 {
margin: 0em;
padding: 0em;
font-weight: 400;
font-size: 1.6em;
color: #F8F8FF;
}
#banner span {
display: block;
padding-top: 0.20em;
text-transform: uppercase;
font-size: 1.2em;
color: #A2A2A2;
}
.carousel {
position:relative;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
margin-top: 10px;
margin-bottom: 10px;
}
.carousel-inner {
position: relative;
overflow: hidden;
}
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
position: absolute;
opacity: 0;
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
}
.carousel-item img {
display: block;
height: auto;
max-width: 100%;
}
.carousel-control {
background: rgba(0, 0, 0, 0.28);
border-radius: 50%;
color: #fff;
cursor: pointer;
display: none;
font-size: 40px;
height: 40px;
line-height: 35px;
position: absolute;
top: 50%;
-webkit-transform: translate(0, -50%);
cursor: pointer;
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
text-align: center;
width: 40px;
z-index: 10;
}
.carousel-control.prev {
left: 2%;
}
.carousel-control.next {
right: 2%;
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.8);
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
display: block;
}
.carousel-indicators {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
bottom: 2%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
.carousel-indicators li {
display: inline-block;
margin: 0 5px;
}
.carousel-bullet {
color: #fff;
cursor: pointer;
display: block;
font-size: 35px;
}
.carousel-bullet:hover {
color: #aaaaaa;
}
#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
color: #428bca;
}
#title {
width: 100%;
position: absolute;
padding: 0px;
margin: 0px auto;
text-align: center;
font-size: 27px;
color: rgba(255, 255, 255, 1);
font-family: 'Open Sans', sans-serif;
z-index: 9999;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
<div id="wrapper" class= "container">
<div id="banner" class="container">
<div class="carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="carousel-item">
<img src="https://fakeimg.pl/2000x300/0079D8/fff/?text=Test">
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="https://fakeimg.pl/2000x300/DC5732/fff/?text=Test">
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="carousel-item">
<img src="http://fakeimg.pl/2000x300/289672/fff/?text=Test">
</div>
<label for="carousel-3" class="carousel-control prev control-1">‹</label>
<label for="carousel-2" class="carousel-control next control-1">›</label>
<label for="carousel-1" class="carousel-control prev control-2">‹</label>
<label for="carousel-3" class="carousel-control next control-2">›</label>
<label for="carousel-2" class="carousel-control prev control-3">‹</label>
<label for="carousel-1" class="carousel-control next control-3">›</label>
<ol class="carousel-indicators">
<li>
<label for="carousel-1" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-2" class="carousel-bullet">•</label>
</li>
<li>
<label for="carousel-3" class="carousel-bullet">•</label>
</li>
</ol>
</div>
</div>
</div>
</div>
Related
My menu box has more content to show but i cannot scroll down to see that content , it just disappears. I have tried doing overflow-y: auto; but does not work.
Here is my code
<div class="nav-cont d-flex align-items-center justify-content-end">
<div class="col-md-3">
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box d-flex flex-column ">
<div class="menu-title-container d-flex align-items-center justify-content-center">
<p class="menu-title">Most Popular</p>
</div>
<div class="menu-line-break"></div>
<li><a class="menu__item" href="#">Batteries</a></li>
<li><a class="menu__item" href="#">Engine Oil</a></li>
<li><a class="menu__item" href="#">Spark Plugs</a></li>
<li><a class="menu__item" href="#">Tyres</a></li>
<li class="menu-btn-expand"><a class="menu__item" href="#">Show More</a></li>
<div class="menu-line-break"></div>
<div class="menu-title-container d-flex align-items-center justify-content-center">
<p class="menu-title">Shop Deals</p>
</div>
<div class="menu-line-break"></div>
<li><a class="menu__item" href="#">Top Deals</a></li>
<div class="menu-line-break"></div>
<div class="menu-title-container d-flex align-items-center justify-content-center">
<p class="menu-title">Shop By</p>
</div>
<div class="menu-line-break"></div>
<li><a class="menu__item" href="#">By Make</a></li>
<li><a class="menu__item" href="#">By Model</a></li>
<div class="menu-line-break"></div>
<div class="menu-title-container d-flex align-items-center justify-content-center">
<p class="menu-title">Trustworthy Advice</p>
</div>
</ul>
</div>
</div>
Here is the CSS
/*Hamburger Menu*/
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked ~ .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
top: 0;
transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
visibility: visible;
left: 0;
}
.menu__btn {
display: flex;
align-items: center;
position: relative;
top: -1rem;
left: 3rem;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 5px;
background-color: #616161;
transition-duration: 0.25s;
}
.menu__btn > span::before {
content: "";
top: -8px;
}
.menu__btn > span::after {
content: "";
top: 8px;
}
.menu__box {
display: block;
position: fixed;
visibility: hidden;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 1rem 0;
list-style: none;
background-color: #fff;
box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
border-right: 1px solid black;
border-top: 1px solid black;
overflow-y: auto;
transition-duration: 0.25s;
}
.menu__box li a {
font-size: 0.8rem;
font-family: "Poppins";
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
border-top: none;
transition-duration: 0.25s;
}
.menu__item:hover {
background-color: #f5f5f5;
}
.menu-line-break {
background-color: #f5f5f5;
width: 80%;
height: 0.2rem;
margin: 0.5rem auto;
}
.menu-btn-expand {
text-decoration: underline;
}
.menu-title-container {
width: 100%;
}
I appreciate the help in advance. Thank you. I do not know where the problem is from , I am a bit new to this .
I removed the overflow-y: auto; and added overflow: auto; removing the hidden part from either side.
.menu__box {
display: block;
position: fixed;
visibility: hidden;
left: -100%;
width: 300px;
height: calc(100% - 100px);
margin: 0;
padding: 1rem 0;
list-style: none;
background-color: #fff;
box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
border-right: 1px solid black;
border-top: 1px solid black;
overflow: auto;
transition-duration: 0.25s;
}
I've come up with the following solution for the toggle switch:
.cookiemanagement__switchWrapper {
display: flex;
align-items: center;
}
.cookiemanagement__switchWrapper:last-of-type {
margin-top: 15px;
}
.cookiemanagement__switch {
display: inline-block;
position: relative;
}
.cookiemanagement__switchInput {
cursor: pointer;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 1;
}
.cookiemanagement__switchToggle {
align-items: center;
background-color: #9a3d37;
border-radius: 50px;
display: flex;
height: 24px;
justify-content: space-between;
position: relative;
transition: background-color ease-out 0.3s;
z-index: 0;
}
.cookiemanagement__switchToggle:before {
background: #fff;
box-shadow: 1px 0 2px #646464;
border-radius: 50%;
border: 1px solid #aaaaaa;
content: "";
display: block;
height: 24px;
left: 0;
position: absolute;
top: 0;
transition: 0.2s ease-out;
width: 24px;
z-index: 2;
}
.cookiemanagement__switchToggleValue {
text-transform: uppercase;
line-height: normal;
transition: opacity 0.2s ease-out 0.1s;
}
.cookiemanagement__switchToggleValue--on {
margin: 0 4px 0 8px;
opacity: 0;
}
.cookiemanagement__switchToggleValue--off {
margin: 0 8px 0 4px;
opacity: 1;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle {
background-color: #6a7d39;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle:before {
left: calc(100% - 24px);
box-shadow: -1px 0 2px #646464;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--on {
opacity: 1;
}
.cookiemanagement__switchInput:checked ~ .cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--off {
opacity: 0;
}
.cookiemanagement__switchLabel {
margin-left: 15px;
}
<div class="cookiemanagement__switch">
<input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
<div class="cookiemanagement__switchToggle">
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">yes</span>
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">no</span>
</div>
</div>
<div class="cookiemanagement__switch">
<input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
<div class="cookiemanagement__switchToggle">
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">diakh</span>
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">ara</span>
</div>
</div>
However, I have some issues with supporting the internationalization of the values. Since right now the width of the whole element is generated from the width of two children which is "YES" and not "NO" text.
But if longer values are used like "DIAKH" and "ARA" (Georgian) the element looks very wide.
So I am investigating the way to make the whole component width to equal: width of the biggest children (text length) + 8px + 26px
8px - margin between circle and text (red rectangle part)
26px - width/height of the circle (orange rectangle part)
Below is the illustration of what is being intended to describe, where DIAKH text represents the biggest child.
You can achieve that using flexbox on the parent of this switchs and the width: fit-content property:
ul {
display: flex;
flex-direction: column;
width: fit-content;
}
.cookiemanagement__switchWrapper {
display: flex;
align-items: center;
width: 100%;
}
.cookiemanagement__switchWrapper:last-of-type {
margin-top: 15px;
}
.cookiemanagement__switch {
display: inline-block;
position: relative;
width: 100%;
}
.cookiemanagement__switchInput {
cursor: pointer;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 1;
}
.cookiemanagement__switchToggle {
align-items: center;
background-color: #9a3d37;
border-radius: 50px;
display: flex;
height: 24px;
justify-content: space-between;
position: relative;
transition: background-color ease-out 0.3s;
z-index: 0;
}
.cookiemanagement__switchToggle:before {
background: #fff;
box-shadow: 1px 0 2px #646464;
border-radius: 50%;
border: 1px solid #aaaaaa;
content: "";
display: block;
height: 24px;
left: 0;
position: absolute;
top: 0;
transition: 0.2s ease-out;
width: 24px;
z-index: 2;
}
.cookiemanagement__switchToggleValue {
text-transform: uppercase;
line-height: normal;
transition: opacity 0.2s ease-out 0.1s;
}
.cookiemanagement__switchToggleValue--on {
margin: 0 4px 0 8px;
opacity: 0;
}
.cookiemanagement__switchToggleValue--off {
margin: 0 8px 0 4px;
opacity: 1;
}
.cookiemanagement__switchInput:checked~.cookiemanagement__switchToggle {
background-color: #6a7d39;
}
.cookiemanagement__switchInput:checked~.cookiemanagement__switchToggle:before {
left: calc(100% - 24px);
box-shadow: -1px 0 2px #646464;
}
.cookiemanagement__switchInput:checked~.cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--on {
opacity: 1;
}
.cookiemanagement__switchInput:checked~.cookiemanagement__switchToggle .cookiemanagement__switchToggleValue--off {
opacity: 0;
}
.cookiemanagement__switchLabel {
margin-left: 15px;
}
<ul>
<li class="cookiemanagement__switchWrapper">
<div class="cookiemanagement__switch">
<input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
<div class="cookiemanagement__switchToggle">
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">yes</span>
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">no</span>
</div>
</div>
</li>
<li class="cookiemanagement__switchWrapper">
<div class="cookiemanagement__switch">
<input class="cookiemanagement__switchInput" id="id1140334900" role="switch" type="checkbox" value="3" name="analytics3">
<div class="cookiemanagement__switchToggle">
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--on">diakh</span>
<span class="cookiemanagement__switchToggleValue cookiemanagement__switchToggleValue--off">ara</span>
</div>
</div>
</li>
</ul>
One of the possible solutions is using a negative margin-top to put yes and no one behind another, while keeping them both in the flow so the bigger one would give its width to the parent:
p * {
box-sizing: border-box;
margin: 0;
padding: 0
}
label {
position: relative;
display: inline-block;
margin: 0 0 0 .5em;
color: #fff;
}
input {
display: none
}
.key {
position: absolute;
z-index: 1;
top: -.2em;
left: -.05em;
width: 2em;
height: 2em;
border: solid 1px rgba(0, 0, 0, .3);
border-radius: 55%;
box-shadow: .1em .1em .1em -.05em rgba(0, 0, 0, .5);
background: ivory;
transition: .3s;
}
.yes,
.no {
display: block;
margin: 0;
border-radius: .8em;
line-height: 1.6;
box-shadow: inset .1em .1em .1em -.05em rgba(0, 0, 0, .3);
transition: opacity .3s;
}
.yes {
padding: 0 2.5em 0 .5em;
background: forestgreen;
opacity: 0;
}
.no {
margin-top: -1.6em;
padding: 0 .5em 0 2.5em;
text-align: right;
background: firebrick;
opacity: 1;
}
:checked~.key {
left: calc(100% - 2em);
}
:checked~.yes {
opacity: 1
}
:checked~.no {
opacity: 0
}
<p>English:
<label>
<input type="checkbox" checked>
<span class="key"></span>
<span class="yes">YES</span>
<span class="no">NO</span>
</label>
</p>
<p>Georgian:
<label>
<input type="checkbox">
<span class="key"></span>
<span class="yes">DIAKH</span>
<span class="no">ARA</span>
</label>
</p>
<p>Scots Gaelic:
<label>
<input type="checkbox" checked>
<span class="key"></span>
<span class="yes">THA</span>
<span class="no">CHAN EIL</span>
</label>
</p>
Here is an idea with CSS grid where the trick is to make both element inside the same area. You can also keep the same HTML structure.
Relevant code:
.switchToggle {
...
display: grid;
align-items:center;
...
}
.switchToggle > * {
grid-area:1/1;
}
.switchToggleValue--on {
padding-right:32px;
}
.switchToggleValue--off {
padding-left:32px;
text-align:right;
}
Full code:
.switch {
display: inline-block;
position: relative;
margin:5px;
}
.switchInput {
cursor: pointer;
height: 100%;
opacity: 0;
position: absolute;
width: 100%;
z-index: 1;
}
.switchToggle {
background-color: #9a3d37;
border-radius: 50px;
display: grid;
align-items:center;
height: 24px;
position: relative;
transition: background-color ease-out 0.3s;
z-index: 0;
}
.switchToggle > * {
grid-area:1/1;
}
.switchToggleValue--on {
padding-right:32px;
}
.switchToggleValue--off {
padding-left:32px;
text-align:right;
}
.switchToggle:before {
content: "";
background: #fff;
box-shadow: 1px 0 2px #646464;
border-radius: 50%;
border: 1px solid #aaaaaa;
height: 24px;
left: 0;
position: absolute;
top: 0;
transition: 0.2s ease-out;
width: 24px;
z-index: 2;
}
.switchToggleValue {
text-transform: uppercase;
line-height: normal;
transition: opacity 0.2s ease-out 0.1s;
}
.switchToggleValue--on {
margin: 0 4px 0 8px;
opacity: 0;
}
.switchToggleValue--off {
margin: 0 8px 0 4px;
opacity: 1;
}
.switchInput:checked ~ .switchToggle {
background-color: #6a7d39;
}
.switchInput:checked ~ .switchToggle:before {
left: calc(100% - 24px);
box-shadow: -1px 0 2px #646464;
}
.switchInput:checked ~ .switchToggle .switchToggleValue--on {
opacity: 1;
}
.switchInput:checked ~ .switchToggle .switchToggleValue--off {
opacity: 0;
}
.switchLabel {
margin-left: 15px;
}
<div class="switch">
<input class="switchInput" role="switch" type="checkbox" value="3" name="analytics2">
<div class="switchToggle">
<span class="switchToggleValue switchToggleValue--on">yes</span>
<span class="switchToggleValue switchToggleValue--off">no</span>
</div>
</div>
<br>
<div class="switch">
<input class="switchInput" role="switch" type="checkbox" value="3" name="analytics2">
<div class="switchToggle">
<span class="switchToggleValue switchToggleValue--on">no</span>
<span class="switchToggleValue switchToggleValue--off">yes</span>
</div>
</div>
<br>
<div class="switch">
<input class="switchInput" role="switch" type="checkbox" value="3" name="analytics2">
<div class="switchToggle">
<span class="switchToggleValue switchToggleValue--on">diakh</span>
<span class="switchToggleValue switchToggleValue--off">ara</span>
</div>
</div>
<br>
<div class="switch">
<input class="switchInput" role="switch" type="checkbox" value="3" name="analytics2">
<div class="switchToggle">
<span class="switchToggleValue switchToggleValue--on">ara</span>
<span class="switchToggleValue switchToggleValue--off">diakh</span>
</div>
</div>
This question already has answers here:
Bootstrap Vertical Center contents in row
(2 answers)
Closed 4 years ago.
I'm going crazy being unable to align some elements to the centre of a Bootstrap row. The only thing that seems to work is positioning some elements as absolute relative to the row, but I would like to avoid this as it would be an issue adjusting the horizontal gaps between objects when it comes to responsiveness.
Could you advice a more efficient way to vertically align all the content within the following row element? My code below:
PS. I'm using bootstrap 3.0 and SCSS
HTML
<div class="standard-container">
<div class="row title-menu-row">
<div class="col-md-4 title-menu-col">
<h1>Your predictions</h1>
</div>
<div class="col-md-7 title-menu-col">
<span class="badge badge-error pmd-ripple-effect">12</span>
<span>Not predicted yet</span>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
</div>
<div class="col-md-1 title-menu-col icons">
<a href="#">
<span class="fa-layers fa-fw" style="">
<i class="fal fa-female" data-fa-transform="shrink-3 up-1 left-6"></i>
<i class="fal fa-male" data-fa-transform="shrink-3 down-1"></i>
</span>
</a>
<a href="#">
<i class="fal fa-table"></i>
</a>
</div>
</div>
SCSS
// --------------- Toggle switch ---------------
.onoffswitch {
position: relative; width: 48px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
height: 24px; padding: 0; line-height: 24px;
border: 2px solid #F1F1F5; border-radius: 24px;
background-color: #F1F1F5;
transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
content: "";
display: block; width: 24px; margin: 0px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 22px;
border: 2px solid #F1F1F5; border-radius: 24px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #2DC76D;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #2DC76D;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
right: 0px;
}
//---------------all else -----------------
.standard-container {
padding: 0;
margin: 170px 0 0 155px;
.title-menu-row, .title-menu-col {
margin: 0;
padding: 0;
border: 1px solid red;
}
h1 {
color: rgba(117, 64, 238, 1);
margin: 0;
}
}
.title-menu-row {
margin-bottom: 100px !important;
vertical-align: top;
.title-menu-col {
}
.onoffswitch {
display: inline-block;
.onoffswitch-label {
margin: 0;
}
}
.icons {
}
.icon > a, .icons > a {
color: rgba(117, 64, 238, 1);
font-size: 20px;
}
.icon:first-child > a {
margin-right: 200px;
}
}
Here's a CodePen illustrating the issue.
https://codepen.io/alopez25/live/PRNayZ
Try -
display: flex;
align-items:center;
Here jsfiddle -
https://jsfiddle.net/5v35gvr7/1/
<div class="wrap">
<div class="inner-wrap">Hello</div>
<div class="inner-wrap">Hello</div>
</div>
.wrap{
height: 30px;
background: green;
display: flex;
align-items: center;
}
.inner-wrap{
margin: 0px 10px;
background: blue;
display: inline-block;
}
Created a sample fiddle from your code
Added a small css change
.container{
display: flex;
align-items: center;
width: 500px;
height: 100px;
border: 1px solid #888;
justify-content: center; //remove horizontal align by removing this
}
.onoffswitch {
position: relative; width: 48px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
height: 24px; padding: 0; line-height: 24px;
border: 2px solid #F1F1F5; border-radius: 24px;
background-color: #F1F1F5;
transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
content: "";
display: block; width: 24px; margin: 0px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 22px;
border: 2px solid #F1F1F5; border-radius: 24px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
background-color: #2DC76D;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
border-color: #2DC76D;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
right: 0px;
}
.container{
display: flex;
align-items: center;
width: 500px;
height: 100px;
border: 1px solid #888;
justify-content: center;
}
.container>*{
margin: 0px 3px;
}
<div class="container">
<span class="badge badge-error pmd-ripple-effect">12</span>
<span>Not predicted yet</span>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch"></label>
</div>
</div>
Edit the Fiddle here
I tried to make a small login box that opens when you hover over the login item in the menu bar, keeping in mind that the user doesn't have to go to another page to log in but I can't get it working.
Please help
body {
background-image: url("back.jpg");
background-attachment: fixed;
}
#container {
height: 1000px;
}
#head {
position: absolute;
height: 150px;
width: 100%;
background-color: #ffffff;
right: 0px;
left: 0px;
top: 0px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
.navigationmenu-main {
list-style-type: none;
overflow: hidden;
background-color: #333;
}
.navigationmenu-parent {
float: left;
}
.navigationmenu-child {
display: inline-block;
color: white;
width: 50px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.navigationmenu-child:hover {
background-color: #111;
}
.navigationmenu-child:hover + .navigationmenu-line {
width: 100%;
}
.navigationmenu-line {
height: 3px;
background-color: red;
width: 0%;
-webkit-transition: width .3s;
-webkit-transition-timing-function: ease;
}
#main {
position: relative;
height: 700px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
top: 155px;
bottom: 100px;
box-shadow: 4px 4px 3px 1px #4d4d4d;
}
#logo-image {
position: relative;
margin-top: 40px;
margin-left: 40px;
}
#logo-image:hover {
-webkit-animation: blur 0.5s ease-in;
}
#-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
50% {
-webkit-filter: blur(1px);
filter: blur(2px);
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
}
.login-parent {
float: right;
}
.login-child {
display: inline-block;
color: white;
width: 60px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.login-child:hover {
background-color: #111;
}
.login-child:hover + .navigationmenu-line {
width: 100%;
}
#loginbox {
display: block;
visibility: hidden;
position: absolute;
top: 132px;
right: 90px;
z-index: 999;
background: #a6a6a6;
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9);
border-radius: 3px 0 3px 3px;
-webkit-transition: padding .3s;
}
.loginchild:hover + .loginbox {
visibility: visible;
}
#loginform {
padding: 5px;
}
#loginelement {
padding: 5px;
}
<!DOCTYPE html>
<title>
Le Meridian | A home away from home
</title>
<body>
<div id="container">
<div id="head">
<img src="logo.png" id="logo-image" height="20%" width="20%">
<ul id="nav_bar" class="navigationmenu-main">
<li class="navigationmenu-parent">
A
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
B
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
C
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
D
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
E
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
F
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
G
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child">Sign Up</div>
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child" id="trigger">Login ▼</div>
<div class="navigationmenu-line">
</div>
<div id="loginbox">
<form id="loginform">
<input type="text" name="email" id="loginelement">
<br>
<br>
<input type="password" name="password" id="loginelement">
<br>
<br>
<input type="submit" name="loginsubmit" id="loginelement">
<input type="checkbox" name="loggedin" id="loginelement"> Stay Signed In
</form>
</div>
</li>
</ul>
</div>
<div id="main">
dsa
</div>
</div>
</body>
To achieve what want you need to replace the hover code with this code:
.login-parent:hover #loginbox {
visibility: visible;
}
And that keep the loginbox visible as long as the cursor is inside the <li> tag with the class .login-parent.
if you do the hover on the div loginchild it will only show when you hover on that div.
body {
background-image: url("back.jpg");
background-attachment: fixed;
}
#container {
height: 1000px;
}
#head {
position: absolute;
height: 150px;
width: 100%;
background-color: #ffffff;
right: 0px;
left: 0px;
top: 0px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
.navigationmenu-main {
list-style-type: none;
overflow: hidden;
background-color: #333;
}
.navigationmenu-parent {
float: left;
}
.navigationmenu-child {
display: inline-block;
color: white;
width: 50px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.navigationmenu-child:hover {
background-color: #111;
}
.navigationmenu-child:hover + .navigationmenu-line {
width: 100%;
}
.navigationmenu-line {
height: 3px;
background-color: red;
width: 0%;
-webkit-transition: width .3s;
-webkit-transition-timing-function: ease;
}
#main {
position: relative;
height: 700px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
top: 155px;
bottom: 100px;
box-shadow: 4px 4px 3px 1px #4d4d4d;
}
#logo-image {
position: relative;
margin-top: 40px;
margin-left: 40px;
}
#logo-image:hover {
-webkit-animation: blur 0.5s ease-in;
}
#-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
50% {
-webkit-filter: blur(1px);
filter: blur(2px);
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
}
.login-parent {
float: right;
}
.login-child {
display: inline-block;
color: white;
width: 60px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.login-child:hover {
background-color: #111;
}
.login-child:hover + .navigationmenu-line {
width: 100%;
}
#loginbox {
display: block;
visibility: hidden;
position: absolute;
top: 132px;
right: 90px;
z-index: 999;
background: #a6a6a6;
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9);
border-radius: 3px 0 3px 3px;
-webkit-transition: padding .3s;
}
.login-parent:hover #loginbox {
visibility: visible;
}
#loginform {
padding: 5px;
}
#loginelement {
padding: 5px;
}
<!DOCTYPE html>
<title>
Le Meridian | A home away from home
</title>
<body>
<div id="container">
<div id="head">
<img src="logo.png" id="logo-image" height="20%" width="20%">
<ul id="nav_bar" class="navigationmenu-main">
<li class="navigationmenu-parent">
A
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
B
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
C
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
D
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
E
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
F
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
G
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child">Sign Up</div>
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child" id="trigger">Login ▼</div>
<div class="navigationmenu-line">
</div>
<div id="loginbox">
<form id="loginform">
<input type="text" name="email" id="loginelement">
<br>
<br>
<input type="password" name="password" id="loginelement">
<br>
<br>
<input type="submit" name="loginsubmit" id="loginelement">
<input type="checkbox" name="loggedin" id="loginelement"> Stay Signed In
</form>
</div>
</li>
</ul>
</div>
<div id="main">
dsa
</div>
</div>
</body>
You had some typos on class names. Also the hover should be on the parent otherwise the box will not render properly. It will flicker as soon as your mouse focus gets out of the child class.
body {
background-image: url("back.jpg");
background-attachment: fixed;
}
#container {
height: 1000px;
}
#head {
position: absolute;
height: 150px;
width: 100%;
background-color: #ffffff;
right: 0px;
left: 0px;
top: 0px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
.navigationmenu-main {
list-style-type: none;
overflow: hidden;
background-color: #333;
}
.navigationmenu-parent {
float: left;
}
.navigationmenu-child {
display: inline-block;
color: white;
width: 50px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.navigationmenu-child:hover {
background-color: #111;
}
.navigationmenu-child:hover + .navigationmenu-line {
width: 100%;
}
.navigationmenu-line {
height: 3px;
background-color: red;
width: 0%;
-webkit-transition: width .3s;
-webkit-transition-timing-function: ease;
}
#main {
position: relative;
height: 700px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
top: 155px;
bottom: 100px;
box-shadow: 4px 4px 3px 1px #4d4d4d;
}
#logo-image {
position: relative;
margin-top: 40px;
margin-left: 40px;
}
#logo-image:hover {
-webkit-animation: blur 0.5s ease-in;
}
#-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
50% {
-webkit-filter: blur(1px);
filter: blur(2px);
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
}
}
.login-parent {
float: right;
}
.login-child {
display: inline-block;
color: white;
width: 60px;
text-align: center;
padding: 10px 16px;
text-decoration: none;
background-color: #333;
-webkit-transition: background-color .3s;
}
.login-child:hover {
background-color: #111;
}
.login-child:hover + .navigationmenu-line {
width: 100%;
}
#loginbox {
display: block;
visibility: hidden;
position: absolute;
top: 132px;
right: 90px;
z-index: 999;
background: #a6a6a6;
background-image: linear-gradient(top, #fff, #eee);
padding: 15px;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9);
border-radius: 3px 0 3px 3px;
-webkit-transition: padding .3s;
}
.login-parent:hover #loginbox {
visibility: visible;
}
#loginform {
padding: 5px;
}
#loginelement {
padding: 5px;
}
<!DOCTYPE html>
<title>
Le Meridian | A home away from home
</title>
<body>
<div id="container">
<div id="head">
<img src="logo.png" id="logo-image" height="20%" width="20%">
<ul id="nav_bar" class="navigationmenu-main">
<li class="navigationmenu-parent">
A
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
B
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
C
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
D
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
E
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
F
<div class="navigationmenu-line">
</div>
</li>
<li class="navigationmenu-parent">
G
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child">Sign Up</div>
<div class="navigationmenu-line">
</div>
</li>
<li class="login-parent">
<div class="login-child" id="trigger">Login ▼</div>
<div class="navigationmenu-line">
</div>
<div id="loginbox">
<form id="loginform">
<input type="text" name="email" id="loginelement">
<br>
<br>
<input type="password" name="password" id="loginelement">
<br>
<br>
<input type="submit" name="loginsubmit" id="loginelement">
<input type="checkbox" name="loggedin" id="loginelement"> Stay Signed In
</form>
</div>
</li>
</ul>
</div>
<div id="main">
dsa
</div>
</div>
</body>
I found the pure CSS Tabs that I want to to use in my WordPress posts in https://webdesignerhut.com/examples/pure-css-tabs/.
when I use in my post, it looks messy:
example
I used this HTML code into Wordpress text editor:
.tabs {
max-width: 90%;
float: none;
list-style: none;
padding: 0;
margin: 75px auto;
border-bottom: 4px solid #ccc;
}
.tabs:after {
content: '';
display: table;
clear: both;
}
.tabs input[type=radio] {
display:none;
}
.tabs label {
display: block;
float: left;
width: 33.3333%;
color: #ccc;
font-size: 30px;
font-weight: normal;
text-decoration: none;
text-align: center;
line-height: 2;
cursor: pointer;
box-shadow: inset 0 4px #ccc;
border-bottom: 4px solid #ccc;
-webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */
transition: all 0.5s;
}
.tabs label span {
display: none;
}
.tabs label i {
padding: 5px;
margin-right: 0;
}
.tabs label:hover {
color: #3498db;
box-shadow: inset 0 4px #3498db;
border-bottom: 4px solid #3498db;
}
.tab-content {
display: none;
width: 100%;
float: left;
padding: 15px;
box-sizing: border-box;
background-color:#ffffff;
}
.tab-content * {
-webkit-animation: scale 0.7s ease-in-out;
-moz-animation: scale 0.7s ease-in-out;
animation: scale 0.7s ease-in-out;
}
#keyframes scale {
0% {
transform: scale(0.9);
opacity: 0;
}
50% {
transform: scale(1.01);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.tabs [id^="tab"]:checked + label {
background: #FFF;
box-shadow: inset 0 4px #3498db;
border-bottom: 4px solid #3498db;
color: #3498db;
}
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3 {
display: block;
}
#media (min-width: 768px) {
.tabs i {
padding: 5px;
margin-right: 10px;
}
.tabs label span {
display: inline-block;
}
.tabs {
margin: 50px auto;
}
}
<div class="tabs">
<!-- Radio button and lable for #tab-content1 -->
<input type="radio" name="tabs" id="tab1" checked >
<label for="tab1">
<i class="fa fa-html5"></i><span>Tab-1</span>
</label>
<!-- Radio button and lable for #tab-content2 -->
<input type="radio" name="tabs" id="tab2">
<label for="tab2">
<i class="fa fa-css3"></i><span>Tab-2</span>
</label>
<!-- Radio button and lable for #tab-content3 -->
<input type="radio" name="tabs" id="tab3">
<label for="tab3">
<i class="fa fa-code"></i><span>Tab-3</span>
</label>
<div id="tab-content1" class="tab-content">
<h3>Tab-1 Title</h3>
<p>Tab-1 Content</p>
</div> <!-- #tab-content1 -->
<div id="tab-content2" class="tab-content">
<h3>Tab-2 Title</h3>
<p>Tab-2 Content</p>
</div> <!-- #tab-content2 -->
<div id="tab-content3" class="tab-content">
<h3>Tab-3 Title</h3>
<p>Tab-3 Content</p>
</div> <!-- #tab-content3 -->
</div>
what's wrong here?
I think your wordpress theme already contain the class name is tab so use the different class
just rename the tabs into tabs-s
and tab into tab-s
It may solve your problem try this..
use like below code:
<html>
<head>
<title> </title>
<style>
.tabs-s {
max-width: 90%;
float: none;
list-style: none;
padding: 0;
margin: 75px auto;
border-bottom: 4px solid #ccc;
}
.tabs-s:after {
content: '';
display: table;
clear: both;
}
.tabs-s input[type=radio] {
display:none;
}
.tabs-s label {
display: block;
float: left;
width: 33.3333%;
color: #ccc;
font-size: 30px;
font-weight: normal;
text-decoration: none;
text-align: center;
line-height: 2;
cursor: pointer;
box-shadow: inset 0 4px #ccc;
border-bottom: 4px solid #ccc;
-webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */
transition: all 0.5s;
}
.tabs-s label span {
display: none;
}
.tabs-s label i {
padding: 5px;
margin-right: 0;
}
.tabs-s label:hover {
color: #3498db;
box-shadow: inset 0 4px #3498db;
border-bottom: 4px solid #3498db;
}
.tab-content {
display: none;
width: 100%;
float: left;
padding: 15px;
box-sizing: border-box;
background-color:#ffffff;
}
.tab-content * {
-webkit-animation: scale 0.7s ease-in-out;
-moz-animation: scale 0.7s ease-in-out;
animation: scale 0.7s ease-in-out;
}
#keyframes scale {
0% {
transform: scale(0.9);
opacity: 0;
}
50% {
transform: scale(1.01);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.tabs-s [id^="tab"]:checked + label {
background: #FFF;
box-shadow: inset 0 4px #3498db;
border-bottom: 4px solid #3498db;
color: #3498db;
}
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3 {
display: block;
}
#media (min-width: 768px) {
.tabs-s i {
padding: 5px;
margin-right: 10px;
}
.tabs-s label span {
display: inline-block;
}
.tabs-s {
margin: 50px auto;
}
}
</style>
</head>
<body>
<div class="tabs-s">
<!-- Radio button and lable for #tab-content1 -->
<input type="radio" name="tabs-s" id="tab1" checked >
<label for="tab1">
<i class="fa fa-html5"></i><span>Tab-1</span>
</label>
<!-- Radio button and lable for #tab-content2 -->
<input type="radio" name="tabs-s" id="tab2">
<label for="tab2">
<i class="fa fa-css3"></i><span>Tab-2</span>
</label>
<!-- Radio button and lable for #tab-content3 -->
<input type="radio" name="tabs-s" id="tab3">
<label for="tab3">
<i class="fa fa-code"></i><span>Tab-3</span>
</label>
<div id="tab-content1" class="tab-content">
<h3>Tab-1 Title</h3>
<p>Tab-1 Content</p>
</div> <!-- #tab-content1 -->
<div id="tab-content2" class="tab-content">
<h3>Tab-2 Title</h3>
<p>Tab-2 Content</p>
</div> <!-- #tab-content2 -->
<div id="tab-content3" class="tab-content">
<h3>Tab-3 Title</h3>
<p>Tab-3 Content</p>
</div> <!-- #tab-content3 -->
</div>
</body>
</html>
Happy coding :)