How do I make my picture slideshow stay behind my header - javascript

I want to do an automatic picture slideshow with the dots underneath for each picture. I don't know how to use javascript at all, just html/css, so I found this code snippet online but I can't make the slideshow scroll behind my fixed header. any suggestions? also if anybody knew how to make the dots clickable to automatically change the picture that would be great too! Basically, I want my slideshow to be like the one on http://www.eatchronictacos.com, minus the image preview when hovering over a dot. Thanks guys
Here is a codepen: http://codepen.io/nrojina0/pen/jAZVJE
Here is my html (with the entirety of the slideshow code snippet):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/style4.css">
<title>
Bonlee Grown Farm
</title>
</head>
<body>
<div id="header">
<div id="logo"> Bonlee Grown Farm </div> <div id="address"> 650 Al Davis Road <br> <p style="font-size: 0.1em"> <br> </p> Bear Creek, NC 27207 <p style="font-size: 0.1em"> <br> </p> Home: (919)837-2937 | Cell: (012)345-6789 <p style="font-size: 0.1em"> <br> </p> amyraysugg#embarqmail.com </div>
<nav>
<ul>
<li> Home </li>
<li> Our Story </li>
<li>
Where to Find Us
<ul>
<li> Market1 </li>
<li> Market2 </li>
<li> Market3 </li>
<li> Market4 </li>
</ul>
</li>
<li> From Our Farm </li>
<li>
From Our Kitchen
<ul>
<li> Jams </li>
<li> Jellies </li>
<li> All Things Pickled </li>
<li> Relishes </li>
<li> Mustards </li>
<li> Miscellaneous </li>
</ul>
</li>
<li> Carolina Babe </li>
</ul>
</nav>
</div>
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin-left: 1%;
z-index: 2;
/* max-height: 500px;
*/}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
margin-bottom: 3%;
font-family: Verdana,sans-serif;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
margin-top: 3%;
margin-left: 2.5%;
font-family: Verdana,sans-serif;s
}
/* The dots/bullets/indicators */
.dot {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="https://www.kowalskis.com/sites/kowalskis.com/files/images/signature-products/signature-jams.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="http://i.parkseed.com/images/xxl/51659-pk-p1.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="https://spoonuniversity.com/wp-content/uploads/sites/100/2016/06/produce.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="http://static.wixstatic.com/media/a63fc0_89452cdd3605426791e345d6b3679883.jpg_srz_126_148_85_22_0.50_1.20_0.00_jpg_srz" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<div style="text-align:left; margin-top: -1%; margin-left: 32.8%">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
</script>
</body>
</html>
Here is my CSS:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,
var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,
hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ^Reset style. DO NOT DELETE! */
/*-------------------------------------------------------------------------*/
body {
background-color: #254117;
color: white;
width: 100%;
/*max-width: 960px;*/
margin: 0 auto;
margin-top: 12em;
/* ADDED TO MAKE HEADER FIXED*/
font-family: Garamond, Times;
}
#header {
/* ADDED TO MAKE HEADER FIXED*/
position: fixed;
/* ADDED TO MAKE HEADER FIXED*/
width: 100%;
/* ADDED TO MAKE HEADER FIXED*/
top: 0;
/* ADDED TO MAKE HEADER FIXED*/
height: 15em;
/* ADDED TO MAKE HEADER FIXED*/
background-color: #254117;
/* ADDED TO MAKE HEADER FIXED*/
}
/* ADDED TO MAKE HEADER FIXED*/
#logo {
font-size: 2em;
width: 60%;
display: inline;
float: left;
text-align: center;
font-family: cursive;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
#address {
width: 31%;
display: inline;
font-family: cursive;
font-size: 1.5em;
float: right;
/*text-align: right;*/
margin-bottom: 0.75em;
margin-right: 1em;
margin-top: 0.5em;
/*position: fixed;*/
/*top: 0;*/
}
/* ^LOGO AND ADDRESS STUFF */
/*-------------------------------------------------------------------------*/
nav {
width: 99%;
margin: 20px 0.5%;
clear: both;
/*position: fixed;*/
}
nav > ul {
list-style: none;
/*overflow: hidden;*/
overflow: auto;
}
nav > ul li {
float: left;
width: 16.6666%;
}
/*FFEE2E*/
nav > ul li > a {
text-align: center;
/*text-shadow: 2px 1px 2px ; include text shadow or no? */
font-family: Garamond, Times;
padding: 8px 0;
display: block;
/*width: 97.5%;*/
border-top: 4px solid #FFEE2E;
border-right: 4px solid #E5C000;
border-bottom: 4px solid #E5C000;
border-left: 4px solid #FFEE2E;
background-color: #FCD717;
font-size: 1.5em;
}
nav > ul li > a,
nav > ul li:focus > a,
nav > ul li:visited > a,
nav > ul li:hover > a,
nav > ul li:active > a {
text-decoration: none;
color: #0000EE;
}
nav > ul li:hover > a,
nav > ul li:active > a {
background-color: #FFE424;
border-top: 4px solid #E5C000;
border-right: 4px solid #FFE424;
border-bottom: 4px solid #FFE424;
border-left: 4px solid #E5C000;
border-radius: 0;
}
nav > ul li:first-child a {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
nav > ul li:last-child a {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* ^NAVIGATION BAR - LEVEL 1 */
/*-------------------------------------------------------------------------*/
nav li > ul li {
display: block;
width: 99%;
}
nav li > ul {
display: none;
width: inherit;
}
nav li > ul li:first-child a {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
nav li > ul li:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li > ul:last-child a {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
nav li:hover > ul {
display: block;
}
nav li:hover > ul {
position: absolute;
display: block;
}
/* ^NAVIGATION BAR - LEVEL 2 */
/*-------------------------------------------------------------------------*/
table tr#firstrow td{
background-color: #eee;
color: #8B4513;
font-weight: bold;
}
table{
width: 80%;
margin: 20px 0.5%;
font-family: Arial;
font-size: 1.12em;
margin: auto;
clear: both;
table-layout: fixed;
}
table tr td{
text-decoration: none;
color: white;
}
table tbody tr:nth-child(2n) td {
background: #CA240C;
}
table tbody tr:nth-child(2n+1) td {
background: #FF7159;
}
table tr td{
padding: 0.75%;
margin: 0 auto;
}
table tr td#kitchenfirstcolumn{
width: 30%;
}
table tr td#kitchenothercolumns{
width: 70%;
}
table tr td#farmfirstcolumn{
width: 18%;
}
table tr td#farmsecondcolumn{
width: 20%;
}
table tr td#farmothercolumns{
width: 62%;
}
/* ^SORTABLE TABLE - FROM OUR FARM AND FROM OUR KITCHEN */
/*-------------------------------------------------------------------------*/
img{
max-width:100%;
max-height: 100%;
padding: 3%;
}
/* ^SORTABLE TABLE - FROM OUR FARM AND FROM OUR KITCHEN */
/*-------------------------------------------------------------------------*/
h1{
font-size: 1.5em;
font-family: Palatinos, cursive;
}
h2{
font-size: 3em;
font-family: Palatinos, cursive;
text-align: center;
}
/*-------------------------------------------------------------------------*/


