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;
}
Related
I have an html page which is using center aligned text. For some reason, the top title (#pageTitle id) is off by a bit, and looks like it has some added whitespace to the left of it. I tried to reproduce the problem here, but in the stack overflow editor, the formatting was completely wonky. Hopefully the scripts will be able to run on your machines. If anyone has any insight as to why this is happening I'd appreciate it. Thanks!
body {
padding: 0;
margin: 0;
}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>
The title got padding because before you move it using left top and transform the logo image (which have float attribute) take a place at the left.
If you remove the top left and transform from the mainDiv you will see following:
This is where this whitespace come from.
You should add an element to clear:both under the toolbar (see snipped below)
body {
padding: 0;
margin: 0;
}
/* ADDED THIS*/
.clear{clear:both}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, 50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
box-sizing:border-box;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
<div class="clear"></div><!-- ADDED THIS -->
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>
You can use flex to align items which makes it easier:
body {
padding: 0;
margin: 0;
display: flex;
align-items: 'center';
justify-content: 'center';
}
.totalCenter {
display: flex;
justify-content: 'center';
}
When you set the display property to flex of a class you can use these properties:
align-items : aligns items vertically.
justify-content : alings items horizontally.
Flex is really cool if you cant to know more you can check out these two articles:
Aligning Items in a Flex Container
A Complete Guide to Flexbox
I am new to Javascript and I've recently been trying a sidebar menu.
I am trying to make the menu come out from the left side and overlay the main content when the hamburger icon is clicked. I have managed to make the menu overlay the main content but when it comes to javascript animation, I have tried a couple of things and search on internet but found no solutions to my problem.
I am trying to make so that when the .hamburger button is clicked, the .nav-links div's width changes from 0px to 300px.
Here's my code and a couple of Javascript functions I have tried.
Here's my code
HTML :
<button class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<div class="nav-links">
<ul>
HEN
BBG
YSMB
<div class="CloseBTN">×</div>
</ul>
</div>`
CSS
`
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
.hamburger {
position: relative;
cursor: pointer;
z-index: 1;
top: 0px;
background: inherit;
border: none;
display: block;
outline: none;
}
.nav-links {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 0px;
background-color: rgb(0, 0, 0);
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
border: solid white 1px;
}
.nav-links a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
display: block;
padding: 50px 8px 50px 64px;
color: white;
text-align: center;
}
.nav-links a:hover {
background: white;
color: black;
}
.CloseBTN {
position: absolute;
top: 15px;
right: 25px;
font-size: 36px;
margin-left: 32px;
cursor: pointer;
}
JavaScript
document.getElementById('hamburger') = function openMenu(){
document.getElementById('nav-links').menu.style.width="300px";
}
function openMenu(){
if(document.getElementById('nav-links').click === true)
document.getElementById('nav-links').menu.style.width="300px";
}
Try this:
document.getElementsByClassName('hamburger')[0].addEventListener("click", evt => {
document.getElementsByClassName('nav-links')[0].style.width = "300px"
})
document.getElementsByClassName('CloseBTN')[0].addEventListener("click", evt => {
document.getElementsByClassName('nav-links')[0].style.width = "0"
})
.line {
width: 30px;
height: 3px;
background: white;
border: 5px solid black;
margin: 5px;
}
.hamburger {
position: relative;
cursor: pointer;
z-index: 1;
top: 0px;
background: inherit;
border: none;
display: block;
outline: none;
}
.nav-links {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 0px;
background-color: rgb(0, 0, 0);
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
border: solid white 1px;
}
.nav-links a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
display: block;
padding: 50px 8px 50px 64px;
color: white;
text-align: center;
}
.nav-links a:hover {
background: white;
color: black;
}
.CloseBTN {
color: white;
position: absolute;
top: 15px;
right: 25px;
font-size: 36px;
margin-left: 32px;
cursor: pointer;
}
<button class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<div class="nav-links">
<ul>
HEN
BBG
YSMB
<div class="CloseBTN">×</div>
</ul>
</div>
Some of your javascript was messed up so I fixed that, and I added some css to make everything (such as the actual menu lines itself) visible.
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()
I have to make a slideshow of images based on my this jsfiddle. I need to have three more images just after this image which is already there in my jsfiddle. So I will have three more images and three dots at the bottom border of the image and if I click those dots, it should show other image and I want to keep BESPOKE INSURANCE SOLUTIONS text on top of my slideshow.
I tried integrating this w3schools example but my original jsfiddle is getting messed up and it is not working at all. Here is my updated jsfiddle and as you can see it is messed up. What is the best way to solve this?
Below is my code:
<div class="header">
<div class="header-background">
<img src="https://s4.postimg.org/yg8mjvsv1/image-home.png">
</div>
<div class="orange-bar">
<img class="orange-bar-image" src="https://s12.postimg.org/dmd7nd1dp/headline.png">
</div>
<div class="topnav">
<nav>
<ul>
<li class="home"><img src="https://s11.postimg.org/ywuxj79j7/logo.png" style="width:240px; height:53px;"></li>
</ul>
</nav>
</div>
<h1 class="text-inside-orange">BESPOKE INSURANCE SOLUTIONS</h1>
</div>
Here is my CSS:
.header {
position: relative;
height: 769px;
}
.header-background {
height: 769px;
width: 100%;
}
.orange-bar {
position: relative;
top: -430px;
left: -160px;
}
.topnav {
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.8);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
}
.topnav ul>li {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li.home {
position: relative;
right: 40px;
}
li.insurance {
margin-right: 80px;
margin-left: 80px;
left: 15px;
position: relative;
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
}
li.login-signup {
font-style: italic;
font-size: 10px;
position: relative;
left: 20px;
top: 5px;
font-family: Adelle PE;
letter-spacing: .30em;
color: white;
}
li.get-covered {
border-color: #EF7440;
border-style: solid;
color: white;
top: 3px;
font-size: 12px;
position: relative;
left: 35px;
letter-spacing: .30em;
font-family: Adelle PE;
}
li.get-covered {
margin-top: 15px;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
li.login-signup {
padding-top: 30px !important;
position: relative;
left: -35px;
}
li.insurance {
padding-top: 30px !important;
}
body {
border: 0;
margin: 0;
height: 100%;
min-height: 100%;
overflow-x: hidden;
}
.header h1 {
padding-left: 110px;
color: white;
text-align: center;
font-size: 25px;
left: -175px;
letter-spacing: .300em;
position: relative;
top: -613px;
font-family: "AvantGarde";
text-transform: uppercase;
}
This is my way. You should create a div contain BESPOKE INSURANCE SOLUTIONS, set position: absolute, align: top left. It's keep text no changes.
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.