Here, I would like to fix my footer at the below of the page. I cannot seem to do it for this page whereas the css codes for footer works well on the other pages. Again, I would like to place the footer fixed at the below of the page.
Need help on this.
(function() {
function onSubmitClicked(event) {
var product = document.getElementById('product'),
productVal = product.value,
profile = document.getElementById('profile'),
profileVal = profile.value;
url = 'testPoint.html?product=' + encodeURIComponent(productVal) + '&profile=' + encodeURIComponent(profileVal);
location.href = url;
}
var submitButton = document.getElementById('btngo');
submitButton.addEventListener('click', onSubmitClicked);
})();
body {
background-color: #d62929;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: whitesmoke;
font-weight: bold;
font-size: 18px;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 22px 30px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #c12525;
color: white;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
}
.dropdown-content a:hover {
background-color: #c12525;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #d62929;
color: white;
font-weight: bold;
font-size: 18px;
}
#media screen and (max-width: 600px) {
ul li,
ul li {
float: none;
}
}
#media screen and (max-width: 300px) {
footer {
-webkit-order: 3;
order: 3;
}
}
h1 {
font-size: 40px;
font-weight: bold;
}
h2 {
font-size: 20px;
font-weight: bold;
}
p2 {
font-size: 15px;
font-weight: bold;
}
tr,
td {
padding: 15px;
text-align: left;
}
table {
margin: auto;
border-collapse: collapse;
width: 30%;
table-layout: fixed;
text-align: center;
}
tr {
height: 200px;
vertical-align: middle;
text-align: left;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button2:hover {
background-color: black;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button3:hover {
background-color: black;
color: white;
}
.rfloat {
margin: 5px;
text-align: center;
}
.clear {
clear: both
}
footer {
background: #aaa;
color: #fff;
text-align: center;
padding: 1rem;
clear: both;
/* clearing floating affects from both left,right sides */
}
.footp {
margin: 0;
padding: 0;
margin-left: 20px;
display: inline-block;
line-height: 30px;
vertical-align: top;
}
<ul>
<li>Home</li>
<li class="dropdown">
<a class="active dropbtn" href="javascript:void(0)">Capacity Study</a>
<div class="dropdown-content">
Conduct Study
Reports
</div>
</li>
<li>Contact</li>
</ul>
<div class="txt">
<table>
<tr>
<td>
<p2>Choose a Product : </p2>
<select id="product">
<!--Setting the 'NONE' value for the drop down menu list option when user do not want to choose any value. optgroup is used for the subtitles off the main product dept.-->
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<!--Product List for PCR Legacy-->
<br><br>
<!--End of first drop down list-->
</select>
<br><br>
<p2>Choose a Profile : </p2>
<select id="profile">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
</select>
</td>
</tr>
</table>
<br><br><br>
<div class="rfloat">
<input type="button" value="Back" onclick="goBack()" class="button button3" />
<input type="submit" id="btngo" value="Go" class="button button2" />
</div>
<div class="clear"></div>
<br><br><br>
</div>
<div>
<footer>
<p class="footp">©All rights reserved.</p>
<p class="footp">|</p>
<p class="footp">Internal Use Only</p>
<p class="footp">|</p>
<p class="footp">Maintained By</p>
</footer>
</div>
See the snippet below. This will force the footer to be on the bottom of the page only if the content isn't high enough.
See the answer of Staale # How do you get the footer to stay at the bottom of a Web page?
(function() {
function onSubmitClicked(event) {
var product = document.getElementById('product'),
productVal = product.value,
profile = document.getElementById('profile'),
profileVal = profile.value;
url = 'testPoint.html?product=' + encodeURIComponent(productVal) + '&profile=' + encodeURIComponent(profileVal);
location.href = url;
}
var submitButton = document.getElementById('btngo');
submitButton.addEventListener('click', onSubmitClicked);
})();
/* --- This below --- */
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -62px;
/* the bottom margin is the negative value of the footer's height */
}
.push {
height: 62px;
/* .push must be the same height as .footer */
}
/* --- This ahead --- */
body {
background-color: #d62929;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: whitesmoke;
font-weight: bold;
font-size: 18px;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 22px 30px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #c12525;
color: white;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
}
.dropdown-content a:hover {
background-color: #c12525;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #d62929;
color: white;
font-weight: bold;
font-size: 18px;
}
#media screen and (max-width: 600px) {
ul li,
ul li {
float: none;
}
}
#media screen and (max-width: 300px) {
footer {
-webkit-order: 3;
order: 3;
}
}
h1 {
font-size: 40px;
font-weight: bold;
}
h2 {
font-size: 20px;
font-weight: bold;
}
p2 {
font-size: 15px;
font-weight: bold;
}
tr,
td {
padding: 15px;
text-align: left;
}
table {
margin: auto;
border-collapse: collapse;
width: 30%;
table-layout: fixed;
text-align: center;
}
tr {
height: 200px;
vertical-align: middle;
text-align: left;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button2:hover {
background-color: black;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button3:hover {
background-color: black;
color: white;
}
.rfloat {
margin: 5px;
text-align: center;
}
.clear {
clear: both
}
footer {
background: #aaa;
color: #fff;
text-align: center;
padding: 1rem;
clear: both;
/* clearing floating affects from both left,right sides */
}
.footp {
margin: 0;
padding: 0;
margin-left: 20px;
display: inline-block;
line-height: 30px;
vertical-align: top;
}
<div class="wrapper"> <!-- START: Wrap everything in this div -->
<ul>
<li>Home</li>
<li class="dropdown">
<a class="active dropbtn" href="javascript:void(0)">Capacity Study</a>
<div class="dropdown-content">
Conduct Study
Reports
</div>
</li>
<li>Contact</li>
</ul>
<div class="txt">
<table>
<tr>
<td>
<p2>Choose a Product : </p2>
<select id="product">
<!--Setting the 'NONE' value for the drop down menu list option when user do not want to choose any value. optgroup is used for the subtitles off the main product dept.-->
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<!--Product List for PCR Legacy-->
<br><br>
<!--End of first drop down list-->
</select>
<br><br>
<p2>Choose a Profile : </p2>
<select id="profile">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
</select>
</td>
</tr>
</table>
<br><br><br>
<div class="rfloat">
<input type="button" value="Back" onclick="goBack()" class="button button3" />
<input type="submit" id="btngo" value="Go" class="button button2" />
</div>
<div class="clear"></div>
<br><br><br>
</div>
<div class="push"></div> <!-- START & END: Push div -->
</div> <!-- END: Wrap everything in this div -->
<div class="footer"> <!-- START: Footer WITH class -->
<footer>
<p class="footp">©All rights reserved.</p>
<p class="footp">|</p>
<p class="footp">Internal Use Only</p>
<p class="footp">|</p>
<p class="footp">Maintained By</p>
</footer>
</div> <!-- END: Footer WITH class -->
Please use following css to make footer stick at bottom:
footer {
/*it will allow to scroll page while staying at top incase page is long*/
position: fixed;
bottom: 0;
width: 100%;
}
JSFIDDLE
Additionally if you don't want this behavior you do this to make footer stick at bottom always.
footer {
position: absolute;
bottom: 0;
width: 100%;
}
Related
I have created a basic content editable section using the tutorial from this website. HTML 5 Contenteditable
I have made a save button within the .toolbar at the top. When I go to change the text and press the .saveContent button, it doesn't save the content to localStorage so once refreshed, it disappears and goes back to the default text.
I have made the page as a .php page due to a login system I have made, would this be a factor at all in why it isn't working.
Code Here:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if(localStorage.getItem('newContent')) {
theContent.html(localStorage.getItem('newContent'));
}
/* ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019. */
html > body {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', sans-serif;
}
#wrapper {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #1B315E;
}
.backdrop {
background-image: url(Assets/Images/backdrop.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 420px;
background: rgba(0,0,0,0.6);
color: #FFF;
padding: 40px 30px;
box-sizing: border-box;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"], input[type="password"] {
border: none;
outline: none;
border-bottom: 1px solid #FFF;
background: transparent;
height: 40px;
font-size: 14px;
color: #FFF;
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
font-size: 16px;
color: #FFF;
background: #777;
font-weight: bold;
}
.loginBox input[type="submit"]:hover {
cursor: pointer;
color: #FFF;
background: #888;
}
.institution, .message {
font-size: 12px;
text-align: justify;
}
* {
box-sizing: border-box;
}
.navigation {
background: #333;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
}
.navLinks {
margin-top: 8px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.navLinks:hover {
background: #A5A5A5;
}
.menuDropDown {
float: left;
overflow: hidden;
}
.menuDropDown > .menuButton {
border: none;
outline: none;
color: #FFF;
background: inherit;
font: inherit;
margin: 0;
font-size: 16px;
padding: 12px 6px;
}
.menuButton:hover, .navigation > .menuDropDown:hover > .menuButton {
background: #999;
color: #1B315E;
outline: none;
border: none;
}
.menuContent {
display: none;
width: 100%;
background: none;
position: absolute;
z-index: 1;
left: 0;
overflow: auto;
max-height: 85vh;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menuDropDown:hover > .menuContent {
display: block;
}
.menuColumn {
float: left;
width: 25%;
padding: 8px;
overflow-y: auto;
background: #999;
height: 235px;
}
.menuColumn > a {
float: none;
color: #1B315E;
padding: 10px;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
}
.menuRow:after {
content: "";
display: table;
clear: both;
}
.menuColumn > a:hover {
background: #A5A5A5;
}
.menuColumn > a.current {
background: #B6B6B6;
}
.menuHeader {
color: #1B315E;
margin-top: 0px;
margin-bottom: 8px;
}
.workspaceMain {
float: left;
width: 72.5%;
height: calc(100vh - 43px);
position: relative;
overflow: auto;
padding-right: 2px;
background: #FFF;
}
.toolbar {
background: #777;
border-bottom: 1px solid #666;
}
.toolbar > .saveContent {
color: #1B315E;
border: none;
outline: none;
background: #B6B6B6;
padding: 6px 6px;
font-size: 12px;
font: inherit;
}
.saveContent, .saveContent:hover, .toolLinks:hover {
background: #A5A5A5;
}
.toolLinks {
margin-top: 2px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.mainHeader {
text-align: center;
color: #1B315E;
}
table {
width: 100%;
font-size: 12px;
}
.tableName {
color: #1B315E;
font-size: 14px;
font-weight: bold;
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
<title>Welcome — Summit — School Name</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- Internal Stylesheet -->
<script src="https://kit.fontawesome.com/d3afa470fb.js"></script> <!-- Vector Icons -->
<link rel="shortcut icon" href="../Assets/Images/favicon.png"> <!-- Favicon -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
session_start();
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] == false ) {
header("Location: index.php");
}
?>
<div id="wrapper">
<div class="navigation">
<button class="navLinks" title="Logout"><i class="fas fa-sign-out-alt"></i></button>
<button class="navLinks" title="Help"><i class="fas fa-question-circle"></i></button>
<button class="navLinks" title="Quick Links"><i class="fas fa-bookmark"></i></button>
<div class="menuDropDown">
<button class="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn"> <!-- Home Workspace -->
<h5 class="menuHeader">Home Workspace</h5>
<i class="fas fa-door-open"></i> Welcome
</div>
<div class="menuColumn"> <!-- Learning Workspace -->
</div>
<div class="menuColumn"> <!-- Student Management Workspace -->
</div>
<div class="menuColumn"> <!-- Administration Workspace -->
</div>
</div>
</div>
</div>
</div>
<div class="workspaceMain">
<div class="toolbar">
<button class="saveContent" title="Save Changes"><i class="fas fa-save"></i> Save</button>
<button class="toolLinks" title="Collapse Panel"><i class="fas fa-arrow-right"></i></button>
<button class="toolLinks" title="Change Background Colour"><i class="fas fa-fill-drip"></i></button>
</div>
<h3 class="mainHeader" id="editable" contenteditable="true">SCHOOL NAME</h3>
<table class="tableSet" id="editable" contenteditable="true">
<caption class="tableName">Weekly Outline</caption>
</table>
</div>
<div class="workspaceSide"></div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Thanks, Tom
You need to use localStorage.setItem('key', value) to store the value in local storage
Your will then look like:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.setItem('newContent',editedContent)
});
You are using the id "editable" twice, could you change that and retry?
<span (focusout)="JumpTo()" contenteditable="true">Click to Change text</span>
JumpTo(){
var contenteditable = document.querySelector('[contenteditable]');
localStorage.setItem('newContent',contenteditable.textContent);
}
If you want to change it instantly use ngOnChanges()
The only problem I have is when you go from one drop down menu title to the next menu drop down title the first one stays open, I have attached the code pen, hopefully that's allowed.
https://codepen.io/gsxr1000/pen/yrGWEd
Edit: The below solutions are great, but they all lose the toggle ablilty of the menu, meaning the menu cant drop down and back up by clicking on the same menu item. This is very important to the functionality of the menu as in some small phones the drop downs could take up most of the screen so they will have no way to close the open dropdowns.
function blockchain() {
var element = document.getElementById("dropone");
element.classList.toggle("mystyle");
}
function products() {
var element = document.getElementById("droptwo");
element.classList.toggle("mystyle");
}
function payments() {
var element = document.getElementById("dropthree");
element.classList.toggle("mystyle");
}
function services() {
var element = document.getElementById("dropfore");
element.classList.toggle("mystyle");
}
window.onclick = function(event) {
if (!event.target.matches('.subnavbtn')) {
var dropdowns = document.getElementsByClassName("subnav-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('mystyle')) {
openDropdown.classList.remove('mystyle');
}
}
}
}
body {
max-width: 1400px;
margin: 0 auto;
padding: 5px;
}
.navbar {
position: relative;
max-width: 700px;
width: 100%;
}
.navbar a {
float: left;
font-size: 16px;
text-align: center;
padding: 5px 0px;
text-decoration: none;
color: black;
}
.navbar a:nth-child(4n+1) {
border-left: px solid #4caf50;
}
.subnav {
box-sizing: border-box;
border-left: 1px solid white;
float: left;
width: 25%;
text-align: center;
background-color: #4caf50;
}
.subnav:last-child {
border-right: ;
}
.subnav:first-child {
border-left: 1px solid #4caf50;
}
.subnav .subnavbtn {
font-size: 16px;
width: 100%;
background-color: #4caf50;
border: none;
outline: none;
color: white;
padding: 10px 1px;
margin: 0;
z-index: 1;
}
.subnav-content {
position: absolute;
display: none;
border: 1px solid #4caf50;
border-top: none;
max-width: 700px;
width: 100%;
left: 0;
text-decoration: none;
background-color: #f4f4f4;
box-sizing: border-box;
}
.subnav-content a {
float: left;
width: 25%;
box-sizing: border-box;
border-left: 1px solid white;
font-size: 12px;
}
.subnav-content a:hover {
color: white;
}
.subnav-content a:nth-child(4n-3) {
border-left: none;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
font-weight: bold;
background-color: #2c602e;
}
.mystyle {
display: block;
}
.subnav:hover .subnav-content {
box-sizing: border-box;
}
#media only screen and (max-width: 500px) {
.subnav-content a {
width: 50%;
}
.subnav .subnavbtn {
font-size: 14px;
}
.subnav-content a:nth-child(2n-1) {
border-left: none;
}
}
<div class="navbar">
<div class="subnav">
<button class="subnavbtn" onclick="blockchain()">Blockchain</button>
<div class="subnav-content" class="drop1" id="dropone">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn" onclick="products()">Products</button>
<div class="subnav-content" class="drop2" id="droptwo">
Bring
Deliver
Package
Express
Bring
Deliver
Package
Bring
Deliver
Package
Express
Bring
Deliver
Package
</div>
</div>
<div class="subnav">
<button class="subnavbtn" onclick="payments()">Payments</button>
<div class="subnav-content" class="drop3" id="dropthree">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="subnav">
<button class="subnavbtn" onclick="services()">Services</button>
<div class="subnav-content" class="drop4" id="dropfore">
Bring
Deliver
Package
Express
</div>
</div>
</div>
Create a function to close all navigation items;
Call this function when navigation items are clicked or document are clicked.
function blockchain() {
var element = document.getElementById("dropone");
if (element.classList.contains("mystyle")) {
element.classList.remove("mystyle");
} else {
closeAll();
element.classList.add("mystyle");
}
}
function products() {
var element = document.getElementById("droptwo");
if (element.classList.contains("mystyle")) {
element.classList.remove("mystyle");
} else {
closeAll();
element.classList.add("mystyle");
}
}
function payments() {
var element = document.getElementById("dropthree");
if (element.classList.contains("mystyle")) {
element.classList.remove("mystyle");
} else {
closeAll();
element.classList.add("mystyle");
}
}
function services() {
var element = document.getElementById("dropfore");
if (element.classList.contains("mystyle")) {
element.classList.remove("mystyle");
} else {
closeAll();
element.classList.add("mystyle");
}
}
window.onclick = function(event) {
closeAll(event);
}
function closeAll(event = null) {
if (!event || !event.target.matches('.subnavbtn')) {
var dropdowns = document.getElementsByClassName("subnav-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('mystyle')) {
openDropdown.classList.remove('mystyle');
}
}
}
}
body {
max-width: 1400px;
margin: 0 auto;
padding: 5px;
}
.navbar{
position: relative;
max-width: 700px;
width: 100%;
}
.navbar a {
float: left;
font-size: 16px;
text-align: center;
padding: 5px 0px;
text-decoration: none;
color: black;
}
.navbar a:nth-child(4n+1) {
border-left: px solid #4caf50;
}
.subnav {
box-sizing: border-box;
border-left: 1px solid white;
float: left;
width: 25%;
text-align: center;
background-color: #4caf50;
}
.subnav:last-child {
border-right: ;
}
.subnav:first-child {
border-left: 1px solid #4caf50;
}
.subnav .subnavbtn {
font-size: 16px;
width: 100%;
background-color: #4caf50;
border: none;
outline: none;
color: white;
padding: 10px 1px;
margin: 0;
z-index: 1;
}
.subnav-content {
position: absolute;
display: none;
border: 1px solid #4caf50;
border-top: none;
max-width: 700px;
width: 100%;
left: 0;
text-decoration: none;
background-color: #f4f4f4;
box-sizing: border-box;
}
.subnav-content a {
float: left;
width: 25%;
box-sizing: border-box;
border-left: 1px solid white;
font-size: 12px;
}
.subnav-content a:hover {
color:white;
}
.subnav-content a:nth-child(4n-3) {
border-left: none;
}
.navbar a:hover, .subnav:hover .subnavbtn {
font-weight: bold;
background-color: #2c602e;
}
.mystyle {
display:block;
}
.subnav:hover .subnav-content{
box-sizing: border-box;
}
#media only screen and (max-width: 500px) {
.subnav-content a {
width: 50%;
}
.subnav .subnavbtn {
font-size: 14px;
}
.subnav-content a:nth-child(2n-1) {
border-left: none;
}
}
<div class="navbar">
<div class="subnav">
<button class="subnavbtn" onclick="blockchain()">Blockchain</button>
<div class="subnav-content" class="drop1" id="dropone">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn" onclick="products()">Products</button>
<div class="subnav-content" class="drop2" id="droptwo">
Bring
Deliver
Package
Express
Bring
Deliver
Package
Bring
Deliver
Package
Express
Bring
Deliver
Package
</div>
</div>
<div class="subnav">
<button class="subnavbtn" onclick="payments()">Payments</button>
<div class="subnav-content" class="drop3" id="dropthree">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="subnav">
<button class="subnavbtn" onclick="services()">Services</button>
<div class="subnav-content" class="drop4" id="dropfore">
Bring
Deliver
Package
Express
</div>
</div>
</div>
More simply practice with jQuery:
$('.subnav').on('click', function() {
$('.subnav').not(this).find('.subnav-content').removeClass('mystyle');
$(this).find('.subnav-content').toggleClass('mystyle');
});
$(document).on('click', function(e) {
if (!$(e.target).hasClass('subnavbtn')) {
$('.subnav-content').removeClass('mystyle');
}
});
body {
max-width: 1400px;
margin: 0 auto;
padding: 5px;
}
.navbar{
position: relative;
max-width: 700px;
width: 100%;
}
.navbar a {
float: left;
font-size: 16px;
text-align: center;
padding: 5px 0px;
text-decoration: none;
color: black;
}
.navbar a:nth-child(4n+1) {
border-left: px solid #4caf50;
}
.subnav {
box-sizing: border-box;
border-left: 1px solid white;
float: left;
width: 25%;
text-align: center;
background-color: #4caf50;
}
.subnav:last-child {
border-right: ;
}
.subnav:first-child {
border-left: 1px solid #4caf50;
}
.subnav .subnavbtn {
font-size: 16px;
width: 100%;
background-color: #4caf50;
border: none;
outline: none;
color: white;
padding: 10px 1px;
margin: 0;
z-index: 1;
}
.subnav-content {
position: absolute;
display: none;
border: 1px solid #4caf50;
border-top: none;
max-width: 700px;
width: 100%;
left: 0;
text-decoration: none;
background-color: #f4f4f4;
box-sizing: border-box;
}
.subnav-content a {
float: left;
width: 25%;
box-sizing: border-box;
border-left: 1px solid white;
font-size: 12px;
}
.subnav-content a:hover {
color:white;
}
.subnav-content a:nth-child(4n-3) {
border-left: none;
}
.navbar a:hover, .subnav:hover .subnavbtn {
font-weight: bold;
background-color: #2c602e;
}
.mystyle {
display:block;
}
.subnav:hover .subnav-content{
box-sizing: border-box;
}
#media only screen and (max-width: 500px) {
.subnav-content a {
width: 50%;
}
.subnav .subnavbtn {
font-size: 14px;
}
.subnav-content a:nth-child(2n-1) {
border-left: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">Blockchain</button>
<div class="subnav-content" class="drop1" id="dropone">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Products</button>
<div class="subnav-content" class="drop2" id="droptwo">
Bring
Deliver
Package
Express
Bring
Deliver
Package
Bring
Deliver
Package
Express
Bring
Deliver
Package
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Payments</button>
<div class="subnav-content" class="drop3" id="dropthree">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services</button>
<div class="subnav-content" class="drop4" id="dropfore">
Bring
Deliver
Package
Express
</div>
</div>
</div>
A css only solution would make the problem much easier.
The :focus selector selects an element if it is the last one that was clicked.
The :focus-within does the same but also if any child has focus.
The + selects the next sibling, which in your case is a div with the .subnav-content
/*
* When the button is focused this makes it click-through.
* This hast the efect that when the user clicks the button again the click event
* goes through the button and 'hits' the element behind it and so the button looses focus.
*/
.subnavbtn:focus, .subnavbtn:focus-within {
pointer-events: none;
}
.subnavbtn:focus + .subnav-content, .subnavbtn:focus-within + .subnav-content {
display: block;
}
body {
max-width: 1400px;
margin: 0 auto;
padding: 5px;
}
.navbar{
position: relative;
max-width: 700px;
width: 100%;
}
.navbar a {
float: left;
font-size: 16px;
text-align: center;
padding: 5px 0px;
text-decoration: none;
color: black;
}
.navbar a:nth-child(4n+1) {
border-left: px solid #4caf50;
}
.subnav {
box-sizing: border-box;
border-left: 1px solid white;
float: left;
width: 25%;
text-align: center;
background-color: #4caf50;
}
.subnav:last-child {
border-right: ;
}
.subnav:first-child {
border-left: 1px solid #4caf50;
}
.subnav .subnavbtn {
font-size: 16px;
width: 100%;
background-color: #4caf50;
border: none;
outline: none;
color: white;
padding: 10px 1px;
margin: 0;
z-index: 1;
}
.subnav-content {
position: absolute;
display: none;
border: 1px solid #4caf50;
border-top: none;
max-width: 700px;
width: 100%;
left: 0;
text-decoration: none;
background-color: #f4f4f4;
box-sizing: border-box;
}
.subnav-content a {
float: left;
width: 25%;
box-sizing: border-box;
border-left: 1px solid white;
font-size: 12px;
}
.subnav-content a:hover {
color:white;
}
.subnav-content a:nth-child(4n-3) {
border-left: none;
}
.navbar a:hover, .subnav:hover .subnavbtn {
font-weight: bold;
background-color: #2c602e;
}
.subnav:hover .subnav-content{
box-sizing: border-box;
}
#media only screen and (max-width: 500px) {
.subnav-content a {
width: 50%;
}
.subnav .subnavbtn {
font-size: 14px;
}
.subnav-content a:nth-child(2n-1) {
border-left: none;
}
}
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">Blockchain</button>
<div class="subnav-content" class="drop1" id="dropone">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Products</button>
<div class="subnav-content" class="drop2" id="droptwo">
Bring
Deliver
Package
Express
Bring
Deliver
Package
Bring
Deliver
Package
Express
Bring
Deliver
Package
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Payments</button>
<div class="subnav-content" class="drop3" id="dropthree">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services</button>
<div class="subnav-content" class="drop4" id="dropfore">
Bring
Deliver
Package
Express
</div>
</div>
</div>
I put the navbar above the header if that affects anything.
How it currently looks like:
Can't figure out how to make search bar like the navbar. Also, the search element is not working with CSS. If anyone can help that would be amazing! I'm lost. I am trying to make the search bar and the navbar looks like the rest of the tab buttons and elements. Same height as the other elements.
HTML
<div class="navbar">
<a class="active" href="#home">Home</a>
<a herf="#about">About </a>
<a herf="#patientinfo"> Patient Information </a>
<div class="dropdown">
<button class = "dropbutton">Select Hospital
</button>
<div class= "dropdown-content">
Hospital
Hospital
Hospital
Hospital
</div>
</div>
<div class ="search">
<form action="/action_page.php"> <!--backend -->
<input type="text" name="search" placeholder="Search">
<button type="submit">Submit</button>
</form>
<!--search bar -->
</div>
</div>
CSS
.navbar {
overflow: hidden;
background-color: black;
font-family: 'Roboto';
width: 100%;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a.active{ /*shows active tab */
background-color:red;
color:white;
}
.navbar input[type=text] {
background-color: inherit;
color: white;
width: 25%;
float: left;
padding: inherit;
font-size: 16px;
}
}
.navbar .search button {
float: left;
padding: inherit;
margin:0;
margin-top:0px;
background-color: inherit;
font-size:15px;
cursor:pointer;
border:none;
}
.dropdown {
float:left;
overflow: hidden;
}
.dropdown .dropbutton {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbutton {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: red;
}
.dropdown:hover .dropdown-content { /* WHEN U HOVER OVER IT SHOWS THE MENU
*/
display: block;
}
This is how I would handle this. But note that you will have to do some responsive styles. I put in a fail safe so you dont have bad overlapping. Note that it looks alittle off on the code snippet because its so small, you should check it out by pasting it in a fresh html file.
.navbar {
overflow: hidden;
background-color: black;
font-family: 'Roboto';
width: 100%;
position: relative;
height: 47px;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a.active{ /*shows active tab */
background-color:red;
color:white;
}
.dropdown {
float:left;
overflow: hidden;
}
.dropdown .dropbutton {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbutton {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: red;
}
.dropdown:hover .dropdown-content { /* WHEN U HOVER OVER IT SHOWS THE MENU
*/
display: block;
}
.search {
position: absolute;
bottom: 0px;
right: 0px;
}
.search-input {
height: 47px;
border: none;
background-color: inherit;
color: white;
font-size: 16px;
}
.search-input:active {
background-color: red;
}
.search-input:focus {
background-color: red;
}
.search-button {
padding: 16px 10px;
height: 47px;
border: none;
color: white;
background-color: black;
font-size: 16px;
cursor:pointer;
}
.nav-links {
padding-right: 280px;
height: 47px;
}
<div class="navbar">
<div class="nav-links">
<a class="active" href="#home">Home</a>
<a herf="#about">About </a>
<a herf="#patientinfo"> Patient Information </a>
<div class="dropdown">
<button class = "dropbutton">Select Hospital
</button>
<div class= "dropdown-content">
Hospital
Hospital
Hospital
Hospital
</div>
</div>
</div>
<div class="search">
<form action="/action_page.php"> <!--backend -->
<input class="search-input" type="text" name="search" placeholder="Search">
<button class="search-button" type="submit">Submit</button>
</form>
<!--search bar -->
</div>
</div>
I am trying to move a button underneath the drop down box in my product page. so that the information is presented with one information per row. I tried placing a div tag around the button to see if that be seen as a separate element that goes below the previous element but that did not work so I am lost in what to do to make the buy button to go underneath the size and 1 boxes.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" >
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<br>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
*{
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
padding: 0;
border: 0;
}
h1{
font-size: 130%;
}
h2{
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p{
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product{
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2{
width: 100%;
height: 100%;
float: left;
}
.product-image{
/*border: 1px dotted #aaa;*/
}
.product-image .bg{
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator{
text-align:center;
}
.dot:hover{
background-color: #444;
}
.product-info{
padding: 0px 8%;
}
.product-info h1{
margin-bottom: 5px;
}
.product-info h2{
margin-bottom: 50px;
}
.product-info .select-dropdown{
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select{
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active, select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn{
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover{
background-color: #555;
}
.product-info p{
margin-bottom: 30px;
}
.product-info p a{
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover{
opacity: .7;
}
.product-info ul{
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li{
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before{
content:"\2022";
margin-right: 20px;
}
.product-info a.share-link{
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover{
border-bottom: 2px solid #aaa;
}
#footer {
width:100%;
background-color:#222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear:both;
height:10%;
}
There are multiple things wrong here.
The <br> tag should not be used for element positioning. This should be strictly reserved for text.
If you don't want your elements to display a line, it's probably a good idea to not set their display property to an inline-block for starters.
There are even some syntactical errors (eg. excessive </div> tag and what not). In general, I'd recommend writing your code in some sort of linter as it has some readability issues.
I did the baremost minimum of removing the unnecessary <br> tag and added clear:both to the .Buy class formatting. Producing the desired result.
body {
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 130%;
}
h2 {
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p {
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.Buy {
clear: both;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product {
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2 {
width: 100%;
height: 100%;
float: left;
}
.product-image {
/*border: 1px dotted #aaa;*/
}
.product-image .bg {
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator {
text-align: center;
}
.dot:hover {
background-color: #444;
}
.product-info {
padding: 0px 8%;
}
.product-info h1 {
margin-bottom: 5px;
}
.product-info h2 {
margin-bottom: 50px;
}
.product-info .select-dropdown {
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select {
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active,
select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn {
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover {
background-color: #555;
}
.product-info p {
margin-bottom: 30px;
}
.product-info p a {
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover {
opacity: .7;
}
.product-info ul {
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li {
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before {
content: "\2022";
margin-right: 20px;
}
.product-info a.share-link {
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover {
border-bottom: 2px solid #aaa;
}
#footer {
width: 100%;
background-color: #222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear: both;
height: 10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet">
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {
plusSlides(1)
}, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
You have <br/> tag before button, just add style to it like this
<br style="clear: both;" />
and you should be fine :)
I have a vertical navigation bar on my website. When I click on a link in the navigation bar the content is shown in the content div. My problem is that content that is shown in the content div is a form and it is not accepting any input. Help me out
/*right click disable*/
/*$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});*/
$('.nav1', this).hide();
//drop down -logout
$(document).ready(function() {
$(".account").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function() {
return false
});
//Mouse click on my account link
$(".account").mouseup(function() {
return false
});
//Document Click
$(document).mouseup(function() {
$(".submenu").hide();
$(".account").attr('id', '');
});
});
/* drop down for sidebar*/
$(document).ready(function() {
$("#kl").click(function() {
$("#kll").toggle();
});
});
/* show div */
$(document).ready(function() {
$('a').click(function() {
var divname = this.name;
$("#" + divname).show().siblings().hide();
});
});
html,
body {
height: 100%;
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.header {
width: 100%;
height: 60px;
}
/*http://jsfiddle.net/EnKwU/4/*/
.nav {
text-align: center;
width: 85%;
padding: 10px;
margin: 12px 50px 40px 100px;
float: left;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-block;
zoom: 1;
*display: inline;
margin-right: -80px;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
border-bottom: 5px solid #339966;
color: #fff;
}
.nav ul li a:hover {
color: #ffffff;
background: #1bbc9b;
}
.nav ul li a {
display: block;
padding: 0.3em 0.8em;
font-family: 'Lato', sans-serif;
font-size: 0.9em;
color: #444;
text-decoration: none;
}
.nav ul ul {
background-color: #fff;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
}
.nav ul ul li {
float: none;
position: relative;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 0.85em;
}
.nav ul ul li a {
padding: 0.4em 1.2em;
color: #000;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
.nav1 {
position: absolute;
left: 25px;
top: 200px;
bottom: 0;
width: 25%;
float: left;
}
.content {
border: 1px solid black;
position: absolute;
left: 26%;
top: 220px;
bottom: 0;
width: 75%;
float: left;
z-index: -100;
}
/*http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html*/
.dropdown {
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align: left;
float: right;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear: both;
}
.dropdown li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration: none;
}
.dropdown li a:hover {
background: #155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor: pointer;
}
.root {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top: 1px solid #dedede;
}
/* http://codepen.io/daniesy/pen/pfxFi
icons : http://fontawesome.io/
*/
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
box-sizing: border-box;
}
.float-right {
float: right;
}
.fa {
font-size: .8em;
line-height: 22px !important;
}
.nav1 {
display: inline-block;
margin: 20px 50px;
}
.nav1 label {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 ul li {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 label:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 ul li:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 label {
color: #1ABC9C;
border-left: 4px solid #1ABC9C;
border-radius: 0 5px 0 0;
position: relative;
z-index: 2;
}
.nav1 input {
display: none;
}
.nav1 input ~ ul {
position: relative;
visibility: hidden;
opacity: 0;
top: -20px;
z-index: 1;
}
.nav1 input:checked + label {
background: #1ABC9C;
color: white;
}
.nav1 input:checked ~ ul {
visibility: visible;
opacity: 1;
top: 0;
}
.nav1 ul li a {
text-decoration: none;
display: block;
}
.nav1 ul li:nth-child(1) {
border-left: 4px solid #E74C3C;
}
.nav1 ul li:nth-child(1) .fa {
color: #E74C3C;
}
.nav1 ul li:nth-child(1):hover {
background: #E74C3C;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(2) {
border-left: 4px solid #0072B5;
}
.nav1 ul li:nth-child(2) .fa {
color: #0072B5;
}
.nav1 ul li:nth-child(2):hover {
background: #0072B5;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(3) {
border-left: 4px solid #EC1559;
}
.nav1 ul li:nth-child(3) .fa {
color: #EC1559;
}
.nav1 ul li:nth-child(3):hover {
background: #EC1559;
color: white;
font-weight: bold;
}
#container {
float: right;
border: 1px solid black;
position: relative;
width: 700px;
margin: 30px auto;
font-family: raleway z-index: -100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!---header and side bar for user name and logout menu -starts here -->
<div class = "nav">
<ul>
<li>Home</li>
<li>Portfolio
<ul>
<li>Active Directory
<li>HelpDesk
<li>CTS
<li>Exchange/Infra
<li>Others
</ul>
</li>
<li>Downloads</li>
<li>Blog</li>
<li>News</li>
<li>Contact US</li>
</ul>
</div>
<!--horizantal navigation bar ends here -->
<!---vetical navigation bar starts here-->
<div class="nav1">
<label for="toggle2" id="kl">Active Directory</label>
<ul class="animate" style="display:none" id="kll">
<li class="animate">Create Domain User</li>
<li class="animate">Domain Password Reset</li>
<li class="animate">Domain Joining</li>
</ul>
</div>
<!---vetical navigation bar ends here-->
<div class="content">
<div id="div1" style="display:none">
<!---->
<div id="AD-FORM">
<h2>AD-FORM</h2>
<form name="adform" action="/" onsubmit="return validateForm()" method="post">
<label>Emp ID :</label>
<input id="id" name="empid" placeholder="" type="text">
<br>
<br>
<label>Full Name :</label>
<input id="name" name="FName" placeholder="Enter your full name" type="text">
<br>
<br>
<label>Designation:</label>
<input id="name" name="desig" placeholder="Enter your Designation" type="text">
<br>
<br>
<label for='DO'>D.O:</label>
<br>
<select name="DO" style="WIDTH: 195px; padding: 2px; margin-top: 2px; border: 2px solid #ccc; padding-left: 2px; font-size: 16px; font-family: raleway">
<option value="">Select a D.O...</option>
<option value="AHMEDABAD">AHMEDABAD</option>
<option value="BANGLORE">BANGLORE</option>
<option value="CHENNAI">CHENNAI</option>
<option value="COIMBATORE">COIMBATORE</option>
<option value="DELHI">DELHI</option>
<option value="ERNAKULAM">ERNAKULAM</option>
<option value="HYDERABAD">HYDERABAD</option>
<option value="KARUR">KARUR</option>
<option value="KOLKATA">KOLKATA</option>
<option value="MADURAI">MADURAI</option>
<option value="MUMBAI">MUMBAI</option>
<option value="SALEM">SALEM</option>
<option value="TAMBARAM">TAMBARAM</option>
<option value="TRICHY">TRICHY</option>
<option value="VIJAYAWADA">VIJAYAWADA</option>
<option value="VISAKHAPATNAM">VISAKHAPATNAM</option>
</select>
<br>
<br>
<label>BranchCode:</label>
<input id="name" name="branch" placeholder="Enter your BranchCode" type="number" min="1000" max="9999">
<br>
<br>
<input name="submit" type="submit" value=" Submit ">
</form>
</div>
</div>
<!---->
<div id="div2" style="display:none">
</div>
<div id="div3" style="display:none">
Another Test
</div>
<div id="div4" style="display:none">
Final Test
</div>
</div>
z-index of content div is wrong
use this styling for content and it will work for you
.content {
border: 1px solid black;
position: absolute;
left: 37%;
top: 220px;
bottom: 0;
width: 75%;
float: left;
z-index: 222222;
height: 100%;
padding: 12px;
}
and if you want that your form div should be beside the
left menu div. than you have to try something else.
fiddleLink;)