Add z-index: 3 to #header in css and it works as expected I guess:
#header {
position: fixed;
width: 100%;
top: 0;
height: 15em;
background-color: #254117;
z-index: 3;
}

Related

Override Bootstrap styles for CSS?

My friend told me about bootstrap to fix my previous issue (still unsolved) for scaling my images to fit the screen // I need a responsive layout.
Oh my 27 inch monitor the website looks clean like so:
However, that is, until I decide to zoom in:
So basically the website decides to completely cut off the edges of every image I've implemented. Now I heard that bootstrap would be useful in this case however when I implemented it and through the tutorials to install it - after every stepped, it looked like this:
So basically, my code decides to spaz out. This is a horrible thing as when I hand in the assignment to my teacher, he will be viewing the website on a much smaller screen which means the website will be zoomed in and everything will be cut off or just look really ugly. How do I fix the bootstrap issue? I tried putting the linking code to the bootstrap css file way before the style.css and index.css file, however the error continued to occur. Here is the code:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jared's Workshop | Homepage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="index.css">
</head>
<header>
<div class="number2">
</div>
<div class="navbar">
<div class="navlinks">
<ul>
<li>H o m e</li>
<li>G a m i n g</li>
<li>O f f i c e</li>
<li>C o n t a c t s</li>
<li>C h e c k o u t</li>
</div>
</div>
</header>
<body>
<div class="container">
<div class="containimage">
<div class="logo1">
<img src="./assets/logos/logoreal2.png">
</div>
</div>
<div class="parallax" data-parallax="scroll" data-z-index="1" data-image-src="./assets/background/back.jpg"></div>
<div class="text-justify">
<div class="abovepic">
<img src="pc.png"/>
</div>
<div class="slide">
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<a href="gaming.html"/><img src="./assets/banners/easter.png">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<a href='#geforce'/><img src="./assets/banners/easter.jpg">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<a href="gaming.html"/><img src="./assets/banners/whiteout.png">
<div class="text"></div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!--
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
-->
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000); // Change image every 2 seconds
}
</script>
</div>
<div class="pie">
<div class="text2">
<h1>HOT BUILDS</h1>
<p>Recommended builds with hot prices from our <b>gaming builds.</b></p>
</div>
<section id="tickets">
<div id="tickets container">
<div class="ticketsbottom">
<div class="ticketsitem" style="background-image: url(./assets/background/helios2.jpg)">
<div class="icon">
<img src="./assets/icons/bhov/helios.png"/>
<div class="iconinside">
<img src="./assets/icons/ahov/insidehelios.png"/>
</div>
</div>
<h2>HELIOS</h2>
<p><b style="font-size: 1.8rem">$3355</b><br>- Intel Core i7 10700K 3.8GHz<br>- 16GB Gigabyte Memory<br>- Gigabyte Z490 Motherboard<br>- WD 500GB SSD OS Drive<br>- ASUS RTX 3070 8GB Graphics<br>- eVGA 750W Power Supply</p>
<a href="#music" type="button" class="superbutton" >Add to cart</a>
</div>
<div class="ticketsitem" style="background-image: url(./assets/background/coal2.png)">
<div class="icon">
<img src="./assets/icons/bhov/hot1.png"/>
<div class="iconinside">
<img src="./assets/icons/ahov/insidecoal.png"/>
</div>
</div>
<h2>COAL</h2>
<p><b style="font-size: 1.8rem">$3360</b><br>- Intel Core i7 10700KF 3.8Ghz<br>- 16GB Gigabyte Memory<br>- Gigabyte Z490 Motherboard<br>- Samsung 500GB SSD OS Drive<br>- Gigabyte RTX 3070 8GB Graphics<br>- Gigabyte 750W Power Supply</p>
<a href="#music" type="button" class="superbutton" >Add to cart</a>
</div>
<div class="ticketsitem" style="background-image: url(./assets/background/remix2.png">
<div class="icon">
<img src="./assets/icons/bhov/remix.png"/>
<div class="iconinside">
<img src="./assets/icons/ahov/insideremix.png"/>
</div>
</div>
<h2>REMIX</h2>
<p><b style="font-size: 1.8rem">$6270</b><br>- Intel Core i9 10850K 3.6Ghz<br>- 32GB Corsair Memory<br>- Gigabyte Z490 Motherboard<br>- Samsung 2TB SSD OS Drive<br>- Gigabyte RTX 3090 24GB Graphics<br>- eVGA 1000W Power Supply</p>
<a href="#music" type="button" class="superbutton" >Add to cart</a>
</div>
</div>
</div>
</section>
</div>
<div class="between">
<div id="geforce">
<div class="glogo">
<img src="./assets/icons/geforce 3.png"/>
</div>
<iframe width="900" height="506.25" src="https://www.youtube.com/embed/casgtX_HMTQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--SEE VIDEO </div>--->
<div class="img1">
<div class="frames">
<hr>
<br>
<br>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oQH1dP13O3s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5k7UPag-9x4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/T3lopR0XpOE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<p>
All Rights Reserved. Copyright 1991-2020 PLE Computers Pty Ltd (ABN: 48 051 046 596). The PLE Computer Logo & Mouse Pointer in Circles are registered Trademarks of PLE Computers Pty Ltd. All other trademarks and copyrights are the property of their respective owners. For further information on terms of service & conditions please see Terms & Conditions. Ultrabook, Celeron, Celeron Inside, Core Inside, Intel, Intel Logo, Intel Atom, Intel Atom Inside, Intel Core, Intel Inside, Intel Inside Logo, Intel vPro, Itanium, Itanium Inside, Pentium, Pentium Inside, vPro Inside, Xeon, Xeon Phi, and Xeon Inside are trademarks of Intel Corporation in the U.S. and/or other countries.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
</p>
</div>
</div>
</body>
</html>
css:
html {
font-size: 10px;
font-family: 'Roboto', sans-serif;
scroll-behavior: smooth;
}
body{
margin: 0;
padding: 0;
}
body, body::after, body::before{
box-sizing: border-box;
}
.container{
background: #f9f9f9;
}
.parallax {
padding: 500px;
background: transparent;
margin: 0;
position: relative;
}
.text-justify{
z-index: 2;
position: relative;
background: repeat;
background-color: #111111;
}
.text-justify p{
z-index: 7;
margin-left: 200px;
margin-right: 200px;
color: white;
}
.container .containimage .logo1{
text-align: center;
position: absolute;
padding-bottom: 0;
z-index: +200;
margin:0 auto;
margin-top: 900px;
}
.container .containimage .logo1 img{
width: 1920px;
}
.navlinks{
}
.navlinks ul li:hover{
transition: .5s;
opacity: 100%;
}
.navlinks ul li{
transition: .5s;
opacity: 20%;
font-size: 2rem;
}
body { padding: 0; margin: 0; }
.navlinks li a{
padding-top: 20px;
padding-bottom: 20px;
text-transform: uppercase;
}
.navlinks a{
color: white;
z-index: 2000;
text-decoration: none;
text-align: center;
display:inline-block;
}
.navbar li{
display:inline;
}
.navbar{
list-style:none;
margin:0;
padding:0;
text-align:center;
}
header {
background-color: #16161e;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100vw;
height: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:#16161e;
}
li {
}
li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
transition: 0.5s;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
*, ::after, ::before {
box-sizing: border-box;
}
element.style {
}
p {
margin-top: 0;
margin-bottom: 0rem;
}
.text-justify {
text-align: justify!important;
margin-top: 0;
}
.text2 h1{
text-align: block;
font-size: 6rem;
color: white;
margin-top: auto;
margin-bottom: 20px;
margin-right: 400px;
margin-left: 400px;
text-align: center;
font-weight: 300;
}
.text2 p{
display: block;
font-size: 2rem;
color: white;
text-align: center;
margin-top: auto;
margin-bottom: 20px;
margin-right: 400px;
margin-left: 400px;
font-weight: 100;
letter-spacing: .1rem;
line-height: 1.6;
}
.text2 {
background-color: #111111;
padding: 100px;
transform: translate(0,-70%);
}
.img1 a img{
text-align: center;
width: 100%;
}
.between img{
padding: 20px;
}
.between{
text-align: center;
}
img {
vertical-align: middle;
border-style: none;
}
.website:hover{
color: gold;
transition: .5s;
}
.website{
text-decoration: none;
color: white;
}
.img1{
text-align: center;
}
.img1 .frames{
display: inline-block;
padding: 20px;
}
.between a{
text-decoration: none;
}
.between img{
position: relative;
vertical-align: center;
float: none;
top: -80px;
}
.between{
text-align: center;
}
.superbutton{
opacity: 100;
display: flex;
padding: 10px 30px;
color: #294f65;
background-color: #fba174;
border: 2px solid #294f65;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .1rem;
transition: .6s ease background-color;
z-index: +99;
transition: .5s;
margin-bottom: 40px;
margin-top: 1px;
transform: translate(0,40%);
position: relative;
text-decoration: none;
flex-wrap: wrap;
}
.superbutton:hover{
color: white;
background-color: #ff8b52;
padding: 15px 35px;
transition: 0.5s;
}
.super{
max-width: 1200px;
margin: 0 auto;
padding: 0 50px;
justify-content: flex-start;
}
.superbutton:active{
color: white;
background-color: #294f65;
padding: 12px 32px;
transition: 0.1s;
}
/* GEFORCE VIDEO */
#geforce{
text-align: center;
background-image: url(https://plecom.imgix.net/bo-557053-geforce-rtx-outriders-bundle-video-bkgd-2560x770-d.jpg?auto=format);
padding: 70px;
padding-top: 20px;
}
#geforce .glogo {
text-align: center;
}
#geforce .glogo img{
padding: 0px;
width: 400px;
top: -190px;
transform: translate(0,100%);
}
/* GEFORCE VIDEO END*/
#keyframes text_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes text_reveal{
100%{
color: white;
}
}
#keyframes box{
100%{
opacity: 100%;
font-size: 2rem;
}
}
#keyframes items_reveal{
100%{
flex-basis: 20%;
opacity: 1;
}
}
#keyframes title_reveal{
100%{
font-size: 4rem;
opacity: 1;
}
}
/*Tickets Section*/
.pie {
background-color: #0d0d0d;
}
#tickets {
flex-direction: column;
text-align: center;
max-width: 1500px;
margin: 0 auto;
padding: 20px 0;
}
#ticketstop .sectiontitle h1{
font-size: 2rem;
font-weight: 300;
color: black;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .2rem;
text-align: center;
opacity: 100;
}
.sectiontitle span{
color: #347f7d;
}
#tickets .sectiontitle{
font-size: 2rem;
font-weight: 300;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .2rem;
text-align: center;
opacity: 100;
}
#tickets .sectiontitle span{
color: #347f7d;
}
#tickets p {
text-align: justify;
}
#tickets .ticketsbottom{
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
transform: translate(0,-30%);
}
#tickets .ticketsitem {
flex-basis: 15%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0px;
border-radius: 10px;
background-size: cover;
margin: 10px 6px;
position: relative;
z-index: +1;
transition: .2s;
box-sizing: border-box;
}
#tickets .ticketsitem::after{
content: '';
position: absolute;
left:0;
top: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(60deg, #26323c 0%, #485563 100%);
opacity: .8;
z-index: -1;
border-radius: 10px;
}
#tickets .ticketsbottom .icon{
height: 80px;
width: 20px;
margin-bottom: 25px;
}
#tickets .ticketsbottom .icon img{
margin-left: auto;
margin-right: auto;
transform: translate(-50%,-70%);
width: 350px;
position: absolute;
opacity: 100;
}
#tickets .ticketsbottom .icon:hover img{
opacity: 0
}
#tickets .ticketsbottom .icon .iconinside img{
margin-left: auto;
margin-right: auto;
transform: translate(-50%,-70%);
width: 350px;
position: absolute;
opacity: 0;
}
#tickets .ticketsbottom .icon .iconinside img:hover{
opacity: 100;
}
#tickets .ticketsitem h2{
font-size: 3rem;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
}
#tickets .ticketsitem p{
color: white;
text-align: left;
font-size: 1.4rem;
line-height: 1.9rem;
white-space: nowrap;
}
#tickets .ticketsitem:hover{
position: relative;
transition: 0.1s;
}
/* END TICKETS Section */
/*above tickets*/
.abovepic{
text-align: center;
transform: translate(0,-35%);
padding-bottom: 0;
}
/*below tickets*/
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 900px;
position: relative;
margin: auto;
margin-top: 100px;
}
/* Hide the images by default */
.mySlides {
display: none;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: -500px;
transform: translate(0,-380%);
border-radius: 3px 0 0 3px;
}
.prev{
left: -500px;
transform: translate(0,-380%);
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
opacity: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
transform: translate(0,-40%);
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.mySlides{
transform: translate(-50%,-55%);
text-align: center;
display: flex;
}
.mySlides img{
width: 200%;
left: auto;
right: auto;
}
.slide{
background-image: url(./assets/background/back1.png);
padding:50px;
padding-top: 115px;
margin:0 auto;
margin-top: -200px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}
.col-25 {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}
.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
.col-75 {
-ms-flex: 75%; /* IE10 */
flex: 75%;
}
.col-25,
.col-50,
.col-75 {
padding: 0 16px;
}
.container .containimage {
display: flex;
justify-content: center;
align-items: center;
box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.3);
z-index: +10000;
}
input[type=text] {
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
label {
margin-bottom: 10px;
display: block;
}
.icon-container {
margin-bottom: 20px;
padding: 7px 0;
font-size: 24px;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius: 3px;
cursor: pointer;
font-size: 17px;
}
.btn:hover {
background-color: #45a049;
}
span.price {
float: right;
color: grey;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction - make the "cart" column go on top) */
#media (max-width: 800px) {
.row {
flex-direction: column-reverse;
}
.col-25 {
margin-bottom: 20px;
}
}

