I'm building a website and I want to make the title and logo to be on the header with the title in the center and logo on the left.
The issue is the title is pushing the logo down.
I've tried the following:
Margin
Padding
Moving the code around
Changing "Display"
What else could I try?
.header {
position: fixed;
height: 100px;
width: 100%;
left: 0;
top: 0;
background-color: rgb(204, 31, 0);
}
.titlemain {
font-size: 4vw;
text-align: center;
padding-top: 1.5%;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
https://pastebin.com/Vvw7LtQE - CSS
<div class="header">
<h1 class="titlemain">The Little Beauty Studio</h1>
<img class="logomain" src="img/lblogo.png" alt="The PHP logo">
</div>
https://pastebin.com/0BKmtkZ8 - HTML
Thanks for any help.
try this code:
css:
.header {
position: fixed;
height: 100px;
width: 100%;
left: 0;
top: 0;
background-color: rgb(204, 31, 0);
}
.titlemain {
font-size: 4vw;
text-align: center;
padding-top: 1.5%;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
.header img {
position: absolute;
top: 41%;
left: 3%;
}
html:
<div class="header">
<h1 class="titlemain">The Little Beauty Studio</h1>
<img class="logomain" src="img/lblogo.png" alt="The PHP logo">
</div>
I fixed it by displaying inline, then floating the logo left and adjusting the padding to center the text and position the logo.
.logomain {
float: left;
padding: 2.5px 13.5% 0 175px;
}
.titlemain {
font-size: 4vw;
padding-top: 1.5%;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
display: inline;
}
If you can change your HTML structure, I would do it this way:
HTML
<div class="header">
<img class="logomain" src="img/lblogo.png" alt="The PHP logo">
<h1 class="titlemain">The Little Beauty Studio</h1>
</div>
CSS
.header {
position: fixed;
height: 100px;
width: 100%;
left: 0;
top: 0;
background-color: rgb(204, 31, 0);
display: flex;
flex-direction: row;
}
.header img,
.header h1 {
align-self: center;
}
h1 {
width: 100%;
text-align: center;
}
If you are working on a website, I'd very much like to recommend you use a UI framework (Bootstrap) which will make most of the tasks easier for you.
They are providing a pre-defined set of styles using which you can overcome many primitive issues and also, you can do a really good job with your projects. Most of the commercially available HTML websites use Bootstrap or something related.
That being said, let's look into your problem. This is the simplest way to get done what you want.
<div class="header">
<table width="100%">
<tr>
<td>
<img class="logomain" src="img/lblogo.png" alt="The PHP logo">
</td>
<td>
<h1 class="titlemain">The Little Beauty Studio</h1>
</td>
</tr>
</table>
</div>
Now let's see how we can improve this with the use of Bootstrap!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
</body>
</html>
Do some lite Google search on the topic and you can find some good materials with reference to this.
Good luck!
Please try this code
HTML
<header>
<img src="https://api.akeneo.com/img/illustrations/illus--Assetcategory.svg">
<h1>Your Title Area</h1>
</header>
Css
header {
position: fixed;
width: 100%;
border:solid 1px rgba(0,0,0,0.8);
vertical-align: middle;
line-height: 4em;
}
header img {
width:100px;
float:left;
}
header h1{
text-align:center;
}
https://jsfiddle.net/ajimon/msc3opq5/25/
Related
I am having trouble evenly spacing my divs for Projects, Videos, Portfolios and Contact using margins. I wanted it to start even spacing from the right of the screen. But I didn't use pixel values for spacing because I wanted to avoid hardcoded numbers as much as possible. I also realize that the way I have designed the nav-bar isn't the most efficient.
body {
background-color: black;
margin: 0px;
font-family: "Caveat", cursive;
font-family: "Ubuntu", sans-serif;
}
.title-bar {
height: 14%;
width: 100%;
position: relative;
color: white;
font-size: 30px;
}
.title-icon {
position: absolute;
margin-left: 5%;
}
.title-links {
position: relative;
right: 0px;
top: 0px;
margin-right: 5%;
}
.title-1 {
position: absolute;
right: 0px;
margin-right: 45%;
}
.title-2 {
position: absolute;
right: 0px;
margin-right: 30%;
}
.title-3 {
position: absolute;
right: 0px;
margin-right: 15%;
}
.title-4 {
position: absolute;
right: 0px;
margin-right: 0;
}
.title-link {
color: white;
text-decoration: none;
}
.title-link:hover {
color: rgb(0, 63, 145);
text-decoration: none;
}
<div class="title-bar">
<div class="title-icon">
<h3>Rupak Y</h3>
</div>
<div class="title-links">
<div class="title-1">
<a class="title-link" href="#">
<h3>Projects</h3>
</a>
</div>
<div class="title-2">
<a class="title-link" href="#">
<h3>Videos</h3>
</a>
</div>
<div class="title-3">
<a class="title-link" href="#">
<h3>Portfolio</h3>
</a>
</div>
<div class="title-4">
<a class="title-link" href="#">
<h3>Contact</h3>
</a>
</div>
</div>
Don't ever use position: absolute for situations like this. This can be done a lot easier and with less CSS:
Use display: flex both on the container and the links div, add margin-left: auto to the links div to align it right and add some margins to the single links to create a distance between them (I used 3vw margin-left, a unit relative to the viewport width). Also, apply display: block to the a tags to make them behave as blocks, and use left and right padding on the container to create the offset of the texts at the left and right side.
body {
background-color: black;
margin: 0px;
font-family: "Caveat", cursive;
font-family: "Ubuntu", sans-serif;
}
.title-bar {
display: flex;
height: 14%;
color: white;
font-size: 18px;
padding: 0 3%;
}
.title-links {
margin-left: auto;
display: flex;
}
.title-link {
display: block;
margin-left: 3vw;
color: white;
text-decoration: none;
}
.title-link:hover {
color: rgb(0, 63, 145);
text-decoration: none;
}
<div class="title-bar">
<div class="title-icon">
<h3>Rupak Y</h3>
</div>
<div class="title-links">
<div class="title-1">
<a class="title-link" href="#">
<h3>Projects</h3>
</a>
</div>
<div class="title-2">
<a class="title-link" href="#">
<h3>Videos</h3>
</a>
</div>
<div class="title-3">
<a class="title-link" href="#">
<h3>Portfolio</h3>
</a>
</div>
<div class="title-4">
<a class="title-link" href="#">
<h3>Contact</h3>
</a>
</div>
</div>
Here is a solution using the table tag I adapted from the zer00ne's answer from the this question.
html,
body {
background-color: black;
margin: 0px;
font-family: "Caveat", cursive;
font-family: "Ubuntu", sans-serif;
}
table {
width: 100%;
table-layout: fixed;
}
th {
width: 20%
}
<html>
<head>
<title>Rupak Yeware - Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="CSS/styles.css" />
</head>
<body>
<table class='table table-striped jambo_table'>
<th class='column-title' style="color:white">Rupak Y</th>
<th class='column-title' style="color:white">Projects</th>
<th class='column-title' style="color:white">Videos</th>
<th class='column-title' style="color:white">Portfolio</th>
<th class='column-title no-link last' style="color:white"><span class='nobr'>Contact</span></th>
</table>
</body>
</html>
Using a column for each of your headers and then evenly spacing them by 20% will allow you keep them all evenly spaced. If you ever add more headers, obviously you need to adjust the percentage they are spaced by.
Here is more information about the table tag:
https://www.w3schools.com/tags/tag_table.asp
I'm trying to make the navbar follow the logo whenever the user scrolls down. Currently only the logo is fixed. When I try to make the header fixed instead of the header-img, both the logo and navbar disappeared. Any help would be greatly appreciated.
Another issue I have is that the logo resizes whenever I resize my window.
#header-img {
width: 3%;
height: auto;
position: fixed;
}
nav {
list-style-type: none;
position: relative;
left: 65px;
line-height: 60px;
font-size: 20px;
}
<div id="header">
<img id="header-img" src="https://cdn-0.idownloadblog.com/wp-content/uploads/2018/07/Apple-logo-black-and-white.png"></img>
<nav id="nav-bar">
<a class="nav-link" href="#mac">Mac</a>
<a class="nav-link" href="#ipad">iPad</a>
<a class="nav-link" href="#contactus">Contact Us</a>
<a class="nav-link" href="#support">Support</a>
</nav>
</div>
<div id="body">
<iframe id="video" width="1080" height="1920" src="https://www.youtube.com/watch?v=PSS889-qeJQ">
</iframe>
<h1 id="mac">Macs</h1>
<h1 id="ipad">iPads</h1>
<h1 id="contactus">Contact Us</h1>
<h1 id="support">Support</h1>
</div>
You need to remove the margin from the document, and also make the header with a fixed position
Incidentally, your iframe is not working, as you need to specify the /embed and not /watch parameter for it to work. You can learn more about it clicking here
I also made some changes to the style of your page, but you can change that in the CSS rules
<!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">
<title>Document</title>
<style>
* {
margin: 0;
}
#header-img {
width: 3%;
/* height: auto; */
position: fixed;
}
body {
background-color: black;
}
nav {
list-style-type: none;
position: relative;
left: 65px;
line-height: 60px;
font-size: 20px;
}
nav a {
padding-left: 10px;
text-decoration: none;
color: black;
font-weight: 500;
text-transform: uppercase;
}
#header {
background-color: white;
width: 100%;
position: fixed;
}
.content {
display: flex;
justify-content: center;
margin-bottom: 60px;
}
h1 {
color: white;
margin-bottom: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div id="header">
<img id="header-img"
src="https://cdn-0.idownloadblog.com/wp-content/uploads/2018/07/Apple-logo-black-and-white.png"></img>
<nav id="nav-bar">
<a class="nav-link" href="#mac">Mac</a>
<a class="nav-link" href="#ipad">iPad</a>
<a class="nav-link" href="#contactus">Contact Us</a>
<a class="nav-link" href="#support">Support</a>
</nav>
</div>
<br><br><br><br><br><br>
<div class="content">
<iframe src="https://www.youtube.com/embed/PSS889-qeJQ" height="400" width="600"
title="Iframe Example"></iframe>
</div>
<div class="heading">
<h1 id="mac">Macs</h1>
<h1 id="ipad">iPads</h1>
<h1 id="contactus">Contact Us</h1>
<h1 id="support">Support</h1>
</div>
</body>
</html>
IDEAS FOR THE FUTURE
You could start learning about responsive design, so that your website works on any devices, without restrictions. Research flexbox and you will learn a lot of interesting things, or start studying a framework, like Bootstrap, that will make your life easier.
Your code contain img tag with closing tag. It doesn't have closing tag by default.
To fix the navbar you need to add position: fixed; to the #header.
To prevent the logo from resizing you need to add width: 100%; to the img tag and add specific width and height to it's parent (.img-container).
Try this:
#header-img {
width: 100%;
height: auto;
}
nav {
list-style-type: none;
position: fixed;
left: 65px;
line-height: 60px;
font-size: 20px;
top: 0px;
}
#header {
position: fixed;
height: 60px;
}
.img-container {
height: 35px;
width: 35px;
display: inline-block;
}
<div id="header">
<div class="img-container">
<img id="header-img" src="https://cdn-0.idownloadblog.com/wp-content/uploads/2018/07/Apple-logo-black-and-white.png">
</div>
<nav id="nav-bar">
<a class="nav-link" href="#mac">Mac</a>
<a class="nav-link" href="#ipad">iPad</a>
<a class="nav-link" href="#contactus">Contact Us</a>
<a class="nav-link" href="#support">Support</a>
</nav>
</div>
<div id="body">
<iframe id="video" width="1080" height="1920" src="https://www.youtube.com/watch?v=PSS889-qeJQ">
</iframe>
<h1 id="mac">Macs</h1>
<h1 id="ipad">iPads</h1>
<h1 id="contactus">Contact Us</h1>
<h1 id="support">Support</h1>
</div>
I removed the logo here just because it was too big. I added the #header to the CSS with position: fixed;, take a look:
#header {
position: fixed;
z-index: 1;
width: 100%;
height: 7%;
background-color: #0066FF;
}
#header-img {
width: 3%;
height: auto;
position: fixed;
}
nav {
list-style-type: none;
position: relative;
left: 65px;
line-height: 60px;
font-size: 20px;
}
<div id="header">
<nav id="nav-bar">
<a class="nav-link" href="#mac">Mac</a>
<a class="nav-link" href="#ipad">iPad</a>
<a class="nav-link" href="#contactus">Contact Us</a>
<a class="nav-link" href="#support">Support</a>
</nav>
</div>
<div id="body">
<iframe id="video" width="1080" height="1920" src="https://www.youtube.com/watch?v=PSS889-qeJQ">
</iframe>
<h1 id="mac">Macs</h1>
<h1 id="ipad">iPads</h1>
<h1 id="contactus">Contact Us</h1>
<h1 id="support">Support</h1>
</div>
I'm making a discord server website for people to find discord servers to join and make friends but, I dont know why my web page has a horizontal scroll bar.
It also has a vertical scroll bar and it shouldn't have that yet
here is my HTML and CSS
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>OnTop Servers</title>
</head>
<body>
<nav class="topnav">
<div class="topnav-right">
<a class="active" href="index.html">Home</a>
Search
Servers
</div>
<h2 class="title">
OnTop Servers
</h2>
</nav>
<center>
<div class="welcome">
<div class="centered-text">
<div class="welcome-body-inner">
<h2 class="head">
DISCOVER
<span class="discord-logo">DISCORD</span>
SERVERS
</h2>
<h3 class="body">
Find amazing servers to interact with and make friends
</h3>
</div>
</div>
</div>
</center>
<footer>
<div class="container">
<div class="column">
<ul class="footer-links">
<li>
<a class="link-text" href="index.html" title="Home">
Home </a>
</li>
<li>
<a class="link-text" href="search.html" title="Search">
Search </a>
</li>
<li>
<a class="link-text" href="servers.html" title="Servers">
Servers </a>
</li>
<li>
<a class="link-text" href="https://discord.gg/" target="_blank">
Official Discord Server </a>
</li>
<li>
<a class="link-text" href="termsofservice.html" target="_blank">
Terms Of Service </a>
</li>
<li>
<a class="link-text" href="guidelines.html" target="_blank">
Guidelines </a>
</li>
</ul>
</div>
</div>
<div class="copyright">
<p class="copyright-text">© Copyright 2020 OnTop Servers</p>
</div>
</footer>
</body>
</html>
CSS:
.row::after {
clear: both;
display: table;
}
.copyright {
position: absolute;
bottom: 1%;
right: 1%;
font-size: 15px;
}
.copyright-text {
color: white;
}
.footer-links {
position: absolute;
bottom: 5%;
}
.link-text {
color: white;
text-decoration: none;
}
.container {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
footer {
position: absolute;
bottom: 0%;
clear: both;
height: 200px;
width: 1920px;
color: #fff;
background: #2c2c2c;
}
.welcome {
margin-top: -2.5rem;
width: 100%;
height: 35.5rem;
line-height: 1.8em;
margin-bottom: .4em;
padding: 0;
font-family: Helvetica;
font-weight: 600;
font-size: 1.5em;
color: #ffff;
text-transform: uppercase;
}
.centered-text {
position: relative;
left: 24.5%;
display: flex;
align-items: center;
padding: 0 1.5rem;
}
.discord-logo {
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
display: inline-block;
padding: .6em 0;
background: url(images/Discord-Wordmark-White.png) center no-repeat;
background-size: contain;
font-size: 1em;
}
.head {
margin-bottom: .4em;
padding: 0;
line-height: 1.4;
font-weight: 600;
font-size: 2em;
}
.body {
margin: 0 auto 1em;
text-transform: inherit;
opacity: 85%;
}
how do I fix this this problem it is really bugging me and I cant work out what the problem is?
It's this combination
position: relative;
left: 24.5%;
display: flex;
You've got a block level box, that's margin area is therefore as wide as its container, then it's shifted 24.5% of the width of its container to the right, making its right edge 124.5% from the container's left edge. That's always going to overflow the container horizontally.
I suggest using margin-left instead of left.
I need help with my css code. I don't want my web site to scroll up and down, I want to make it full screen and responsive. I tried css height:100vh, height: 100% and height:1920px but it was still scrolling up and down. This problem is treated in a lot of place, but I could not find a solution that fit my need.
* {
margin: 0px;
padding: 0px;
font-family:sans-serif ;
}
body{
height: 100%;
width: 100%;
}
#sidebar{
margin: 90px 0px;
position: absolute;
width: 300px;
height: 100%;
background:#22356C ;
left: -240px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:white;
list-style: none;
text-align: center;
padding: 15px 10px;
}
#sidebar .toggle-btn{
position: absolute;
left: 310px;
top: 5px;
}
#sidebar .toggle-btn span{
display: block;
width: 30px;
height: 5px;
background:#22356C ;
margin: 5px 0px ;
}
#menu{
position: absolute;
margin: 40px 220px;
height: 128px;
width: 100%;
}
#menu1{
position: absolute;
margin:0px 100px;
color:white;
list-style: block;
}
#bolock{
height: 100%;
width: 100%;
}
#page{
position: absolute;
margin: 90px 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/stylesheet.css" integrity="" crossorigin="anonymous">
<link rel="stylesheet" href="css/mycss.css" integrity="" crossorigin="anonymous">
<meta charset="UTF-8">
<title>Title</title>
<div id="sidebar">
<ul>
<li></li>
<li></li>
<li>
Admin <img src="icones/admin.png" height="35" width="35" align="right">
</li>
<li>Frigo <img src="icones/frigo.png"height="35" width="35"align="right"></li>
<li><img src="icones/arow%20(1).png" height="10" width="10" onclick="myFunction()"> Paramétrage<img src="icones/Composant%209%20–%201.png"height="35" width="35"align="right"> <ul id="Paramétrage">
<div id="menu1"style="display:none;">
<li>Alerts</li>
<li>Produit</li>
<li>contrainte espace</li>
<li>compte</li>
</div>
</ul>
</li>
</ul>
</div>
<nav class="navbar navbar-light bg-light">
<img src="icones/logo%20bws.png" class="d-inline-block align-top" alt="">
</a>
<div id="menu">
<img src="icones/balise.png"onclick="togglesidebar()">
</div>
<div class="row" id="logs">
<p>
<img src="icones/Groupe%20102.png"height="40" width="40">
</p><p>
<img src="icones/Groupe%20104.png"height="40" width="40">
</p>
</div>
</nav>
</head>
<body>
<div class="page">
<iframe name="bolock" frameborder="0" id="bolock"></iframe>
</div>
<script>
function togglesidebar() {
document.getElementById("sidebar").classList.toggle('active');
}
</script>
<script>
function myFunction() {
var x = document.getElementById("menu1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<script src="css/popper.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/slim.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/bootstrap.min.js.js" integrity="" crossorigin="anonymous"></script>
</body>
</html>
responsive sidebar
you should add the property
overflow: hidden
to the body tag
What I understood from your question is that you want that there must be no scrolling at all in the web page, then add overflow: hidden;to the body and the your page will never scroll at all until there is no internal link in it. (learn more about overflow)
Now, the next thing, if you want the body to scroll but don't wants the sidebar to scroll along with it as if it is fixed. Then, try the position: fixed; property of CSS to the element which needs to be fixed at its place and should not be scrolling (learn more about positions).
Whenever i Resize my website it keeps getting messed up, and I have tried everything to fix it but i cant figure it out. I tried bootstrap, but didn't quit understand the meaning of it. I am new so advice is appreciated and Thanks for helping
Regard Hussein M.
body {
color: white;
font-family: sans-serif;
background-repeat: round;
background-image: url(Gaming.jpg);
background-position: -430px -100px;
}
h1 {
font-family: sans-serif;
width: 100%;
height: 100%;
margin: 10px;
padding: 0px;
}
ul {
}
table {
padding-left: 50px;
}
body {
min-width: 800px;
position: relative;
font-family: sans-serif;
}
img {
margin: 0;
position: absolute;
top: 500%;
left: 50%;
margin-right: -50%;
border-color: red;
border-width: medium;
}
#menu1 {
float: left;
padding-left: 25px;
}
#menu2 {
float: right;
padding-right: 50px;
}
.nav {
font-size: 17px;
font-family: inherit;
position: relative;
top: -9px;
padding: 9px 0px 50px 0px;
margin-bottom: 0px;
}
.nav ul,li,a{
display: inline;
padding-left: 10px;
text-decoration: none;
color: rgb(22, 239, 239);
}
.main {
position: absolute;
top: 150px;
left: 5px;
}
.h1z1 {
border-radius: 5px;
border: 1px solid #fff;
margin: 1 auto;
padding: 0px ;
margin-top: 60px;
width: 20%;
text-align: left;
}
.h1z1-img {
border-radius: 5px;
display: inline-block;
}
.h1z1-description {
display: inline-block;
margin-left: -25px;
top: px;
}
.Buy {
text-decoration: underline;
margin-left: -8px;
}
.H1Z1head {
margin: -10px;
margin-left: 40px;
}
.go {
color:aqua;
position: fixed;
top: 190px;
left: 380px;
}
.go {
text-decoration: underline;
font-size: 25px;
}
<!DOCTYPE HTML>
<html>
<head>
<!--Start of Zendesk Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?4aNAebvVIseGLS8uJOO3z9Bsrlfecjl7";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zendesk Chat Script-->
<title>Gaming Library</title>
<link rel="stylesheet" type="text/css"
href="Stylesheet.css" />
</head>
<body>
<div class="nav">
<ul id="menu1">
<li>Homes</li>
<li>About</li>
<li>Affliates</li>
<li>Donate</li>
</ul>
<ul id="menu2">
<li>Old web</li>
<li>Sign Up</li>
<li>Login</li>
<li>Contact Support</li>
</ul>
</div>
<div class="go">
<h1>Go to feautered games</h1>
</div>
<!-- Næste side
<div class="h1z1">
<div>
<ul>
<h2 class="H1Z1head">H1Z1</h2>
</ul>
<img class="h1z1-img" src="KOTK.jpg" width="250" height="180">
</div>
<div class="h1z1-description">
<ul>
<li>
<p>H1Z1: King of the Kill is a fast-paced shooter in which players compete in large-scale chaotic PvP spectacles of skill, wit and a little luck, where everyone must fight to the death to stand alone at the top of the podium.</p>
<h3 class="Buy">Buy Now only $20.99 </h3>
</li>
</ul>
</div>
</div>
-->
</body>
</html>
Here is a simple example how to get your content responsive with Bootstrap, that you didn't understand. https://jsfiddle.net/qaxhxcb3/1/ (Here u can resize and such)
body {
font-family: 'Montserrat', sans-serif !important;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 14px;
}
.navbar-nav li a:hover {
color: green !important;
}
section h1 {
color: white;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.pink {
background-color: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Gaming Library</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Homes</li>
<li>About</li>
<li>Donate</li>
<li>Affliates</li>
<li>Support</li>
</ul>
</div>
</div>
</nav>
<!-- First section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-4 green">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 red">
<h1>Lorem ipsum</h1>
</div>
<div class="col-sm-4 blue">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
<!-- Second section -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-12 pink">
<h1>Lorem ipsum</h1>
</div>
</div>
</div>
</section>
</body>
</html>
As can you see, you put your content inside the class "container", then "row" after than u choose how you will display your content with the grid system. The Bootstrap grid system allows up to 12 columns across the page.
and the grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
and there is also different columns that decide how it will be displayed on the screen. In the example i got three col-sm-4 and it must always add up to 12 for each row class. In the second section i created there is col-sm-12, and that fill up the whole grid. Hope this helps a litte bit.
But, i suggest you read some Bootstrap tutorials from w3school to get a hang of it.