I want to do my masterpage for my php group assignment project shape like this:
masterpage image 1
However, it turns badly and out of place like this:
masterpage image 2
How do I ensure that the content area and header in right place and doesnt overlap each other.
here is my code for the masterpage:
CSS
<style>
/* The sidebar menu */
.sidebar {
height: 100%;
width: 250px;
/* Set the width of the sidebar */
position: fixed;
/* Fixed Sidebar (stay in place on scroll) */
z-index: 1;
/* Stay on top */
top: 0;
/* Stay at the top */
left: 0;
background-color: #262626;
/* Dark */
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 20px;
color: #cccccc;
/* text colour */
text-align: justify;
position: absolute;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #cccccc;
/*#818181 */
display: block;
}
.main {
margin-left: 160px;
/* Same as the width of the sidebar */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
.header-banner {
position: absolute;
right: 0px;
}
</style>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="sidebar">
<img class="img" src="/image/logo.png" alt="symbol" style="width:200px;height:125px;" />
</div>
<div class="header-banner">
<img class="banner" src="/image/banner.png" alt="header" style="width=1500px; height:150px;" />
</div>
<!-- Page content -->
</body>
</html>
Try css grid. Here is the code. lemme know if it works.
Markup :
<div class="wrapper">
<div class="mini-wrapper sidebar">
Sidebar
</div>
<div class="mini-wrapper header-top">
Header-top
</div>
<div class="mini-wrapper content-area">
Content Area
</div>
</div>
CSS
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 200px 600px;
background-color: #fff;
color: #444;
}
.mini-wrapper {
border:3px solid dodgerblue;
padding: 20px;
font-size: 150%;
}
.sidebar {
grid-column: 1;
grid-row: span 50;
}
.content-area{
grid-column: 2 ;
grid-row: span 49;
}
.header-top {
grid-column: 2;
grid-row:1;
}
https://codepen.io/anon/pen/MPvLqE
Related
The aim of the code is that the background of the inner text div is of full height of the available body height (Without the need to scroll down) .
The code works for laptop screen and for ipad dimensions (In chrome developer tools) .
The problem is with cellphones . The background height doesn't reach to the bottom of the page and just instead the default height of the image .
The used code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Beginning of global variables*/
:root {
--main-color: #11cab7;
}
/* End of global variables */
/* Beginning of Global rules */
* {
box-sizing: border-box;
}
body {
font-family: 'Work Sans', sans-serif;
}
.container {
width: 600px;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
/*.Small.*/
#media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium.*/
#media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/* End of global rules */
/* Begin of header styling */
.header {
padding: 20px;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 100px;
height: 40px;
}
.links {
position: relative;
}
.header .links .icon {
width: 30px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
cursor: pointer;
}
.header .links .icon span {
background-color: #333;
height: 2px;
margin-bottom: 5px;
}
.header .links .icon span:first-child {
width: 100%;
}
.header .links .icon span:nth-child(2) {
width: 60%;
transition: .3s linear;
}
.header .links .icon span:last-child {
width: 100%;
}
.header .links .icon:hover span:nth-child(2){
width: 100%;
}
.header .container ul {
list-style-type: none;
display: block;
position: absolute;
background-color: #f6f6f6;
min-width: 200px;
padding: 0;
right: 0;
display: none;
}
.header .container ul::before {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #f6f6f6 transparent;
position: absolute;
right: 5px;
top: -20px;
}
.header .container ul li {
display: block;
padding: 15px;
transition: .2s;
}
.header .container ul li:hover {
padding-left: 25px;
}
.header .container ul li a {
text-decoration: none;
color: #333;
}
.header .container ul li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
.header .container .links:hover ul {
display: block;
transition: 0.1s;
z-index: 1;
}
/* End of header styling */
/* Beginning of landing section */
.landing {
background-image: url(https://elzerowebschool.github.io/HTML_And_CSS_Template_One/images/landing.jpg);
background-size: cover;
min-width: 620px;
height: calc(100vh - 80px);
position: relative;
}
.landing .intro-text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 320px;
max-width: 100%;
}
.landing .intro-text h1 {
margin: 0;
font-size: 50px;
color: var(--main-color);
}
.landing .intro-text p {
font-size: 19px;
line-height: 1.8;
}
/* End of landing section */
</style>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#200;400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<!-- The use of the container is that our text not start from
the beginning of the webpage as it is visually not good -->
<!-- Beginning of header -->
<div class="header">
<div class="container">
<img class="logo" src="https://elzerowebschool.github.io/HTML_And_CSS_Template_One/images/logo.png" alt="logo image" >
<div class="links">
<span class="icon">
<span></span>
<span></span>
<span></span>
</span>
<ul>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
<!-- End of header -->
<!-- Beginning of sections -->
<div class="landing">
<div class="intro-text">
<h1>Hello there</h1>
<p>We are Leon - Super creative and minimal agency
Web Template
</p>
</div>
</div>
<!-- End of sections -->
</body>
</html>
I would be thankful for the solution that uses pure CSS
I think this happens because of overflowing
you need to set overflow-x on html and body hidden like:
body, html{
overflow-x: hidden;
}
this will break your navbar, but you can add this to fix it:
.header .container{
width:100%;
}
and finally, for the text remove the max-with:620px to make it more responsive.
Hope it will help you.
The responsive drop down menu work well here:
https://klia2.co/include/header.htm
but when insert to content page as below, the drop down menu not drop down when view in media screen.
https://klia2.co/index2.htm
compared the 2 links to understand the actual scenario.
Notice that the alignment of logo header and menu in content page also not tally.
Kindly assist to rectify the issue and all suggestion are most welcome and appreciated.
HTML PAGE - index2.htm
<body>
<div id="header"></div>
<div class="content">
<br>
<br>
** content **
<br>
<br>
<div id="footer"></div>
</div>
</body>
HTML PAGE - header.htm
<body>
<div class="content">
<header id="logo"></header>
<div class="navbar" id="nav">
Home
Facilities
Airlines Offices
<form class="search-box">
<input type="text" placeholder="Search..">
<button type="submit" class="search-icon"><i class="fa fa-search"></i></button>
</form>
<i class="fa fa-bars"></i>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav");
console.log(barIcon)
if (x.className === "navbar") {
x.className += " responsive";
var barIcon = document.getElementsByClassName('fa-bars')[0];
barIcon.classList.add("fa-times");
barIcon.classList.remove("fa-bars");
} else {
var closeIcon = document.getElementsByClassName('fa-times')[0];
closeIcon.classList.remove("fa-times");
closeIcon.classList.add("fa-bars");
x.className = "navbar";
}
}
</script>
</body>
CSS CODE - style1.css
/* CSS Reset */
body {font-family:Arial;
}
.content {
max-width: 1040px;
margin: auto;
}
/*--------------------------logo---------------------------------*/
#logo {
background: transparent url("images/airlineshq-logo.jpg") no-repeat scroll 0% 0%;
width: 1040px;
height: 150px;
border: 0;
margin-bottom: 0;
}
#media only screen and (max-width: 600px) {
#logo {
width: 100%;
}
}
/*--------------------------menu---------------------------------*/
.navbar {
overflow: hidden;
background-color: #0000ff;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
font-size: 17px;
height:18px;
}
.active {
background-color: #0033CC;
color: white;
}
.navbar .icon {
display: none;
}
.navbar a:hover, input:hover {
background-color: #dddddd;
color: black;
}
/* CSS for search box */
.navbar .search-box {
float: right;
position: relative;
margin-top: 3px;
padding-right: 30px;
display: flex;
}
.navbar .search-box input {
padding: 12px;
border: none;
width: 100%;
height: 100%;
padding: 10px;
}
.navbar .search-box button {
color: #999;
border: navajowhite;
padding: 10px;
}
#media screen and (max-width: 600px) {
.navbar a, .navbar .search-box, .navbar .search-icon {
display: none;
}
.navbar a.icon {
float: left;
display: block;
}
}
#media screen and (max-width: 600px) {
.navbar.responsive {position:relative;}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive .search-box {
float: none;
display: flex;
width: 90%;
padding: 4%;
border: 2px solid black;
}
.navbar.responsive .search-icon{
display: flex;
}
}
/*--------------------------body------------------------*/
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 700px) {
.row {
flex-direction: column-reverse;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other
#media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}*/
Footer is the issue. Remove css, which breaks navbar styles. Also meta tags should be in the header. Screenshot https://prnt.sc/1t7vjgu
So I currently have a navbar that is responsive to the size of the screen built with HTML & CSS only. But I want it to stick to the container and also remain responsive to different screen sizes. Is there anyway to do this with only HTML & CSS? I have included the responsive Navbar code in this post that I would to update and make sticky.
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #4CAF50;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
```
You need position: fixed; and an actualy position like top: 0;.
But also you could use the position: sticky; property instead to avoid overlapping content, like the other answer mentioned. Here you can see the browser support which is pretty good for position sticky, but slightly worse than fixed.
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #4CAF50;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: fixed;
top: 0;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
You can also use position:sticky; and top:0 in your first media query to keep the navbar in place at the top, even when you scroll. This will work better than position:fixed because the content won't slide up behind the header while you are at the top.
Edit - embedded code directly.
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #4caf50;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: sticky;
top: 0;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
This is my wireframe:
So I'm actually creating a webpage for my mini project, I have included the wireframe above, I actually needs to put two pics with links and aliggned centered on my page with the footer and sidenav back button, so I have succesfully created the footer and sidenav, but I need to put my two pics and with hyperlink and align them to center as in the wireframe. Please refer to the wireframe.
here is my codes the css and html
/*the sidebar back button*/
/* Style the links inside the sidenav */
#mySidenav a {
position: absolute;
/* Position them relative to the browser window */
left: -80px;
/* Position them outside of the screen */
transition: 0.3s;
/* Adds transition on hover */
padding: 15px;
/* 15px padding */
width: 100px;
/* Sets a specific width */
text-decoration: none;
/* Remove underline */
font-size: 20px;
/* Increase font size */
color: white;
/* White text color */
border-radius: 0 5px 5px 0;
/* Rounded corners on the top right and bottom right side */
}
#mySidenav a:hover {
left: 0;
/* On mouse-over, make the elements appear as they should */
}
/* The about link: 20px from the top with a green background */
#about {
top: 20px;
background-color: #42beb8;
}
/*The Footer*/
#footer {
background-color: rgba(59, 195, 154, 0.87);
width: 100%;
height: 95px;
border-radius: 0px;
padding-top: 5px;
position: relative;
bottom: 0;
margin-top: 20%;
}
/* footer div links settings*/
.footer a:hover {
background-color: rgb(230, 182, 64);
color: black;
}
#footer div {
display: block;
float: right;
width: 20%;
}
/* footer links margins settings */
#footer div h5,
h2 {
margin-bottom: 0;
margin-top: 0;
text-decoration: none;
}
/* horizontal line below footer div */
hr {
width: 85%;
margin-left: 8%;
margin-right: 20%;
height: 1px;
background-color: black;
opacity: 1;
margin-top: 3%;
margin-bottom: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>products</title>
<link rel="stylesheet" href="products.css">
</head>
<body>
<!--sidenav-->
<div id="mySidenav" class="sidenav">
Back
</div>
<!--The footer section-->
<footer class="footer">
<div class="row">
<div id="footer">
<br>
<div align="left">
<h5>Social Media</h5>
</div>
<div align="left">
<h5>Home</h5>
</div>
<div align="center">
<h2> Buystuff
<h2>
</div>
<div align="right">
<h5>Games</h5>
</div>
<div align="right">
<h5> Products</h5>
</div>
<hr>
</div>
</div>
</footer>
</body>
</html>
use flexbox
/*the sidebar back button*/
/* Style the links inside the sidenav */
#mySidenav a {
position: absolute; /* Position them relative to the browser window */
left: -80px; /* Position them outside of the screen */
transition: 0.3s; /* Adds transition on hover */
padding: 15px; /* 15px padding */
width: 100px; /* Sets a specific width */
text-decoration: none; /* Remove underline */
font-size: 20px; /* Increase font size */
color: white; /* White text color */
border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}
#mySidenav a:hover {
left: 0; /* On mouse-over, make the elements appear as they should */
}
/* The about link: 20px from the top with a green background */
#about {
top: 20px;
background-color: #42beb8;
color:red;
}
#container{
margin-top:80px;
display:flex;
justify-content:space-evenly;
align-items:center;
}
/*The Footer*/
#footer {
background-color: rgba(59, 195, 154, 0.87);
width: 100%;
height: 95px;
border-radius: 0px;
padding-top: 5px;
position: relative;
bottom: 0;
margin-top: 20%;
}
/* footer div links settings*/
.footer a:hover {
background-color: rgb(230, 182, 64);
color: black;
}
#footer div{
display: block;
float: right;
width: 20%;
}
/* footer links margins settings */
#footer div h5, h2 {
margin-bottom: 0;
margin-top: 0;
text-decoration: none;
}
/* horizontal line below footer div */
hr {width: 85%;margin-left: 8%;margin-right: 20%;height: 1px;background-color:black; opacity: 1;margin-top: 3%;margin-bottom: auto;}
<!DOCTYPE html>
<html>
<head>
<title>products</title>
<link rel="stylesheet" href="products.css">
</head>
<body>
<!--sidenav-->
<div id="mySidenav" class="sidenav">
Back
</div>
<div id='container'>
<div id='left'>
<img src="https://via.placeholder.com/250x250.jpg?" >
</div>
<div id='right'>
<img src="https://via.placeholder.com/250x250.jpg?" >
</div>
</div>
<!--The footer section-->
<footer class="footer">
<div class="row">
<div id="footer">
<br>
<div align="left"><h5>Social Media</h5></div>
<div align="left"><h5>Home</h5></div>
<div align="center"><h2> Buystuff<h2></div>
<div align="right"><h5>Games</h5></div>
<div align="right"><h5> Products</h5></div>
<hr>
</div>
</div>
</footer>
</body>
</html>
I hope the following is what you are trying to achieve.
/*the sidebar back button*/
/* Style the links inside the sidenav */
#mySidenav a {
position: absolute;
/* Position them relative to the browser window */
left: -80px;
/* Position them outside of the screen */
transition: 0.3s;
/* Adds transition on hover */
padding: 15px;
/* 15px padding */
width: 100px;
/* Sets a specific width */
text-decoration: none;
/* Remove underline */
font-size: 20px;
/* Increase font size */
color: white;
/* White text color */
border-radius: 0 5px 5px 0;
/* Rounded corners on the top right and bottom right side */
}
#mySidenav a:hover {
left: 0;
/* On mouse-over, make the elements appear as they should */
}
/* The about link: 20px from the top with a green background */
#about {
top: 20px;
background-color: #42beb8;
}
/*The Footer*/
#footer {
background-color: rgba(59, 195, 154, 0.87);
width: 100%;
height: 95px;
border-radius: 0px;
padding-top: 5px;
position: relative;
bottom: 0;
margin-top: 20%;
}
/* footer div links settings*/
.footer a:hover {
background-color: rgb(230, 182, 64);
color: black;
}
#footer div {
display: block;
float: right;
width: 20%;
}
/* footer links margins settings */
#footer div h5,
h2 {
margin-bottom: 0;
margin-top: 0;
text-decoration: none;
}
/* horizontal line below footer div */
hr {
width: 85%;
margin-left: 8%;
margin-right: 20%;
height: 1px;
background-color: black;
opacity: 1;
margin-top: 3%;
margin-bottom: auto;
}
/* Main Section */
.main {
display: flex;
justify-content: space-between;
align-items: center;
}
.pic-container {
background-color: grey;
width: 45%;
height: 80%;
}
.pic {
width: 100%;
height: 200px;
background-image: url("https://images.pexels.com/photos/3841338/pexels-photo-3841338.jpeg");
}
<!--sidenav-->
<div id="mySidenav" class="sidenav">
Back
</div>
<!--Main Section-->
<div class="main">
<div class="pic-container">
<div class="pic pic1">
</div>
<p class="description">This is a description</p>
</div>
<div class="pic-container">
<div class="pic pic2">
</div>
<p class="description">This is a description</p>
</div>
</div>
<!--The footer section-->
<footer class="footer">
<div class="row">
<div id="footer">
<br>
<div align="left">
<h5>Social Media</h5>
</div>
<div align="left">
<h5>Home</h5>
</div>
<div align="center">
<h2> Buystuff
<h2>
</div>
<div align="right">
<h5>Games</h5>
</div>
<div align="right">
<h5> Products</h5>
</div>
<hr>
</div>
</div>
</footer>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want it to have a header at the top which spans the width of the page, a main content part which has side bars either side and then a footer underneath. Unfortunately I am not very good when it comes to fixed, relative absolute and the measurements etc. so it is really appreciative.
I did use some of the code from here: How to make a page with header and left-sidebar?
But I edited it so the measurements were done in em not px as it makes it more scalable on devices.
Here is my current HTML layout
#import url('https://fonts.googleapis.com/css?family=Roboto');<!-- Custom Font -->
#charset "utf-8" #font-face {
font-family: 'Roboto', sans-serif;
}
/*Layout for phones and tablets e.g. iPhone 5 and iPad*/
/*webpage fades in*/
html {
animation: fadein 2s;
position: relative;
min-height: 100%;
}
/*animation*/
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*main colour settings for page*/
body {
color: black;
font-family: 'Roboto';
background-color: #FFF;
margin: 0 0 100px;
padding: 25px;
}
/*Links*/
a,
a:link,
a:visited {
color: black;
text-decoration: none;
transition: 1s;
}
/*Link hovering*/
nav a:hover {
text-decoration: none;
border: solid 1px black;
border-radius: 5px;
padding: 10px;
}
/*Main heading*/
h1 {
font-size: 3em;
max-width: 100%;
max-height: 100%;
text-align: center;
position: absolute;
left: 2em;
right: 0;
top: 0;
height: 2em;
}
/*Secondary heading*/
h2 {
font-size: 2em;
max-width: 100%;
max-height: 100%;
}
/*Text*/
p {
font-size: 0.75em;
}
/*Images*/
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
text-align: center;
display: block;
}
#logo {
float: left;
margin-left: 10px;
margin-top: 5px;
max-height: 100px;
max-width: 100px;
}
canvas {
border: solid 1px black;
}
/*Footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
overflow: hidden;
text-align: center;
}
button {
margin-bottom: 1em;
}
/*Main Body*/
#mainContent {
position: absolute;
left: 10em;
top: 8em;
right: 0;
bottom: 1em;
text-align: center;
}
#sideBar {
position: absolute;
left: 0;
top: 8em;
right: 0;
bottom: 0;
width: 10em;
text-align: center;
padding: 2em;
border-right: solid 1px black;
max-height: 2000px;
}
#sideBar img {
max-width: 100px;
max-height: 100px;
margin-bottom: 2em;
}
/*Light Switches*/
#lightSwitchOff {
display: inline;
margin-top: 10px;
}
#lightSwitchOn {
display: inline;
margin-top: 10px;
}
/*Layout for desktop with a min-width of 1024px*/
#media only screen and (min-width: 1024px) {
p,
li {
font-size: 1.5em;
}
h1 {
font-size: 2.75em;
}
h2 {
font-size: 2.25em;
}
#enter {
max-width: 60%;
max-height: 60%;
}
}
/*Layout for desktop with a min-width of 1280px (720p HD)*/
#media only screen and (min-width: 1280px) {
li {
font-size: 1.5em;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.25em;
}
#enter {
max-width: 50%;
max-height: 50%;
}
}
/*Layout for desktop with a min-width of 1920px (1080p HD)*/
#media only screen and (min-width: 1920px) {
p {
font-size: 1.25em;
}
#enter {
max-width: 40%;
max-height: 40%;
}
}
/*Layout for desktop with a min-width of 200px e.g. iMac*/
#media only screen and (min-width: 2000px) {
p {
font-size: 2em;
}
}
<header>
<h1>Sliding Game</h1>
</header>
<!--Closes Header -->
<div id="leftSideBar">
<!-- Left Side Bar -->
<h2>Select Image:</h2>
<img src="images/dog.jpg" alt="Image Unvailable"></img>
<img src="images/italy.jpg" alt="Image Unvailable"></img>
<h2>Select Difficulty:</h2>
<p id="easy">Easy</p>
<p id="medium">Medium</p>
<p id="hard">Hard</p>
<button>Reset</button><br>
<button>Randomise</button>
<p>Timer:</p>
<div id="timer">0</div><br>
</div>
<!-- Closes Left Side Bar -->
<div id="mainContent">
<!-- Main Body -->
<canvas id="game" width="600px" height="600px">Cavas is not available on your browser</canvas><br>
<button id="start">Start</button>
<div style="display: none">
<img id="source" src="images/italy.jpg" alt="Image Unvailable">
</div>
</div>
<!-- Closes Main Content-->
<div id="rightSideBar">
<!-- Right Side Bar -->
<h2>Leaderboard</h2>
</div>
<!-- Closes Right Side Bar -->
<footer>
Website Created by Ryan Simms <br> 16024828#stu.mmu.ac.uk <br>
</footer>
<!-- Closes Footer -->
As for centering of elements on the webpage I would like you to recommend reading the following guide: Centering in CSS: Complete guide, and you can also use Flexbox for somewhat same result: Complete guide to Flexbox.
As for the header, I've made some code for you. You should checkout Bootstrap for easy positioning of elements on the webpage. They have specific classes for Navbars fixed bottom and top. Pretty easy framework!
.header {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
position: relative;
background: #353535;
width: 100%;
height: 50px;
margin: auto;
}
.text {
display: flex;
margin: auto;
color: orange;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
height: 300px;
}
.div1 {
display: flex;
height: 150px;
width: 32%;
background: #353535;
margin-top: 20px;
}
.div2 {
display: flex;
position: relative;
height: 150px;
width: 32%;
background: #353535;
margin-top: 20px;
}
.div3 {
display: flex;
position: relative;
height: 150px;
width: 32%;
background: #353535;
margin-top: 20px;
}
<div class="header">
<h3 class="text">Your text here</h3>
</div>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div class="container">