I'm trying to build a expanded menu using jQuery and css animations, so far the animations runs smothly the first time but the second time they're played they dont work.
I've seen people doing a similar menu using javascript classes but I need to keep this simple because this code will be maintened by people that don't know much about js
$('#button').on('click',function(){
if(!$('.menu').hasClass('stay')){
$('.menu').removeClass('close')
$('.menu').addClass('open')
setTimeout(function(){
$('.menu').addClass('stay')
$('.menu').removeClass('open')
},1000)
}else{
$('.menu').removeClass('stay')
$('.menu').addClass('close')
}
});
*{
font-family: monospace;
}
.menu{
background-color: gray;
color: white;
width: min-content;
padding: .5rem;
clip-path: circle(10% at 22px 22px);
}
ul{
list-style-type: none;
font-size: large;
font-weigth: 800;
padding: 1rem;
}
li{
border-bottom: solid 1px white;
padding-top: .4rem;
padding-bottom: .4rem;
cursor: pointer;
}
button{
border: solid 1px white;
cursor: pointer;
font-size: 2rem;
border-radius: 100%;
background-color: gray;
color: white;
}
.open{
animation: 1s circle-path;
}
.stay{
clip-path: circle(100%);
}
.close{
animation: 1s circle-path reverse;
}
#keyframes circle-path {
100% { clip-path: circle(100%); }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<button id="button">+</button>
<ul>
<li>Chat</li>
<li>Video</li>
<li>Minuta</li>
</ul>
</div>
You don't need to use an animation to open and close the menu. Just toggle a class. You can simplify your code like this:
$('#button').on('click', function() {
$('.menu').toggleClass('active')
});
* {
font-family: monospace;
}
.menu {
background-color: gray;
color: white;
width: min-content;
padding: .5rem;
clip-path: circle(10% at 22px 22px);
transition: 1s clip-path;
}
.active {
clip-path: circle(100%);
}
ul {
list-style-type: none;
font-size: large;
font-weigth: 800;
padding: 1rem;
}
li {
border-bottom: solid 1px white;
padding-top: .4rem;
padding-bottom: .4rem;
cursor: pointer;
}
button {
border: solid 1px white;
cursor: pointer;
font-size: 2rem;
border-radius: 100%;
background-color: gray;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<button id="button">+</button>
<ul>
<li>Chat</li>
<li>Video</li>
<li>Minuta</li>
</ul>
</div>
Related
In this page a bunch of buttons (anchor element) has it own number (id), I have to select them and put into an array when they are toggled as active.
I've already created an array, the id from buttons are adding and they are all being printed, but I can't use this class ".active" instead of my normal class "btn_reservas".
How can I add / remove in my array only the selected numbers?
var controller = (function () {
var ctrlAddItem = function (event) {
console.log("It worked, pressed id = " + event.target.id);
event.target.classList.toggle("active");
};
document.querySelectorAll(".btn_reservas").forEach(function () {
this.addEventListener("click", ctrlAddItem);
});
document.addEventListener("keypress", function (event) {
if (event.keyCode === 13 || event.which === 13) {
ctrlAddItem();
}
});
var sum = 0;
var x = document.getElementsByClassName("btn_reservas");
// var x = document.getElementsByClassName("btn_reservas.active");
var numbers = [];
for (i=0; i < x.length; i++){
x[i].id;
numbers.push(', ' + x[i].id);
}
numbers.forEach(myFunction);
function myFunction(item) {
sum += item;
document.getElementById("demo").innerHTML = sum;
}
})();
body {
background-color: #ffffff;
}
h1 {
color: #999999;
align-content: center;
padding-left: 400px;
}
#menu {
background-color: #4682b4;
padding: 3px;
}
#menu ul {
text-align: center;
padding-left: 20%;
list-style: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
color: #ffffff;
/* padding-left: 5%; */
margin: 50px;
background-color: #4682b4;
font-size: xx-large;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #b0c4de;
}
#Promocoes {
display: flex;
flex-direction: row;
}
#Promocoes img {
align-content: center;
padding: 25px;
}
#item {
text-align: center;
border-radius: 10px;
margin: 20px;
background-color: rgba(9, 50, 99, 0.35);
}
#item p {
font-size: 14px;
}
#item button {
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
cursor: pointer;
border: none;
font-weight: bold;
}
#item button:hover {
background-color: #b0c4de;
}
/* Sobre Nos */
#historia {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
#historia img {
padding-left: 100px;
align-self: center;
}
/* SORTEIO */
.legenda ul li{
list-style: none;
display: inline-block;
font-weight: bolder;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 10px;
}
.disponivel {
cursor: default;
background-color: #ffffff;
border: 2px #a9a9a9 solid;
border-radius: 5px;
padding: 8px;
}
.reservados {
cursor: not-allowed;
background-color: lightgreen;
border: 2px green solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.pagos {
cursor: not-allowed;
background-color: lightsalmon;
border: 2px indianred solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.enviar {
background-color: #4682b4;
cursor: pointer;
color: #ffffff;
border: #4682b4 solid;
border-radius: 5px;
padding: 8px;
}
.lista_sorteio {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
.lista ul li {
display: inline;
}
.lista ul li a {
display: block;
border: 2px solid #bfc0bf;
border-radius: 50%;
width: 100%;
line-height: 40px;
max-width: 75px;
height: auto;
font-weight: 700;
text-decoration: none;
display: inline;
box-sizing: border-box;
padding: 20px;
font-family: sans-serif;
font-size: 13px;
color: #ffffff;
background-color:rgb(85, 161, 108);
border-color: #212529;
margin-right: 50px;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.lista ul li a:hover {
color: #212529;
background-color: #ffffff;
font:bolder;
transition: all 600ms ease;
}
.lista ul li a.active {
background-color: #f90;
}
<div class="lista">
<ul >
<li>
001
</li>
<li>
002
</li>
<li>
003
</li>
<li>
004
</li>
<li>
005
</li>
<li>
006
</li>
<li>
007
</li>
<li>
008
</li>
<li>
009
</li>
</ul>
</div>
</div>
<hr>
<p>Get the sum of the numbers in the array.</p>
<p id="demo"></p>
<hr>
</body>
</html>
You can still refer to .btn_reservas.active you just have to use querySelectorAll instead of getElementsByClassName.
This will still calculate sum, but it doesn't worry about the array as it just looks for elements with .btn_reservas.active.
var controller = (function() {
function calcSum(){
toggled = document.querySelectorAll(".btn_reservas.active");
sel =[];
toggled.forEach(function(el){
sel.push(el.getAttribute("id"));
});
document.getElementById("demo").innerHTML = sel.join(", ");
}
var ctrlAddItem = function(event) {
console.log("It worked, pressed id = " + event.target.id);
event.target.classList.toggle("active");
calcSum();
};
document.querySelectorAll(".btn_reservas").forEach(function() {
this.addEventListener("click", ctrlAddItem);
});
document.addEventListener("keypress", function(event) {
if (event.keyCode === 13 || event.which === 13) {
ctrlAddItem();
}
});
})();
body {
background-color: #ffffff;
}
h1 {
color: #999999;
align-content: center;
padding-left: 400px;
}
#menu {
background-color: #4682b4;
padding: 3px;
}
#menu ul {
text-align: center;
padding-left: 20%;
list-style: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
color: #ffffff;
/* padding-left: 5%; */
margin: 50px;
background-color: #4682b4;
font-size: xx-large;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #b0c4de;
}
#Promocoes {
display: flex;
flex-direction: row;
}
#Promocoes img {
align-content: center;
padding: 25px;
}
#item {
text-align: center;
border-radius: 10px;
margin: 20px;
background-color: rgba(9, 50, 99, 0.35);
}
#item p {
font-size: 14px;
}
#item button {
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
cursor: pointer;
border: none;
font-weight: bold;
}
#item button:hover {
background-color: #b0c4de;
}
/* Sobre Nos */
#historia {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
#historia img {
padding-left: 100px;
align-self: center;
}
/* SORTEIO */
.legenda ul li {
list-style: none;
display: inline-block;
font-weight: bolder;
margin-right: 1%;
margin-top: 5px;
margin-bottom: 10px;
}
.disponivel {
cursor: default;
background-color: #ffffff;
border: 2px #a9a9a9 solid;
border-radius: 5px;
padding: 8px;
}
.reservados {
cursor: not-allowed;
background-color: lightgreen;
border: 2px green solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.pagos {
cursor: not-allowed;
background-color: lightsalmon;
border: 2px indianred solid;
color: #ffffff;
border-radius: 5px;
padding: 8px;
}
.enviar {
background-color: #4682b4;
cursor: pointer;
color: #ffffff;
border: #4682b4 solid;
border-radius: 5px;
padding: 8px;
}
.lista_sorteio {
margin-left: 200px;
margin-right: 200px;
font-size: 20px;
}
.lista ul li {
display: inline;
}
.lista ul li a {
display: block;
border: 2px solid #bfc0bf;
border-radius: 50%;
width: 100%;
line-height: 40px;
max-width: 75px;
height: auto;
font-weight: 700;
text-decoration: none;
display: inline;
box-sizing: border-box;
padding: 20px;
font-family: sans-serif;
font-size: 13px;
color: #ffffff;
background-color: rgb(85, 161, 108);
border-color: #212529;
margin-right: 50px;
}
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.lista ul li a:hover {
color: #212529;
background-color: #ffffff;
font: bolder;
transition: all 600ms ease;
}
.lista ul li a.active {
background-color: #f90;
}
<div class="lista">
<ul>
<li>
001
</li>
<li>
002
</li>
<li>
003
</li>
<li>
004
</li>
<li>
005
</li>
<li>
006
</li>
<li>
007
</li>
<li>
008
</li>
<li>
009
</li>
</ul>
</div>
</div>
<hr>
<p>Get the sum of the numbers in the array.</p>
<p id="demo"></p>
<hr>
</body>
</html>
I followed this youtube video exactly on how to make some professional tabs
https://www.youtube.com/watch?v=FvzZjg-uP2k&t=241s
But my code didn't turn out the same way. I want it like theirs so i can scroll through the different tabs and make a separate html file for each one
I have tried following the video ( new at css) and i think i formatted it correctly
Here is my css/ html code:
Css code:
body {
margin: auto;
background: #efefef;
font-family: arial;
}
.nav_bar {
margin: auto;
border-bottom: 1px solid #000000;
width: 860px;
padding: 0px 20px 0px 20px;
height: 64px
margin-top: 30px;
}
.nav_bar ul {
padding: 0;
list-style: none;
}
.nav_bar ul li {
float: left;
font-size: 16px;
font-weight: bold;
margin-right: 10px;
}
.nav_bar ul li a {
text-decoration:none;
color: #000000;
background: #6db1e4;
border: 1px solid #000000;
border-bottom: none;
padding: 23px 20px 22px 20px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
width: 75px;
display: block;
text-align: center;
}
.nav_bar ul li a:hover{
text-decoration: none;
color: #000000;
background: #96e0e9;
-moz-transition: background-color 200ms ease-in;
-webkit-transition: background-color 200ms ease-in;
-ms-transition: background-color 200ms ease-in;
-o-transition: background-color 200ms ease-in;
transition: background-color 200ms ease-in;
}
.nav_bar ul li a#onlink {
background: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
}
.nav_bar ul li a#onlink:hover;{
background: #ffffff;
color: #000000;
}
.main_container{
margin auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
.main_container p {
font-size: 14px;
margin: 0;
padding: 0;
}
My html code:
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body
<div class="nav_bar">
<ul>
<li>Home</li>
<li>SkillTree</li>
<li>Equipment</li>
<li>Pets</li>
<li>Skills</li>
<li>Quests</li>
</ul>
</div>
<div class="main_container">
<p> This is the home page.</p>
</div>
</body>
</html>
I expect the html link to look like what he has at the end of the video, but the actual output is a bit off and cant scroll through the pages http://prntscr.com/nrkf6v this is my output not correct
You haven't formatted it correctly.
You had 5 or 6 CSS errors and a big one in HTML. (<body tag wasn't closed). As a rule of thumb, in web, every character counts. There are some exceptions, but that's exactly what they are: exceptions.
The rule is: "every mistake breaks something".
Here's the correct output.
The tool you want to check your code against is called validator. (HTML validator, CSS validator, etc...). Or you can use an IDE (a smart editor which understands and suggests code as you type, also letting you know when it thinks you've made a mistake, considering current web standards).
body {
margin: auto;
background: #efefef;
font-family: arial;
}
.nav_bar {
margin: auto;
border-bottom: 1px solid #000000;
width: 860px;
padding: 0 20px 0 20px;
height: 64px;
margin-top: 30px;
}
.nav_bar ul {
padding: 0;
list-style: none;
}
.nav_bar ul li {
float: left;
font-size: 16px;
font-weight: bold;
margin-right: 10px;
}
.nav_bar ul li a {
text-decoration: none;
color: #000000;
background: #6db1e4;
border: 1px solid #000000;
border-bottom: none;
padding: 23px 20px 22px 20px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
width: 75px;
display: block;
text-align: center;
}
.nav_bar ul li a:hover {
text-decoration: none;
color: #000000;
background: #96e0e9;
-moz-transition: background-color 200ms ease-in;
-webkit-transition: background-color 200ms ease-in;
-ms-transition: background-color 200ms ease-in;
-o-transition: background-color 200ms ease-in;
transition: background-color 200ms ease-in;
}
.nav_bar ul li a#onlink {
background: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
}
.nav_bar ul li a#onlink:hover {
background: #ffffff;
color: #000000;
}
.main_container {
margin: auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
.main_container p {
font-size: 14px;
margin: 0;
padding: 0;
}
<!Doctype html>
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="nav_bar">
<ul>
<li>Home</li>
<li>SkillTree</li>
<li>Equipment</li>
<li>Pets</li>
<li>Skills</li>
<li>Quests</li>
</ul>
</div>
<div class="main_container">
<p> This is the home page.</p>
</div>
</body>
</html>
I'm looking for a solution to a little problem, complete novice, built my first site. I have utilized the "Summary-Details" feature, and included an image, which meant the stock dropdown arrow was moved, to which I couldn't position where I wanted it to be. I added an icon from material-icons, and I would like this to rotate when the whole image/section is clicked. I won't include any JS as I'm probably miles away from where I should be. Any help much appreciated.
.card {
width: 18em;
justify-self: center;
margin: 0;
padding: 2em 1em 0;
}
.card img {
margin: 0 0 5px 0;
width: 18em;
height: auto;
}
summary {
width: 18em;
font-weight: bold;
font-family: monospace;
font-size: 1.2rem;
text-transform: uppercase;
text-align: center;
margin: 0;
padding: 0;
color: #202020;
background: #808080;
cursor: pointer;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
summary::-webkit-details-marker {
display: none;
}
.card i {
margin: 0;
padding: 0;
font-variant-position: sub;
color: #101010;
}
.card i:active{
transform: rotate(180deg);
color: #fef;
}
summary:focus {
outline-style: none;
background: #404040;
color: #fef;
}
details {
width: 17.55em;
color: #fef;
background: #212529;
border-bottom: 1px solid rgba(250, 224, 66, .45);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 0;
margin: -.25em 0 2em;
border-right: solid 1px #b5b5b5;
border-bottom: solid 1px #b5b5b5;
}
.contentul li {
padding: 1em;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="card" id="card" >
<details>
<summary><img id="img1" src="https://images.unsplash.com/photo-1503708928676-1cb796a0891e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80" alt="ex1">Excavators<br><i class="fas fa-chevron-down"></i></summary>
<ul class="contentul">
<li>180° Wheeled</li>
<li>360° Wheeled</li>
<li>360° Tracked</li>
</ul>
</details>
</div>
You don't need JavaScript to accomplish this. The translateY bit is used to keep the icon from rotating away from its starting position. The value 0.5em means half the height of the box containing the chevron.
.fas.fa-chevron-down {
transition: .15s transform ease-in-out;
}
details[open] .fas.fa-chevron-down {
transform: rotate(180deg) translateY(-0.5em);
}
Demo
.card {
width: 18em;
justify-self: center;
margin: 0;
padding: 2em 1em 0;
}
.card img {
margin: 0 0 5px 0;
width: 18em;
height: auto;
}
summary {
width: 18em;
font-weight: bold;
font-family: monospace;
font-size: 1.2rem;
text-transform: uppercase;
text-align: center;
margin: 0;
padding: 0;
color: #202020;
background: #808080;
cursor: pointer;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
summary::-webkit-details-marker {
display: none;
}
.card i {
margin: 0;
padding: 0;
font-variant-position: sub;
color: #101010;
}
.card i:active {
transform: rotate(180deg);
color: #fef;
}
summary:focus {
outline-style: none;
background: #404040;
color: #fef;
}
details {
width: 17.55em;
color: #fef;
background: #212529;
border-bottom: 1px solid rgba(250, 224, 66, .45);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: 0;
margin: -.25em 0 2em;
border-right: solid 1px #b5b5b5;
border-bottom: solid 1px #b5b5b5;
}
.contentul li {
padding: 1em;
}
.fas.fa-chevron-down {
transition: .15s transform ease-in-out;
}
details[open] .fas.fa-chevron-down {
transform: rotate(180deg) translateY(-0.5em);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div class="card" id="card">
<details>
<summary><img id="img1" src="https://images.unsplash.com/photo-1503708928676-1cb796a0891e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80" alt="ex1">Excavators<br><i class="fas fa-chevron-down"></i></summary>
<ul class="contentul">
<li>180° Wheeled</li>
<li>360° Wheeled</li>
<li>360° Tracked</li>
</ul>
</details>
</div>
I am trying to add a style to angularjs Directive with a seprated css file.
index-nav-bar-directive{
ul{
list-style: none;
margin: 0;
padding: 0;
}
h1{
background-color: #2980b9;
color:white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
.fa-plus{
float: right;
}`[![enter code here][1]][1]`
}
And my html file is :
<body ng-app="IndexApp" ng-controller="indexController">
<index-nav-bar-directive> </index-nav-bar-directive>
</body>
And my directive HTML File:
<div class="root">
<div id="container" class="col-md-2">
<h1> Mongo : Data Bases</h1>
<ul id="todoList">
<li><span><i class="fa fa-trash"></i></span> Go to Hogwards</li>
<li><SPAN><i class="fa fa-trash"></i></SPAN> Go to Potions class</li>
<li><span><i class="fa fa-trash"></i></span> Kill Voldemort</li>
</ul>
</div>
</div>
I already saw that answer :
How to CSS style angular directive?
But its didn't work out.
Thank you very much!
Solved by Checking The Css inside :
Suppose to be like this form (in css you can't reach to inner attribute like i did)
div[index-nav-bar-directive] ul{
list-style: none;
margin: 0;
padding: 0;
}
div[index-nav-bar-directive] h1{
background-color: #2980b9;
color:white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
div[index-nav-bar-directive] .fa-plus{
float: right;
}
div[index-nav-bar-directive] li{
cursor: pointer;
background-color: #fff;
height: 40px;
line-height: 40px;
color: #666;
}
div[index-nav-bar-directive] span{
background-color: #e74c3c;
height: 40px;
margin-right:20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
opacity: 0;
transition: 0.2s linear;
}
div[index-nav-bar-directive] li:hover span{
width: 40px;
opacity: 1.0
}
div[index-nav-bar-directive] input{
font-size: 18px;
color: #2980b9;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
div[index-nav-bar-directive] #container{
background-color: #f7f7f7;
width: 360px;
margin: 100px auto;
box-shadow: 0px 0px 7px 1px grey;
}
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.