I see you did not use any of Bootstrap's grid classes, to make a responsive layout that matches every screen and resize images and content smoothly, here is an example:
in html
<section class="tickets">
<div class="row">
<div class="tickets_item col-sm-12 col-md-4">
<img src="./images/image.jpg" alt="">
</div>
<div class="tickets_item col-sm-12 col-md-4">
<img src="./images/image.jpg" alt="">
</div>
<div class="tickets_item col-sm-12 col-md-4">
<img src="./images/image.jpg" alt="">
</div>
</div>
</section>
to establish a responsive layout using Bootstrap, you need to use bootstrap .row class, In Bootstrap, the .row class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. please read Bootstrap's Grid system Documentation page
so inside the <div class="row"></div> there is by default a virtual 12 columns, you can can give every ticket_item a custom width in small/medium/large/xlarge screens by adding .col- + screen size + column count to be:
.col-sm-12 gives full width in small screens.
.col-md-6 gives half width i.e. 6 columns in medium screens.
.col-lg-4 gives 33.333 % width, i.e. 4/12 columns in large screens.

My image doesn't show until after my slideshow then when slideshow starts again, it disappears

My image doesn't show until after my slideshow is done and it disappears immediately it starts again, I personally think it is the JavaScript that has the problem code below.
(HTML)
<h1 style="font-family: cursive; color: blue;">Jay<i style="color: pink;" class="fa fa-heart"></i>CeeZ</h1>
<div class="navbar">
<a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
<i class="fas fa-file-alt"></i> News
<i class="fa fa-fw fa-envelope"></i> Contact
<i class="fa fa-fw fa-user"></i> About
<i onclick="myFunction()" class="fas fa-toggle-off"></i>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="girl.jfif" style="width: 100%; height: 450px; ">
<div class="text-block">Up to 25% discount off women jacket <a href="women.html" style="text-decoration: none; background-color: red; width: 203;" >Shop Now!</a> </div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="boy.jfif" style="width: 100%; height: 450px;">
<div class="text-block">New Shirt Collection for Men <a href="men.html" style="text-decoration: none; background-color: red; width: 203;" >Shop Now!</a>
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="girl2.jfif" style="width: 100%;color: black; height: 450px; ">
<div class="text-block">Up to 15% discount for every first timer <a href="#collection" style="text-decoration: none; background-color: red; width: 203;" >Shop Now!</a></div>
<div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<br>
<h1>Women Rocks</h1>
<img src="girl.jfif" alt="first dress" width="203">
Could it be the HTML because I don't understand? So this is the CSS code below.
(CSS)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<style>
body {font-family: Arial, Helvetica, sans-serif; overflow: scroll;}
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.text-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25px;
color: #ffffff;
word-break: keep-all;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.mySlides{
width: 100;
height: 50;
}
.navbar a:hover {
background-color: #000;
}
.active {
background-color: blue;
}
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: flexbox;
}
}
.dark-mode {
background-color: #000900;
color:red;
}
</style>
The JS is very long though, I reviewed it but it doesn't seem like it has problem, even CSS looks okay, the html is just perfect.
(JS)
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000); // Change image every 2 seconds
}
</script>

