I'm trying to create some minimal designs for my sites future administration panel. And if you look here, that's the working version of my current code. What I have is the navigation on the left side that slides out and pushes the rest of the pages content towards the right and hides the overflow. Where you enter post content, a textarea, is where I'm encountering my problem. If You enter a enough text that the page scrolls since I have the title and tag input fields set to absolute they stay where they are. Setting them as fixed and adding some margins does make it so they scroll with the page and look nice like that, but if you slide out the navigation the fixed elements won't move. In order to get them to do that I have to move them along with the actual main container, then a scroll bar appears on the x-axis and trying to set overflow-x: hidden; on various elements pertaining to those elements does nothing. Here are my html and css
<!DOCTYPE html>
<html>
<head>
<title>New Post</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet">
<link href="css/create-post.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="css/jquery.tagsinput.css" rel="stylesheet">
</head>
<body class="main">
<section>
<nav class="menu">
<ul>
<li class="logo">Lithium CMS</li>
<div class="links">
<li>Dashboard</li>
<li>Messages</li>
<li>Posts</li>
<li>Pages</li>
</div>
</ul>
</nav>
</section>
<section class="content">
<form>
<input type="text" name="post-title" class="post-title" placeholder="Title...">
<div class="post-content-container">
<textarea name="post-content" class="post-content" placeholder="What you waiting for, start typing!"></textarea>
</div>
<div class="post-tags-container">
<input name="post-tags" class="post-tags">
</div>
</form>
<section>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.autogrow-textarea.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script>
$(function() {
$('.menu-toggle').bind('click', function() {
$('.main').toggleClass('menu-open');
return false;
});
$('.post-content').autogrow();
$('.post-tags').tagsInput({
'width': '100%',
'height': '',
});
});
</script>
</body>
</html>
Here's my CSS
html,
body {
height: 100%;
}
.main {
overflow-x: hidden;
position: relative;
left: 0;
}
.menu-toggle {
background-color: #333333;
border-right: 1px solid #111111;
border-bottom: 1px solid #111111;
color: #ffffff;
text-decoration: none;
padding: 10px;
padding-right: 11px;
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.menu-open .menu-toggle {
left: 210px;
z-index: 4;
}
.menu-open {
left: 210px;
}
.menu-open .menu {
left: 0;
}
.menu,
.menu-toggle,
.main {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu {
background-color: #333333;
border-right: 1px solid #111111;
color: #ffffff;
position: fixed;
top: 0;
left: -210px;
z-index: 3;
height: 100%;
width: 210px;
}
.menu li.logo {
color: #666;
text-shadow: 1px 0px 1px #000000;
font-size: 16px;
font-weight: bolder;
padding: 10px;
border-bottom: 1px solid #2f2f2f;
}
.menu a {
color: #eaeaea;
text-shadow: 1px 0px 1px #555555;
text-decoration: none;
font-weight: bolder;
font-size: 18px;
}
.menu a li {
border-bottom: 1px solid #2a2a2a;
padding: 10px;
-webkit-transition: background-color 0.2s ease-in;
-moz-transition: background-color 0.2s ease-in;
transition: background-color 0.2s ease-in;
}
.menu .links li:hover {
background-color: #2f2f2f;
}
.content {
position: relative;
height: 100%;
}
.post-title,
.post-content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
outline: none;
width: 100%;
}
.post-content {
resize: none;
}
.post-title {
background-color: #eaeaea;
font-size: 24px;
padding-left: 50px;
}
.post-content-container {
max-height: 90%;
}
.post-tags-container {
position: absolute;
bottom: 0;
width: 100%;
}
div.tagsinput { border:0px; background: #eaeaea; padding:15px; overflow-y: auto;}
div.tagsinput span.tag { border: 1px solid #888888; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cccccc; color: #333333; margin-right: 5px; margin-bottom:5px; font-size:13px;}
div.tagsinput span.tag a { font-weight: bold; color: #333333; text-decoration:none; font-size: 11px; }
div.tagsinput input { width:80px; margin:0px; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #333333; outline:0px; margin-right:5px; margin-bottom:5px; }
div.tagsinput div { display:block; float: left; }
.tags_clear { clear: both; width: 100%; height: 0px; }
.not_valid {background: #FBD8DB !important; color: #90111A !important;}
You can avoid this problem quite easy. Just put .post-tags-container right before the end of the body (right before </body>).
Related
I'm creating a menu for my site and I don't know how to keep the selected item checked.
At the moment it keeps bouncing back to the first one.
nav {
margin: 27px auto 0;
position: relative;
width: 590px;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
}
nav a {
line-height: 50px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
a:nth-child(1) {
width: 100px;
}
a:nth-child(2) {
width: 110px;
}
nav .start-home, a:nth-child(1):hover~.animation {
width: 100px;
left: 0;
background-color: #1abc9c;
}
nav .start-about, a:nth-child(2):hover~.animation {
width: 110px;
left: 100px;
background-color: #e74c3c;
}
p {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: #ecf0f1;
font-family: 'Cherry Swash',cursive;
font-size: 16px;
}
span {
color: #2BD6B4;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main_menu.css">
</head>
<body>
<nav>
test
foo1
<div class="animation start-home"></div>
</nav>
</body>
</html>
Can someone help me to keep the clicked menu item selected. I don't want to have to use javascript. Is there a way to do this? I read something about an 'active' element.
Edit: Since #hackerfrosch thinks that the whole thing is easier with js, I tried that. But I don't know how I can assign a class to the buttons via js in my case. Can I specify the color that the button should have, since each button has a different color?
I searched a little further and completely remade the menu. The design is roughly the same and it works entirely without Javascript.
.slide-toggle{
display: none;
}
.slide-menu{
font-family: arial, sans-serif;
max-width: 600px;
margin: 50px auto;
overflow: hidden;
}
.slide-menu label{
width: 25%;
text-align: center;
display: block;
float: left;
}
.slide-menu label:hover{
cursor: pointer;
}
.slide-menu label span{
display: block;
padding: 20px 15px 15px;
color: white;
}
.slider{
width: 100%;
height: 100%;
display: block;
background: #415a75;
border-radius: 10px;
margin-top: 10px;
}
.slider .bar{
width: 25%;
height: 40px;
border-radius: 10px;
}
.slide-menu label, .slider .bar {
transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
}
.slide-menu .slide-toggle + label{
opacity: 1;
}
.slide-menu #slide-item-1:checked ~ .slider .bar{ margin-left: 0; background: #1abc9c }
.slide-menu #slide-item-2:checked ~ .slider .bar{ margin-left: 25%; background: #e74c3c }
.slide-menu #slide-item-3:checked ~ .slider .bar{ margin-left: 50%; background: #3498db }
.slide-menu #slide-item-4:checked ~ .slider .bar{ margin-left: 75%; background: #9b59b6 }
.slide-menu #slide-item-1:hover ~ .slider .bar{ margin-left: 0; background: #1abc9c }
.slide-menu #slide-item-2:hover ~ .slider .bar{ margin-left: 25%; background: #e74c3c }
.slide-menu #slide-item-3:hover ~ .slider .bar{ margin-left: 50%; background: #3498db }
.slide-menu #slide-item-4:hover ~ .slider .bar{ margin-left: 75%; background: #9b59b6 }
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main_menu.css">
<title></title>
</head>
<body>
<nav class="slide-menu">
<input onclick="location.href='#1'" type="radio" name="slideItem" id="slide-item-1" class="slide-toggle" checked/>
<label for="slide-item-1"><span>Home</span></label>
<input onclick="location.href='#2'" type="radio" name="slideItem" id="slide-item-2" class="slide-toggle"/>
<label for="slide-item-2"><span>About</span></label>
<input onclick="location.href='#3'" type="radio" name="slideItem" id="slide-item-3" class="slide-toggle"/>
<label for="slide-item-3"><span>Folio</span></label>
<input onclick="location.href='#4'" type="radio" name="slideItem" id="slide-item-4" class="slide-toggle"/>
<label for="slide-item-4"><span>Contact</span></label>
<div class="animation start-home"></div>
<div class="slider">
<div class="bar"></div>
</div>
</nav>
</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 want to toggle between two icons by clicking on .switch and apply the style of .nightTextNight to .nightText, my JavaScript code works everywhere except here.
And can anyone suggest me any other way to make it simpler?
Because, for every little change I need to create two class and give it an id.
var nightBtn = document.getElementById("switch");
var body = document.getElementById("body");
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");
var nightText = document.getElementById("nightText");
function nightMode() {
nightBtn.classList.toggle("switchNight");
body.classList.toggle("night");
navbar.classList.toggle("navbarNight");
nightText.classList.toggle("nightTextNight");
if(nightText.className = "nightTextNight") {
nightText.innerHTML = "<i class='fa fa-sun-o' aria-hidden='true'></i>";
} else {
nightText.innerHTML = "<i class='fa fa-moon-o' aria-hidden='true'></i>";
};
}
body {
background-color: white;
transition: background-color ease 0.3s;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.night {
background-color: #3f4b5e;
transition: background-color ease 1s;
}
.switch {
height: 35px;
width: 35px;
border-radius: 50%;
background-color: #092d30;
border: 3px solid wheat;
float: right;
z-index: 4;
transition: background-color ease 1s;
margin-top: 12px;
margin-right: 4px;
cursor: pointer;
text-align: center;
line-height: 17.5px;
position: relative;
}
.switchNight {
background-color: wheat;
border: 3px solid #092d30;
z-index: 4;
transition: background-color ease 1s;
}
.textNight {
color: white;
}
.switch:hover {
background-color: #4d5e77;
transition: background-color ease 1s;
}
.switchNight:hover {
background-color: #fff2d8;
transition: background-color ease 1s;
}
/* --------------------- NAV BAR ------------------ */
.navbar {
width: 100%;
height: auto;
background: #f4f7f9;
position: fixed;
margin-top: 0;
padding: 0;
border-bottom: 3px solid #2fb3f9;
}
.navbar li {
list-style-type: none;
display: inline;
height: auto;
}
.navbar li a {
padding: 20px 25px;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: bolder;
color: #516f7f;
}
.navbar li a:hover {
color: #ff9d00;
transition: color ease 0.3s;
}
.navbarNight {
background-color: #556bb5;
border-bottom: 3px solid white;
}
.navbarNight li a {
color: white;
}
.nightText {
position: absolute;
color: white;
font-weight: bolder;
top: 9px;
right: 12px;
}
.nightTextNight {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>Night Mode - TEST</title>
</head>
<body id="body">
<div id="container">
<div id="nav">
<ul id="navbar" class="navbar">
<li>Home</li>
<li>About me</li>
<li><div id="switch" class="switch" onclick="nightMode()"><span id="nightText" class="nightText"><i class="fa fa-moon-o" aria-hidden="true"></i></span></div></li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
It wasn't working because you've got two classes:
nightText nightTextNight
So you need to check:
if(nightText.className === "nightText nightTextNight")
var nightBtn = document.getElementById("switch");
var body = document.getElementById("body");
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");
var nightText = document.getElementById("nightText");
function nightMode() {
nightBtn.classList.toggle("switchNight");
body.classList.toggle("night");
navbar.classList.toggle("navbarNight");
nightText.classList.toggle("nightTextNight");
if(nightText.className === "nightText nightTextNight") {
nightText.innerHTML = "<i class='fa fa-sun-o' aria-hidden='true'></i>";
} else {
nightText.innerHTML = "<i class='fa fa-moon-o' aria-hidden='true'></i>";
};
console.log(nightText.className);
}
body {
background-color: white;
transition: background-color ease 0.3s;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.night {
background-color: #3f4b5e;
transition: background-color ease 1s;
}
.switch {
height: 35px;
width: 35px;
border-radius: 50%;
background-color: #092d30;
border: 3px solid wheat;
float: right;
z-index: 4;
transition: background-color ease 1s;
margin-top: 12px;
margin-right: 4px;
cursor: pointer;
text-align: center;
line-height: 17.5px;
position: relative;
}
.switchNight {
background-color: wheat;
border: 3px solid #092d30;
z-index: 4;
transition: background-color ease 1s;
}
.textNight {
color: white;
}
.switch:hover {
background-color: #4d5e77;
transition: background-color ease 1s;
}
.switchNight:hover {
background-color: #fff2d8;
transition: background-color ease 1s;
}
/* --------------------- NAV BAR ------------------ */
.navbar {
width: 100%;
height: auto;
background: #f4f7f9;
position: fixed;
margin-top: 0;
padding: 0;
border-bottom: 3px solid #2fb3f9;
}
.navbar li {
list-style-type: none;
display: inline;
height: auto;
}
.navbar li a {
padding: 20px 25px;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: bolder;
color: #516f7f;
}
.navbar li a:hover {
color: #ff9d00;
transition: color ease 0.3s;
}
.navbarNight {
background-color: #556bb5;
border-bottom: 3px solid white;
}
.navbarNight li a {
color: white;
}
.nightText {
position: absolute;
color: white;
font-weight: bolder;
top: 9px;
right: 12px;
}
.nightTextNight {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>Night Mode - TEST</title>
</head>
<body id="body">
<div id="container">
<div id="nav">
<ul id="navbar" class="navbar">
<li>Home</li>
<li>About me</li>
<li><div id="switch" class="switch" onclick="nightMode()"><span id="nightText" class="nightText"><i class="fa fa-moon-o" aria-hidden="true"></i></span></div></li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
PD: I added console.log(nightText.className); to show the classes, you can remove it.
You can just toggle the icon class instead of changing the entire i tag
var nightBtn = document.getElementById("switch");
var nightBtnIcon = document.getElementById("switch-icon");
var body = document.getElementById("body");
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");
function nightMode() {
nightBtn.classList.toggle("switchNight");
body.classList.toggle("night");
navbar.classList.toggle("navbarNight");
nightBtnIcon.classList.toggle("fa-sun-o");
nightBtnIcon.classList.toggle("fa-moon-o");
}
HTML:
<ul id="navbar" class="navbar">
<li>Home</li>
<li>About me</li>
<li><div id="switch" class="switch" onclick="nightMode()"><i class="icon fa fa-moon-o" aria-hidden="true" id=“switch-icon”></i></span></div></li>
</ul>
What about wrapping all of the elements that might have a night style different in a div, or even in the body, and then just apply a night class to that wrapper.
You could then add different styles to your elements along the lines of:
.night .navbar {
... just night-related style differences ...
}
Then, your toggle would only have to add or remove the class from the wrapping element. You would still have to add new classes for those things that you want to change, but it would only be for the properties you want to change on them.
The best way to ignore the id to use an Attribute and loop like data-mode
see this example :
var modes={
day:{
switch:"switch", body:"day", navbar:"navbar",icon:"fa fa-moon-o"
},
night:{
switch:"switchNight switch", body:"night day", navbar:"navbarNight navbar",icon:"fa fa-sun-o"
}
}
function changeMode(arg){
window.mode=arg;
var elem=document.querySelectorAll('[data-mode]');
for (var i=0; i<elem.length; i++){
var key=elem[i].getAttribute("data-mode");
elem[i].classList=modes[arg][key];
}
}
window.mode="day";
body {
background-color: white;
transition: background-color ease 0.3s;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.night {
background-color: #3f4b5e;
transition: background-color ease 1s;
}
.switch {
height: 35px;
width: 35px;
border-radius: 50%;
background-color: #092d30;
border: 3px solid wheat;
float: right;
z-index: 4;
transition: background-color ease 1s;
margin-top: 12px;
margin-right: 4px;
cursor: pointer;
text-align: center;
line-height: 17.5px;
position: relative;
}
.switchNight {
background-color: wheat;
border: 3px solid #092d30;
z-index: 4;
transition: background-color ease 1s;
}
.textNight {
color: white;
}
.switch:hover {
background-color: #4d5e77;
transition: background-color ease 1s;
}
.switchNight:hover {
background-color: #fff2d8;
transition: background-color ease 1s;
}
/* --------------------- NAV BAR ------------------ */
.navbar {
width: 100%;
height: auto;
background: #f4f7f9;
position: fixed;
margin-top: 0;
padding: 0;
border-bottom: 3px solid #2fb3f9;
}
.navbar li {
list-style-type: none;
display: inline;
height: auto;
}
.navbar li a {
padding: 20px 25px;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: bolder;
color: #516f7f;
}
.navbar li a:hover {
color: #ff9d00;
transition: color ease 0.3s;
}
.navbarNight {
background-color: #556bb5;
border-bottom: 3px solid white;
}
.navbarNight li a {
color: white;
}
.nightText {
position: absolute;
color: white;
font-weight: bolder;
top: 9px;
right: 12px;
}
.nightTextNight {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>Night Mode - TEST</title>
</head>
<body data-mode="body">
<div>
<div>
<ul class="navbar" data-mode="navbar">
<li>Home</li>
<li>About me</li>
<li><div class="switch" data-mode="switch" onclick="changeMode(mode=='night'?'day':'night');">
<span class="nightText">
<i class="fa fa-moon-o" data-mode="icon"></i>
</span>
</div>
</li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I added a button to my code, I wanted to make it transparent but then it made a huge gap at the top and I want the button to eb placed in the middle but I really have no idea on how to do it.
Here are some image examples
https://i.gyazo.com/3b6d5f86f5a6ec84ca61e499b2411079.jpg[^]
https://i.gyazo.com/d086228702c62d79bf5fdeb518089c7e.jpg[^]
as you can see in this picture I changed the background color to transparent
why is it making that huge gap at the top? The button is still there but since its a white background I cant see it and I would like to move the button down to the middle
}
button {
background-color: Transparent;
background-repeat:no-repeat;
cursor:pointer;
overflow: hidden;
outline:none;
height: 38px;
line-height: 40px;
border: 2px solid white;
display: inline-block;
float: none;
text-align: center;
width: 120px;
padding: 0px!important;
font-size: 14px;
color: #fff;
}
button:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
/*Menu CSS*/
#sidebar {
background: #151718;
width: 200px;
height: 17%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
z-index: 1000;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
ul li a {
background: #1C1E1F;
color: #ccc;
border-bottom: 1px solid #111;
display: block;
width: 180px;
padding: 10px;
text-decoration: none;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 150px;
cursor: pointer;
margin: 20px;
position: absolute;
top:0px;
right:-60px;
}
#sidebar-btn span {
height: 1px;
background:#ffffff;
margin-bottom: 5px;
display: block;
}
#sidebar-btn span:nth-child(2) {
width: 75%;
}
#sidebar-btn span:nth-child(3) {
width: 50%;
}
/*Menu CSS*/
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Buttons for email subscriptions and stuff -->
<!-- Full Width Responsive Slider -->
<div class="container">
<div style="background-color: transparent; text-align: center; padding: 10px"><button>Contact Us</button></div>
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/wp5.jpg">
<img src="images/wp6.jpg">
<img src="images/wp7.jpg">
</div>
<!-- Full Width Responsive Slider -->
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
please you can add in
.button{
position:fixed;
top:40%
}
Here is the layout wanna to achieve. If there something you don't understand, you can ask.
I suggest try construct your css and your html.
Example
CSS
.centering{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
DEMO
help me out here. I want to have my navigation menu go to a fixed position at the top after i scroll down 500 pixels. If anyone can give me the java-script I need, I will be very grateful. Thanks in advance :)
Here is the code if it would help
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="img/favicon.png" />
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
body {
margin: 0;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
padding: 0;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
}
h1 {
}
h2 {
}
hr {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
/* ==============================Header================= */
.cover {
background: url(http://oi62.tinypic.com/a2ac8n.jpg) top center no-repeat;
background-size: cover;
width: 100%;
height: 500px;
margin-bottom: -400px;
position:fixed;
}
.menu,
.menu ul,
.menu li,
.menu a {
padding: 0;
border: none;
outline: none;
}
.menu {
text-shadow:0px 0px 10px #fff;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
margin: 400px 0px 0px 0px;
position: absolute;
width: 100%;
height: 100px;
-webkit-box-shadow: 0px 0px 20px 1px #666;
-moz-box-shadow: 0px 0px 20px 1px #666;
box-shadow: 0px 0px 20px 1px #666;
background: #FFF;
}
.menuWrap {
width: 1000px;
margin: auto;
}
.menu li {
list-style:none;
float: left;
width: 25%;
text-align: center;
}
.menu li a {
display: block;
font-weight: bold;
color: #000;
font-size: 20px;
line-height: 100px;
}
.menu li:hover > a,
.menu .active {
background-color:#09D5D5;
color: #FFF;
-webkit-transition: ease-in .2s;
-moz-transition: ease-in .2s;
-o-transition: ease-in .2s;
-ms-transition: ease-in .2s;
transition: ease-in .2s;
}
/* ========================Content======================== */
.mainContent{
background: #F8F8F8;
width: 100%;
position: absolute;
margin-top:500px;
}
.contentWrapper {
margin: auto;
width: 1000px;
padding-top: 50px;
}
.content {
margin-bottom: 50px;
padding: 40px;
border: #999 1px solid;
line-height: 25px;
color: #4D4D4D;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #FFF;
box-shadow: 0px 0px 1px 1px #e1e1e1 inset, 0px 23px 30px -33px #4D4D4D;
}
</style>
<body class="body">
<div class="cover"></div>
<header class="mainHeader">
<nav>
<ul class="menu"><div class="menuWrap">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
</div></ul>
</nav>
</header>
<div class="mainContent">
<div class="contentWrapper">
<article class="content">
</article>
<article class="content">
</article>
<article class="content">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
<div>
</html>
Use an additional class:
.menu.fixed {
position:fixed;
top: 0;
margin: 0;
z-index: 3;
}
and the following jQuery code to detect the scroll:
$(document).scroll(function()
{
if($(document).scrollTop()>=500)
$('.menu').addClass('fixed');
else
$('.menu').removeClass('fixed');
});
See working JSFiddle Demo