Aligning the html form to the center - html

The following html code gives a html form in a table but though i aligned the table to center it does not align to the center and remains in the left side of the web page!
<!DOCTYPE html>
<html>
<head>
<style>input.textfill {
float: right;
}</style>
<link type="text/css" rel="stylesheet" href="order.css" >
<script type="text/javascript">
var textbox = function(me){
if(me.checked == false){
var textb = document.createElement('textarea');
textb.name = "Address";
textb.id="Address";
textb.required=true;
textb.placeholder="Address";
me.parentNode.appendChild(textb);
}
setInterval(function(){
if(me.checked == false){
me.parentNode.removeChild(textb);
return false;
}
});
};
var i = 1;
function addkid() {
if (i <= 2) {
i++;
var div = document.createElement('div');
div.innerHTML ='<br><div class="headingbox">'+ 'Prescription Copy-'+i+':'+'</div>'+'<br><input id="uploadFile-' + i + '" class="disableInputField" placeholder="Choose File" disabled="disabled" />'+'<label class="fileUpload">'+'<input id="uploadBtn-' + i + '" type="file" required class="upload" name="Image'+i+'" />'+'<span class="uploadBtn-' + i + '">Upload</span>'+'</label>'+' <input id=remove type="button" value="-" onclick="removekid(this)">';
document.getElementById('kids').appendChild(div);
document.getElementById("uploadBtn-" + i).onchange = function() {
document.getElementById("uploadFile-"+i).value = this.value;
};
}
}
function removekid(div) {
document.getElementById('kids').removeChild(div.parentNode);
i--;
}
</script>
</head>
<body bgcolor="#E6E6FA">
<form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data" onsubmit="return Validate(this);onTimeChange ();">
<table align="Center" >
<tr><td height="40"><br>
<div class="headingbox" id="hBoxNIC" > National ID </div>
<div style="width:100%;text-align:center;">
<input type="text" placeholder="920290505v" maxlength="13" name=NIC required autofocus />
</div>
</td></tr>
<tr><td height=50 ><div class="headingboxs">Pick up</div>
<input type=radio name=DP required value="Pickup">
<div style=" float: right;"><div class="headingboxs">
Delivery</div>
<input class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)" /></div><br><br></td></tr>
<tr><td height="50"><div class="headingbox" >Expected Time </div>
<div style="width:100%;text-align:center;">
<input type="time" id=time autofocus name=DPTime onfocusout="hid('timeerror2');" onfocus="show('timeerror2');"min="09:00:00" max="22:00:00" /><br>
</div>
<div class="poperror" id="timeerror2"> Pharmacy is opened from 9AM to 10PM </div>
<script>
var input = document.getElementById('time');
function validateTime (element) {
var minTime = element.min;
var maxTime = element.max
var value = element.value + ':00'
if(minTime > value || value > maxTime) {
console.log("Time is outside of min/max.");
}
}
</script>
</td></tr>
<tr><td height="50"><div class="headingbox" id="hBoxPN"> Phone Number </div>
<div style="width:100%;text-align:center;">
<input type="text" maxlength=10; autofocus name=Tele /><br>
</div>
<div class="error" id="phoneerror" > error occured </div><br></td></tr>
<tr><td height="50"><div class="headingbox" id="hBoxEM"> E-mail </div>
<div style="width:100%;text-align:center;">
<input type="text" autofocus name=Email placeholder="xxx#gmail.com" /><br>
</div>
<div class="error" id="emailerror" > error occured </div><br>
</td></tr>
<tr>
<td height="50" width=330><br><div class="headingbox"> Prescription Copy-1</div> <div id="kids">
<input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />
<label class="fileUpload">
<input id="uploadBtn" type="file" class="upload" name=Image1 />
<span class="uploadBtn">Upload</span>
</label>
<input type="button" id="add" onclick="addkid()" value="+" />
</div></td></tr>
<script>
document.getElementById("uploadBtn" ).onchange = function() {
document.getElementById("uploadFile").value = this.value;
};
</script>
</div></td></tr>
<tr><td colspan=5 align=center>
<input class="button" type=submit name=submit value=Place >
<input class="button" type=reset name=reset value=Cancel> </td></tr>
</table>
</form>
</body>
</body>
</html>
The css code is as follows
* { margin:0; padding:0;font-family: Arial; }
#orders {
padding: 0px 25px 25px;
background: #dcdcfb;
box-shadow:
0px 0px 0px 5px rgba( 255,255,255,0.4 ),
0px 4px 20px rgba( 0,0,0,0.33 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: table;
position:center;
width:60%;
margin: 20px;
}
#orders .inputs .buttonS {
width: 100%;
outline:none;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient(
top,
#b9c5dd 0%,
#a4b0cb);
background: -webkit-gradient(
linear, left top, left bottom,
from(#b9c5dd),
to(#a4b0cb));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
display: table;
position: static;
clear: both;
}
#orders .inputs .buttonS:hover {
background: -moz-linear-gradient(
top,
#a4b0cb 0%,
#b9c5dd);
background: -webkit-gradient(
linear, left top, left bottom,
from(#a4b0cb),
to(#b9c5dd));
}
#orders .inputs .buttonDis {
outline:none;
width: 100%;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient(
top,
#e0e0e0 0%,
#bfbfbf);
background: -webkit-gradient(
linear, left top, left bottom,
from(#e0e0e0),
to(#bfbfbf));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
display: table;
position: static;
clear: both;
}
#Address{
background: #f5f5f5;
font-size: 0.8rem;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width: 90%;
margin: auto;
margin-bottom: 17px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
transition: all .5s ease-in-out;
}
.inputs select, input[type=date], input[type=text], input[type=password],input[type=time] {
background: #f5f5f5;
font-size: 0.8rem;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width: 90%;
margin: auto;
margin-bottom: 17px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
transition: all .5s ease-in-out;
}
.inputs select:focus, input[type=date], input[type=text]:focus{
background: #fff;
box-shadow: 0px 0px 0px 3px #8efffc, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px rgba( 0,0,0,0.15 );
outline: none;
}
.inputs ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 18px;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
.inputs ul li:hover label{
color: #FFFFFF;
}
.inputs ul li .check{
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
.inputs input[type=radio]:checked ~ label{
color: #0DFF92;
}
.headingboxs{ /*for the radio button headings */
position:relative;
text-align:left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
padding-top: 5px;
border-top-left-radius:2em;
border-top-right-radius:-2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:-2em;
border-bottom-left-radius:-2em;
background: white;
left: 2%;
font-weight: bold;
display: inline-block;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
transition: all .5s ease-in-out;
}
.headingbox{ /*for other headings */
position:relative;
text-align:left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
padding-top: 5px;
border-top-left-radius:2em;
border-top-right-radius:0;
border-bottom-right-radius:2em;
border-bottom-left-radius:-2em;
border-bottom-left-radius:-2em;
background: white;
left: 4%;
font-weight: bold;
display: inline-block;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
transition: all .5s ease-in-out;
}
.headbox{ /*for other headings */
position:relative;
text-align:left;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 2px;
padding-top: 5px;
background: white;
left: 4%;
font-weight: bold;
display: inline-block;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
transition: all .5s ease-in-out;
}
.poperror {
opacity:0;
visibility: visible;
width: 300px;
background-color: white;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 5;
!top: 100%;
!left: 100%;
margin-left: 10px;
margin-top: -15px;
-moz-box-shadow: 0 0 10px black;
-webkit-box-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.poperror::after {
content: "";
position: absolute;
bottom: 100%;
left: 5%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent white transparent;
}
.error{
color:red;
font-size:10px;
text-align:left;
width: 350px;
margin-left:auto;
margin-right:auto;
margin-top:-12px;
margin-bottom:-10px;
font-style: italic;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
opacity:0;
}
.column{
width:50%;
float:left;
}
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#remove{
width: 30px;
font-size: 20px;
background-color: gray;
color: white;
}
#add{
width: 30px;
font-size: 20px;
background-color: gray;
color: white;
}
.inputBtnSection{
display:inline-block;
vertical-align:top;
font-size:0;
font-family:verdana;
}
.disableInputField{
display:inline-block;
vertical-align:top;
height: 27px;
margin: 0;
font-size:14px;
padding:0 3px;
}
.fileUpload {
position: relative;
overflow: hidden;
display:inline-block;
vertical-align:top;
}
.fileUpload-2 {
position: relative;
overflow: hidden;
display:inline-block;
vertical-align:top;
}
.fileUpload-3 {
position: relative;
overflow: hidden;
display:inline-block;
vertical-align:top;
}
.uploadBtn{
display:inline-block;
vertical-align:top;
background:rgba(0,0,0,0.5);
font-size:14px;
padding:0 10px;
height:25px;
line-height:22px;
color:#fff;
border-radius: 5px;
}
.uploadBtn-2{
display:inline-block;
vertical-align:top;
background:rgba(0,0,0,0.5);
font-size:14px;
padding:0 10px;
height:25px;
line-height:22px;
color:#fff;
border-radius: 5px;
}
.uploadBtn-3{
display:inline-block;
vertical-align:top;
background:rgba(0,0,0,0.5);
font-size:14px;
padding:0 10px;
height:25px;
line-height:22px;
color:#fff;
border-radius: 5px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
table {
align-self: center;
border: 2px solid CadetBlue;
border-radius: 5px;
}
#add_kid(){
width: 50px;
font-size: 10px;
}
.button:hover {
cursor:pointer;
background: -moz-linear-gradient(
top,
#a4b0cb 0%,
#b9c5dd);
background: -webkit-gradient(
linear, left top, left bottom,
from(#a4b0cb),
to(#b9c5dd));
}
.button{
margin-left:30px;
outline:none;
width: 20%;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient(
top,
#e0e0e0 0%,
#bfbfbf);
width: 150px;
background-color:grey;
border-radius: 5px;
height: 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -webkit-gradient(
linear, left top, left bottom,
from(#e0e0e0),
to(#bfbfbf));
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
}
#white-background{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background-color: #fefefe;
opacity: 0.7;
z-index: 9999;
}
#dlgbox{
/*initially dialog box is hidden*/
display: none;
position: fixed;
width: 480px;
z-index: 9999;
border-radius: 10px;
background-color: #7c7d7e;
}
#dlg-header{
background-color:aliceblue;
color: white;
font-size: 20px;
padding: 10px;
margin: 10px 10px 0px 10px;
}
#dlg-body{
background-color: white;
color: black;
font-size: 14px;
padding: 10px;
margin: 0px 10px 0px 10px;
}
#dlg-footer{
background-color: #f2f2f2;
text-align: right;
padding: 10px;
margin: 0px 10px 10px 10px;
}
#dlg-footer button{
background-color: grey;
color: white;
padding: 5px;
border: 0px;
}
please help to rectify this problem so that i can align the form to the center


form {
width: 980px;
margin: 0 auto;
}
Declare the width. So you can use the value AUTO in margin. margin: 0 auto do the trick

Related

How to set the duration of after-hover transition

I would like to get the same time (0.4s) after hover off from button (now is 0s).
If I hover off from button there is no transition.
After hover it took 0s. I would like to have 0.4 like it is in hover state.
.btn_akoo {
text-transform: uppercase;
background-color:#e92741;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
border:3px solid #f5f487;
display:inline-block;
cursor:pointer;
color:#2d2f3c;
font-family:Verdana;
font-size:17px;
font-weight:bold;
padding:30px 18px;
text-decoration:none;
position: relative;
margin-left: 38%;
margin-top: 18%;
}
.btn_akoo:hover {
background: #2d2f3c;
color: #e92741;
padding-left: 30px;
padding-right: 30px;
-webkit-box-shadow:0px 0px 40px 1px #f5f487 ;
-moz-box-shadow:0px 0px 40px 1px #f5f487 ;
box-shadow:0px 0px 40px 1px #f5f487 ;
transition: 0.4s ;
}
<div class="wrapper_akoo">
<a class="btn_akoo" href="#" >Ako sa zaregistrovať?</a>
</div>

Set the transition in the base class instead of the :hover state:
.btn_akoo {
text-transform: uppercase;
background-color: #e92741;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
border: 3px solid #f5f487;
display: inline-block;
cursor: pointer;
color: #2d2f3c;
font-family: Verdana;
font-size: 17px;
font-weight: bold;
padding: 30px 18px;
text-decoration: none;
position: relative;
margin-left: 38%;
margin-top: 18%;
transition: 0.4s;
}
.btn_akoo:hover {
background: #2d2f3c;
color: #e92741;
padding-left: 30px;
padding-right: 30px;
-webkit-box-shadow: 0px 0px 40px 1px #f5f487;
-moz-box-shadow: 0px 0px 40px 1px #f5f487;
box-shadow: 0px 0px 40px 1px #f5f487;
}
<div class="wrapper_akoo">
<a class="btn_akoo" href="#">Ako sa zaregistrovať?</a>
</div>

'Click' animation effect on button with CSS

I am not able to achieve the click-effect in my Next button (see snippet 1).
In the first snippet it is achievend with the float: left; value, but when I insert it into my code, it breaks the position of the button. My 'Next' button is supposed to be the way it is the second snippet, i.e. vertically and horizontally centered.
Any ideas how to find a workaround here?
Snippet 1
.next-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 25px;
color: #ffffff;
text-decoration: none;
background-color: #f9c60f;
border-bottom: 5px solid #888888;
text-shadow: 1px -2px #888888;
}
.next-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
<html lang="en">
<head>
<body>
NEXT
</body>
</html>
Snippet 2 (My code)
.next-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
position: relative;
padding: 10px 40px;
margin: 0px 10px 10px 0px;
float: left;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 25px;
color: #ffffff;
text-decoration: none;
background-color: #f9c60f;
border-bottom: 5px solid #888888;
text-shadow: 1px -2px #888888;
}.course-video {
background: #f9c70f;
border: none;
margin: 0;
box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
border-radius: 0;
-moz-border-radius: 0;
}
.next-video-button {
transition: all 0.1s;
-webkit-transition: all 0.1s;
padding:7px 200px;
border-radius: 10px;
font-family: 'Montserrat';
font-size: 1em;
color: #ffffff;
text-decoration: none;
background-color: #888888;
border-bottom: 5px solid #5a5a5a;
text-shadow: 1px -2px #888888;
text-align: center;
line-height:49px;
}
.next-video-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
.video-title {
font-family: montserrat;
font-size: 1.5em;
color: #000000;
padding: 0.5em;
box-sizing: border-box;
width: 854px;
text-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}
.video-descr {
width: 854px;
box-sizing: border-box;
height: 50px;
margin-top: -5px;
text-align:center;
}
.next-button:active {
transform: translate(0px,5px);
-webkit-transform: translate(0px,5px);
border-bottom: 1px solid;
}
<div class="course-video video-title">Hello</div>
<iframe src="https://player.vimeo.com/video/154094373" width="854" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="course-video video-descr">NEXT</div>

Try using
.next-video-button {
display:inline-block;
...
}
instead of
float:left
Using inline-block makes the element act like it was text so your text-aligns will work on these as well

CSS Correctly positioning pseudo element

I have a input type range inside a div and I'm using the pseudo element 'before' as a circle. My intention is for it to be like the thumb at the starting position: I have the following html:
<div class="range">
<input type="range" name="" class="progress" value="0" max="100" min="0"/>
</div>
with the following css:
.range::before{
content: '';
display: inline-block;
width: 15px;
height: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
background-color: #69b6d5;
}
Here is a functioning fiddle
My intention is to make the before element at the same position as the beginning of the range.

Added inline-block to .range::before and input and aligned them vetically using vertical-align: middle.
Set width of input to width: calc(100% - 15px). This 15px is the width of the .range::before element.
Bring the .range::before over the yellow dot using transform: translate(100%, 0)
See demo below:
/* RANGE */
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: calc(100% - 15px);
display: inline-block;
vertical-align: middle;
padding: 0;
border: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #FFE000;
border-radius: 7px;
border: 0px solid #FFE000;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #FFE000;
border: 2px solid #FFE000;
height: 15px;
width: 15px;
border-radius: 15px;
background: #FFE000;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #FFE000;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 3px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #FFE000;
border-radius: 7px;
border: 0px solid #FFE000;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #FFE000;
border: 2px solid #FFE000;
height: 15px;
width: 15px;
border-radius: 15px;
background: #FFE000;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 3px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #FFE000;
border: 0px solid #FFE000;
border-radius: 14px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
background: #FFE000;
border: 0px solid #FFE000;
border-radius: 14px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #FFE000;
border: 2px solid #FFE000;
height: 15px;
width: 15px;
border-radius: 15px;
background: #FFE000;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #FFE000;
}
input[type=range]:focus::-ms-fill-upper {
background: #FFE000;
}
.range {
position: relative;
display: table;
margin: 0 auto;
width: 50vw;
}
.range::before {
content: '';
display: inline-block;
vertical-align: middle;
transform: translate(100%, 0);
width: 15px;
height: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
background-color: #69b6d5;
}
<div class="range">
<input type="range" name="" class="progress" value="0" max="100" min="0" />
</div>
Let me know your feedback on this. Thanks!

It's a bit hacky, but how about adding this to .range::before:
.range::before {
/* ... other css */
position: absolute;
margin-top: 11px;
}
JSFiddle

table positioning issue on chrome

I have implemented this calendar on mozilla firefox satisfactorily and when I try to view it on chrome, table doesn't fill all the parent section. The table height is the same as the parent section but it have moved a little bit to the bottom generating a white space between the section and the table.
Chrome:
Firefox:
In firefox works.
This is the code, you can try it on the demo and see the differences between chrome and firefox:
.right{
float:right !important;
}
.wz-ui-input[type="checkbox"] {
display: none;
}
.wz-ui-input {
background-color: #fcfeff;
border: 1px solid #dcdcdc;
border-radius: 3px;
box-shadow: 0 1px rgba(0, 0, 0, 0.05) inset;
color: #464646;
cursor: text;
font-size: 13px;
height: 28px;
padding: 0 10px;
width: 204px;
}
.wz-ui-input[type="checkbox"] + label i {
background: url("#static/checkbox_white.png") no-repeat scroll -17px 0 / 51px 17px rgba(0, 0, 0, 0);
display: inline-block;
height: 17px;
margin: -1px 4px 0 0;
vertical-align: middle;
width: 17px;
}
/* Shadow */
.hide {display:none;}
.abs {position:absolute; z-index: 3;}
.fullHeight{height:100%;}
.fullWidth{width:100%;}
.top{top:0;}
.dark{background-color:#999; background-color: rgba(123,123,123,0.7); opacity: 0.7;}
.center {text-align: center}
/* Calendar Top Bar */
.wz-ui-header{
width:100%;
height: 39px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-color: #f1f1f1;
-webkit-box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
-moz-box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
box-shadow: 0 2px 4px rgba(0,1,1,.1), inset 0 1px rgba(255,255,255,.1);
background-image: -webkit-linear-gradient(bottom, #b83e38, #da605b);
background-image: -moz-linear-gradient(bottom, #b83e38, #da605b);
background-image: -o-linear-gradient(bottom, #b83e38, #da605b);
background-image: -ms-linear-gradient(bottom, #b83e38, #da605b);
background-image: linear-gradient(to top, #b83e38, #da605b);
}
.shadow-border{
height: 38px;
width:100%;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-color: #fdfeff;
border: solid 1px rgba(0,0,0,.15);
}
.calendar-menu{
display:block;
float:left;
width:85%;
}
.calendar-menu li {
border-bottom: 2px solid transparent;
color: #e9b9b7;
display: inline-block;
font-size: 15px;
height: 28px;
margin: 0 11px;
padding: 8px 1px 0;
}
.calendar-menu li.active-type {
border-bottom: 3px solid #7ebe30;
color: #ffffff;
}
.calendar-menu li:hover {
border-bottom: 3px solid #fff;
}
.calendar-menu-nav{
width:auto;
float:left;
}
.calendar-menu-event-finder {
width:auto;
height: 21px;
padding: 5px 10px;
}
.calendar-menu-event-finder input{
width: 137px;
height: 25px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 2px rgba(0,0,0,.05);
box-shadow: inset 0 2px rgba(0,0,0,.05);
border: solid 1px #a64440;
}
.calendar-buttons{
border-left: 1px solid #9f3e3a;
height: 100%;
width: 135px;
}
.wz-view-minimize, .wz-view-maximize, .wz-view-close, .close-image {
border: 1px solid transparent;
border-radius: 2px;
float: left;
height: 9px;
padding: 6px;
width: 10px;
margin: 9px 10px 10px;
}
.wz-view-minimize i{
background: url("#static/minimize.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.wz-view-maximize i{
background: url("#static/enlarge.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.wz-view-close i {
background: url("#static/close.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
.close-image i{
background: url("#static/close.png") no-repeat scroll center bottom / 10px auto rgba(0, 0, 0, 0);
display: block;
height: 9px;
width: 10px;
}
/* Calendar general */
.calendar-head {
background: none repeat scroll 0 0 #fff;
height: 35px;
}
#day-calendar, #week-calendar, #month-calendar{
display: none;
}
.calendar-active{
width: 100%;
height: 85%;
background-color: #fff;
border: solid 1px rgba(0,0,0,.15);
display:block !important;
}
/* Calendar Modals */
#my-calendars-modal{
width: 210px;
height: 122px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #fff;
border: solid 1px rgba(0,0,0,.15);
position: absolute;
display: none;
margin-left: 12px;
margin-top: 31px;
z-index: 2;
}
#my-calendars-modal .my-calendars-list {
margin-left: 11px;
margin-top: 11px;
}
#my-calendars-modal .my-calendars-list articles {
margin-bottom: 11px;
font-size: 13px;
}
#my-calendars-modal .calendar {
display: block;
width: 100% !important;
}
#my-calendars-modal .calendar i{
float: left;
}
#my-calendars-modal .calendar span figure {
border-radius: 4px;
float: left;
height: 8px;
margin-right: 5px;
position: relative;
top: 4px;
width: 8px;
}
#my-calendars-modal .deleteCalendar{
margin-right: 10px;
font-size: 12px;
color:#dc513a;
}
#work span figure{
background-color: #34aadc;
}
#office span figure{
background-color: #5856d6;
}
#home span figure{
background-color: #f79a03;
}
#my-calendars-modal .add-new-calendar{
text-align: center;
border-top: 1px solid #dadada;
width: 100%;
padding: 11px 0;
font-size: 13px;
}
#create-event-modal{
width: 289px;
height: 289px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f1f1f1;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
display: none;
z-index: 4;
position: absolute;
margin-left: 34%;
margin-top: 11.5%;
font-size:13px;
}
#create-calendar-modal{
width: 289px;
height: 198px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f1f1f1;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,.3);
box-shadow: 0 1px 5px rgba(0,0,0,.3);
display: none;
z-index: 4;
position: absolute;
margin-left: 34%;
margin-top: 17%;
font-size:13px;
}
#create-calendar-modal .calendar-name input{
width: 161px;
height: 26px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 1px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px rgba(0,0,0,.05);
border: solid 1px rgba(0,0,0,.2);
border-radius: 3px;
}
#create-calendar-modal .calendar-name {
margin-left: 6%;
position: relative;
top: 32px;
float: left;
}
#create-calendar-modal .calendar-color {
margin-left: 9%;
position: relative;
top: 39px;
float: left;
}
#create-calendar-modal .calendar-color input{
width: 16px;
height: 12px;
}
#create-calendar-modal .calendar-description {
margin-left: 6%;
position: relative;
top: 49px;
float: left;
}
#create-calendar-modal .calendar-description textarea{
width: 260px;
height: 49px;
background-color: #fcfeff;
-webkit-box-shadow: inset 0 1px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px rgba(0,0,0,.05);
border: solid 1px rgba(0,0,0,.2);
margin-top: 6px;
border-radius: 3px;
}
#create-calendar-modal .create-calendar-button{
width: 71px;
height: 23px;
background-color: #75d142;
-webkit-box-shadow: inset 0 1px rgba(255,255,255,.3);
-moz-box-shadow: inset 0 1px rgba(255,255,255,.3);
box-shadow: inset 0 1px rgba(255,255,255,.3);
border: solid 1px #1b961b;
background-image: -webkit-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -moz-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -o-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: -ms-linear-gradient(bottom, #4e9c21, #7ebe30);
background-image: linear-gradient(to top, #4e9c21, #7ebe30);
margin-right: 10px;
margin-top: 68px;
color: #fff;
border-radius: 4px;
}
#create-calendar-modal .close-image {
float: right;
left: 250px;
position: absolute;
top: -4px;
cursor: pointer;
}
#create-calendar-modal .close-image i{
cursor: pointer;
}
.my-calendars, .current-month, .create-event {
float: left;
font-size: 14px;
margin-left: 12px;
padding: 11px 0;
width: auto;
}
.my-calendars, .my-calendars span, .create-event, .my-calendars img, .current-month img, .create-event span, .create-event img, .add-new-calendar, .add-new-calendar img, .add-new-calendar span, .deleteCalendar{
cursor:pointer;
}
.current-month{
margin-left:29%;
}
.current-month span{
margin: 0 20px;
}
.create-event{
margin-right: 20px;
}
.calendar-body{
height: 481px;
}
.calendar-body table{
width:100%;
height: 100%;
background: white;
}
td.other-month-cell{
background: #f1f1f1;
}
.calendar-days th{
font-size: 14px;
}
thead{
height: 33px;
background-color: #f1f1f1;
border-bottom: solid 2px #cacaca;
}
tbody{
height: 443px;
}
/* Month calendar */
#month-calendar td, #month-calendar th {
border: 1px solid #dadada;
text-align: left;
width: 14.2857%;
}
#month-calendar td span {
top: 6px;
margin-left: 6px;
position: relative;
}
#month-calendar .calendar-day-bar th {
vertical-align: middle;
font-size: 13px;
padding: 0px;
text-align: center;
}
#month-calendar .day-selected{
background-color: rgba(126,190,48,.1);
border: solid 1px #7ebe30 !important;
}
#month-calendar .event {
color: #4a4a4a;
font-size: 12px;
font-weight: bold;
height: 18px;
margin-left: 2px;
padding-left: 4px;
padding-top: 4px;
position: absolute;
width: 125px;
}
#month-calendar .office{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #d1c4e9;
}
#month-calendar .event:nth-child(2){
margin-top: 10px;
display: block;
}
#month-calendar .event:nth-child(3){
margin-top: 32px;
display: block;
}
#month-calendar .event:nth-child(3)::after {
font-weight: 100;
content: '\A \A 5 more...';
white-space: pre;
color: #828282;
}
/* Week calendar */
#week-calendar td, #week-calendar th {
border: 1px solid #dadada;
text-align: left;
padding-left: 6px;
padding-top: 6px;
width: 12.5%;
}
#week-calendar .calendar-day-bar th, #week-calendar .calendar-day-bar td {
vertical-align: middle;
font-size: 13px;
padding: 0px;
text-align: center;
}
#week-calendar .hour-cell{
height: 41px;
}
/* Day calendar */
/* Images transformation */
.right-arrow{
transform: rotateY(180deg);
}
.wz-selectable, input, textarea, [contentEditable], [contentEditable] * {
cursor: text;
outline: medium none;
}
.wz-unselectable {
cursor: default;
}
[contentEditable] * {
color: inherit;
font-family: inherit;
}
link {
display: none;
height: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
b {
font-weight: bold;
}
ol, ul {
list-style: outside none none;
}
hr {
margin: 0;
padding: 0;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
textarea {
resize: none;
}
audio {
display: none;
height: 0;
}
<section class="calendar-head">
<section class="my-calendars">
<span>My calendars</span>
<img src="https://static.inevio.com/app/207/flechita.png" alt="">
</section>
<section class="current-month">
<img class="left-arrow" src="https://static.inevio.com/app/207/arrow_back.png" alt="">
<span>September 2013</span>
<img class="right-arrow" src="https://static.inevio.com/app/207/arrow_back.png" alt="">
</section>
<section class="create-event right" id="create-event">
<img src="" alt="+">
<span>Create new event</span>
</section>
<section id="my-calendars-modal">
<section class="my-calendars-list">
<articles id="work" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Work</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
<articles id="office" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Office</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
<articles id="home" class="calendar">
<input type="checkbox" checked="checked" class="wz-ui-input"><label><i></i><span><figure></figure>Home</span></label>
<span class="right deleteCalendar">Eliminar</span>
</articles>
</section>
<section class="add-new-calendar" id="add-new-calendar">
<img src="" alt="+">
<span>Add new calendar</span>
</section>
</section>
<section id="create-event-modal">
<figure class="close-image create-event-modal-close">
<i></i>
</figure>
<!-- Falta implementar -->
</section>
<section id="create-calendar-modal">
<figure class="close-image create-calendar-modal-close">
<i></i>
</figure>
<form>
<artricle class="calendar-name">
<input type="text" placeholder=" Name of calendar">
</artricle>
<artricle class="calendar-color">
<span>Color</span>
<input type="color">
</artricle>
<artricle class="calendar-description">
<span>Description</span><br>
<textarea></textarea>
</artricle>
<button type="submit" class="create-calendar-button right">Create</button>
</form>
</section>
</section>
<section id="month-calendar" class="calendar-body calendar-active">
<table>
<thead class="calendar-day-bar">
<tr class="title-row">
<th class="title-cell">Sunday</th>
<th class="title-cell">Monday</th>
<th class="title-cell">Thusday</th>
<th class="title-cell">Wednesday</th>
<th class="title-cell">Thursday</th>
<th class="title-cell">Friday</th>
<th class="title-cell">Saturday</th>
</tr>
</thead>
<tbody class="calendar-days">
<tr class="week-row">
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="other-month-cell"></td>
<td class="day-cell"><span>1</span></td>
<td class="day-cell"><span>2</span></td>
<td class="day-cell"><span>3</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>4</span></td>
<td class="day-cell"><span>5</span></td>
<td class="day-cell"><span>6</span></td>
<td class="day-cell"><span>7</span></td>
<td class="day-cell"><span>8</span></td>
<td class="day-cell"><span>9</span></td>
<td class="day-cell"><span>10</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>11</span></td>
<td class="day-cell"><span>12</span></td>
<td class="day-cell"><span>13</span></td>
<td class="day-cell"><span>14</span></td>
<td class="day-cell">
<span>15</span>
<article class="event office"> Me voy a casar</article>
<article class="event"> Reunion con el jefe</article>
</td>
<td class="day-cell"><span>16</span></td>
<td class="day-cell"><span>17</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>18</span></td>
<td class="day-cell"><span>19</span></td>
<td class="day-cell"><span>20</span></td>
<td class="day-cell"><span>21</span></td>
<td class="day-cell day-selected"><span>22</span></td>
<td class="day-cell"><span>23</span></td>
<td class="day-cell"><span>24</span></td>
</tr>
<tr class="week-row">
<td class="day-cell"><span>25</span></td>
<td class="day-cell"><span>26</span></td>
<td class="day-cell"><span>27</span></td>
<td class="day-cell"><span>28</span></td>
<td class="day-cell"><span>29</span></td>
<td class="day-cell"><span>30</span></td>
<td class="day-cell"><span>31</span></td>
</tr>
</tbody>
</table>
</section>

CSS3 Accordion with Automatic Height

I'm trying to figure out how to make the height of each accordion div automatic, but it messes up the transition. Is there anyway to make the height 100% or automatic so I won't have to set it? http://jsfiddle.net/Rusxy/
HTML
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="radio" checked />
<label for="ac-1"><span>Honda Accordion</span></label>
<article class="ac-small">
<p>Some content... </p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio" />
<label for="ac-2"><span>Accordion to Jim</span></label>
<article class="ac-medium">
<p>Some content... </p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="radio" />
<label for="ac-3"><span>Accordion 3</span></label>
<article class="ac-medium">
<p>Some content... </p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="radio" />
<label for="ac-4"><span>Accordion 4</span></label>
<article class="ac-medium">
<p>Some content... </p>
</article>
</div>
</section>
CSS
.ac-container{
width: 400px;
margin: 10px auto 30px auto;
}
.ac-container label{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label span{
display: block;
background: transparent url(arrow_down.png) no-repeat right center;
}
.ac-container input:checked + label{
background: #c6e1ec;
color: #3d7489;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container input{
display: none;
}
.ac-container article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
transition:
height 0.3s ease-in-out,
box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
transition:
height 0.5s ease-in-out,
box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container article p{
font-style: italic;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ article.ac-small{
height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
height: 180px;
}
.ac-container input:checked ~ article.ac-large{
height: 230px;
}

One idea that I have had. Not perfect, but may be gets you going.
CSS
.ac-container{
width: 200px;
margin: 10px auto 30px auto;
}
.ac-container label{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
line-height: 33px;
font-size: 19px;
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
1px 0px 0px 0px rgba(255,255,255,0.9) inset,
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label span{
display: block;
background: transparent url(arrow_down.png) no-repeat right center;
}
.ac-container input:checked + label{
background: #c6e1ec;
color: #3d7489;
text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container input{
display: none;
}
.ac-container article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: auto;
position: relative;
z-index: 10;
transition:
height .3s ease-in-out,
box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container article p{
font-style: italic;
color: #777;
line-height: 0px;
font-size: 14px;
padding: 0px 20px;
margin: 0px 14px;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
transition: all .6s;
}
.ac-container input:checked ~ article p {
padding: 20px;
line-height: 23px;
}
Set the article to height auto, and make the p changing it's real size (changing the line-height, there are other posibilities).
fiddle