So let say i have three images same height and width a, b, c. I want a to come in front with full size after than b with a bit small and left part should be covered behind a . and then c smaller than b left part cover by b right side.
i tried using positioning in these boxes like absolute, relative , fixed but in vain
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<center>
<div class="rcorners1">
<div class="text"><h1>Digital Card Details</h1></div>
</div>
<div class="rcorners2">
<div class="left-wrapper">
<img class="image1" src="./images/Page1.jpg" alt="failed" />
<img class="image2" src="./images/Page2.jpg" alt="failed" />
<img class="image3" src="./images/Page3.jpg" alt="failed" />
</div>
<!-- -->
</div>
</center>
</body>
</html>
.css
.rcorners1 {
border-radius: 70px;
/* background: #73ad21; */
background-image: url(./images/Background.jpg);
padding: 20px;
/* flex: auto; */
width: 950px;
height: 250px;
}
.rcorners2 {
border-radius: 25px;
background: white;
border: 1px solid brown;
/* border: brown; */
/* background-image: url(./images/Background.jpg); */
padding: 20px;
/* float: none; */
/* position: absolute; */
margin-top: -150px;
/* flex: auto; */
width: 800px;
height: 400px;
}
.text {
color: white;
}
.leftWrapper {
float: left;
width: 32%;
height: 650px;
}
.image1 {
position: fixed;
width: 260px;
padding: auto;
height: 380px;
margin: 1px;
/* padding: 4px; */
border: 4px solid white;
margin-left: -200px;
outline-style: groove;
outline-color: brown;
}
.image2 {
/* position: absolute; */
border: 4px solid white;
width: 220px;
height: 320px;
top: 30px;
left: 30px;
/* padding: auto; */
outline-style: groove;
outline-color: brown;
/* outline-width: 12px; */
/* border: 1px green solid; */
margin-bottom: 38px;
margin-left: -100px;
}
.image3 {
width: 150px;
/* position: relative; */
outline-style: groove;
border: 4px solid white;
/* outline-color: brown; */
height: 220px;
top: 30px;
left: 30px;
padding: auto;
margin-bottom: 100px;
/* margin-left: px; */
}
Output -
Output
But i want something like
Expected
This is starting to look like your "expected": https://codepen.io/kodmunki/pen/wvyJPbV
<div class="continer">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
.container {
position: relative;
}
.a,.b,.c {
position: absolute;
border: 1px solid #000;
}
.a {
width: 100px;
height: 100px;
background-color: #ff0000aa;
z-index: 3;
}
.b {
top: 20px;
left: 65px;
width: 75px;
height: 75px;
background-color: #ffff00aa;
z-index: 2;
}
.c {
top: 30px;
left: 125px;
width: 50px;
height: 50px;
background-color: #ff00ffaa;
z-index: 1;
}
Related
I'm making a home automation website, I have an image that looks like a garage door; I'm using the images as buttons and I'm placing them in a table to help sort them. Now When I resize the .garage_door and make it width: 20%; there's still whitespace to it's right as if it was full size. I've tried everything including adjusting the padding and the margins.
#charset "UTF-8";
/* Body */
body {
font-family: source-sans-pro;
background-color: #f2f2f2;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-style: normal;
font-weight: 200;
}
/* Container */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
height: 1000px;
background-color: #FFFFFF;
}
/* Navigation */
header {
min-height: none;
width: 100%;
height: 6%;
background-color: #E0115F;
border-bottom: 1px solid #2C9AB7;
}
.logo {
color: #fff;
font-weight: bold;
text-align: undefined;
width: 45%;
float: left;
margin-top: 15px;
margin-left: 25px;
letter-spacing: 4px;
font-size: 120%;
overflow: hidden;
}
.hero_header {
color: #FFFFFF;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
letter-spacing: 4px;
font-size: 50px;
}
.controls {
padding-top: 5px;
}
/* Hero Section */
.pi_logo_top{
position: relative;
float: right;
right: 15px;
top: 5px;
height: 85%;
max-width: 7%;
min-width: 4%;
}
.controls {
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 99%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */;
position: relative;
}
.table_controls {
border: 2px solid black;
margin: 0px;
padding: 0px;
position: relative;
float: center;
right: 35px;
}
.light_on {
position: relative;
width: 75%;
}
.light_off {
position: relative;
}
.garage_door {
width: 20%;
margin-right: 0px;
padding-right: 0px;
}
/* Mobile */
#media (max-width: 515px) {
.logo {
width: 75%;
float: left;
margin-top: 13px;
margin-right: 0px;
padding-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
align: center;
display: inline-block;
}
.pi_logo_top {
position: relative;
top: 5px;
max-width: 20%;
min-width: 10%;
}
.table_controls {
border: 2px solid black;
position: relative;
right: -15px;
}
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Raspberry Pi Home Automation</title>
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function changeImageLights() {
if (document.getElementById("imgClickAndChangeLight").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/ENZNUR3.png";
}
}
function changeImageGarage() {
if (document.getElementById("imgClickAndChangeGarage").src == "https://i.imgur.com/Ek2I5jk.png")
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/dfKYZHW.png";
}
else
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/Ek2I5jk.png";
}
}
function changeImageLightsOut() {
if (document.getElementById("imgClickAndChangeLightOut").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/ENZNUR3.png";
}
}
</script>
</head>
<body>
<div class="container">
<header> <a href="">
<h4 class="logo">Home Automation</h4>
<img src = "https://seeklogo.com/images/R/raspberry-pi-logo-8240ABBDFE-seeklogo.com.png" alt="Raspberry Pi Logo" class="pi_logo_top">
</a>
</header>
<div class="controls">
<table class="table_controls">
<tr>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLight" onclick="changeImageLights()" class="light_on"></td>
<td><img src = "https://i.imgur.com/Ek2I5jk.png" id="imgClickAndChangeGarage" onclick="changeImageGarage()" class="garage_door"></td>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLightOut" onclick="changeImageLightsOut()" class="light_on"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Use the following CSS and there are some repeated css for table_controls in your code. Remove the unwanted css.
#charset "UTF-8";
/* Body */
body {
font-family: source-sans-pro;
background-color: #f2f2f2;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-style: normal;
font-weight: 200;
}
/* Container */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
height: 1000px;
background-color: #FFFFFF;
}
/* Navigation */
header {
min-height: none;
width: 100%;
height: 6%;
background-color: #E0115F;
border-bottom: 1px solid #2C9AB7;
}
.logo {
color: #fff;
font-weight: bold;
text-align: undefined;
width: 45%;
float: left;
margin-top: 15px;
margin-left: 25px;
letter-spacing: 4px;
font-size: 120%;
overflow: hidden;
}
.hero_header {
color: #FFFFFF;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
letter-spacing: 4px;
font-size: 50px;
}
/* Hero Section */
.pi_logo_top{
position: relative;
float: right;
right: 15px;
top: 5px;
height: 85%;
max-width: 7%;
min-width: 4%;
}
.controls {
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 99%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */;
padding-top: 5px;
position: relative;
height: 90px;
}
.table_controls {
border: 2px solid black;
margin: 0px;
padding: 0px;
position: relative;
float: right;
}
.light_on {
position: relative;
width: 75%;
}
.light_off {
position: relative;
}
.garage_door {
width: 20%;
margin-right: 0px;
padding-right: 0px;
}
/* Mobile */
#media (max-width: 515px) {
.logo {
width: 75%;
float: left;
margin-top: 13px;
margin-right: 0px;
padding-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
align: center;
display: inline-block;
}
.pi_logo_top {
position: relative;
top: 5px;
max-width: 20%;
min-width: 10%;
}
}
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Raspberry Pi Home Automation</title>
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function changeImageLights() {
if (document.getElementById("imgClickAndChangeLight").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLight").src = "https://i.imgur.com/ENZNUR3.png";
}
}
function changeImageGarage() {
if (document.getElementById("imgClickAndChangeGarage").src == "https://i.imgur.com/Ek2I5jk.png")
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/dfKYZHW.png";
}
else
{
document.getElementById("imgClickAndChangeGarage").src = "https://i.imgur.com/Ek2I5jk.png";
}
}
function changeImageLightsOut() {
if (document.getElementById("imgClickAndChangeLightOut").src == "https://i.imgur.com/ENZNUR3.png")
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/shlWuzZ.png";
}
else
{
document.getElementById("imgClickAndChangeLightOut").src = "https://i.imgur.com/ENZNUR3.png";
}
}
</script>
</head>
<body>
<div class="container">
<header>
<a href="">
<h4 class="logo">Home Automation</h4>
<img src = "https://seeklogo.com/images/R/raspberry-pi-logo-8240ABBDFE-seeklogo.com.png" alt="Raspberry Pi Logo" class="pi_logo_top">
</a>
</header>
<div class="controls">
<table class="table_controls">
<tr>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLight" onclick="changeImageLights()" class="light_on"></td>
<td><img src = "https://i.imgur.com/Ek2I5jk.png" id="imgClickAndChangeGarage" onclick="changeImageGarage()" class="garage_door"></td>
<td><img src = "https://i.imgur.com/ENZNUR3.png" id="imgClickAndChangeLightOut" onclick="changeImageLightsOut()" class="light_on"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
I'm having a problem with span where it is changing the height of my div, breaking the styling I have implemented.
I have four images stacked 2 by 2 and I want text to roll up when I hover over them.
However, when I hover over them and the text appears it changes the size of the div since I have translated the text up by a certain amount.
I have made the divs blue so you can better see what is happening.
The divs obtain their height automatically. There are no set pixel heights in my website; everything is made using percentages so it would seem I can't just hide overflow.
Any help would be much appreciated on how I can fix this.
/* CSS Document */
body {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
background-image: url("images/background/space2.jpg");
background-size: cover;
margin: 0px;
}
#navigation {
width: 17%;
height: 100%;
position: fixed;
z-index: 3;
margin-left: 8%;
background-color: black;
opacity: 0.8;
filter: alpha(opacity=80);
float: left;
}
.navigationbody {
width: 100%;
height: 50px;
border-bottom: 2px rgba(255, 255, 255, 0.1) solid;
text-align: center;
}
.navigationbody a {
text-decoration: none;
color: white;
font-size: 30px;
position: relative;
top: 15%;
}
.navigationbody a:hover {
opacity: 0.8;
filter: alpha(opacity=80);
}
#navcontent {
height: auto;
margin-top: 50%;
position: static;
background-color: ;
align-items: center;
align-content: center;
}
#icon {
width: 100%;
margin-bottom: 10px;
background-color: ;
margin-left: 15%;
}
#bodycontainer {
bottom: 200px;
}
#icon img {
width: 70%;
height: auto;
}
#container {
width: 100%;
position: fixed;
top: 0px;
bottom: 0px;
}
#contentcontainer {
width: 75%;
margin-left: 25%;
height: 100%;
z-index: 2;
float: left;
overflow-y: auto;
}
#contentcontainer:hover {
background-color: rgba(0, 0, 0, 0.3);
}
#content {
padding: 0px;
}
.about {
width: auto;
margin-top: 10%;
margin-bottom: 30%;
margin-left: 20%;
margin-right: 20%;
text-align: center;
padding-bottom: 20px;
border-bottom: dotted 2px rgba(255, 255, 255, 1.00);
}
.about a {
color: white;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.20);
}
.about h1 {
color: white;
border-bottom: dotted 2px rgba(255, 255, 255, 1.00);
}
.about h2 {
color: white;
}
.abouthome {
width: auto;
margin-top: 10%;
margin-bottom: 30%;
margin-left: 20%;
margin-right: 20%;
text-align: center;
padding-bottom: 20px;
}
.abouthome h2 {
color: white;
border-bottom: dotted 2px rgba(255, 255, 255, 1.00);
}
.abouthome a {
color: white;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.20);
}
.software {
width: 100%;
margin-top: 60px;
align-content: center;
background-color: ;
}
.software img {
width: 100px;
height: auto;
}
.software img:hover {
opacity: .5;
}
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
.desc {
padding: 15px;
text-align: center;
}
#contentgames {
right: 0px;
padding-left: 10%;
padding-top: 20%;
}
.games {
width: 45%;
height: auto;
overflow: hidden;
margin-right: 20px;
float: left;
transition: 0.5s;
position: relative;
background-color: aqua;
word-break: keep-all;
}
.games:hover {}
.games span {
color: white;
position: relative;
left: 10px;
bottom: 20px;
margin: 10px;
padding: 5px;
font-size: 0px;
opacity: 0;
transition: 0.5s;
align-content: center;
}
.games:hover span {
color: white;
position: relative;
bottom: 200px;
margin: 10px;
font-size: 18px;
opacity: 1;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Steven game design</title>
<link rel="stylesheet" type="text/css" href="style3.css" />
</head>
<div id="navigation">
<div id="navcontent">
<div id="icon">
<img src="http://placehold.it/150x150">
</div>
<div id="bodycontainer">
<div class="navigationbody"></div>
<div class="navigationbody">
Home
</div>
<div class="navigationbody">
About
</div>
<div class="navigationbody">
Blog
</div>
<div class="navigationbody">
Videos
</div>
<div class="navigationbody">
Pictures
</div>
<div class="navigationbody">
Contact
</div>
</div>
</div>
</div>
<body>
<div id="container">
<div id="contentcontainer">
<div id="contentgames">
<div class="games">
<img src="http://placehold.it/350x150" width="100%" height="auto" />
<span> This is a simple game I started making in flash. All of the artwork was created in flash. Unfortunately I never completed the game many things don't work such as the score, taking damage, boss and many more
</span>
</div>
<div class="games">
<img src="http://placehold.it/350x150" width="100%" height="auto" />
<span> This is a simple game I made in flash it took less than a week to create.</span>
</div>
<div class="games">
<img src="http://placehold.it/350x150" width="100%" height="auto" />
<span> This is another simple game in flash I made over the course of a few days.</span>
</div>
<div class="games">
<img src="http://placehold.it/350x150" width="100%" height="auto" />
<span>This is the game I am currently working on. It is my first 3d game. I am making it in the unreal engine 4.</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If the goal is for the image to be the deciding factor for the position and size of the div and the elements within it, this minimal, responsive example should provide some examples:
https://jsfiddle.net/d7aab2x7/2/
The critical code sets the text block to be positioned absolutely, allow the div to constrain it's size around the image:
div {
border: 1px solid red;
display: inline-block;
width: 40%;
position: relative;
overflow: hidden;
}
img {
display: block;
width: 100%;
}
span {
position: absolute;
bottom: -50px;
background: green;
height: 50px;
transition: bottom 200ms ease-out;
}
For this HTML:
<div>
<img src="http://placehold.it/300x300" />
<span>Some text that will appear on hover of the image</span>
</div>
Please note: I have re-created using the simplest example possible, and my fiddle uses only CSS for animation. Hopefully this provides you with an answer, while also providing general usefulness to the next person searching for something like this.
How to display an iframe code by mouse over (hover) a different link? I tried this but it's not working;
<style>
iframe#xyz {
border: 2px solid #9a9a9a;
margin-left: 60px;
display: none;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
a#abc:hover iframe#xyz {
border: 2px solid #9a9a9a;
width: 200px;
height: 100px;
margin-left: -18px;
display: block;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
</style>
<a class="linkclass" id="abc" href="link">link</a>
<iframe id="xyz" src="page.html"></iframe>
What am i doing wrong?
You're selecting it wrong, use:
a#abc:hover {
border: 2px solid #9a9a9a;
width: 200px;
height: 100px;
margin-left: -18px;
display: block;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
Select a link with an id of abc.
If you want to show the iframe however, you must use the sibling selector +
use this:
a#abc:hover + #xyz {
border: 2px solid #9a9a9a;
width: 200px;
height: 100px;
margin-left: -18px;
display: block;
margin-top: 25px;
background-color: #FFF;
position: absolute;
}
Do it this way
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#xyz{
display: none;
}
.linkclass:hover + #xyz{
display: block;
}
</style>
</head>
<body>
Click Here To View Map
<iframe id="xyz" src="#" width="870" height="300"></iframe>
</body>
</html>
Currently I am building a simon game clone and I thought I'd like to modernize a bit.
Anyway, I was able to find a blog on how to make toggle switch with only CSS3 (http://callmenick.com/post/css-toggle-switch-examples)
However, since I am trying to make this web responsive, I made the container (label) with width : 100%.
I am having hard time figuring out how to make the toggle switch itself move towards the end of the container at any width viewport.
body {
background: skyblue;
font-family: 'Righteous', cursive;
box-sizing: border-box; }
.container {
width: 100%;
display: flex;
flex-wrap: wrap; }
.game {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 70vh;
margin-top: 10px; }
.button {
position: relative;
display: block;
height: 50%;
width: 50%;
margin-bottom: 1px; }
#green {
background: #39d565;
border-top-left-radius: 25%;
box-shadow: 0 6px 0 #0d934b;
bottom: 6px;
transition: all 0.1s linear; }
#green:active {
bottom: 0px;
box-shadow: 0px 0px 0px #0d934b; }
#red {
background: #d23a51;
border-top-right-radius: 25%;
box-shadow: 0 6px 0 #711515;
bottom: 6px;
transition: all 0.1s linear; }
#red:active {
bottom: 0px;
box-shadow: 0px 0px 0px #711515; }
#blue {
background: #09f;
border-bottom-left-radius: 25%;
box-shadow: 0 6px 0 #06c;
bottom: 6px;
transition: all 0.1s linear; }
#blue:active {
bottom: 0px;
box-shadow: 0px 0px 0px #06c; }
#yellow {
background: #FD9A01;
border-bottom-right-radius: 25%;
box-shadow: 0 6px 0 #916828;
bottom: 6px;
transition: all 0.1s linear; }
#yellow:active {
bottom: 0px;
box-shadow: 0px 0px 0px #916828; }
.score {
width: 100%;
height: 10vh;
text-align: center;
color: #FFF;
text-shadow: 1px 3px 2px black; }
.control-panel {
text-align: center;
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
height: 15vh;
background: #aaaaaa;
border-radius: 10px; }
.control-panel #on-off-btn {
width: 33.3333%; }
.control-panel #level {
background: orange;
width: 33.3333%; }
.control-panel #start {
background: purple;
width: 33.3333%; }
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden; }
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none; }
input.cmn-toggle-round + label {
padding: 2px;
max-width: 90%;
height: 35px;
background-color: #dddddd;
border-radius: 60px;
margin-top: 9px;
margin-left: 5px; }
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: ""; }
input.cmn-toggle-round + label:before {
right: 1px;
background-color: white;
border-radius: 60px;
transition: background 0.4s; }
input.cmn-toggle-round + label:after {
width: 38px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin 0.4s; }
input.cmn-toggle-round:checked + label:before {
background-color: #8ce196; }
input.cmn-toggle-round:checked + label:after {
margin-left: 20px; }
#media screen and (min-width: 426px) {
.container {
width: 426px;
margin-left: auto;
margin-right: auto; } }
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" charset="utf-8"></script>
<title>Simon Game FCC</title>
</head>
<body>
<div class="container">
<div class="game">
<div id="green" class="button"></div>
<div id="red" class="button"></div>
<div id="blue" class="button"></div>
<div id="yellow" class="button"></div>
</div>
<div class="score">
<h2>Score: 0 </h2>
</div>
<div class="control-panel">
<div id="on-off-btn">
<input id="cmn-toggle-1"type="checkbox" class="cmn-toggle cmn-toggle-round">
<label for="cmn-toggle-1"></label>
<p>Off/On</p>
</div>
<div id="level"></div>
<div id="start"></div>
</div>
</div>
</body>
</html>
To achieve your expected result, use below option
Change margin-left:20px to 90% to work as expected
input.cmn-toggle-round:checked + label:after {
margin-left: 90%;
}
http://codepen.io/nagasai/pen/jAYojX
Is there a way to make such thing fluid so that it scales along with its parent or, what would it take to achieve it..
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<style type="text/css">
#circle-container {
position: relative;
width: 200px;
height: 200px;
border: solid 0px #333;
}
.dimmensions {
width: 100px;
height: 100px;
}
.dimmensions2 {
width: 113px;
height: 113px;
}
.dimmensions3 {
width: 105px;
height: 105px;
}
.left {
position: relative;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: #09f;
float: left;
height: 199.5px;
top: 0;
}
.left-inner {
position: relative;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: #444;
height: 175px;
width: 90px;
top: 12px;
left: 15px;
}
.left-inner-small {
position: relative;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: #4cff00;
height: 145px;
width: 85px;
top: 15px;
left: 15px;
}
.top-right {
position: relative;
border-top-right-radius: 100px;
background: #666;
float: right;
}
.top-right-inner {
position: relative;
border-top-right-radius: 100px;
background: #ffd800;
float: right;
height: 90px;
width: 85px;
top: 12px;
right: 15px;
}
.top-right-inner-small {
position: relative;
border-top-right-radius: 100px;
background: #808080;
float: right;
height: 75px;
width: 70px;
top: 15px;
right: 15px;
}
.bottom-right {
position: relative;
border-bottom-right-radius: 100px;
background: #333;
float: right;
}
.bottom-right-inner {
position: relative;
border-bottom-right-radius: 100px;
background: #ff6a00;
float: right;
height: 87px;
width: 85px;
top: 0px;
right: 15px;
}
.bottom-right-inner-small {
position: relative;
border-bottom-right-radius: 100px;
background: #fff;
float: right;
height: 72px;
width: 70px;
top: 0px;
right: 15px;
}
.center-small {
position: absolute;
border-radius: 125px;
background: #ff6a36;
top: 44px;
left: 44px;
z-index: 999;
}
.center-small-inner {
position: absolute;
border-radius: 125px;
background: #333;
top: 4px;
left: 4px;
z-index: 9999;
}
.center-text {
z-index: 99999;
position: absolute;
text-shadow: #000 0px 2px 1px;
color: #555;
font-size: 18px;
top: -12px;
left: -47px;
font-family: 'Impact';
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="circle-container">
<div class="dimmensions2 center-small">
<div class="dimmensions3 center-small-inner"></div>
</div>
<div class="dimmensions left">
<div class="dimmensions left-inner">
<div class="dimmensions left-inner-small"></div>
</div>
</div>
<div class="dimmensions top-right">
<div class="dimmensions top-right-inner">
<div class="dimmensions top-right-inner-small"></div>
</div>
</div>
<div class="dimmensions bottom-right">
<div class="dimmensions bottom-right-inner">
<div class="dimmensions bottom-right-inner-small">
<span class="center-text">
CSS3<span style="color:#ffd800">+</span>HTML5
</span>
</div>
</div>
</div>
</div>
</body>
</html>
Every element is subordinated to the #circle-container. You have defined fixed width's and height's in all elements. You could calculate those values as a proportional value to the actual 200px of width and height of the #circle-container, and change it to the percentual result.
Example:
#circle-container {
position: relative;
width: 200px;
height: 200px;
border: solid 0px #333;
}
.dimmensions {
width: 100px;
height: 100px;
}
Would turn into:
#circle-container {
position: relative;
width: 200px;
height: 200px;
border: solid 0px #333;
}
.dimmensions {
width: 50%; //Proportional
height: 50%; //Proportional
}
Then, resizing the #circle-container would resize the entire arc.