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()
Related
I currently have a gallery of my portfolio set-up. Once you click on the image, it makes a pop-up. Inside of the pop-up is the image and text describing the design, copywriting ect. Once you hover over the image, it zooms. My problem is that one or two of the images, on css hover transform scale, scales to such a size that it is outside of the viewing port of the browser. It is in rectangular form, where other designs are only square. I would like the user of the website to move their cursor up and have the image move with the cursor, so the user can see the top of the image, and then have the user move their cursor down to the bottom of the image and have the image move with the cursor so that the user can see the bottom of the image. I have no idea how to do this, and I've searched everywhere but I can not find anything useful. I think it might use background-image and java-script but I really need help since I don't have knowledge of this.
html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/mainwebsite.css">
<link rel="stylesheet" href="CSS/fonts/futura_bold_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_book_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_light_bt-stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_light_italic_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_medium_stylesheet.css">
<script defer src="javascript/POPUP.js"></script>
<script src="javascript/Filters.js" defer></script>
<script defer src="javascript/tothetop.js"></script>
<script defer src="javascript/moveimage.js"></script>
<meta charset="utf-8">
<title>Ilana's creations</title>
</head>
<body class="helpme">
<div class="container">
<div class="mainnavbar">
<div class="navbar_left">
<p class="nav">
<a class="current" href="index.html">
CREATIONS
</a>
</p>
<p class="nav">
<a href="aboutme.html">
ABOUT ME
</a>
</p>
<p class="nav">
<a href="sayhi.html">
SAY HI!
</a>
</p>
</div>
<div class="navbar_right">
<p class="nav1">
<a href= target="_blank">
<img src="images/LI-In-Bug.png" alt="LinkedIn" class="icon" style="width:20px;height:20px">
</a>
</p>
<p class="nav1">
Ilana van Rooyen
</p>
</div>
</div>
<div class="searchbar" id="filtering">
<button class="searchbarbuttons active" onclick="filterSelection('all')">
ALL
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('design')">
DESIGN
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('copy')">
COPYWRITING
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('creativewriting')">
CREATIVE WRITING
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('videos')">
VIDEOS
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('socialmedia')">
SOCIAL MEDIA MANAGEMENT
</button>
</div>
<div class="case">
<!-- MODAL 22 BIGGER IMAGES -->
<div class="nobutton design" data-modal-target="#modal22">
<img src="Images/ZoetisMap_Pres.png" alt="ZoetisMap" width="250px" height="250px" class="gallerypics">
</div>
<div class="modal2" id="modal22" style="width: 50%; height: auto">
<div id="scroll">
<img src="Images/ZoetisMap_Design.png" alt="ZoetisMap" class="IMG3" style="width: 40%; height: 40%">
</div>
<div class="containerDB">
<div class="DESC">
<p class="DESC_text">
<strong class="title">
Layout design:
</strong>
Ilana van Rooyen
</p>
<p class="DESC_text">
<strong class="title">
Company:
</strong>
Agribonus
</p>
<p class="DESC_text">
<strong class="title">
Brief:
</strong>
Design a layout for an article provided by Zoetis for the Bonus magazine.
</p>
</div>
<div class="buttonclose">
<button data-close-button class="closebutton">
CLOSE
</button>
</div>
</div>
</div>
<!-- OVERLAY JAVA -->
<div id="overlay">
</div>
<!-- CLOSE DIV CASE -->
</div>
<div onclick="topFunction()" id="myBtn"><img src="images/outline_expand_circle_down_black_24dp.png" alt="tothetop" height="80%" width="80%"></div>
<div class="madewithlove" id="footer">
<p class="love"><i> This website was made by me, with a lot of <b>love</b>, a lot of <b>googling</b>, and a lot of <b>banging my head on the table</b> (I'm fine, thanks).</i></p>
</div>
<!-- CLOSE DIV CONTAINER -->
</div>
</body>
</html>
css:
#charset "utf-8";
/* CSS Document */
a {
color: inherit;
text-decoration: none;
position: inherit;
}
strong {
color: inherit;
text-decoration: none;
position: inherit;
}
p {
color: inherit;
text-decoration: none;
position: inherit;
margin: inherit;
line-spacing: inherit;
}
.helpme {
margin: 0;
}
.container {
Display: flex;
flex-direction: column;
min-height: 100vh;
}
.mainnavbar {
color: white;
background-color: white;
box-shadow: 0px 0px 5px 0.1px #707070;
border-bottom: 1px solid #D9D9D9;
overflow: hidden;
margin: 0px 0px 40px 0px;
padding: 10px;
position: sticky;
z-index: 100;
top: 0;
bottom: 0;
height: 50px;
}
.navbar_left {
margin-left: 20%;
float: left;
display: inline-flex;
font-family: 'futuralight';
color: #707070;
background-color: white;
}
.navbar_right {
margin-right: 20%;
float: right;
display: inline-flex;
font-family: 'futuralight';
font-weight: normal;
color: #707070;
background-color: white;
}
.nav {
margin: 20px 20px 20px 20px;
background-color: white;
transition-property: transform;
transition: 0.25s ease;
}
.nav .current {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.nav1 {
margin: 20px 0px 20px 0px;
padding: 0px 20px 0px 20px;
background-color: white;
}
.nav::after {
content: '';
border-top: 1px solid #707070;
width: 100%;
position: absolute;
display: block;
transform: rotateY(90deg);
transition:transform 0.25s linear;
}
.nav:hover {
transform: scale(1.05);
font-family: 'futuramedium';
letter-spacing: 1px;
}
.nav:hover::after {
transform: rotate(0deg);
}
.icon:hover {
transform: scale(1.1)
}
.searchbar {
display: block;
color: #707070;
text-align: center;
margin: 0px 20%;
}
.search {
font-family: 'futuralight';
display: inline-block;
font-size: 12px;
color: #707070;
margin: 0% 0% 8% 0%;
}
.searchbarbuttons {
background: none;
border: none;
font-family: 'futuralight';
display: inline-block;
font-size: 12px;
color: #707070;
padding: 5px;
cursor: pointer;
}
.searchbarbuttons:hover {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.searchbarbuttons.active {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.case {
margin: 0px 20% 70px 20%;
text-align: center;
position: relative;
}
.gallerypics {
padding: 5px 5px 5px 5px;
cursor: pointer;
transition: 0.3s;
border-radius: 15px;
}
.gallerypics:hover {
transform: scale(1.5)
}
.nobutton {
display: none;
}
.show {
display: inline-block;
transition: 0.3s;
border-radius: 15px;
}
/* MODAL BIG IMAGES */
.modal2 {
background-color: #CBCBCB;
position: fixed;
display: block;
padding: 20px;
border-radius: 10px;
top: 10%;
left: 23.9%;
tranform: translate(-10%, -23.9%);
transform: scale(0);
transition: 200ms ease-in-out;
z-index: 10;
width: 50%;
height: 50%;
}
.modal2.active {
background-color: #CBCBCB;
position: fixed;
display: block;
padding: 20px;
border-radius: 10px;
top: 10%;
left: 23.9%;
tranform: translate(-10%, -23.9%);
transform: scale(1);
transition: 200ms ease-in-out;
z-index: 10;
width: 50%;
height: 50%;
vertical-align: middle;
}
.modal2 .IMG3 {
object-fit: contain;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
border-radius: 15px;
display: inline-block;
float: left;
}
.modal2 .IMG3:hover {
cursor: zoom-in;
transform: scale(170%);
transition: 200ms ease-in;
transition-delay: 0.5s;
border-radius: 0px;
}
.modal2 .containerDB {
object-fit: contain;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
float: right;
}
.modal2 .DESC {
border-radius: 15px;
background-color: white;
padding: 20px;
overflow: scroll;
overflow-x: hidden;
}
.modal2 .DESC_text {
font-family: 'futuralight';
font-size: 15px;
color: #707070;
line-height: 17pt;
text-align: left;
font-weight: normal;
}
.modal2 .DESC_text a:hover {
font-family: 'futuramedium';
font-size: 15px;
color: #707070;
line-height: 17pt;
text-align: left;
font-weight: normal;
}
.modal2 .title {
font-family: 'futuramedium';
font-weight: normal;
font-size: 15px;
color: #707070;
line-spacing: 20pt;
}
.modal2 .buttonclose {
margin: 20px 0px;
}
.modal2 .closebutton {
position: fixed;
bottom: 20px;
right: 20px;
border: #707070;
border-width: 1px;
cursor: pointer;
outline: solid 1px #707070;
background: white;
font-family: 'futurabold';
letter-spacing: 0.5px;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
font-size: 1.5vh;
color: #707070;
font-weight: normal;
float: right;
}
.modal2 .closebutton:hover {
transition:transform 0.25s linear;
box-shadow: 1px 1px 1px 1px #707070;
}
/* MODAL BIG IMAGES END */
#overlay {
position: fixed;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #707070;
pointer-events: none;
transition: 200ms ease-in-out;
}
#overlay.active {
opacity:70%;
pointer-events: all;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
border: none;
outline: none;
cursor: pointer;
}
#myBtn:hover {
transform: scale(1.1);
}
.madewithlove {
background-color: white;
padding: 10px 10px;
box-shadow: -2px -2px 5px 0.1px #707070;
height: 60px;
left: 0;
bottom: 0;
right: 0;
margin-top: auto;
}
.love {
font-family: 'futuralight';
color: #707070;
padding: 20px;
text-align: center;
font-size: 13px;
}
javascript on pop-up only:
/* eslint-env es6 */
/* eslint-disable */
/* popup javascript */
const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')
/* modal */
openModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = document.querySelector(button.dataset.modalTarget)
openModal(modal)
})
})
/* close button modal */
closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal2')
closeModal(modal)
})
})
function closeModal(modal) {
if (modal == null) return
modal.classList.remove('active')
overlay.classList.remove('active')
}
function openModal(modal) {
if (modal == null) return
modal.classList.add('active')
overlay.classList.add('active')
}
/* overlay open all */
overlay.addEventListener('click', () => {
const modals = document.querySelectorAll('.modal2.active')
modals.forEach(modal => {
closeModal(modal)
})
})
Images for download: https://drive.google.com/drive/folders/1OGD5iuyxcVekdr-pTjfkDi5o6uF4LVH5
I have been trying to code a Portfolio Gallery with Filtering on my website using HTML, CSS, and Javascript. I have looked at multiple tutorials (w3Schools, Geeks for Geeks) and followed them exactly, but neither worked out. With w3Schools, I was left with a completely empty body content area, and with Geeks for Geeks, I had images in my body content area, but my sidebar and navigation bar were both totally trashed even though the changes in the code didn't relate to them.
So, here's what I'm trying to do: I have a webpage that looks like this, and I want to filter out the blocks by their color when I click on the buttons in the navigation bar. So if I were to click yellow, the result would look like this. (The actual grid of images is 3x3, and there are two yellow blocks in it.) I want them to sort properly into three columns as much as possible.
EDIT: Here is my original bugged code, solutions are in the comments:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Mozart Armstrong Portfolio Graphic Design</title>
<style>
#font-face {
font-family: Klik;
src: url(klik-light-webfont.woff);
}
#font-face {
font-family: theBoldFont;
src: url(theboldfont.ttf);
}
.main {
margin-left: 200px;
padding: 105px 10px;
font-size: 16px;
font-family: CaviarDreams;
color: #000000;
display: block;
column-count: 3;
column-width: 32%
column-gap: 1%;
}
.main p {
font-size: 24px;
font-family: CaviarDreams;
color: #000000;
}
.sidebar {
height: 100%;
width: 200px;
position: fixed;
z-index: 3;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 16px;
font-family: CaviarDreams;
color: #ffffff;
display: block;
}
.sidebar a:hover {
color: #808080;
}
.sidebar b {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-family: theBoldFont;
font-size: 28px;
color: #ffffff;
display: block;
}
.sidebar c {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 13px;
font-family: Klik;
color: #ffffff;
display: block;
}
.navbar {
position: absolute;
padding: 10px 0px 10px 10px;
height: 100px;
width: 100%;
right: 0;
top: 0;
z-index: 2;
overflow-x: hidden;
background-color: #808080;
}
.navbar a {
padding: 20px 8px 16px 16px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
}
.navbar b {
padding: 0px 0px 0px 0px;
width: 225px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
display: inline-block;
}
.navbar c {
padding: 25px 225px 0px 245px;
width: 100%;
height: 30px;
text-decoration: none;
font-size: 26px;
font-family: theBoldFont;
color: #000000;
display: inline-block;
}
.navbar button {
background-color: #000000;
border: none;
color: #ffffff;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Klik;
}
.navbar button:hover {
background-color: #ffffff;
border: none;
color: #000000;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Klik;
}
</style>
</head>
<body>
<div class="sidebar">
<b>Mozart</b>
<b>Armstrong</b>
<c>design • marketing • branding</c>
<b></b>
<b></b>
<b></b>
Graphic Design
Illustration
Animations
Photography
Writing
Fashion Design
<b></b>
<b></b>
About
</div>
<div class="navbar">
<c>Graphic Design</c>
<b></b>
<button onclick="">All</button>
<button onclick="">Red</button>
<button onclick="">Yellow</button>
<button onclick="">Green</button>
<button onclick="">Blue</button>
<button onclick="">Pink</button>
</div>
<div class="main">
<p></p><img src="Block2.png" width=100%></img><p></p><img src="Block.png" width=100%></img><p></p><img src="Block3.png" width=100%></img><nextcol>
<p></p><img src="Block4.png" width=100%></img><p></p><img src="Block.png" width=100%></img><p></p><img src="Block2.png" width=100%></img><nextcol>
<p></p><img src="Block5.png" width=100%><p></p><img src="Block3.png" width=100%></img><p></p><img src="Block.png" width=100%></img></img>
</div>
</body>
</html>
Solution with JavaScript:
const button = document.querySelectorAll('.navbar button');
const img = document.querySelectorAll('img');
button.forEach(btn => btn.addEventListener('click', displayCard));
function displayCard(e) {
for (let i =0; i < button.length; i++){
if (e.target === button[i]) {
if (button[i].textContent === 'All') {
for (let i = 0; i < img.length; i++){
img[i].style.display = 'block';
}
} else if (button[i].textContent === 'Red'){
for (let i = 0; i < img.length; i++){
if (img[i].getAttribute('data-index') ==='2'){
img[i].style.display = 'block';
} else {
img[i].style.display = 'none';
}
}
} else if (button[i].textContent === 'Yellow'){
for (let i = 0; i < img.length; i++){
if (img[i].getAttribute('data-index') ==='3'){
img[i].style.display = 'block';
} else {
img[i].style.display = 'none';
}
}
} else if (button[i].textContent === 'Green'){
for (let i = 0; i < img.length; i++){
if (img[i].getAttribute('data-index') ==='4'){
img[i].style.display = 'block';
} else {
img[i].style.display = 'none';
}
}
} else if (button[i].textContent === 'Blue'){
for (let i = 0; i < img.length; i++){
if (img[i].getAttribute('data-index') ==='5'){
img[i].style.display = 'block';
} else {
img[i].style.display = 'none';
}
}
} else if (button[i].textContent === 'Pink'){
for (let i = 0; i < img.length; i++){
if (img[i].getAttribute('data-index') ==='1'){
img[i].style.display = 'block';
} else {
img[i].style.display = 'none';
}
}
}
}
}
}
img{
height: 400px;
width: 300px;
}
img[src="Block2.png"]{
background-color: red;
}
img[src="Block3.png"]{
background-color: yellow;
}
img[src="Block4.png"]{
background-color: green;
}
img[src="Block5.png"]{
background-color: blue;
}
img[src="Block.png"]{
background-color: pink;
}
<head>
<meta charset="UTF-8">
<title>Mozart Armstrong Portfolio Graphic Design</title>
<style>
#font-face {
font-family: Klik;
src: url(klik-light-webfont.woff);
}
#font-face {
font-family: theBoldFont;
src: url(theboldfont.ttf);
}
.main {
margin-left: 200px;
padding: 105px 10px;
font-size: 16px;
font-family: CaviarDreams;
color: #000000;
display: block;
column-count: 3;
column-width: 32%
column-gap: 1%;
}
.main p {
font-size: 24px;
font-family: CaviarDreams;
color: #000000;
}
.sidebar {
height: 100%;
width: 200px;
position: fixed;
z-index: 3;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 16px;
font-family: CaviarDreams;
color: #ffffff;
display: block;
}
.sidebar a:hover {
color: #808080;
}
.sidebar b {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-family: theBoldFont;
font-size: 28px;
color: #ffffff;
display: block;
}
.sidebar c {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 13px;
font-family: Klik;
color: #ffffff;
display: block;
}
.navbar {
position: absolute;
padding: 10px 0px 10px 10px;
height: 100px;
width: 100%;
right: 0;
top: 0;
z-index: 2;
overflow-x: hidden;
background-color: #808080;
}
.navbar a {
padding: 20px 8px 16px 16px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
}
.navbar b {
padding: 0px 0px 0px 0px;
width: 225px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
display: inline-block;
}
.navbar c {
padding: 25px 225px 0px 245px;
width: 100%;
height: 30px;
text-decoration: none;
font-size: 26px;
font-family: theBoldFont;
color: #000000;
display: inline-block;
}
.navbar button {
background-color: #000000;
border: none;
color: #ffffff;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Klik;
}
.navbar button:hover {
background-color: #ffffff;
border: none;
color: #000000;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Klik;
}
</style>
</head>
<body>
<div class="sidebar">
<b>Mozart</b>
<b>Armstrong</b>
<c>design • marketing • branding</c>
<b></b>
<b></b>
<b></b>
Graphic Design
Illustration
Animations
Photography
Writing
Fashion Design
<b></b>
<b></b>
About
</div>
<div class="navbar">
<c>Graphic Design</c>
<b></b>
<button>All</button>
<button>Red</button>
<button>Yellow</button>
<button>Green</button>
<button>Blue</button>
<button>Pink</button>
</div>
<div class="main">
<p></p><img src="Block2.png" data-index='2' width=100%></img><p></p><img src="Block.png" data-index="1" width=100%></img><p></p><img src="Block3.png" data-index='3' width=100%></img><nextcol>
<p></p><img src="Block4.png" data-index="4" width=100%></img><p></p><img src="Block.png" data-index='1' width=100%></img><p></p><img src="Block2.png" data-index='2' width=100%></img><nextcol>
<p></p><img src="Block5.png" data-index='5' width=100%><p></p><img src="Block3.png" data-index='3' width=100%></img><p></p><img data-index='1' src="Block.png" width=100%></img></img>
</div>
</body>
</html>
This can be easily done, for example, with the Isotope jQuery library:
// external js: isotope.pkgd.js
// init Isotope
var $grid = $('.main').isotope({
itemSelector: '.img-block',
layoutMode: 'fitRows'
});
// bind filter button click
$('#filters').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
#font-face {
font-family: Klik;
src: url(klik-light-webfont.woff);
}
#font-face {
font-family: theBoldFont;
src: url(theboldfont.ttf);
}
body{
padding: 0;
margin: 0;
}
.main {
margin-left: 200px;
padding: 105px 10px;
font-size: 16px;
font-family: CaviarDreams;
color: #000000;
display: block;
column-count: 3;
column-width: 32%
column-gap: 1%;
}
.main p {
font-size: 24px;
font-family: CaviarDreams;
color: #000000;
}
.sidebar {
height: 100%;
width: 200px;
position: fixed;
z-index: 3;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 16px;
font-family: CaviarDreams;
color: #ffffff;
display: block;
}
.sidebar a:hover {
color: #808080;
}
.sidebar b {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-family: theBoldFont;
font-size: 28px;
color: #ffffff;
display: block;
}
.sidebar c {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 13px;
font-family: Klik;
color: #ffffff;
display: block;
}
.navbar {
padding: 10px 0px 10px 10px;
right: 0;
margin-left: 200px;
top: 0;
z-index: 2;
overflow-x: hidden;
background-color: #808080;
}
.navbar a {
padding: 20px 8px 16px 16px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
}
.navbar b {
padding: 0px 0px 0px 0px;
width: 225px;
text-decoration: none;
font-size: 16px;
font-family: Klik;
color: #ffffff;
display: inline-block;
}
.navbar c {
padding: 25px 225px 0px 245px;
width: 100%;
height: 30px;
text-decoration: none;
font-size: 26px;
font-family: theBoldFont;
color: #000000;
display: inline-block;
}
.navbar button {
background-color: #000000;
border: none;
color: #ffffff;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Klik;
}
.navbar button:hover {
background-color: #ffffff;
border: none;
color: #000000;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Klik;
}
.img-block{
margin: 10px;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Mozart Armstrong Portfolio Graphic Design</title>
</head>
<body>
<div class="sidebar">
<b>Mozart</b>
<b>Armstrong</b>
<c>design • marketing • branding</c>
<b></b>
<b></b>
<b></b>
Graphic Design
Illustration
Animations
Photography
Writing
Fashion Design
<b></b>
<b></b>
About
</div>
<div class="navbar">
<c>Graphic Design</c>
<b></b>
<div id="filters" class="button-group">
<button data-filter="*">All</button>
<button data-filter=".img-red">Red</button>
<button data-filter=".img-yellow">Yellow</button>
<button data-filter=".img-green">Green</button>
<button data-filter=".img-blue">Blue</button>
<button data-filter=".img-pink">Pink</button>
</div>
</div>
<div class="main">
<div class="img-block img-red" >
<img src="https://dummyimage.com/300x400/ff0000/fff" width="100%" />
</div>
<div class="img-block img-yellow">
<img src="https://dummyimage.com/300x400/ffff00/000000" width="100%" />
</div>
<div class="img-block img-green">
<img src="https://dummyimage.com/300x400/25b825/000000" width="100%" />
</div>
<div class="img-block img-blue">
<img src="https://dummyimage.com/300x400/2a31eb/ffffff" width="100%" />
</div>
<div class="img-block img-pink">
<img src="https://dummyimage.com/300x400/db2aeb/ffffff" width="100%" />
</div>
<div class="img-block img-green">
<img src="https://dummyimage.com/300x400/25b825/000000" width="100%" />
</div>
<div class="img-block img-green">
<img src="https://dummyimage.com/300x400/25b825/000000" width="100%" />
</div>
<div class="img-block img-red">
<img src="https://dummyimage.com/300x400/ff0000/fff" width="100%" />
</div>
<div class="img-block img-red">
<img src="https://dummyimage.com/300x400/ff0000/fff" width="100%" />
</div>
<div class="img-block img-yellow">
<img src="https://dummyimage.com/300x400/ffff00/000000" width="100%" />
</div>
<div class="img-block img-yellow">
<img src="https://dummyimage.com/300x400/ffff00/000000" width="100%" />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout#3/dist/isotope.pkgd.js"></script>
</body>
</html>
My submit button shows up in very different places when i'm viewing it on different screens. I understand the usage of media queries helps with this, but I just want the items to show up in generally the same area.
I've tried using percentages for my dimensions, but the problems persists. Any recommendation? I've had luck with percentages in the past, I'm not sure why they aren't working for me with this specific problem. Is there something else wrong?
Here is my code (the styling for the submit button is at the bottom of the styling sheet):
html {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
background: #f1f2f6;
}
body {
background: #f1f2f6;
margin: 0;
padding: 0;
}
.Class-Name-Bar {
position: relative;
height: 270px;
width: 75%;
background-color: #ffffff;
margin: auto;
margin-top: 35px;
border-radius: 5px;
}
.Class-Name {
position: absolute;
height: 220px;
background-image: linear-gradient(to bottom, rgba(10, 10, 25, .85), rgba(0, 0, 0, 0.85)), url(https://miro.medium.com/max/2656/1*d0Qd8OUx_TUxG7N6H991ew.jpeg);
width: 100%;
border-radius: 5px 5px 0 0;
}
.Class-Name h1 {
text-align: center;
font-size: 60px;
margin-top: 50px;
font-weight: 200;
color: #ffffff;
}
.Class-Name p {
text-align: center;
font-size: 20px;
color: #f1f2f6;
margin: -20px;
}
#navigation {
position: absolute;
}
div#navigation ul li {
display: inline-block;
margin-top: 86%;
margin-left: 25px;
color: #333333;
font-size: 20px;
list-style: none;
}
div#navigation ul li a {
text-decoration: none;
color: #000000;
}
div#navigation ul li a:hover {
text-decoration: none;
color: #ff4757;
}
.post-area-wrapper {
position: relative;
height: 120px;
background-color: #ffffff;
margin: 20px;
width: 35%;
margin-left: 52.5%;
border-radius: 5px;
}
.post-area {
position: relative;
width: 95%;
margin: 2%;
}
input[type=post] {
padding: 3%;
width: 95%;
border: none;
font-size: 18px;
background-color: #f1f2f6;
margin-top: 3%;
}
.submit {
position: absolute;
border: none;
margin-left: 83%;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
<html>
<head>
<link href="~/css/ClassReview.css" rel="stylesheet">
</head>
<body>
<div class="Class-Name-Bar">
<div class="Class-Name">
<h1> Calculus</h1>
<p> MA2500</p>
</div>
<div id="navigation">
<ul>
<li>Notes</li>
<li>Tests</li>
<li>Quizlets</li>
</ul>
</div>
</div>
<div class="description">
</div>
<div class="post-area-wrapper">
<form>
<div class="post-area">
<input type="post" name="post" placeholder="Review this class, tell us how you really feel..">
</div>
<button type=submit class="submit">Submit</button>
</form>
</div>
</body>
</html>
In order for your submit button to be at the same place all the time you have to either define the exact position for it using top left right bottom or using the below code without defining the position absolute you can simply define it as a block and then give it margin-left:auto which will position it on the right side of the div and give it a small margin from the right side.
.submit {
display:block;
border: none;
margin-right:10px;
margin-left:auto;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
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 need the sidebar to not go over the footer nav. I can't figure out how to edit the css for this. Here's a preview, with html and css. So what I'm looking for is a "collision" off the footer border-top so the sidebar can interact with it.
http://codepen.io/TheGamingHideout/pen/reayx
HTML:
<html>
<head>
<title>Home - POG</title>
<link rel="shortcut icon" href="http://www.thegaminghideout.com/pog/favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- This Template is a WiP - Please report any bugs to the administrative team at The Gaming Hideout. Thank you. All rights reserved. -->
</head>
<body>
<div id="wrap">
<div id="header">
<h1><img src="http://www.thegaminghideout.com/pog/VexIMG/header.png" alt="Possessed Gaming" width="760" height="60"></h1>
</div>
<div id="navigation">
<div class="navlinks">
<div id="output2">
</div>
</div>
<script src="nav.js"></script>
</div>
<div id="buttons">
<img src="http://www.thegaminghideout.com/pog/VexIMG/donate.png">
</div>
<div id="body">
<center>
<h2>Welcome to Possessed Gaming DarkRP!</h2>
<h4>Owned by PossessedGaming</h4>
</center>
<p>Thanks for choosing our GMod server! You are currently playing DarkRP on PossessedGaming. Make sure to read and follow the rules below!</p>
<br>
<h3>Rules</h3>
<ul>
<li>Do NOT RDM</li>
<li>NLR 3 Minutes!</li>
<li>Respect Staff</li>
<li>Do NOT spam chat or mic</li>
<li>Have Fun!</li>
</ul>
<p>Disobeying these rules or finding loopholes around them can and will result in punishments including kicks, bans, mutes, weapon strips, and jails.</p>
<br>
<p>Click here to apply for staff!</p>
<div id="latest">
<center>
<img src="http://www.thegaminghideout.com/pog/VexIMG/Index/latest.png">
<p id="output1"></p>
<script src="latest.js"></script></center>
</div>
</div>
<div id="footer">
<div id="copyright">
Copyright © The Gaming Hideout
<br>We own no rights on any game on this site unless otherwise noted.
<br>All Rights Reserved.
</div>
<div id="footnav">
<script src="footnav.js"></script>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
body {
background: url(http://www.thegaminghideout.com/pog/VexIMG/bg.png);
background-color: black;
background-size: 100%;
background-repeat: no-repeat;
font-size: 12px;
color: #666666;
}
#font-face {
font-family: 'karmatic_arcaderegular';
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot');
src: url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff2') format('woff2'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.woff') format('woff'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.ttf') format('truetype'),
url('http://www.thegaminghideout.com/pog/fonts/ka1-webfont.svg#karmatic_arcaderegular') format('svg');
font-weight: normal;
font-style: normal;
}
p, h1, h2, h3, h4, h5, h6, caption, text, font, li, ul {
color: white;
}
#wrap {
width: 760px;
margin: auto;
overflow: hidden;
}
#header {
height: 60px;
width: auto;
background: #db6d16
url(VexIMG/header.png);
}
#navigation {
width: 760px;
height: 35px;
position: absolute;
border-bottom: 2px solid #000000;
background: red;
padding: 0px;
}
#navigation .padding {
padding: 2px;
}
#navigation .navlinks {
position: absolute;
top: 1px; left: 0px;
}
#navigation .navlinks ul {
margin: 0px;
padding: 0px;
text-align: center;
list-style-type: none;
width: 760px;
height: 35px;
}
#navigation .navlinks li {
position: relative;
top: 5px;
margin: 0px 5px 0px 5px;
list-style-type: none;
display: inline;
}
#navigation .navlinks li a {
color: #000000;
padding: 5px 0px 9px 0px;
text-decoration: none;
font-size: 18px;
font-family: karmatic_arcaderegular;
padding: 5px 0px 9px 0px;
}
#navigation .navlinks li a:hover {
margin: 0px;
color: #ffffff;
background: red;
text-decoration: underline;
}
#buttons {
padding-bottom: 2000px;
margin-bottom: -2000px;
width: 155px;
border-left: 2px solid #FFA500;
border-right: 2px solid #FFA500;
float: right;
font-family: Terminal, Arial, Times New Roman;
background: linear-gradient(#700000, #250000);
}
#latest {
border: 1px ridge #FFA500;
width: 300px;
height: auto;
background: linear-gradient(#000000, #252525, #000000);
clear: left;
}
#latest p {
font-family: Times New Roman;
}
#body {
padding-top: 50px;
width: 600px;
font-family: Arial, Verdana, Terminal;
font-size: 14px;
}
#body .secret img {
width: 150px;
height: 100px;
border: 2px solid black;
}
#body .game {
padding: 3px 3px 10px 3px;
}
#body .game img {
align: center;
float: left;
width: 175px;
height: 101px;
border: 2px ridge #ff0000;
}
#body .game caption {
padding-left: 1px;
}
#body .space {
padding-top: 10px;
padding-bottom: 10px;
border-top: 4px ridge red;
border-bottom: 4px ridge red;
}
#body .game caption {
margin-top: 2px;
float: right;
font-family: Terminal, Arial, Verdana, San-Serif;
font-size: 12px;
color: #000000;
border-bottom: 2px dashed #e9e9e9;
}
#body .game a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#body .game a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer {
width: 730px;
height: 60px;
font-family: Tahoma, Arial, Terminal, San-Serif;
font-size: 10px;
color: #c9c9c9;
border-top: 1px solid #efefef;
padding: 13px 25px;
line-height: 18px;
}
#footer li {
padding: 0px 2px 0px 2px;
float: right;
display: inline;
text-align: left;
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size:; 10px;
}
#footer a {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: #c9c9c9;
text-decoration: none;
}
#footer a:hover {
font-family: Terminal, Arial, San-Serif, Tahoma;
font-size: 10px;
color: red;
text-decoration: underline;
}
#footer #footnav {
display: inline;
width: 310px;
float: right;
text-align: left;
position: relative;
bottom: 65px;
}
Adding position: relative to the wrapper and positioning #buttons with position: absolute is a way to fix this. Do keep in mind that you need to know the exact distance between the top and bottom of the #wrap and #buttons.
That said there are probably other solutions as well.
#wrap {
position: relative;
width: 760px;
margin: auto;
overflow: hidden;
}
#buttons {
position: absolute;
right: 0px;
top: 110px;
bottom: 95px;
width: 155px;
border-left: 2px solid #FFA500;
border-right: 2px solid #FFA500;
font-family: Terminal, Arial, Times New Roman;
background: linear-gradient(#700000, #250000);
}
use margin-bottom: -648px; padding-bottom: 648px; for #buttons instead of padding-bottom: 2000px; margin-bottom: -2000px; This will fix for your current view.But if you want it dynamic at every page you may need to use javascript to detect the screen height and determine the padding-bottom and margin-bottom.hope it will help you.
like this?
http://codepen.io/mmp1992/pen/bnrvw
#buttons {
height:645px;
}
and remove the padding and margin.