So here's the code:
html:
<!DOCTYPE html>
<html >
<script src="main.js"></script>
<head>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>בנה את המחשב שלך בצורה אוטומטית!</title>
<meta name="description" content="Build your PC Generator - Israel.">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="hint.css">
<script>
window.addEventListener("load", function(){
var slider = document.getElementById("slider");
slider.addEventListener("mousemove", function(){
document.getElementById("output").innerHTML = this.value + "₪";
});
});
</script>
</head>
<body >
<div id="welcome"> <div id="welcome-message-box"> <img src="images/logo.png" id="logo"> <h1 dir="rtl" style="text-align:center; color:#fff;font-weight: 100;">ChooseYourPc.com</h1> <p dir="rtl" style="text-align:center; color:#fff; ">
האתר נוצר על מנת לתת מענה למתחילים אשר רוצים לבנות מחשב משל עצמם. המחירים והחלקים מעודכנים באופן קבוע בהתאם למצב הנוכחי, האתר יהפוך את החיים שלכם לקלים יותר על ידי מתן רשימת חלקים שאיתה תוכלו להתחיל ולאחר מכן לשנות לפי הצרכים והעדפות שלכם. <br><br>
האתר פותר את הבעיה הכי קשה שבה אנו נתקלים כאשר בונים מחשב: לדעת אילו חלקים לבחור ולוודא שכל החלקים מתאימים ב-100%. תהנו ממאגר של מפרטי מחשב מומלצים לכל תקציב באשר הוא, כולם מאוזנים היטב ומהווים תמורה טובה למחיר.
</p> <button class="myButtonwhite" id='btnscrl' onclick="smoothScroll(document.getElementById('content'))" style=" margin-left:39%; position: relative; ">!בואו נתחיל</button></div> <div style="cursor: pointer;" class="arrow bounce" onclick="smoothScroll(document.getElementById('content'))"> </div></div>
<div id="content" style=" max-width: 800px; margin-left:auto;margin-right:auto; position:relative;">
<h1 align='center'> !בנה את מחשב הגיימינג שלך</h1>
<div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- auto ad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-9838071461609147"
data-ad-slot="2078936312"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<div style="border-bottom:1px solid #e6e6e6;"></div>
<h2 align='center'> ?כמה תרצה להוציא</h2>
<p dir="rtl" align='center'>
זה מה שישפיע על ביצועי המחשב שלך, מן הסתם.
<br>
</p>
<p align='center' dir="rtl" style="font-style: italic; "> בדיוק כמו שחשוב להמנע מהוצאות יתר על המחשב, חשוב גם לדאוג שהתקציב לא יהיה נמוך מידי בהתאם לדרישותך, שים לב. <br>
תוכל למצוא מבחני ביצועים של כרטיסי המסך המופיעים במפרטים כדי לראות את הביצועים המשוערים של המפרט שקיבלת.
</p>
<input type="range" id="slider" value="2000" onchange="bla()" step='25' min='2000' max="6000"> <div style="margin-left:100%; border: 0px solid #f5f5f5; height: 37px; width: 60px; border-radius: 0px; background: #6b6b6b; cursor: pointer; -webkit-appearance: none; margin-top: -44px; z-index:'9999';"><div id='output' style="text-align: center; color:white;line-height: 37px;;">2000₪</div></div>
<br>
<h2 align='center' dir="rtl"> תרצה לבצע Overclock על המעבד?</h2>
<div style="border-bottom:1px solid #e6e6e6;"></div>
<p dir="rtl" align='center'>
Overclocking הוא התהליך של כוונון רכיבי המחשב כדי לגרום להם לעבוד קשה יותר. לכל רכיב חומרה שנמצא במחשב שלכם יש מהירות שעון המשמשת כברירת מחדל ובמהירות זו יוצא הרכיב מהמפעל. Overclocking הוא התהליך של הגדלת מהירות השעון של הרכיב מעבר למהירות ברירת המחדל.
<br>
</p>
<p align='center' dir="rtl" style="font-style: italic; "> אל תחשבו שזה הכרחי, לפעמים ניתן לקבל מחשב טוב יותר עבור הכסף שאותו תצטרכו לבזבז על מנת להתאים את המחשב שלכם לOverclocking. תבחרו את האופציה הזאת אך ורק אם אתם יודעים מה אתם עושים ואתם נלהבים מהנושא.
</p>
<div id="choices">
<button class="hint--bottom" data-hint="בקרוב ..." dir="rtl" id='ChoiceButton' >אני לא מעוניין </button>
<button class="hint--bottom" data-hint="בקרוב ..." id='ChoiceButton' dir="rtl">אולי בעתיד</button>
<button class="hint--bottom" data-hint="בקרוב ..." id='ChoiceButton' dir="rtl">אני מעוניין לעשות Overclock</button>
</div>
<h2 align='center' dir="rtl" id="moreoptions">אפשרויות נוספות</h2>
<div style="border-bottom:1px solid #e6e6e6;"></div>
<p dir="rtl" align='center'>
כאן אתם יכולים להתאים אישית מספר דברים נוספים כמו האם להוסיף Windows אם אתם צריכים מערכת הפעלה, או האם לכלול כונן אופטי.
<br>
</p>
<p align='center' dir="rtl" style="font-style: italic; "> שימו לב שכמובן שככל שתבחרו ביותר אופציות כך גם התקציב שילך על המחשב עצמו ירד, ומן הסתם הביצועים לא יהיו זהים.
</p>
<div id="choices2">
<button id='windowsAdd' dir="rtl" value="0" onclick="btnColor(this, 'rgb(107,107,107)');bla()" >הוספת Windows</button>
<button id='dvdburner' dir="rtl" value="0" onclick="btnColor(this, 'rgb(107,107,107)');bla()">הוספת צורב</button>
</div>
<br>
<div class="alert" id="alert" role="alert"></div>
<div style="border-bottom:1px solid #e6e6e6; margin-bottom:20px;"></div>
<div style="text-align:center;margin:auto;">
<button class="myButton" id='btn' onclick="show()" style=" position: relative;">בנה מחשב</button> </div>
<div id = "myDiv" align='center' style="display:none; margin"><img id = "myImage" src = "images/loading.gif"></div>
<br><br><br><br><br><br><br><br><br><br><br>
<p align="middle"> עדכון נתונים אחרון: 15/04/2016</p>
</div>
<div id="footer"> <p id="rights">כל הזכויות שמורות © 2016 BuildYourPc </p> <p id="creator">נוצר על-ידי א י ת י </p></div>
</body>
</html>
<!--
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
[:::::::::::::: ::::::::::::::]
[:::::::::::::: ::::::::::::::]
[::::::[[[[[[[: :]]]]]]]::::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ CODE THE WEB ]:::::]
[:::::[ http://brackets.io ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[:::::[ ]:::::]
[::::::[[[[[[[: :]]]]]]]::::::]
[:::::::::::::: ::::::::::::::]
[:::::::::::::: ::::::::::::::]
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
-->
CSS:
html {
background-color: #fff;
-webkit-font-smoothing: antialiased;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
box-sizing: border-box;
overflow: scroll;
overflow-x: hidden;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
*,
*:before,
*:after {
box-sizing: inherit;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
#footer{
max-height: 0%;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1.5rem;
color: white;
background-color: #333333;
text-align: center;
}
#rights{
position: inherit;
bottom: -6px;
right: 0;
left: 0;
direction: rtl;
}
#creator{
position: inherit;
bottom: -2px;
font-size: 12px;
right: 10px;
direction: rtl;
}
#bottom{
direction: rtl;
word-wrap: break-word;
width: 350px;
}
#startingimage{
background: url("http://cwsmgmt.corsair.com/media/Blogs/how-to-build-a-pc/Motherboard-Selection/mobo.jpg");
background-size: cover;
background-position: center center;
text-align: center;
}
#welcome-message-box{
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding: 20px;
border-radius: 10px;
background: rgba(0,0,0,.7);
display: block;
z-index: 2;
}
#welcome {
top: 0; right: 0; bottom: 0; left: 0;
height: 100vh;
width: 100%;
background: url("http://i.imgur.com/fmKShVl.jpg");
background-size: cover;
background-position: center center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
background-attachment: fixed;
position: relative;
}
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:0px;
border:#eaebec 1px solid;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
/*
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
*/
}
table span{ text-shadow: 0px 0px 0px 0px #000;}
table th {
padding:21px 25px 22px 25px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
background: #fafafa;
}
table th:first-child{
text-align: center;
padding-left:20px;
}
table tr:first-child th:first-child{
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
}
table tr:first-child th:last-child{
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
}
table tr{
text-align: right;
padding-left:20px;
}
table tr td:first-child{
text-align: center;
padding-left:20px;
border-left: 0;
}
table tr td {
padding:18px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
}
table tr.even td{
background: #fafafa;
}
table tr:last-child td{
border-bottom:0;
}
table tr:last-child td:first-child{
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child{
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
}
table tr:hover td{
background: #f2f2f2;
cursor: pointer;
}
#spanInfo{
max-width: 310px;
margin-right:22px;
font-weight: lighter;
font-weight:normal;
text-align: right;
direction: rtl;}
.myButton {
background-color:#6b6b6b;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #6b6b6b;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
padding: 10px 90px;
text-decoration:none;
}
.myButton:hover {
background-color:#3d3d3d;
}
.myButtonwhite {
background-color:#ffffff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:10px;
border:1px solid #ffffff;
display:inline-block;
cursor:pointer;
color:#333;
font-family:Arial;
font-size:17px;
padding: 13px 20px;
}
.myButtonwhite:hover {
background-color:#333;
color: white;
border:1px solid #333;
}
/*
.myButton:active {
position:relative;
top:1px;
}
*/
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: -0.5px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 37px;
cursor: pointer;
-webkit-box-shadow: inset 0px 1px 2px 1px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0px 1px 2px 1px rgba(0,0,0,0.1);
box-shadow: inset 0px 1px 2px 1px rgba(0,0,0,0.1);
background: #f5f5f5;
border-radius: 0px;
border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
/* box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
border: 0px solid #f5f5f5;
height: 37px;
width: 15px;
border-radius: 0px;
background: #6b6b6b;
cursor: pointer;
-webkit-appearance: none;
margin-top: 0px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #f5f5f5;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 37px;
cursor: pointer;
/* box-shadow: 0.2px 0.2px 0px #000000, 0px 0px 0.2px #0d0d0d;*/
background: #f5f5f5;
border-radius: 0px;
border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
/* box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
border: 0px solid #f5f5f5;
height: 36px;
width: 15px;
border-radius: 0px;
background: #6b6b6b;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 37px;
cursor: pointer;
background: transparent;
border-color: transparent;html {
background-color: #e6e9e9;
background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
-webkit-font-smoothing: antialiased;
}
body {
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 800px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
}
/*
h1, h2, h3, h4, h5, h6 {
color: #222;
font-weight: 600;
line-height: 1.3em;
}
h2 {
margin-top: 1.3em;
}
a {
color: #0083e8;
}
b, strong {
font-weight: 600;
}
samp {
display: none;
}
img {
-webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
background: transparent;
border: 10px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
display: block;
margin: 1.3em auto;
max-width: 95%;
}
#-webkit-keyframes colorize {
0% {
-webkit-filter: grayscale(100%);
}
100% {
-webkit-filter: grayscale(0%);
}
}
#keyframes colorize {
0% {
filter: grayscale(100%);
}
100% {
filter: grayscale(0%);
}
}
*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #e8e8e8;
border: 0px solid #010101;
border-radius: 0px;
/* box-shadow: 0.2px 0.2px 0px #000000, 0px 0px 0.2px #0d0d0d;*/
}
input[type=range]::-ms-fill-upper {
background: #f5f5f5;
border: 0px solid #010101;
border-radius: 0px;
/* box-shadow: 0.2px 0.2px 0px #000000, 0px 0px 0.2px #0d0d0d;*/
}
input[type=range]::-ms-thumb {
/* box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;*/
border: 0px solid #f5f5f5;
width: 15px;
border-radius: 0px;
background: #6b6b6b;
cursor: pointer;
height: 36px;
}
input[type=range]:focus::-ms-fill-lower {
background: #f5f5f5;
}
input[type=range]:focus::-ms-fill-upper {
background: #ffffff;
}
}
span {display: none;position: absolute; font-weight: normal;}
a span {display: none; position: relative; color: #000; background: #fff; width: 350px; height: auto;font-weight: normal;}
a {position: relative;font-weight: normal;}
a:hover span {position:absolute;bottom:-70; display: block;z-index: 9999; -webkit-box-shadow: 0px 5px 14px -1px rgba(0,0,0,0.25); -moz-box-shadow: 0px 5px 14px -1px rgba(0,0,0,0.25); box-shadow: 0px 5px 14px -1px rgba(0,0,0,0.25); display: block;text-align:center;font-weight: normal; right:0; }
a:hover span:after{
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
top:0.5%;
right: 5%;
box-sizing: border-box;
border: 7px solid black;
border-color: transparent transparent #ffffff #ffffff;
transform-origin: 0 0;
transform: rotate(135deg);
-webkit-box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.08);
-moz-box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.08);
box-shadow: -3px 3px 5px 0 rgba(0, 0, 0, 0.08);
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.arrow {
position: absolute;
bottom: 0;
right: 49.25%;
width: 35px;
height: 35px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
-moz-animation: bounce 3s infinite;
-webkit-animation: bounce 3s infinite;
animation: bounce 3s infinite;
}
#choices{
max-width: 800px ;
position: relative;
text-align:center;margin:auto;
}
#choices2{
max-width: 800px ;
position: relative;
text-align:center;margin:auto;
}
#ChoiceButton {
background-color:#6b6b6b;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #6b6b6b;
display:inline-block;
cursor:pointer;
color:#A2A2A2;
font-family:Arial;
font-size:13px;
padding: 10px 20px;
text-decoration:none;
}
#windowsAdd {
background-color:#6b6b6b;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #6b6b6b;
display:inline-block;
cursor:pointer;
color:white;
font-family:Arial;
font-size:13px;
padding: 10px 20px;
text-decoration:none;
}
#dvdburner {
background-color:#6b6b6b;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #6b6b6b;
display:inline-block;
cursor:pointer;
color:white;
font-family:Arial;
font-size:13px;
padding: 10px 20px;
text-decoration:none;
}
#dvdburner:hover{
background-color:#3d3d3d;
}
#windowsAdd:hover{
background-color:#3d3d3d;
}
#ChoiceButton:hover {
background-color:#3d3d3d;
}
button:focus {outline:0 !important;}
#popup{
background:#F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
left:-30px;
display:none;
}
#popup:after{
content:'';
position:absolute;
bottom:-10px;
z-index: 5;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-10px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
#btn1:hover #popup{
display:block;
}
#logo{
display: block;
margin-left: auto;
margin-right: auto;
}
.alert{
background-color:
rgb(252, 248, 227);
border-bottom-color:
rgb(138, 109, 59);
border-bottom-left-radius:
4px;
border-bottom-right-radius:
4px;
border-bottom-style:
none;
border-bottom-width:
0px;
border-image-outset:
0px;
border-image-repeat:
stretch;
border-image-slice:
100%;
border-image-source:
none;
border-image-width:
1;
border-left-color:
rgb(138, 109, 59);
border-left-style:
none;
border-left-width:
0px;
border-right-color:
rgb(138, 109, 59);
border-right-style:
none;
border-right-width:
0px;
border-top-color:
rgb(138, 109, 59);
border-top-left-radius:
4px;
border-top-right-radius:
4px;
border-top-style:
none;
border-top-width:
0px;
box-sizing:
border-box;
color:
rgb(138, 109, 59);
display:
block;
font-family:
'Source Sans Pro', Calibri, Candara, Arial, sans-serif;
font-size:
15px;
height:
51px;
line-height:
21.4286px;
margin-bottom:
20px;
padding-bottom:
15px;
padding-left:
15px;
padding-right:
15px;
padding-top:
15px;
text-align:
center;
text-shadow:
none;
width: 800px;
position: relative;
left:0;
right:0;
margin-bottom: -20px;
margin-top: -5px;
height: auto;
display: none;
border:1px solid #F7E5C6;
direction: rtl;
}
https://jsfiddle.net/gLxefxbf/2/
If you enter this jsfiddle from chrome the gray div next to the slider will be at the same height as the slider. but if you enter from Firefox the div will be positioned slightly higher. I really don't know what is causing that problem, Thanks for the help!
Whenever trying to style something I would always recommend trying to use a % marker instead of pixels, as different devices or browsers can display things in different ways;
<div id="content" style=" max-width: 800px; margin-left:auto;margin-right:auto; position:relative;">
Change to something like
<div id="content" style=" max-width: 50%; margin-left:auto;margin-right:auto; position:relative;">
If you wanted a blank space on the right simply create another div that would allow for that.
Hope that helps.
Related
I was stuck with this for a whole hour,when it is 786px or lower I cannot center horizontally the logo ,added to that I cannot position the text including "web developer/ ui designer" the same when it is existing in the bigger resolution, just take a look at the media query code ...
the HTML code
<!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">
<link rel="stylesheet" href="styles.css">
<title>Home</title>
</head>
<body>
<section class="navigationBar">
<header><h2>meddhiaka's Portfolio</h2></header>
<nav>
<div id="navChild">About</div>
<div id="navChild">Work</div>
<div id="navChild">Contact</div>
</nav>
</section>
<section class="fullNamePart">
<p id="fullName">Hey, I'm Med Dhia <span></span></p>
<p id="profession">a web developer/ ui designer</p>
</section>
</body>
</html>
the CSS code :
#import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght#100;200;300;500;800;900&display=swap');
body{
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
}
.navigationBar{
width: 100%;
height: 55px;
animation: backgroundColorVar 2s linear infinite;
border-bottom: 3px solid black;
position: fixed;
z-index: 99;
}
.navigationBar > nav{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
height: 100%;
margin-left: 20px;
}
#media (max-width: 768px) {
.navigationBar{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 80px;
}
.navigationBar > nav{
justify-content: center;
position: relative;
top: 25px;
}
.navigationBar header{
position: relative;
z-index: 3;
margin: auto;
margin-bottom: 30px;
}
.fullNamePart{
padding-left: 7px;
}
#profession{
font-size: 25px !important;
position: relative !important;
bottom: 70px !important;
left: 20px !important;
}
}
#navChild{
padding-left: 15px;
padding-right: 15px;
margin-left: 2px;
color: #fff;
font-weight: 500;
cursor:pointer;
transition: color 1s, transform 2s;
}
#navChild:hover{
color: black;
transform: scale(1.2);
}
.navigationBar header{
position: fixed;
left: 10px;
top: -4px;
color: #fff;
font-weight: 900;color: white;
text-shadow:
0 1px 0px black,
1px 0 0px black,
1px 2px 1px black,
2px 1px 1px black,
2px 3px 2px black,
3px 2px 2px black,
3px 4px 2px black,
4px 3px 3px black,
4px 5px 3px black,
5px 4px 2px black,
5px 6px 2px black,
6px 5px 2px black;
cursor: pointer;
word-spacing: 2px;
transition: 0.3s;
}
.navigationBar header:hover{
transform: scale(1.05);
}
.fullNamePart{
width: 100%;
height: 100vh;
padding-top: 4vh;
animation: fullNameBackground 4s ease-in-out infinite;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
#fullName{
font-weight: 900;
font-size: 60px;
}
#profession{
position: relative;
bottom: 70px;
font-size: 30px;
color: #fff;
font-style: italic;
font-weight: 200;
}
#keyframes backgroundColorVar{
0%{
background-color: brown;
}
50%{
background-color: rgb(118, 0, 0);
}
100%{
background-color: brown;
}
}
#keyframes fullNameBackground{
0%{
background: radial-gradient(
circle at right,
white,
brown 30%
);
}
10%{
background: radial-gradient(
circle at right,
white,
brown 30.5%
);
}
20%{
background: radial-gradient(
circle at right,
white,
brown 31%
);
}
30%{
background: radial-gradient(
circle at right,
white,
brown 31.5%
);
}
40%{
background: radial-gradient(
circle at right,
white,
brown 32%
);
}
50%{
background: radial-gradient(
circle at right,
white,
brown 32.5%
);
}
60%{
background: radial-gradient(
circle at right,
white,
brown 32%
);
}
70%{
background: radial-gradient(
circle at right,
white,
brown 31.5%
);
}
80%{
background: radial-gradient(
circle at right,
white,
brown 31%
);
}
90%{
background: radial-gradient(
circle at right,
white,
brown 30.5%
);
}
100%{
background: radial-gradient(
circle at right,
white,
brown 30%
);
}
}
It's because your <header> has a position: fixed. All you had to do is not cascade it. Move it before the #media query.
#import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght#100;200;300;500;800;900&display=swap');
body{
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
}
.navigationBar{
width: 100%;
height: 55px;
animation: backgroundColorVar 2s linear infinite;
border-bottom: 3px solid black;
position: fixed;
z-index: 99;
}
.navigationBar > nav{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
height: 100%;
margin-left: 20px;
}
.navigationBar header{
position: fixed;
left: 10px;
top: -4px;
color: #fff;
font-weight: 900;color: white;
text-shadow:
0 1px 0px black,
1px 0 0px black,
1px 2px 1px black,
2px 1px 1px black,
2px 3px 2px black,
3px 2px 2px black,
3px 4px 2px black,
4px 3px 3px black,
4px 5px 3px black,
5px 4px 2px black,
5px 6px 2px black,
6px 5px 2px black;
cursor: pointer;
word-spacing: 2px;
transition: 0.3s;
}
#media (max-width: 768px) {
.navigationBar{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 80px;
}
.navigationBar > nav{
justify-content: center;
position: relative;
top: 25px;
}
.navigationBar header{
position: relative;
z-index: 3;
margin: auto;
margin-bottom: 30px;
}
.fullNamePart{
padding-left: 7px;
}
#profession{
font-size: 25px !important;
position: relative !important;
bottom: 70px !important;
left: 20px !important;
}
}
#navChild{
padding-left: 15px;
padding-right: 15px;
margin-left: 2px;
color: #fff;
font-weight: 500;
cursor:pointer;
transition: color 1s, transform 2s;
}
#navChild:hover{
color: black;
transform: scale(1.2);
}
.navigationBar header:hover{
transform: scale(1.05);
}
.fullNamePart{
width: 100%;
height: 100vh;
padding-top: 4vh;
animation: fullNameBackground 4s ease-in-out infinite;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
#fullName{
font-weight: 900;
font-size: 60px;
}
#profession{
position: relative;
bottom: 70px;
font-size: 30px;
color: #fff;
font-style: italic;
font-weight: 200;
}
Normal View:
Mobile View:
#media(max-width:575px){
.navigationBar header{
left:0;
right:0;
text-align:center;
}
}
i have this code:
<li><input type="checkbox" id="checkboxThree" value="Alergia3" ><label for="checkboxThree">Alergia 1</label></li>
<li><input type="checkbox" id="checkboxFour" value="Alergia4"><label for="checkboxFour">Alergia 1</label></li>
<li><input type="checkbox" id="checkboxFive" value="Alergia5"><label for="checkboxFive">Alergia 1</label></li>
<li><input type="checkbox" id="checkboxSix" value="Alergia6" ><label for="checkboxSix">Alergia 1</label></li>
But I don't want to use "id" and "for" because I have to do other thing later and I can't use them. I have see this question: Possible to associate label with checkbox without using "for=id"? and I have triet what the first peson says:
<li><label ><input type="checkbox" name="Alergia1">Alergia 1</label></li>
<li><label ><input type="checkbox" name="Alergia2" >Alergia 1</label></li>
But It does not work either.
This is the entire project to see that it does not work:
.font-robo {
font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
}
.font-poppins {
font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
/* ==========================================================================
#GRID
========================================================================== */
/* ==========================================================================
#BOX-SIZING
========================================================================== */
/**
* More sensible default box-sizing:
* css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
*/
/* ==========================================================================
#RESET
========================================================================== */
/**
* A very simple reset that sits on top of Normalize.css.
*/
body,
h1, h2, h3, h4, h5, h6,
blockquote, p, pre,
dl, dd, ol, ul,
figure,
hr,
fieldset, legend {
margin: 0;
padding: 0;
}
/**
* Remove trailing margins from nested lists.
*/
li > ol,
li > ul {
margin-bottom: 0;
}
/**
* Remove default table spacing.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/**
* 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;`
* on fieldsets.
*/
fieldset {
min-width: 0;
/* [1] */
border: 0;
}
button {
outline: none;
background: none;
border: none;
}
/* ==========================================================================
#PAGE WRAPPER
========================================================================== */
.page-wrapper {
height:100vh;
}
body {
font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
font-weight: 400;
font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
color: #00929a !important;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 13px;
}
/* ==========================================================================
#BACKGROUND
========================================================================== */
.bg-blue {
background: #2c6ed5;
}
.bg-red {
background: #fa4251;
}
.bg-gra-01 {
background: -webkit-gradient(linear, left bottom, left top, from(#00929a), to(#034649));
background: -webkit-linear-gradient(bottom, #00929a 0%, #034649 100%);
background: -moz-linear-gradient(bottom, #00929a 0%, #034649 100%);
background: -o-linear-gradient(bottom, #00929a 0%, #034649 100%);
background: linear-gradient(to top, #00929a 0%, #034649 100%);
}
.bg-gra-02 {
background: -webkit-gradient(linear, left bottom, right top, from(#00929a), to(#034649));
background: -webkit-linear-gradient(bottom left, #00929a 0%, #034649 100%);
background: -moz-linear-gradient(bottom left, #00929a 0%, #034649 100%);
background: -o-linear-gradient(bottom left, #00929a 0%, #034649 100%);
background: linear-gradient(to top right, #00929a 0%, #034649 100%);
}
/* ==========================================================================
#CHECKBOX
========================================================================== */
.container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 13px;
}
ul.ks-cboxtags {
list-style: none;
margin-bottom: 20px;
}
ul.ks-cboxtags li{
display: inline;
}
ul.ks-cboxtags li label{
display: inline-block;
background-color: rgba(255, 255, 255, .9);
border: 2px solid rgba(139, 139, 139, .3);
color: #adadad;
border-radius: 25px;
white-space: nowrap;
margin: 3px 0px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: all .2s;
}
ul.ks-cboxtags li label {
padding: 20px 20px;
cursor: pointer;
margin:20px;
}
ul.ks-cboxtags li label::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 12px;
padding: 20px;
transition: transform .3s ease-in-out;
}
ul.ks-cboxtags li input[type="checkbox"]:checked + label {
border: 2px solid #00929a;
background-color: #00929a;
color: #fff;
transition: all .2s;
}
ul.ks-cboxtags li input[type="checkbox"] {
display: absolute;
}
ul.ks-cboxtags li input[type="checkbox"] {
position: absolute;
width: 60vh;
opacity: 0;
}
ul.ks-cboxtags li input[type="checkbox"]:focus + label {
border: 2px solid #034649;
}
/* ==========================================================================
#SPACING
========================================================================== */
.p-t-100 {
padding-top: 100px;
}
.p-t-130 {
padding-top: 130px;
}
.p-t-180 {
padding-top: 180px;
}
.p-t-20 {
padding-top: 20px;
}
.p-t-15 {
padding-top: 15px;
}
.p-t-10 {
padding-top: 10px;
}
.p-t-30 {
padding-top: 30px;
}
.p-b-100 {
padding-bottom: 100px;
}
.m-r-45 {
margin-right: 45px;
}
/* ==========================================================================
#WRAPPER
========================================================================== */
.wrapper {
margin: 0 auto;
}
.wrapper--w960 {
max-width: 960px;
}
.wrapper--w780 {
max-width: 780px;
}
.wrapper--w680 {
max-width: 680px;
}
/* ==========================================================================
#BUTTON
========================================================================== */
.btn {
display: inline-block;
line-height: 50px;
padding: 0 50px;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
cursor: pointer;
font-size: 18px;
color: #fff;
font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif;
}
.btn--radius {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.btn--radius-2 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btn--pill {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.btn--green {
background: #00929a;
}
.btn--green:hover {
background: #00929a;
}
.btn--blue {
background: #034649;
}
.btn--blue:hover {
background: #034649;
}
/* ==========================================================================
#DATE PICKER
========================================================================== */
td.active {
background-color: #034649;
}
input[type="date" i] {
padding: 14px;
}
.table-condensed td, .table-condensed th {
font-size: 14px;
font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif;
font-weight: 400;
}
.daterangepicker td {
width: 40px;
height: 30px;
}
.daterangepicker {
border: none;
-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
display: none;
border: 1px solid #e0e0e0;
margin-top: 5px;
}
.daterangepicker::after, .daterangepicker::before {
display: none;
}
.daterangepicker thead tr th {
padding: 10px 0;
}
.daterangepicker .table-condensed th select {
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
padding: 5px;
outline: none;
}
/* ==========================================================================
#FORM
========================================================================== */
input {
outline: none;
margin: 0;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
width: 100%;
font-size: 14px;
font-family: inherit;
}
.input--style-4 {
line-height: 50px;
background: #fafafa;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0 20px;
font-size: 16px;
color: #666;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.input--style-4::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #666;
}
.input--style-4:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #666;
opacity: 1;
}
.input--style-4::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #666;
opacity: 1;
}
.input--style-4:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #666;
}
.input--style-4:-ms-input-placeholder {
/* Microsoft Edge */
color: #666;
}
.label {
font-size: 16px;
color: #555;
text-transform: capitalize;
display: block;
margin-bottom: 5px;
}
.radio-container {
display: inline-block;
position: relative;
padding-left: 30px;
cursor: pointer;
font-size: 16px;
color: #666;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radio-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.radio-container input:checked ~ .checkmark {
background-color: #e5e5e5;
}
.radio-container input:checked ~ .checkmark:after {
display: block;
}
.radio-container .checkmark:after {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #00929a;
}
.checkmark {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
height: 20px;
width: 20px;
background-color: #e5e5e5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.input-group {
position: relative;
margin-bottom: 22px;
}
.input-group-icon {
position: relative;
}
.input-icon {
position: absolute;
font-size: 18px;
color: #999;
right: 18px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
}
/* ==========================================================================
#SELECT2
========================================================================== */
.select--no-search .select2-search {
display: none !important;
}
.rs-select2 .select2-container {
width: 100% !important;
outline: none;
background: #fafafa;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.rs-select2 .select2-container .select2-selection--single {
outline: none;
border: none;
height: 50px;
background: transparent;
}
.rs-select2 .select2-container .select2-selection--single .select2-selection__rendered {
line-height: 50px;
padding-left: 0;
color: #555;
font-size: 16px;
font-family: inherit;
padding-left: 22px;
padding-right: 50px;
}
.rs-select2 .select2-container .select2-selection--single .select2-selection__arrow {
height: 50px;
right: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.rs-select2 .select2-container .select2-selection--single .select2-selection__arrow b {
display: none;
}
.rs-select2 .select2-container .select2-selection--single .select2-selection__arrow:after {
font-family: "Material-Design-Iconic-Font";
content: '\f2f9';
font-size: 24px;
color: #999;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.rs-select2 .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow::after {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.select2-container--open .select2-dropdown--below {
border: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
border: 1px solid #e0e0e0;
margin-top: 5px;
overflow: hidden;
}
.select2-container--default .select2-results__option {
padding-left: 22px;
}
/* ==========================================================================
#TITLE
========================================================================== */
.title {
font-size: 30px;
font-weight: 400;
margin-bottom: 20px;
}
/*========================================================================== */
.frase {
font-size: 18px;
color: #525252;
font-weight: 400;
margin-bottom: 40px;
}
/* ==========================================================================
#CARD
========================================================================== */
.card {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #fff;
}
.card-4 {
background: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
}
.card-4 .card-body {
padding: 17px 50px;
padding-bottom: 55px;
padding-top: 20px;
}
#media (max-width: 767px) {
.card-4 .card-body {
padding: 50px 40px;
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Required meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title Page-->
<title>Alergias</title>
<!-- Icons font CSS-->
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<!-- Font special for pages-->
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Vendor CSS-->
<!-- Main CSS-->
<link href="css/alergias.css" rel="stylesheet" media="all">
</head>
<body>
<div class="page-wrapper bg-gra-02 p-t-130 p-b-100 font-poppins">
<div class="wrapper wrapper--w680">
<div class="card card-4">
<div class="card-body">
<h2 class="title">Alergias</h2>
<h5 class="frase">Por favor, elige todas las alergias que tengas, para poder hacer los menus adaptados a ti:</h5>
<form method="POST">
<!---------------------------------------------------------------------->
<div class="container">
<ul class="ks-cboxtags">
<li><label ><input type="checkbox" name="Alergia1">Alergia 1</label></li>
<li><label ><input type="checkbox" name="Alergia2" >Alergia 1</label></li>
<li><input type="checkbox" id="checkboxThree" value="Alergia3" ><label for="checkboxThree">Alergia 1</label></li>
<li><input type="checkbox" id="checkboxFour" value="Alergia4"><label for="checkboxFour">Alergia 1</label></li>
<li><input type="checkbox" id="checkboxFive" value="Alergia5"><label for="checkboxFive">Alergia 1</label></li>
<li><input type="checkbox" id="checkboxSix" value="Alergia6" ><label for="checkboxSix">Alergia 1</label></li>
<li><input type="checkbox" id="checkboxSeven" value="Alergia7"><label for="checkboxSeven">Alergia 1</label></li>
<li><input type="checkbox" id="checkboxEight" value="Alergia8"><label for="checkboxEight">Alergia 1</label></li>
</ul>
</div>
<!---------------------------------------------------------------------->
<div class="p-t-15">
<button class="btn btn--radius-2 btn--blue" type="submit">Registrarse</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
So the first two checkboxes doesn't work.
Is there other way to do that? Thank you!
It doesn't seem to work for the first two "checkboxes" because putting the checkboxes in the label elements makes this CSS rule stop working:
ul.ks-cboxtags li input[type="checkbox"]:checked + label
That rule only applies to a checkbox followed by a label, not a label with a checkbox inside it.
If you're going to use the pattern with the checkbox inside the label, you're going to have to find a different way to do the styling. CSS isn't my strong suit, but as I understand it it's hard to style an element based on something inside that element. (There was once, briefly, a :contains pseudo-class, but it was never broadly supported because IIRC there were issues with performance.) This question's answers describe ways to do it, but unfortunately I think you're stuck with JavaScript if you do the containment.
This question already has an answer here:
Vertically align a flexbox
(1 answer)
Closed 5 years ago.
I'm currently having issues vertically centering the wrapper. I attempted to create a div that displays flex and aligns items center as suggested by another post and it didn't work. Any ideas why and how to resolve it?
body {
font-family: Arial, sans-serif;
background: #ddd;
}
h1 {
text-align: center;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
color: #333;
text-shadow: 0 1px 0 #fff;
margin: 50px 0;
}
#center {
display: flex;
align-items: center;
}
#wrapper {
width: 100px;
margin: 0 auto;
background: #fff;
padding: 20px;
border: 10px solid #aaa;
border-radius: 15px;
background-clip: padding-box;
text-align: center;
}
.button {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
padding: 5px 10px;
border: 1px solid #aaa;
background-color: #eee;
background-image: linear-gradient(top, #fff, #f0f0f0);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
color: #666;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
cursor: pointer;
transition: all 0.2s ease-out;
}
.button:hover {
border-color: #999;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.button:active {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay.light {
background: rgba(255, 255, 255, 0.5);
}
.overlay .cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 75px auto;
padding: 20px;
background: #fff;
border: 1px solid #666;
width: 300px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
position: relative;
}
.light .popup {
border-color: #aaa;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.popup h2 {
margin-top: 0;
color: #666;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
width: 20px;
height: 20px;
top: 20px;
right: 20px;
opacity: 0.8;
transition: all 200ms;
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #666;
}
.popup .close:hover {
opacity: 1;
}
.popup .content {
max-height: 400px;
overflow: auto;
}
.popup p {
margin: 0 0 1em;
}
.popup p:last-child {
margin: 0;
}
iframe {
border: none;
}
<div id="center">
<div id="wrapper">
<p><a class="button" href="#popup1">Click Me</a></p>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Drop Day</h2>
<a class="close" href="#">×</a>
<div class="content">
<p>Hello</p>
</div>
</div>
</div>
</div>
Your main wrapper (div#center) must have its height defined:
body {
font-family: Arial, sans-serif;
background: #ddd;
}
h1 {
text-align: center;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
color: #333;
text-shadow: 0 1px 0 #fff;
margin: 50px 0;
}
#center {
display: flex;
align-items: center;
/* or any other height you want */
height: 100vh;
}
#wrapper {
width: 100px;
margin: 0 auto;
background: #fff;
padding: 20px;
border: 10px solid #aaa;
border-radius: 15px;
background-clip: padding-box;
text-align: center;
}
.button {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
padding: 5px 10px;
border: 1px solid #aaa;
background-color: #eee;
background-image: linear-gradient(top, #fff, #f0f0f0);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
color: #666;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
cursor: pointer;
transition: all 0.2s ease-out;
}
.button:hover {
border-color: #999;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.button:active {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay.light {
background: rgba(255, 255, 255, 0.5);
}
.overlay .cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 75px auto;
padding: 20px;
background: #fff;
border: 1px solid #666;
width: 300px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
position: relative;
}
.light .popup {
border-color: #aaa;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.popup h2 {
margin-top: 0;
color: #666;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
width: 20px;
height: 20px;
top: 20px;
right: 20px;
opacity: 0.8;
transition: all 200ms;
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #666;
}
.popup .close:hover {
opacity: 1;
}
.popup .content {
max-height: 400px;
overflow: auto;
}
.popup p {
margin: 0 0 1em;
}
.popup p:last-child {
margin: 0;
}
iframe {
border: none;
}
<html>
<head>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'>
</head>
<body>
<div id="center">
<div id="wrapper">
<p><a class="button" href="#popup1">Click Me</a></p>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Drop Day</h2>
<a class="close" href="#">×</a>
<div class="content">
<p>Hello</p>
</div>
</div>
</div>
</div>
</body>
</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
How can I float the button all the way right?
I've tried everyhting to float it right, and change the position to absolute, but I have had no luck pushing the button to the right edge of the text area.
http://jsfiddle.net/hz0fo895/
#counter { float:left; position:relative; margin-left:20px; margin-top:5px;}
.stringsharewrapper { width:100%; height:auto; margin-top:10px; }
.writestring { width:90%; left:20px; height:80px; position:relative; margin-top:10px; }
.stringtitle { color:black; font-family:arial; font-family: Helvetica, Arial, "Sans Serif"; font-size:20px; font-weight:bold; margin-left:20px; margin-top:5px;}
/*----------Filter Button 1 ------------*/
#stringbutton2[type=checkbox]
{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
[for="stringbutton2"]
{
background: #EEE;
background: linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -moz-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -ms-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -o-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFBF00),color-stop(100%,#FE9A2E));
background: -webkit-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: inset 0px 0px 1px 0px #FFF;
color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBF00',endColorstr='#FE9A2E',GradientType=0);
font-family: Helvetica,Arial,"Sans Serif";
font-size: 13px;
font-weight: bold;
left: 5%;
moz-border-radius: 5px;
moz-box-shadow: inset 0px 0px 1px 0px #FFF;
padding: 0;
padding: 6px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px #DDD;
top: 4px;
webkit-border-radius: 5px;
webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
width: 100px;
}
[for="stringbutton2"]:hover
{
background: #CCC;
background: -moz-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -ms-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -o-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0B2F3A),color-stop(100%,#100719));
background: -webkit-linear-gradient(top,#0B2F3A 0%,#100719 100%);
border-color: #BBB;
color: #FFFFFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B2F3A',endColorstr='#100719',GradientType=0);
font-weight: bold;
}
[for="stringbutton2"] span.filterswitch:last-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked
{
color: #FFA317;
}
#stringbutton2[type=checkbox]:checked~ .filtercontent
{
display: block;
visibility: visible;
width: 100%;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:first-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:last-of-type
{
color: #3CC;
display: block;
visibility: visible;
}
/*-------------Filter Button Container---------------*/
.submitcontainer
{
position: relative;
width: 300px; top:0; float:right;
}
<div class="sharepagetab sharewrapper activeshare" id="ashare">
<div class="allshares">
<div class="shares">
<div class='stringsharewrapper'>
<span class="stringtitle">Write Something</span><br />
<textarea class="writestring" onKeyUp="textCounter2(this,'counter',150);"></textarea>
<br />
<input disabled class="charInput" size="3" value="150" id="counter">
<!----------Write button------------>
<div class="submitcontainer">
<input onclick="toggleContent()" type="checkbox" id="stringbutton2" class="cfilterbutton" role="button">
<label for="stringbutton2" onclick="">
<span class="filterswitch">Post</span>
<span class="filterswitch">Post</span>
</label>
</div><!----End Filtercontainer------->
</div>
Remove the width on submitcontainer. That will cause the Post button to float all the way right. This however will not cause it to line up with your textbox as the textbox is autosizing. You probably want another div around the "Write Something" text and text input with a specified width that matches the width of your submitcontainer div if you want things to work as you desire.
Quick fix. Use a negative value of margin-right to fix it.
#counter { float:left; position:relative; margin-left:20px; margin-top:5px;}
.stringsharewrapper { width:100%; height:auto; margin-top:10px; }
.writestring { width:90%; left:20px; height:80px; position:relative; margin-top:10px; }
.stringtitle { color:black; font-family:arial; font-family: Helvetica, Arial, "Sans Serif"; font-size:20px; font-weight:bold; margin-left:20px; margin-top:5px;}
/*----------Filter Button 1 ------------*/
#stringbutton2[type=checkbox]
{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
[for="stringbutton2"]
{
background: #EEE;
background: linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -moz-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -ms-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -o-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFBF00),color-stop(100%,#FE9A2E));
background: -webkit-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: inset 0px 0px 1px 0px #FFF;
color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBF00',endColorstr='#FE9A2E',GradientType=0);
font-family: Helvetica,Arial,"Sans Serif";
font-size: 13px;
font-weight: bold;
left: 5%;
moz-border-radius: 5px;
moz-box-shadow: inset 0px 0px 1px 0px #FFF;
padding: 0;
padding: 6px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px #DDD;
top: 4px;
webkit-border-radius: 5px;
webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
width: 100px;
}
[for="stringbutton2"]:hover
{
background: #CCC;
background: -moz-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -ms-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -o-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0B2F3A),color-stop(100%,#100719));
background: -webkit-linear-gradient(top,#0B2F3A 0%,#100719 100%);
border-color: #BBB;
color: #FFFFFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B2F3A',endColorstr='#100719',GradientType=0);
font-weight: bold;
}
[for="stringbutton2"] span.filterswitch:last-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked
{
color: #FFA317;
}
#stringbutton2[type=checkbox]:checked~ .filtercontent
{
display: block;
visibility: visible;
width: 100%;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:first-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:last-of-type
{
color: #3CC;
display: block;
visibility: visible;
}
.submitcontainer
{ position: relative; width: 300px; top:0; float:right!important; margin-right: -135px;
}
<div class="sharepagetab sharewrapper activeshare" id="ashare">
<div class="allshares">
<div class="shares">
<div class='stringsharewrapper'>
<span class="stringtitle">Write Something</span><br />
<textarea class="writestring" onKeyUp="textCounter2(this,'counter',150);"></textarea>
<br />
<input disabled class="charInput" size="3" value="150" id="counter">
<!----------Write button------------>
<div class="submitcontainer">
<input onclick="toggleContent()" type="checkbox" id="stringbutton2" class="cfilterbutton" role="button">
<label for="stringbutton2" onclick="">
<span class="filterswitch">Post</span>
<span class="filterswitch">Post</span>
</label>
</div><!----End Filtercontainer------->
</div>
I found the answer following some of the tips of Devon posted and expanding on the concept. What I did was put a wrapper .stringclassic with 90% width and placed all the children inside and floated them accordingly. Check out my code for more informaton or the fiddle. Hope I can help someone else lookin for this information.
Thank you All!
http://jsfiddle.net/L0f48606/1/
<div class="sharepagetab sharewrapper activeshare" id="ashare">
<div class="allshares">
<div class="shares">
<div class='stringsharewrapper'>
<div class="stringclassic">
<span class="stringtitle">Write Something</span> <br />
<textarea class="writestring" onKeyUp="textCounter2(this,'counter',150);"></textarea>
<br />
<input disabled class="charInput" size="3" value="150" id="counter">
<!----------Write button------------>
<div class="submitcontainer">
<input onclick="toggleContent()" type="checkbox" id="stringbutton2" class="cfilterbutton" role="button">
<label for="stringbutton2" onclick="">
<span class="filterswitch">Post</span>
<span class="filterswitch">Post</span>
</label>
</div><!----End Filtercontainer------->
</div>
</div>
</div>
</div>
</div>
And the CSS:
#counter { float:left; position:relative; margin-left:20px; margin-top:5px;}
.stringsharewrapper { width:100%; height:auto; margin-top:10px; background:pink; position:relative;}
.writestring { width:90%; left:20px; height:80px; position:relative; margin-top:10px; }
.stringtitle { color:black; font-family:arial; font-family: Helvetica, Arial, "Sans Serif"; font-size:20px; font-weight:bold; float:left; position:relative; margin-left:20px; margin-top:5px;}
/*----------Filter Button 1 ------------*/
#stringbutton2[type=checkbox]
{
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
[for="stringbutton2"]
{
background: #EEE;
background: linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -moz-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -ms-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -o-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFBF00),color-stop(100%,#FE9A2E));
background: -webkit-linear-gradient(top,#FFBF00 0%,#FE9A2E 100%);
border: 1px solid #CCC;
border-radius: 5px;
box-shadow: inset 0px 0px 1px 0px #FFF;
color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBF00',endColorstr='#FE9A2E',GradientType=0);
font-family: Helvetica,Arial,"Sans Serif";
font-size: 13px;
font-weight: bold;
left: 5%;
moz-border-radius: 5px;
moz-box-shadow: inset 0px 0px 1px 0px #FFF;
padding: 0;
padding: 6px;
position: absolute;
text-align: center;
text-shadow: 1px 1px 1px #DDD;
top: 4px;
webkit-border-radius: 5px;
webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
width: 100px;
}
[for="stringbutton2"]:hover
{
background: #CCC;
background: -moz-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -ms-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -o-linear-gradient(top,#0B2F3A 0%,#100719 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#0B2F3A),color-stop(100%,#100719));
background: -webkit-linear-gradient(top,#0B2F3A 0%,#100719 100%);
border-color: #BBB;
color: #FFFFFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0B2F3A',endColorstr='#100719',GradientType=0);
font-weight: bold;
}
[for="stringbutton2"] span.filterswitch:last-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked
{
color: #FFA317;
}
#stringbutton2[type=checkbox]:checked~ .filtercontent
{
display: block;
visibility: visible;
width: 100%;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:first-of-type
{
display: none;
visibility: hidden;
}
#stringbutton2[type=checkbox]:checked~ [for="stringbutton2"] span.filterswitch:last-of-type
{
color: #3CC;
display: block;
visibility: visible;
}
/*-------------Filter Button Container---------------*/
.stringclassic { width:90%; left:20px; height:80px; position:relative; margin-top:1px; float:left; }
.writestring { width:100%; height:80px; position:relative; margin-top:10px; }
.submitcontainer
{
position: relative; margin-right:90px;
top:0; float:right; display:inline-block;
}