The third slide div (with class mySlides) have not close tag (</div>), so the elements below it will be treat as content of this last slide, that's why they will show and disappear with it. I think the <div> after the text-block and before </div> in the third mySlides may be redundant, you can get rid of it and try again.

How to close the open section of accordion menu?

I'm trying to create an accordion, but I don't know how to close the open one. As you can see, the accordion works fine until you try to close the current view.
How can I do that?
Note: The accordion can only be seen on mobile breakpoint.
$(function() {
$('.footer-links-holder').click(function() {
if ($('.footer-links-holder').hasClass('active')) {
$('.footer-links-holder').removeClass('active')
}
$(this).toggleClass('active')
});
});
/* HTML Set up */
footer {
background: #191919;
color: #fff;
margin: 0;
#import 'https://fonts.googleapis.com/css?family=Open+Sans';
font-family: "Open Sans", sans-serif;
padding-top: 20px;
}
footer .centered {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
footer .centered .footer-contact {
width: 20%;
}
footer .centered .footer-navigation {
width: 60%;
}
footer .centered .footer-navigation .footer-links-holder {
border-left: 1px solid rgba(255, 255, 255, 0.5);
width: 33.33333%;
position: relative;
float: left;
margin: 0;
padding-left: 10px;
}
footer .centered .footer-navigation .footer-links-holder>div {
position: relative;
top: -20px;
}
footer .centered .footer-navigation .footer-links-holder .footer-links {
margin: 0;
padding: 0;
list-style: none;
/*-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;*/
}
footer .img-bar {
position: relative;
text-align: center;
margin: 20px 0;
}
footer .img-bar div {
display: inline-block;
}
footer .img-bar div img {
height: 40px;
padding: 10px;
margin: 0 10px;
}
footer .bottom-bar {
position: relative;
text-align: center;
font-size: 10px;
background: #000;
padding: 15px 0;
}
/* Responsive Tablet Sizes */
#media only screen and (max-width: 749px) {
footer .centered {
flex-wrap: wrap;
}
footer .centered .footer-logo {
max-width: 250px;
width: 50%;
}
footer .centered .footer-contact {
width: 50%;
padding: 0 20px;
}
footer .centered .footer-navigation {
width: 100%;
}
footer .centered .footer-navigation .footer-links-holder {
padding: 0 20px;
}
}
/* Responsive Mobile Sizes */
#media only screen and (max-width: 500px) {
footer .centered .footer-logo {
width: 100%;
margin: 0 auto;
}
footer .centered .footer-contact {
width: 100%;
}
footer .centered .footer-navigation .footer-links-holder {
width: 100%;
padding: 0;
}
footer .centered .footer-navigation .footer-links-holder h3 {
margin: 0;
padding: 10px 20px;
border-top: #000 1px solid;
cursor: pointer;
/* Down Arrows */
}
footer .centered .footer-navigation .footer-links-holder h3::after {
float: right;
margin-right: 10px;
content: "";
display: inline-block;
vertical-align: middle;
margin-top: 7px;
width: 7px;
height: 7px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: transform 0.5s;
transition: transform 0.5s;
}
footer .centered .footer-navigation .footer-links-holder .footer-links {
max-height: 0;
overflow: hidden;
padding: 0 20px;
}
footer .centered .footer-navigation .footer-links-holder.active h3::after {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
footer .centered .footer-navigation .footer-links-holder.active .footer-links {
max-height: 10000px;
}
}
/* Social Icons */
.social h3 {
padding-bottom: 10px;
}
.social a {
display: inline-block;
padding: 7px;
width: 35px;
height: 35px;
margin: 0 2px;
background: #fff;
border-radius: 50%;
vertical-align: middle;
}
.social a:hover {
background: #65c2ed;
}
.social a.linkedin {
padding: 4px;
}
.social a svg .face,
.social a svg .twit,
.social a svg .link {
fill: #000;
}
/* Typography */
footer h3 {
font-weight: lighter;
margin-bottom: 0;
}
footer p,
footer li {
font-weight: 400;
letter-spacing: 0.05em;
margin: 10px 0;
}
footer a {
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
text-decoration: none;
-webkit-transition: color 0.5s, background 0.5s;
transition: color 0.5s, background 0.5s;
}
footer a:hover {
color: #65c2ed;
}
/* Misc CSS */
.clearfix:before,
.clearfix:after {
content: " ";
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
clear: both;
}
body {
margin: 0;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/*# sourceMappingURL=styles.css.map */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<footer>
<div class="centered clearfix">
<div class="footer-navigation">
<div class="footer-links-holder">
<div>
<h3>Section 1</h3>
<ul class="footer-links">
<li>Page Title 1</li>
<li>Page Title 2</li>
<li>Page Title 3</li>
<li>Page Title 4</li>
</ul>
</div>
</div>
<div class="footer-links-holder">
<div>
<h3>Section 2</h3>
<ul class="footer-links">
<li>Page Title 1</li>
<li>Page Title 2</li>
<li>Page Title 3</li>
<li>Page Title 4</li>
</ul>
</div>
</div>
<div class="footer-links-holder">
<div>
<h3>Section 3</h3>
<ul class="footer-links">
<li>Page Title 1</li>
<li>Page Title 2</li>
<li>Page Title 3</li>
<li>Page Title 4</li>
</ul>
</div>
</div>
</div>
<div class="footer-contact">
<div class="social">
<h3>Contact</h3>
<a href="https://www.facebook.com/" class="facebook">
<svg viewBox="0 0 33 33"><g><path d="M 17.996,32L 12,32 L 12,16 l-4,0 l0-5.514 l 4-0.002l-0.006-3.248C 11.993,2.737, 13.213,0, 18.512,0l 4.412,0 l0,5.515 l-2.757,0 c-2.063,0-2.163,0.77-2.163,2.209l-0.008,2.76l 4.959,0 l-0.585,5.514L 18,16L 17.996,32z"></path></g></svg>
</a>
<a href="https://twitter.com/" class="twitter">
<svg viewBox="0 0 33 33"><g><path d="M 32,6.076c-1.177,0.522-2.443,0.875-3.771,1.034c 1.355-0.813, 2.396-2.099, 2.887-3.632 c-1.269,0.752-2.674,1.299-4.169,1.593c-1.198-1.276-2.904-2.073-4.792-2.073c-3.626,0-6.565,2.939-6.565,6.565 c0,0.515, 0.058,1.016, 0.17,1.496c-5.456-0.274-10.294-2.888-13.532-6.86c-0.565,0.97-0.889,2.097-0.889,3.301 c0,2.278, 1.159,4.287, 2.921,5.465c-1.076-0.034-2.088-0.329-2.974-0.821c-0.001,0.027-0.001,0.055-0.001,0.083 c0,3.181, 2.263,5.834, 5.266,6.438c-0.551,0.15-1.131,0.23-1.73,0.23c-0.423,0-0.834-0.041-1.235-0.118 c 0.836,2.608, 3.26,4.506, 6.133,4.559c-2.247,1.761-5.078,2.81-8.154,2.81c-0.53,0-1.052-0.031-1.566-0.092 c 2.905,1.863, 6.356,2.95, 10.064,2.95c 12.076,0, 18.679-10.004, 18.679-18.68c0-0.285-0.006-0.568-0.019-0.849 C 30.007,8.548, 31.12,7.392, 32,6.076z"></path></g></svg>
</a>
<a href="https://www.linkedin.com/" class="linkedin">
<svg viewBox="0 0 512 512"><g><path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"></path></g></svg>
</a>
</div>
</div>
</div>
<div class="bottom-bar">
All Rights Reserved © 2016 | Privacy Policy | Terms of Service
</div>
</footer>

Try to store the current active state of the clicked element before removing all active classes.
For example:
$(function() {
$('.footer-links-holder').click(function() {
const thisIsActive = $(this).hasClass('active');
$('.footer-links-holder.active').removeClass('active');
if (!thisIsActive) {
$(this).toggleClass('active');
}
});
});

How do I get navigation bar's dropdown to stay when hovering over the dropdown?

I have a simple website with a simple navigation bar, but it seems like a very daunting task after much research.
When hovering over any of the buttons, it will display a dropdown to show more options.
I have got that working fine, but how would I go about making the dropdown stay when I hover over the contents of the dropdown?
Basically when the cursor leaves the navigation's bar button and onto the dropdown menu, it doesn't disappear.
I read that it's possible with jQuery, but I want to do it in JavaScript alone if it's possible, even if it's lengthy.
The navbar's hover itself works, but whatever I tried to keep the dropdown there when hovering on it, keeps bugging everything out.
This is the code I have, and that I have tried:
document.getElementById("server").onmouseover = function() {
serverMouseOver()
};
document.getElementById("server").onmouseout = function() {
serverMouseOut()
};
function serverMouseOver() {
document.getElementById("serverdropdownbox").className += "animated fadeIn";
};
function serverMouseOut() {
document.getElementById("serverdropdownbox").className += "animated fadeOut";
};
document.getElementById("serverdropdownbox").onmouseover = function() {
serverDropdownMouseOver()
};
document.getElementById("serverdropdownbox").onmouseout = function() {
serverDropdownMouseOut()
};
function serverDropdownMouseOver() {
document.getElementById("serverdropdownbox").style.opacity = "1";
};
function serverDropdownMouseOut() {
document.getElementById("serverdropdownbox").style.opacity = "0";
};
#navbarbox
{
clear: both;
display: block;
width: 100vw;
height: 3.5vw;
padding: 0vw 0 0 0;
margin: 0;
}
#navbar, #navbar ul
{
width: 100vw;
height: 3.5vw;
display: flex;
padding: 0 0 0 0;
margin: 0;
}
#navbar span
{
height: 3.5vw;
display: block;
transform: skewX(15deg);
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 1vw 3.95vw 1vw 3.95vw;
margin: auto;
text-align: center;
color: red;
font-size: 2.3vw;
font-family: Jura;
height: 2.5vw;
transform: skewX(-15deg);
}
#serverdropdownbox
{
display: block;
opacity: 0;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#serverdropdowncontent
{
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 10.1vw;
}
#serverdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
background-color: white;
}
#server
{
background-color: blue;
}
#communitydropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#communitydropdowncontent
{
list-style-type: none;
width: 19.7vw;
margin: 1vw 0 0 26vw;
}
#communitydropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#community
{
background-color: brown;
}
#storedropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#storedropdowncontent
{
list-style-type: none;
width: 13.6vw;
margin: 1vw 0 0 45.65vw;
}
#storedropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#store
{
background-color: blue;
}
#downloadsdropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#downloadsdropdowncontent
{
list-style-type: none;
width: 19.8vw;
margin: 1vw 0 0 59.2vw;
}
#downloadsdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#downloads
{
background-color: brown;
}
#contactdropdownbox
{
display: block;
float: left;
color: white;
background-color: darkblue;
width: 0;
}
#contactdropdowncontent
{
list-style-type: none;
width: 16vw;
margin: 1vw 0 0 78.9vw;
}
#contactdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
#contact
{
background-color: blue;
}
.animated
{
animation-duration: 1s;
animation-fill-mode: both;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Jura" />
<body>
<!--Giga logo, top left-->
<img id="gigalogo" src="images/gigalogo.png">
<!--Steam logo, top right-->
<div id="steamlogomainbox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<li style="background-color: purple;"><span>Home</span></li>
<li id="server"><span>Servers</span></li>
<li id="community"><span>Community</span></li>
<li id="store"><span>Store</span></li>
<li id="downloads"><span>Downloads</span></li>
<li id="contact"><span>Contact</span></li>
</ul>
</div>
<div id="serverdropdownbox">
<ul id="serverdropdowncontent">
<li id="serverdropdownli">Server List</li>
<li id="serverdropdownli">GigaDB</li>
<li id="serverdropdownli">CS:GO</li>
</ul>
</div>
<div id="communitydropdownbox">
<ul id="communitydropdowncontent">
<li>Events</li>
<li></li>
</ul>
</div>
<div id="storedropdownbox">
<ul id="storedropdowncontent">
<li>Credits</li>
<li>Items</li>
<li>VIP</li>
</ul>
</div>
<div id="downloadsdropdownbox">
<ul id="downloadsdropdowncontent">
<li>TF2</li>
<li>CS:GO</li>
<li>Minecraft</li>
</ul>
</div>
<div id="contactdropdownbox">
<ul id="contactdropdowncontent">
<li>Contact Us</li>
<li>Staff</li>
<li>Steam Group</li>
<li>Appeal Ban</li>
<li>Links</li>
</ul>
</div>

First of all - your HTML structure is invalid. ul tag can have only li as direct child, not a. So ul > a > li must be replaced to ul > li > a.
Second - you don't need JS for such simple menu. Have ul > li > ul as sub-menu and use :hover on ul > li to show your sub-menu.
ul {
padding: 0;
}
li {
white-space: nowrap;
list-style: none;
}
#menu > li {
position: relative;
display: inline-block;
}
#menu > li > ul {
position: absolute;
left: 0;
top: 100%;
min-width: 100%;
opacity: 0;
transition: opacity 200ms ease-in-out;
}
#menu > li:hover > ul {
opacity: 1;
}
<ul id="menu">
<li>Home</li>
<li>
<span>Servers</span>
<ul>
<li>Server 1</li>
<li>Server 2</li>
<li>Server 3</li>
</ul>
</li>
</ul>

