I have a canvas element that does not take up the entire screen, and I want to put a button at a certain point on the canvas where I'm also drawing something else. To find this point on the canvas in my js code I use x = "context.width/2" and y = "context.height/2 - 45". Is there a way to convert this point to pixels for use in my css?
EDIT
I added a snippet to show the issue, I need the button (pink circle) and the drawing (gray circle) to be centered around the same point on any screen size.
var canvas = document.getElementsByClassName("game");
var parent = document.getElementsByClassName("gameCont");
canvas[0].width = parent[0].offsetWidth;
canvas[0].height = document.body.clientHeight;
const context = document.querySelector("canvas").getContext("2d");
context.width = document.body.clientWidth; //document.width is obsolete
context.height = document.body.clientHeight; //document.height is obsolete
//Button SETUP
var guess_button = document.getElementById("h3");
let y = context.height/2 + 45;
let x = context.width/2;
guess_button.style.top = `${y}px`;
guess_button.style.left = `${x}px`;
guess_button.style.position = 'absolute'
guess_button.style.transform = "translate(-50%, -50%)"
// Creates the backdrop for each frame
context.fillStyle = "#201A23";
context.fillRect(0, 0, context.width, context.height); // x, y, width, height
// Creates and fills the circle for each frame
context.fillStyle = "#8DAA9D"; // hex for circ color
context.beginPath();
context.arc(context.width/2, context.height/2 - 45, 30, 0, 2 * Math.PI);
context.fill();
#import url('https://fonts.googleapis.com/css?family=Montserrat:900i&display=swap');
h1 {
text-align: center;
}
h2 {
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 4vw;
letter-spacing:0.1em;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
color: white;
text-shadow:
1px 1px #ff1f8f,
2px 2px #000000;
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: transparent;
text-align: center;
/*position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; */ /* Footer height */
}
p {
text-align: center;
}
body {
height: 100%;
block-size: 100%;
min-height:100vh;
font-family: 'Montserrat', sans-serif;
}
img {
float: center;
width: 30vw;
height: 25vw;
object-fit: scale-down;
}
h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4vw;
letter-spacing:0.1em;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
text-shadow:
2px 2px #ff1f8f,
4px 4px #000000;
}
/*
h3{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
}*/
.round-button {
width: 6vw;
font-size: 22vw;
}
.round-button-circle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 100%;
border: 1px solid white;
overflow: hidden;
}
.round-button-circle {
width: 100%;
height: 0;
padding-bottom: 100%;
border-radius: 100%;
border: 1px solid white;
overflow: hidden;
background: transparent;
box-shadow: 0 0 5px #ff1f8f;
}
.round-button-circle:hover {
background: gray;
}
/*
.round-button a {
display: block;
float: left;
width: 80%;
padding-top: 50%;
padding-bottom: 50%;
line-height: .5em;
margin-top: -0.5em;
text-align: center;
color: gray;
font-family: Verdana;
font-size: .5em;
font-weight: bold;
text-decoration: none;
}
*/
button {
float: center;
color: black;
text-align: center;
padding: 4px;
text-decoration: none;
font-size: 16px;
line-height: 25px;
border-radius: 4px;
}
button:hover {
background-color: #ddd;
color: black;
}
/* Style the active/current link*/
button.active {
background-color: dodgerblue;
}
#gameCont{
display: flex;
float: center;
align-items: center;
flex-direction: column;
justify-content: center;
block-size: 100%;
width: 100%;
height: 100%;
}
.game{
margin-right: auto;
margin-left: auto;
display: block;
float: center;
block-size: 100%;
align-items: center;
flex-direction: column;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.center {
width: 50%;
}
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
/* Style the header links */
/*
.header a {
float: left;
color: black;
text-align: center;
color: #ff1f8f;
padding: 12px;
text-decoration: none;
font-size: 40px;
line-height: 25px;
border-radius: 4px;
}
*/
.header a {
float: left;
color: black;
text-align: center;
color: #ff1f8f;
padding: 12px;
text-decoration: none;
font-size: 45px;
line-height: 25px;
border-radius: 4px;
letter-spacing:0.1em;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
color: white;
text-shadow:
2px 2px #ff1f8f,
4px 4px #000000;
}
.header button {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header v.logo {
font-size: 25px;
font-weight: bold;
}
/* Change the background color on mouse-over */
.header button:hover {
background-color: #ddd;
color: black;
}
/* Style the active/current link*/
.header button.active {
background-color: dodgerblue;
color: white;
}
/* Float the link section to the right */
.header-right {
float: right;
}
/*
#media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {
.keyboard-button{
font-size: 1rem;
font-weight: 600;
padding: 0.1rem;
transform: translate(10%, 0%);
}
.first-row {
position: relative;
overflow: auto;
transform: translate(10%, 0%);
}
.second-row {
margin: 0.5rem 0;
position: relative;
overflow: auto;
transform: translate(10%, 0%);
}
.third-row {
position: relative;
overflow: auto;
transform: translate(10%, 0%);
}
}
*/
/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
/*#media screen and (max-width: 500px) {
.header button {
float: none;
display: block;
text-align: right;
}
.header-right {
float: none;
}
}
*/
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #f1f1f1;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 2px solid #888;
width: 55%; /* Could be more or less, depending on screen size */
text-align: center;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<body>
<div class="header">
Circuit
<!--<b href="#default" class="logo">Circuit</b>-->
<div class="header-right">
<button onclick="reset()">Restart</button>
<button id="about" >How To</button>
<script>
function reset() {
}
</script>
</div>
</div>
<h1 id="h1"></h1>
<h3 id="h3">
<div class="round-button">
<div class="round-button-border"></div>
<div class="round-button-circle"><!--Guess--></div>
</div>
</h3>
<div class="gameCont">
<canvas class="game"></canvas>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="script.js" type="module"></script>
</body>
If you want an overlapping button That is absolute to the whole page. Something like this
// using your y and x variables
y = y - 45
let btn = document.createElement('button')
// assign style directly with js
btn.style.left = `${x}px`
btn.style.top = `${y}px`
btn.style.position = 'absolute'
btn.style.textContent = 'yada yada'
document.body.append(btn)
Related
I'de like to validate a form with data propriety data-error and data-error-visible. I want to display the error message only with JS and don't use anymore HTML codes to do it.
The current code I use is below and I left only the first input :
/******
*
FORM VALIDATION
*
******/
// DOM
const formData = document.querySelectorAll(".formData");
const form = document.getElementById("form");
const firstName = document.getElementById("firstName");
const lastName = document.getElementById("lastName");
const email = document.getElementById("email");
const birthdate = document.getElementById("birthdate");
const quantity = document.getElementById("quantity");
const tournament = document.getElementsByName("location");
const checkbox = document.getElementsByName("checkbox");
// form preventDefault + checkInputs function
form.addEventListener('submit', e => {
e.preventDefault();
});
/***********
*
DATA-ATTRIBUTE
*
************/
// set error message to "true"
const displayErrorMsg = (element, message) => {
const formData = element
formData.setAttribute("data-error", message)
formData.setAttribute("data-error-visible", true)
}
// Function for remove one error msg
const removeErrorMsg = (element) => {
const formData = element
formData.removeAttribute('data-error')
formData.removeAttribute('data-error-visible')
}
/***********
*
* VALIDATION FUNCTION
*
************/
function validate(formData) {
let isFormValid = true;
// Regex
const nameRegex = /[a-zA-Z]+/i;
// First name
if (firstName.value.match(nameRegex) || firstName.value.length < 2) {
isFormValid = false;
displayErrorMsg(firstName);
} else {
removeErrorMsg(firstName);
}
}
:root {
--font-default: "DM Sans", Arial, Helvetica, sans-serif;
--font-slab: var(--font-default);
--modal-duration: 0.8s;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Landing Page */
body {
margin: 0;
display: flex;
flex-direction: column;
font-family: var(--font-default);
font-size: 18px;
max-width: 1300px;
margin: 0 auto;
}
p {
margin-bottom: 0;
padding: 0.5vw;
}
img {
padding-right: 1rem;
}
.topnav {
overflow: hidden;
margin: 3.5%;
}
.header-logo {
float: left;
}
.main-navbar {
float: right;
}
.topnav a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 12px 12px;
margin: 5px;
text-decoration: none;
font-size: 20px;
font-family: Roboto, sans-serif;
}
.topnav a:hover {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav a.active {
background-color: #ff0000;
color: #ffffff;
border-radius: 15px;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 768px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 768px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
#media screen and (max-width: 540px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
margin-top: -15px;
}
}
main {
font-size: 130%;
font-weight: bolder;
color: black;
padding-top: 0.5vw;
padding-left: 2vw;
padding-right: 2vw;
margin: 1px 20px 15px;
border-radius: 2rem;
text-align: justify;
}
.modal-btn {
font-size: 145%;
background: #fe142f;
display: flex;
margin: auto;
padding: 2em;
color: #fff;
padding: 0.75rem 2.5rem;
border-radius: 1rem;
cursor: pointer;
}
.modal-btn:hover {
background: #3876ac;
}
.footer {
margin: 20px;
padding: 10px;
font-family: var(--font-slab);
}
/* Modal form */
.button {
background: #fe142f;
margin-top: 0.5em;
padding: 1em;
color: #fff;
border-radius: 15px;
cursor: pointer;
font-size: 16px;
}
.button:hover {
background: #3876ac;
}
.smFont {
font-size: 16px;
}
.bground {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(26, 39, 156, 0.4);
}
.content {
margin: 5% auto;
width: 100%;
max-width: 500px;
animation-name: modalopen;
animation-duration: var(--modal-duration);
background: #232323;
border-radius: 10px;
overflow: hidden;
position: relative;
color: #fff;
padding-top: 10px;
}
.modal-body {
padding: 15px 8%;
margin: 15px auto;
}
label {
font-family: var(--font-default);
font-size: 17px;
font-weight: normal;
display: inline-block;
margin-bottom: 11px;
}
input {
padding: 8px;
border: 0.8px solid #ccc;
outline: none;
}
.text-control {
margin: 0;
padding: 8px;
width: 100%;
border-radius: 8px;
font-size: 20px;
height: 48px;
}
.formData[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: #e54858;
display: block;
margin-top: 7px;
margin-bottom: 7px;
text-align: right;
line-height: 0.3;
opacity: 0;
transition: 0.3s;
}
.formData[data-error-visible="true"]::after {
opacity: 1;
}
.formData[data-error-visible="true"] .text-control {
border: 2px solid #e54858;
}
/*
input[data-error]::after {
content: attr(data-error);
font-size: 0.4em;
color: red;
} */
.checkbox-label,
.checkbox2-label {
position: relative;
margin-left: 36px;
font-size: 12px;
font-weight: normal;
}
.checkbox-label .checkbox-icon,
.checkbox2-label .checkbox-icon {
display: block;
width: 20px;
height: 20px;
border: 2px solid #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: -30px;
top: -1px;
transition: 0.3s;
}
.checkbox-label .checkbox-icon::after,
.checkbox2-label .checkbox-icon::after {
content: "";
width: 13px;
height: 13px;
background-color: #279e7a;
border-radius: 50%;
text-indent: 29px;
white-space: nowrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
opacity: 0;
}
.checkbox-input {
display: none;
}
.checkbox-input:checked + .checkbox-label .checkbox-icon::after,
.checkbox-input:checked + .checkbox2-label .checkbox-icon::after {
opacity: 1;
}
.checkbox-input:checked + .checkbox2-label .checkbox-icon {
background: #279e7a;
}
.checkbox2-label .checkbox-icon {
border-radius: 4px;
border: 0;
background: #c4c4c4;
}
.checkbox2-label .checkbox-icon::after {
width: 7px;
height: 4px;
border-radius: 2px;
background: transparent;
border: 2px solid transparent;
border-bottom-color: #fff;
border-left-color: #fff;
transform: rotate(-55deg);
left: 21%;
top: 19%;
}
.close {
position: absolute;
right: 15px;
top: 15px;
width: 32px;
height: 32px;
opacity: 1;
cursor: pointer;
transform: scale(0.7);
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 33px;
width: 3px;
background-color: #fff;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.btn-submit,
.btn-signup {
background: #fe142f;
display: block;
margin: 0 auto;
border-radius: 7px;
font-size: 1rem;
padding: 12px 82px;
color: #fff;
cursor: pointer;
border: 0;
}
/* custom select styles */
.custom-select {
position: relative;
font-family: Arial;
font-size: 1.1rem;
font-weight: normal;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: #fff;
}
/* Style the arrow inside the select element: */
.select-selected:after {
position: absolute;
content: "";
top: 10px;
right: 13px;
width: 11px;
height: 11px;
border: 3px solid transparent;
border-bottom-color: #f00;
border-left-color: #f00;
transform: rotate(-48deg);
border-radius: 5px 0 5px 0;
}
/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
transform: rotate(135deg);
top: 13px;
}
.select-items div,
.select-selected {
color: #000;
padding: 11px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
border-radius: 8px;
height: 48px;
}
/* Style items (options): */
.select-items {
position: absolute;
background-color: #fff;
top: 89%;
left: 0;
right: 0;
z-index: 99;
}
/* Hide the items when the select box is closed: */
.select-hide {
display: none;
}
.select-items div:hover,
.same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
/* custom select end */
.text-label {
font-weight: normal;
font-size: 16px;
}
.hero-section {
min-height: 93vh;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(12, 1fr);
overflow: hidden;
box-shadow: 0 2px 7px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
.hero-content {
padding: 51px 67px;
grid-column: span 4;
background: #232323;
color: #fff;
position: relative;
text-align: left;
min-width: 424px;
}
.hero-content::after {
content: "";
width: 100%;
height: 100%;
background: #232323;
position: absolute;
right: -80px;
top: 0;
}
.hero-content > * {
position: relative;
z-index: 1;
}
.hero-headline {
font-size: 6rem;
font-weight: normal;
white-space: nowrap;
}
.hero-text {
width: 146%;
font-weight: normal;
margin-top: 57px;
padding: 0;
}
.btn-signup {
outline: none;
text-transform: capitalize;
font-size: 1.3rem;
padding: 15px 23px;
margin: 0;
margin-top: 59px;
}
.hero-img {
grid-column: span 8;
}
.hero-img img {
width: 100%;
height: 100%;
display: block;
padding: 0;
}
.copyrights {
color: #fe142f;
padding: 0;
font-size: 1rem;
margin: 60px 0 30px;
font-weight: bolder;
}
.hero-section > .btn-signup {
display: none;
}
footer {
padding-left: 2vw;
padding-right: 2vw;
margin: 0 20px;
}
#media screen and (max-width: 800px) {
.hero-section {
display: block;
box-shadow: unset;
}
.hero-content {
background: #fff;
color: #000;
padding: 20px;
}
.hero-content::after {
content: unset;
}
.hero-content .btn-signup {
display: none;
}
.hero-headline {
font-size: 4.5rem;
white-space: normal;
}
.hero-text {
width: unset;
font-size: 1.5rem;
}
.hero-img img {
border-radius: 10px;
margin-top: 40px;
}
.hero-section > .btn-signup {
display: block;
margin: 32px auto 10px;
padding: 12px 35px;
}
.copyrights {
margin-top: 50px;
text-align: center;
}
}
#keyframes modalopen {
from {
opacity: 0;
transform: translateY(-150px);
}
to {
opacity: 1;
}
}
<form
id="form"
name="reserve"
action="index.html"
method="get"
>
<div class="formData">
<label for="firstName">Prénom</label><br>
<input
class="text-control"
type="text"
id="firstName"
name="first"
minlength="2"
required
/><br>
</div>
<input
class="btn-submit"
type="submit"
class="button"
value="C'est parti"
/>
</form>
I'm still new to this website making, and I'm having trouble with w3 schools Light box. I'm trying to move the images around but every time I do manage to move them it seems to look worse and worse. I have messed around with the CSS but still can't figure it out.
im trying so that the images look something like this gallerybut still make it use the lightbox.
source code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>alithroughthelens</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap" rel="stylesheet">
</head>
<body class="body">
<div id="sideNavigation" class="sidenav"><script>
function openNav() {
document.getElementById("sideNavigation").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("sideNavigation").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
</script>
×
Home
Cuando Sale el Sol
Obscurité et la Lumiere
la Vie en Couleur
Vacante
About Me
</div>
<nav class="topnav">
<a href="#" onclick="openNav()">
<svg width="30" height="30" id="icoOpen">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
</nav>
<div id="main">
<h1 class="header">Alithroughthelens</h1>
<img src="Home/Artist copy.png" alt="" width="5918" height="3945" class="homeimg"/> </div>
</body>
</html>
css:
html, body,{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
height: 100%;
margin: auto;
width: 960px;
overflow: hidden;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #B7B7A4;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 18px;
color: #6B705C;
display: block;
transition: 0.3s;
font-family: 'Cinzel Decorative', cursive;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #FFE8D6;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
overflow:hidden;
width:100%;
}
body {
overflow-x: hidden;
}
/* Add a black background color to the top navigation */
.topnav {
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color:#6B705C;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color:#6B705C;
color:#6B705C;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
a svg{
transition:all .5s ease;
&:hover{
#transform:rotate(180deg);
}
}
#ico{
display: none;
}
.menu{
background: #000;
display: none;
padding: 5px;
width: 320px;
#include border-radius(5px);
#transition: all 0.5s ease;
a{
display: block;
color: #fff;
text-align: center;
padding: 10px 2px;
margin: 3px 0;
text-decoration: none;
background: #444;
&:nth-child(1){
margin-top: 0;
#include border-radius(3px 3px 0 0 );
}
&:nth-child(5){
margin-bottom: 0;
#include border-radius(0 0 3px 3px);
}
&:hover{
background: #555;
}
}
}
.body {
background-color: #FFE8D6;
}
.header {
font-family: 'Cinzel Decorative', cursive;
padding-right: 64px;
position: static;
left: 41px;
padding-left: 64px;
text-align: center;
color: #6B705C;
padding-top: 0px;
margin-top: -10px;
font-size: 35px;
font-size: 5vw;
}
.homeimg {
display: block;
margin-left: auto;
margin-right: auto;
width: 60%;
height: auto;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Create four equal columns that floats next to eachother */
.column {
float: left;
height: auto;
width: 24%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #6B705C;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
display: none;
background-color: #6B705C;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: #000000;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: #FFE8D6;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Caption text */
.caption-container {
text-align: center;
background-color: #6B705C;
padding: 2px 16px;
color: white;
}
img.demo {
opacity: 0.6;
width: 40%;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.pimg {
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
width: 70%;
margin-top: -20px;
}
.csimg {
width: 80%;
display: block;
position: static;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.pimgl {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -20px;
height: auto;
width: 30%;
}
If you drag the thumb it won't work because apparently it is not a part of input when I inspect it with devtools, new elements don't consider it's position and cover it
if you remove the paragraph after the input you can drag the thumb and the gradient will change according to it's position.
is there a way to keep the thumb working even when I add elements after the input?
if you change #slider padding the gradient will weirdly grow, if you add margin the thumb won't work again.
document.querySelector('input').addEventListener('input', ({target: t}) => t.style.backgroundSize = (t.value/t.max) * 100 + '%');
body {
display: flex;
align-items: center;
flex-direction: column;
padding: 0 10%;
font-family: sans-serif;
}
* {
font-weight: 200;
}
.tags {
display: flex;
margin: 25px 0;
}
span {
flex: 1 1;
padding-right: 30px;
align-self: flex-end;
font-size: 14px;
}
span:last-child {
text-align: right;
padding-right: 0px;
}
input {
position: relative;
width: 100%;
cursor: pointer;
outline: none;
/* TRACK */
-webkit-appearance: none;
/* Hides the slider so that custom slider can be made */
background: linear-gradient(to left, #8074AE, #CBB0DF) no-repeat;
background-size: 50%;
}
input::-webkit-slider-runnable-track {
height: 14px;
background: #E7E8E9;
z-index: -1;
}
input::-moz-range-track {
height: 14px;
background: #E7E8E9;
z-index: -1;
}
input::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 10px;
background: linear-gradient(to left top, transparent 50%, white 55%);
user-select: none;
pointer-events: none;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
margin-top: 28px;
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
border: solid 2px #E7E8E9;
border-radius: 0px 50% 50%;
transform: rotate(45deg);
}
input::-moz-range-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: 15px;
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
border-radius: 8px;
}
<h1>Уровень владения JavaScript</h1>
<div class="tags">
<span>Не владею</span>
<span>Использую готовые решения</span>
<span>Использую готовые решения и умею переделывать</span>
<span>Пишу сложный JS с нуля</span>
</div>
<input type="range" min="0" max="1000">
<p>Help me</p>
Wrap the input in a containing element and set the height on that element in order to push the sibling element down below the range-thumb Set the z-index of the containing element as well so that it is above the sibling element.:
document.querySelector('input').addEventListener('input', ({target: t}) => t.style.backgroundSize = (t.value/t.max) * 100 + '%');
body {
display: flex;
align-items: center;
flex-direction: column;
padding: 0 10%;
font-family: sans-serif;
}
* {
font-weight: 200;
}
.tags {
display: flex;
margin: 25px 0;
}
span {
flex: 1 1;
padding-right: 30px;
align-self: flex-end;
font-size: 14px;
}
span:last-child {
text-align: right;
padding-right: 0px;
}
.input-container {
display: block;
width: 100%;
height: 55px;
z-index:10;
}
input {
position: relative;
width: 100%;
cursor: pointer;
outline: none;
/* TRACK */
-webkit-appearance: none;
/* Hides the slider so that custom slider can be made */
background: linear-gradient(to left, #8074AE, #CBB0DF) no-repeat;
background-size: 50%;
}
input::-webkit-slider-runnable-track {
height: 14px;
background: #E7E8E9;
z-index: -1;
}
input::-moz-range-track {
height: 14px;
background: #E7E8E9;
z-index: -1;
}
input::after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 10px;
background: linear-gradient(to left top, transparent 50%, white 55%);
user-select: none;
pointer-events: none;
}
input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
margin-top: 28px;
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
border: solid 2px #E7E8E9;
border-radius: 0px 50% 50%;
transform: rotate(45deg);
}
input::-moz-range-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: 15px;
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
border-radius: 8px;
}
<h1>Уровень владения JavaScript</h1>
<div class="tags">
<span>Не владею</span>
<span>Использую готовые решения</span>
<span>Использую готовые решения и умею переделывать</span>
<span>Пишу сложный JS с нуля</span>
</div>
<div class="input-container">
<input type="range" min="0" max="1000">
</div>
<p>Help me</p>
HTML
<div class="NavAlignLeft">Site Name</div>
<div class="NavAlignRight">
<!-- Change this to an include later -->
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
<!-- Video test -->
<div id="video_overlays">
<div class="abovethefold">
<h1 class="blog-title"><?php bloginfo( 'name' ); ?></h1>
<?php $description = get_bloginfo( 'description', 'display' ); ?>
<?php if($description) { ?><p class="blog-description"><?php echo $description ?></p><?php } ?>
<p class="button">
<a class="blue-button" href="#cta">Call to Action</a></p>
</div></div>
<div class="homepage-hero-module">
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/MP4/Busy-People.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/WEBM/Busy-People.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
<img src="http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshot/Busy-People.jpg" title="Your browser does not support the <video> tag">
</video>
<div class="poster hidden">
<img src="http://scott.ewarena.com//blog/wp-content/themes/bootstrapstarter/Busy-People/Snapshots/Busy-People.jpg" alt="">
</div>
</div>
</div></div>
CSS:
body {
background-color: #e2e2e2;
margin: 0px;
}
h1, .h1,
h2, .h2,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: 'Vollkorn', serif;
font-style: oblique;
font-weight: normal;
color: #2e2e2e;
}
h3, .h3 {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 30px;
color: #fff;
}
.NavAlignLeft {
font-family: 'Vollkorn', serif;
/*font-style: oblique;*/
font-weight: bold;
font-size: 22px;
color: #fff;
float: left;
padding-left: 40px;
}
.NavAlignLeft:hover {
font-family: 'Vollkorn', serif;
text-decoration: none;
}
.NavAlignRight {
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #fff;
float: right;
padding-right: 40px;
}
.NavAlignLeft, .NavAlignRight {
/*{ width: 50%; Commenting this out made the nav align completely to the right.*/
display: inline-block;
}
a, .a,
a:visited, .a:visited,
a:active, .a:active {
font-family: 'Vollkorn';
font-style: none; color: #e2e2e2; text-decoration: none;
}
a:hover, .a:hover {
font-family: 'Vollkorn';
font-style: none; color: #fff; text-decoration: none;
}
/*
* Override Bootstrap's default container.
*/
/*#media (min-width: 1200px) {
.container {
width: 100%; padding: 0; margin: 0; vertical-align: middle;
}
} .container2 { width: 100%; padding: 0; margin: 0; }
Nothing changed */
/*
* Masthead for nav
*/
#blog-masthead {
background-color: #2e2e2e;
height: 40px;
width: 100%;
line-height: 40px;
/*z-index: 2;
/*vertical-align: middle;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing Changed */
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.41);
border-bottom: 1px solid #1a1a1a;
}
.abovethefold {
background-color: transparent;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
/*height: 250px;
width: 100%;
/*padding-top: 100px;*/
/*vertical-align: middle;
justify-content:center;
align-content:center;
}
.overlay {
background:#2e2e2e;
opacity:40%;
height: 250px;
width: 100%Nothing changed.*/
}
/* Nav links */
.blog-nav-item {
/*position: relative;
display: inline-block;
padding: 5px;
color: #2e2e2e; nothing changed*/
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
/*position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent; Nothing Changed*/
}
.menu-menu-1-container {
/*width: 100%;
vertical-align: middle;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px; Nothing changed*/}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 0px;
margin-bottom: 0;
line-height: 80px;
margin-top: 100px;
font-size: 60px;
text-align:center;
font-weight: normal;
color: #fff;
}
.blog-description {
font-size: 30px;
font-style: 'Open Sans';
font-weight: bold;
text-align: center;
color: #2e2e2e;
}
.blog-main {
font-size: 18px;
line-height: 1.5; nothing changed
}
/* Buttons */
.green-button,.green-button:link,.green-button:visited,.blue-button,.blue-button:link,.red-button,.red-button:link,.purple-button,.purple-button:link,.teal-button,.teal-button:link,.orange-button,.orange-button:link,.grey-button,.grey-button:link,.grey-button:visited,.lt-grey-button,.lt-grey-button:link,.lt-grey-button:visited,.shop_table .actions .button,.oldernewer a:link,.oldernewer a:visited,.woocommerce-message .button,#place_order,html body div .quiz-submit, input.course-start {
display: block;
border: 0;
border-radius:1em;
-webkit-border-radius:border-radius:.8em;
text-align: center;
font-size: 20px !important;
padding: 10px 20px;
width: 180px;
}
p.button {
text-align: center;
}
p.button:hover {
text-align: center;
text-decoration: none;
}
p.button a {
margin:0 auto;
font-family: 'Vollkorn', serif;
font-style: none;
text-decoration: none;
}
.blue-button,.blue-button:link,.blue-button:visited {
background: #2f75c5;
color: #f8f8f8 !important;
text-decoration: none;
}
.blue-button:hover {
background: #3584de;
cursor: pointer;
text-decoration: none;
}
.blue-button:active {
background: #2966ab;
font-style: none;}
/* Sidebar modules for boxing content */
/* Sidebars arent being used
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
*/
/* Pagination */
.pager {
/*margin-bottom: 60px;
text-align: left;nothing changed*/
}
.pager > li > a {
/* width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 0px;
list-style: none; nothing changed*/
}
/*
* Blog posts
*/
.blog-post {
margin:50px 50px 0;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px; color: #2e2e2e;
}
.subtitle {
font-size: 1.2em;
font-family: 'Vollkorn';
color: #2e2e2e;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #2e2e2e;
border-top: 1px solid #1a1a1a;
-webkit-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
box-shadow: 2px -5px 5px 0px rgba(0,0,0,0.41);
}
.blog-footer p:last-child {
margin-bottom: 0;
}
/*** lyrathemes - custom styling ***/
.page_item {
list-style: none;
font-size: 22px;
text-decoration: none;
}
.page_item:hover {
list-style: none;
text-decoration: none;
}
ul.blog-nav {
/*list-style: none;*/
}
/* Nav links */
.menu-item a{
position: relative;
/*display: inline-block; keep this commented out - moved navigation vertically.*/
padding: 10px;
color: #e2e2e2;
}
.menu-item a:hover,
.menu-item a:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.menu-item.current-menu-item a{
color: #fff;
}
.menu-item.current-menu-item a:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
/*content: " ";*/
/* border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;*/
-webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
-moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.41);
}
/*Not using side bars
.sidebar-module ul {
list-style: none;
padding-left: 0;
}*/
/* Video CSS */
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
width: auto;
height: 400px;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: absolute;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
/*background: #000;*/
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: absolute;
}
.video-container .filter {
/*z-index: 100;*/
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.video-container video {
position: absolute;
/*z-index: 0;*/
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
#video_overlays {
position:absolute;
float:left;
width:100%;
height:400px%;
background-color:transparent;
z-index:1;
}
/* Content Table Styles */
#green-table {
background-color: #ebf2e6;
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin: auto;
margin-top:30px;
margin-bottom: 30px;
border: 1px solid #d6e8c5;
border-radius:.8em;
}
#dark-table {
background-color: #2e2e2e;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
}
#dark-narrow-table {
background-color: #2e2e2e;
/*background-image: url("https://static1.squarespace.com/static/518d3dc6e4b00ba5bf4a06b0/t/586e223e197aea98191b014e/1483612772641/photodune-17121963-coffee-shop-owner-standing-at-the-counter-l.jpg"); */
width: 50%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: center;
margin-top:30px;
margin-bottom: 30px;
margin: auto;
border-radius:.8em;
}
/*Heading Styles*/
#light-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
#green-table-head-style {
font-family: 'Droid Serif';
font-size: 45px;
color: #2e2e2e;
}
#dark-narrow-table-head-style{
font-family: 'Droid Serif';
font-size: 45px;
color: #e2e2e2;
}
/*Content Paragraph Styles*/
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
#dark-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#dark-narrow-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #e2e2e2;
}
#green-table-paragraph {
font-family: 'Droid Serif';
font-size: 22px;
color: #2e2e2e;
text-align: left;
}
/* Hamburger Test */
/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2e2e2e;
}
/* Float the list items side by side */
ul.topnav li {float: left;
height: 40px;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: #e2e2e2;
text-align: center;
padding: 0px 10px 0px 0px;
text-decoration: none;
transition: 0.3s;
font-family: 'Vollkorn', serif;
font-weight: bold;
font-size: 22px;
color: #e2e2e2;
}
/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #3b3b3b;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
/* Hamburger mobile test */
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* Fixing Mobile Div Problem */
#media only screen and (max-device-width: 680px) {
#green-table {
width: 95%;
}
#dark-narrow-table {
width: 95%;
}
.NavAlignRight {
padding-right: 2px;
}
.NavAlignLeft {
padding-left: 2px;
JS:
//jQuery is required to run this code
$( document ).ready(function() {
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
function scaleVideoContainer() {
var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;
console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio = $(this).data('height')/$(this).data('width');
$(this).width(windowWidth);
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
So it loooks absolutely fine when it's displayed on my website http://scott.ewarena.com/blog but when viewed on a mobile device there's a gap along the top, underneath the top bar, before the video, that shouldn't be there.
I can't find out what the issue is at all, I've been trying for two days.
Sorry my code is so clunky. I'm new at this and aware it needs cleaning up a bit.
Any help will be MUCH appreciated!
Thanks!
Scott
Having looked at your code in Chrome Dev Tools I noticed that you have the following defined in your style-sheet:
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
If you remove bottom: 0; you wont have this problem!
Basically, you're forcing the video to be at the bottom most point in it's container, creating a gap when the view-port is smart-phone sized.
I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>
In order to achieve this, I increased the width of the wrapper and moved the new div into it.