central div moves around the website when I resize the browser window

My central block keeps on moving to the left when I resize the browser window
normal:
http://imgur.com/b2AVkUx
after resizing browser window:
http://imgur.com/mJq6AuO
so i managed to figure out how to keep the navi and footer relatively undisruptive during resizing, but I just can't seem to figure out how to deal with the body, help please?
HTML:
<html>
<head>
<title>Line After Line</title>
<link type = "text/css" rel = "stylesheet" href = "stylesheet.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id = "top">
<div id = "opening">
<a href = "index.html">
<h1 id = "logo"> Line After Line </h1>
</a>
</div>
<div id = "navi">
<ul>
<li> Read </li>
<li> Write</li>
<li> Review </li>
<li> Donate </li>
</ul>
</div>
</div>
<div id = "updates">
<h4>Updates</h4>
<ul>
<li> number one blah blah blah blah blah hahahahaahah </li>
</br>
<li>number two blah blah blah </li>
</ul>
</div>
<div id = "story">
<a href = "blockOne.html">
<div class = "storyblocks" id = "blockOne" >
<p> Hello I this is a test block </p>
</div>
</a>
<div class = "storyblocks" id = "blockTwo"></div>
<div class = "storyblocks" id = "blockThree"></div>
<div class = "storyblocks" id = "blockFour"></div>
<div class = "storyblocks" id = "blockFive"></div>
<div class = "storyblocks" id = "blockSix"></div>
</div>
<div id = "footer">
<ul>
<li> Home </li>
<li> A Message From Chung</li>
<li> Contributors </li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
</body>
CSS:
*{
margin: 0px;
padding: 0px;
}
ul{
list-style-type: none;
}
body{
background-color: white;
}
body a {
text-decoration: none;
}
#top{
background-color: black; /*use to see div area*/
height:75px;
margin-bottom: 1.5%;
padding: 5px;
}
/*div surrounding the Logo */
#opening{
margin-left: 100px;
width: 300px;
}
#logo{
color: white;
font-family: verdana;
float:left;
margin-top: 15px;
}
#navi{
/*background-color: red;*/
width: 1100px;
left: 200px;
margin-top: 20px;
margin-right: 100px;
position: relative;
}
#navi ul li {
font-weight: bold;
color: white;
display: inline;
text-decoration: none;
font-family: Calibri;
font-size: 26px;
margin: 0px 60px 0px 60px;
}
#updates{
/*background-color: blue; /* use to see div area */
color: #6D8582 ;
font-family: verdana;
margin-left: 5%; /*100px*/
margin-bottom: 10px;
height: 600px;
width: 300px;
border-right: thick solid #6D8582;
float: left;
position: relative;
}
#updates h4 {
text-align: center;
padding: 10px;
}
#updates ul {
margin-left: 20px;
list-style-type: none;
}
#story , #mainStory{
/*border: thin solid black;*/
/*background-color: red;*/
float: right;
margin-left: 27%;
margin-bottom: 10px;
position: absolute;/* relative*/
width: 1145px;
height: 600px;
overflow: auto;
border-radius: 5px;
}
#mainStory {
background-color: #F7F9FA;
width: 1050px;
margin-right: 4.5%;
}
#mainStory p {
color: black;
font-family: Calibri;
font-size: 18px;
padding-left: 50px;
padding-right: 50px;
text-indent:50px;
}
#mainStory h2{
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.storyblocks{
color:black;
display:inline-block;
line-height: 50px;
margin: 5px;
width: 200px;
height: 200px;
border-radius: 5px;
text-align: center;
vertical-align: top;
opacity: 0.6;
}
#blockOne{
/*border: thick solid blue; /*delete later*/
background-color: #2A9BB5;
}
#blockTwo{
/*border: thick solid green; /*delete later*/
background-color: #17EB0C;
}
#blockThree{
/*border: thick solid yellow; /*delete later*/
background-color: #F0F035;
}
#blockFour{
/*border: thick solid red; /*delete later*/
background-color: #F02E4E;
}
#blockFive{
/*border: thick solid purple; /*delete later*/
background-color: #DA41E8;
}
#blockSix{
/*border: thick solid green; /*delete later*/
background-color: #FC62B2;
}
#footer {
background-color: black;
text-align:center;
position: absolute;
clear: left;
height:34px;
bottom: 0;
width:100%
}
#footer ul li {
color: white;
text-decoration: none;
display: inline;
font-family: Calibri;
font-size: 16px;
margin-left:50px;
margin-right:50px;
}

It is because you have a fixed width and float right. Your div with the boxes is trying to stay aligned with the right hand side of the browser window, and because you won't let it resize it moves over. Either make the width a percentage, or don't float right and have a margin left 300px

Actually you have a problem with responsive design. If you do not have any of items ( sidebar or content) fixed you can use precentage on both of them, like :
#nav {
width:27%;
display:inline-block;
vertical-align:top;
padding-right:1%;
margin-right:1%;
border-right:1px solid #ccc;
}
#content {
width:70%;
display:inline-block;
vertical-align:top;
}
If you have something fixed ( let say sidebar ) you have to use css media queries and create some "patterns" for certain intervals of resolution ( width ).
You have an example which uses precentage sizes of both sides : http://jsfiddle.net/7Qpw6/

Categories

Resources