So I just started making the site and there is a lot of white space at the bottom of my site...
I've been removing div but than on Inspect Element shows that the white space is because of <ul></ul> when I removed that tag it showed it is because of <body>
They say add margin: 0; padding:0 html,body { height:100%;} but nothing worked.
#font-face {
font-family: 'RobotoR';
src: url("/Roboto-Regular.ttf");
}
#font-face {
font-family: 'RobotoM';
src: url("/Roboto-Medium.ttf");
}
#font-face {
font-family: 'RobotoB';
src: url("/Roboto-Bold.ttf");
}
#font-face {
font-family: 'RobotoLi';
src: url("/Roboto-LightItalic.ttf");
}
html,body {height:100%;}
body{
overflow-x: hidden;
min-height: 100vh;
margin:0;
}
.navigacija a{
font-size: 21px;
font-family: 'RobotoR', sans-serif;
text-decoration: none;
z-index: 1;
}
nav ul li a {
color: black;
background-color: inherit;
padding: 0.5em 0.5em;
}
.navigacija a:hover {
color:#202020;
font-weight: bold;
}
.navigacija a:visited{
color: #202020;
font-weight: bold;
}
nav ul {
position: relative;
width: auto;
background: none;
height: auto;
bottom: 10em;
right: 5em;
display: flex;
float: right;
list-style-type: none;
z-index: 1;
}
.logo{
position: relative;
width: 20%;
left: 5.1em;
top: -2.5em;
}
.kontakttelmail {
position: relative;
top: -11.5em;
left: 83.9em;
font-family: 'RobotoLi', sans-serif;
word-spacing: 1em;
font-size: 15px;
opacity: 0.5;
}
.button {
background-color: white;
border: none;
color: #00A651;
padding: 20px 30px;
position: relative;
bottom: 85em;
left: 57.5em;
text-align: center;
border-radius: 35px;
text-decoration: none;
display: inline-block;
font-size: 21px;
font-family: 'RobotoB', sans-serif;
}
.zelenakrivina{
position: relative;
width: 90%;
right: -15em;
bottom: 8em;
padding: 0%;
margin: 0%;
}
.auto{
position: relative;
width: 49%;
right: -24.5em;
bottom: 44em;
padding: 0%;
margin: 0%;
}
.zelenisvg ul li{
position: relative;
bottom: 95em;
left: 80em;
text-decoration: none;
list-style-type: none;
}
.zelenisvg {
}
.Renault{
position: relative;
top: -0em;
right: 0.1em;
color: white;
font-size: 30px;
font-family: 'RobotoM', sans-serif;
padding: 0%;
margin: 0%;
}
.Megane{
position: relative;
top: -1.3em;
right: 1.1em;
color: white;
font-size: 40px;
font-family: 'RobotoB', sans-serif;
}
.lajna{
position: relative;
bottom: 124em;
left: 63.7em;
width: 11%;
}
.a30e{
position: relative;
top: -1.58em;
right: 0.7em;
color: white;
font-size: 100px;
font-family: 'RobotoB', sans-serif;
}
.nadan{
position: relative;
top: -11em;
right: -0.6em;
color: white;
font-size: 25px;
font-family: 'RobotoR', sans-serif;
}
.sivitext{
position: relative;
bottom: 22em;
font-family: 'RobotoB', sans-serif;
font-size: 60px;
left: 2.5em;
color: #212121;
}
.zelenitext{
position: relative;
bottom: 23.2em;
font-family: 'RobotoB', sans-serif;
font-size: 60px;
left: 2.5em;
color: #00A651;
}
.ispodnaslova{
position: relative;
bottom: 61.2em;
font-family: 'RobotoR', sans-serif;
font-size: 23.8px;
left: 6.3em;
color: #585858;
}
.scroll{
position: relative;
bottom: 110.9em;
/* left: 15em; */
width: 8%;
display: block;
margin-left: auto;
margin-right: auto;
}
.strelica{
position: relative;
bottom: 115.9em;
/* left: 15em; */
width: 4.2%;
display: block;
margin-left: auto;
margin-right: auto;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S T A R T - Rent-a-Car</title>
<link rel = "stylesheet"
type = "text/css"
href = "style.css" />
</head>
<header>
<img src="images/logo.png" alt="logo" class="logo">
<nav>
<ul class="navigacija" id="nav">
<li>Početna</li>
<li>Sva vozila</li>
<li>O nama</li>
<li>Kontkat</li>
</ul>
</nav>
<p class="kontakttelmail">email#gmail.com +382-68-222-333</p>
</header>
<body>
<div class="zelenisvg">
<img src="images/Path 1.svg" alt="zelenakrivina" class="zelenakrivina">
<img src="images/renault-migan-e1541771231987.svg" alt="renault" class="auto">
<p class="sivitext">Uz naša vozila ste</p>
<p class="zelenitext"> korak bliže cilju!</p>
<p class="ispodnaslova">Na vaš poziv dovodimo željeno<br>
vozilo na vašu adresu!</p>
<ul>
<li><p class="Renault">Renault</p></li>
<li><p class="Megane">Megane</p></li>
<li><p class="a30e">30€</p></li>
<li><p class="nadan">/na dan</p></li>
</ul>
<button onclick="location.href= 'Svavozila.html'" class="button">Rezervisi odmah!</button>
<img src="/images/Line 1.png" alt="linija" class="lajna">
<img src="images/Path 9.svg" alt="scroll" class="scroll">
<img src="/images/Path 2.png" alt="strelica" class="strelica">
</div>
</body>
<footer>
</footer>
Just like someone said in the comments section:
</body>
<footer>
</footer>
You can't have the footer outside the body element.
Take a look at this link:
https://css-tricks.com/snippets/html/html5-page-structure/
You'll understand how the HTML markup should look like :)
EDIT:
Your HTML seems to look better now but your CSS is breaking everything up. Why do you apply the position: relative to every single CSS rule you create ? Look https://jsfiddle.net/t23mkxz4/
I've removed position: relative and everything looks much better. Please - do some research on how to use the position: relative property :)
take a look at this link -> https://developer.mozilla.org/en-US/docs/Web/CSS/position
it's a great source of knowledge and examples. Good luch mate !
Related
so I'm doing the contact section of my website and everytime I left:15em the wrapper of the textboxes and labels, I get a horizontal scroll. How can I move the elements without getting the scroll?
function scrollDown() {
window.scrollBy(0, 600);
}
*{
margin: 0;
border: 0;
text-decoration: none;
list-style: none;
font-family: 'Roboto', 'Segoe UI', 'sans-serif';
scroll-behavior: smooth;
}
a{
padding: .3em;
color: #000;
}
li{
display: inline;
position:relative;
width: 74px;
height: 21px;
left: 130px;
top: 71px;
font-size: 18px;
line-height: 21px;
}
li a:hover{
color: #e48257;
transition: .3s;
}
.title{
font-weight: 700;
font-size: 90px;
position: absolute;
width: 462px;
height: 168px;
left: 171px;
top: 300px;
white-space: nowrap;
color: #252525;
}
span{
color:#e48257
}
img{
position: absolute;
height: 455px;
left: 763px;
top: 190px;
}
button:nth-of-type(2){
position: absolute;
width: 110px;
height: 45px;
left: 310px;
top: 526px;
background: #333C54;
border-radius: 20px;
color: white;
}
button:nth-of-type(1){
position: absolute;
width: 127px;
height: 45px;
left: 171px;
top: 526px;
border: 1px solid #333C54;
box-sizing: border-box;
border-radius: 20px;
background-color: white;
}
.about-us{
position: relative;
top: 54em;
}
.about-us-breadcrumb{
position: absolute;
width: 75px;
height: 21px;
left: 171px;
top: 23px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21px;
color: #8E8E8E;
}
.about-us-text{
position: absolute;
width: 530px;
height: 210px;
left: 171px;
top: 60px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 36px;
line-height: 42px;
color: #000000;
}
*::selection{
background-color: #e48257;
color:white;
}
.about-us-illustration{
position: absolute;
width: 418px;
height: 72px;
left: 851px;
top: 90px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #333C54;
}
s{
color: #333C54;
}
#keyframes strike{
0% { width : 0; }
100% { width: 100%; }
}
s::after{
content: ' ';
position: absolute;
top: 50%;
left: 0;
height: 10px;
background: black;
animation-name: strike;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
background-color: #333C54;
}
.contact-us{
position: relative;
top: 90em;
}
.have-any-questions{
position: absolute;
width: 135px;
height: 21px;
left: 653px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 18px;
color: #8E8E8E;
white-space: nowrap;
}
.contact-us-title{
position: absolute;
width: 345px;
height: 73px;
left: 570px;
top: 30px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #333C54;
}
input{
border: #000 1px solid;
width: 390px;
height: 40px;
}
.name .email .number{
padding-bottom: 3em;
top: 15em;
}
.form{
position: relative;
display: block;
top: 15em;
left: 15em;
}
<!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>Code Playground</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="header">
<div class="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</section>
<div class="center">
<p class="title">Where coding <br> is <span>fun</span></p>
<div class="buttons">
<button href="#" onclick="scrollDown()">Learn More</button>
<button href="#">Start</button>
</div>
<img src="illustration.png" alt="illustraton">
</div>
<section class="about-us">
<p class="about-us-breadcrumb">About Us</p>
<p class="about-us-text">Code Playground is a non-profit organization that helps aspiring programmers improve their coding skills by playing fun and exciting games. </p>
<p class="about-us-illustration"><span><s>Learn to Code</s><br>Code to Learn!</span></p>
</section>
<section class="contact-us">
<p class="have-any-questions">Have any questions?</p>
<p class="contact-us-title">Contact Us!</p>
<div class="form">
<p class="name">Name:</p><br>
<input type="text" class="name"><br>
<p class="email">Email:</p><br>
<input type="text" class="name"><br>
<p class="number">Contact Number: </p><br>
<input type="text" class="name">
</div>
</section>
<footer></footer>
<script src="app.js"></script>
</body>
</html>
It's a bad code, sorry, this is my first time doing this. Really, really, sorry.
This is some text bc stackoverflow think that my quesion is mostly code but I can't really add more text this is all I can add sorry again.
Your div with the "form" class has display: block, which means its width is the same as its container's constraints, in this case, the whole page.
But then you moved it left: 15em and it "pushed" the div to the right, beyond the page width.
There are two solutions with minimal change:
You can change it to display: inline-block
You can set an accurate width using calc() width: calc(100% - 15em)
I'm wanting to add a small profile picture to my navbar, similar to how StackOverflow has on the top. However, when I resize the image for the navbar, it appears that the "container" is still present because when I hover over a part of the navbar that does not include the image, my page acts as if I hovered over the image. How do I fix this?
Image of error: https://imgur.com/a/jqzVeeK
Codepin of error: https://codepen.io/dansbyt/pen/ZEWvdwG
CSS:
.logo{
position: absolute;
left: 2%}
.money{
position: absolute;
top: 15%;
right: 6%;
font-family: 'Noto Sans JP', sans-serif;
font-size: x-large;
color: white}
.profile{
position: absolute;
top: 1%;
right: 0%}
.profile img{float:right}
.navbar{
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
.navbar_links{
margin-left: 21%;
position: absolute;
width: 78%}
.navbar_links a{
padding: 1% 1%;
display: block;
float: left;
font-family: 'Noto Sans JP', sans-serif;
font-size: x-large;
text-decoration: none;
color: white;}
.navbar_links a:hover {background-color: #3F5328}
.navbar_links span{position:relative; bottom:5px}
HTML:
<div class="navbar">
<div class="logo"><img src="http://mrdansby.com/Resources/logo.png" style="width:27%; height:auto"></div>
<div class="navbar_links">
<img style="width:30%" src="http://mrdansby.com/projects/icons/i_home.png"><span> Dash</span>
<div class="profile"><img src="http://mrdansby.com/Resources/ProfilePics/default.png" style="width:4%;border-radius:50%;object-fit: contain"></div>
<div class="money">$100</div>
</div>
</div>
Instead of .navbar_links a{ use .navbar_links > a{. You do not want all a to have a hover effect and so on which was affecting the avatar.
see working code below (width makes it appear smaller here)
.logo{
position: absolute;
left: 2%}
.money{
position: absolute;
top: 15%;
right: 6%;
font-family: 'Noto Sans JP', sans-serif;
font-size: x-large;
color: white}
.profile{
position: absolute;
top: 1%;
right: 0%}
.profile img{float:right}
.navbar{
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
.navbar_links{
margin-left: 30%;
position: absolute;
width: 78%}
.navbar_links > a{
padding: 1% 1%;
display: block;
float: left;
font-family: 'Noto Sans JP', sans-serif;
font-size: x-large;
text-decoration: none;
color: white;}
.navbar_links > a:hover {background-color: #3F5328}
.navbar_links span{position:relative; bottom:5px}
<div class="navbar">
<div class="logo"><img src="http://mrdansby.com/Resources/logo.png" style="width:27%; height:auto"></div>
<div class="navbar_links">
<img style="width:30%" src="http://mrdansby.com/projects/icons/i_home.png"><span> Dash</span>
<div class="profile">
<img src="http://mrdansby.com/Resources/ProfilePics/default.png" style="width:4%;border-radius:50%;object-fit: contain">
</div>
<div class="money">$100</div>
</div>
</div>
I found the answer to my problem. I should resize the div, not the image. See below.
.profile{
position: absolute;
width: 4%;
top: 1%;
right: 0%}
.profile img{float:right; max-width: 100%; max-height: 100%;display: block;}
I have an image where 3 words are on, but I can't get the 3rd on it because it will not go in the position I want it. Here's the picture with words.
#clubname {
position: absolute;
margin-left: 26%;
color: #FFF;
line-height: 0px;
font-family: 'Knul-Bold';
}
#pacoins {
position: relative;
line-height: 84px;
margin-left: 13%;
max-width:5%;
max-height:5%;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
}
#myclub {
position: relative;
margin-left: 30%;
line-height: 0px;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
color: black;
}
<img src="http://packsimulator.nl/img/PAClubCover.png" style="position:absolute;">
<p id="clubname">Julan FC</p>
<p id="pacoins">97.000</p>
<p id="myclub">My Club</p>
As you can see 'My Club' isn't after the blue icon. Where it should be.
wrap these with a container/wrap div then use position:relative/absolute
.wrap {
position: relative;
width:400px /* width of image */
}
img {
position: absolute
}
p {
position: absolute;
color: #FFF;
line-height: 0;
font-family: 'Knul-Bold';
z-index: 1;
font-size: 17px
}
#clubname {
left: 40%;
}
#pacoins{
left: 25%;
top:22px;
}
#myclub {
left: 55%;
top:22px;
}
<div class="wrap">
<img src="http://packsimulator.nl/img/PAClubCover.png" />
<a href="#profile">
<p id="clubname">Julan FC</p>
</a>
<a href="#pacoins">
<p id="pacoins">97.000</p>
</a>
<a href="#club">
<p id="myclub">My Club</p>
</a>
</div>
You have to use float:left;.
Change your css to be like this
#pacoins {
position: relative;
line-height: 48px;
margin-left: 20%;
max-width: 5%;
max-height: 5%;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
float:left;
}
#myclub {
position: relative;
margin-left: 42%;
line-height: 84px;
font-family: 'Knul-Bold';
font-size: 17px;
color: black;
}
Working JSFiddle here https://jsfiddle.net/dotcgtuc/1/
Hope this helps.
You will need to position it with position: absolute;. For example
#clubname {
position: absolute;
margin-left: 26%;
color: #FFF;
line-height: 0px;
font-family: 'Knul-Bold';
}
#pacoins {
position: relative;
line-height: 84px;
margin-left: 13%;
max-width:5%;
max-height:5%;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
}
#myclub {
position: absolute;
left: 40%;
top: 45px;
line-height: 0px;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
color: black;
}
<img src="http://packsimulator.nl/img/PAClubCover.png" style="position:absolute;">
<p id="clubname">Julan FC</p>
<p id="pacoins">97.000</p>
<p id="myclub">My Club</p>
OK, you have a couple things going on here that aren't quite recommended, but with reworking your html & css I believe I've produced the result you're looking for.
First, you're embedding paragraph tags <p> in anchor tags <a> - this is only HTML5 compatible because the p is a block element while anchor is inline. I'd suggest using span tags how you have it.
Secondly, your CSS uses percentages to place these elements - so once a browser resize takes place, your elements will all be thrown off. Putting this information together, I believe we can achieve the results you are looking for:
CSS
#clubname {
position: absolute;
top: 15px;
left: 255px;
color: #FFF;
font-family: 'Knul-Bold';
}
#pacoins {
position: relative;
top: 30px;
left: 100px;
max-width:5%;
max-height:5%;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
}
#myclub {
position: relative;
left: 200px;
top: 32px;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
color: white;
}
HTML
<img src="http://packsimulator.nl/img/PAClubCover.png" style="position:absolute;">
<span id="clubname">Julan FC</span>
<span id="pacoins">97.000</span>
<span id="myclub">My Club</span>
Fiddle
I have made my YouTube video in my main div (container_wrapper) responsive. However, when the browser window is at full screen, the bottom of the video is cut off by the div below it (footer).
Question: How can I center my responsive YouTube video in the middle (both horizontally and vertically, so that it is equal on all sides) of my main div (container_wrapper) without having to make it bigger, or having to mess with the other div (footer)?
I would also like it if the video could keep the same aspect ratio and not have to be shrunk in height or width. Thanks!
Here is my HTML Code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hyperdog Productions</title>
<link href="css/stylesheet5.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div id="navigation_bar">
<span>Hyperdog Productions</span>
<ul class="navbar_list">
<li class="nav_list" id="about"><a class="nav_link" href="about.html">About</a></li>
<li class="nav_list" id="short_films"><a class="nav_link" href="films.html">Short Films</a></li>
<li class="nav_list" id="cast/crew"><a class="nav_link" href="other.html">Cast/Crew</a></li>
<li class="nav_list" id="contact_us"><a class="nav_link" href="contact_us.html">Contact Us</a></li>
<li class="nav_list" id="other"><a class="nav_link" href="other.html">Other</a></li>
</ul>
</div> <!--End of NAVIGATION_BAR-->
<main id="container">
<div id="container_wrapper">
<div id="video" class="video-container">
<iframe class="trouble_in_smalls" height: 640px width: 1351px src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
</div>
</div> <!--End of CONTAINER_WRAPPER-->
<div id="footer">
</div> <!--End of FOOTER-->
</main> <!--End of MAIN-->
<footer id="copyright">
<img src="images/facebook2.png" alt="fbicon" title="Like Us on Facebook" />
<p class="copyright2">Copyright Andrew Myers © 2015. All Rights Reserved.</p>
</footer> <!--End of COPYRIGHT-->
</div> <!--End of WRAPPER-->
</body>
</html>
CSS Code:
#font-face {
font-family: "Lato-Regular";
src: url("../fonts/Lato-Regular/Lato-Regular.ttf");
src: url("../fonts/Lato-Regular/Lato-Regular.woff");
}
#font-face {
font-family: "PT-Sans";
src: url("../fonts/PT-Sans/PTS55F.ttf");
src: url("../fonts/PT-Sans/PTS55F.woff");
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
height: 1440px;
width: 100%;
font-size: 0;
overflow-x: none;
}
body {
font-size: 62.5%;
min-width: 575px;
}
.wrapper {
height: 1440px;
}
#navigation_bar {
height: 90px;
width: 100%;
text-align: center;
background-color: #1d1d1d;
}
main {
height: 1300px;
}
#container_wrapper {
height: 900px;
width: 100%;
background-image: url("../images/landscape.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
overflow: hidden;
padding: 50px;
}
#footer {
height: 400px;
width: 100%;
background-image: url("../images/bg.png");
background-repeat: repeat;
text-align: center;
}
#copyright {
height: 50px;
width: 100%;
background-color: #1d1d1d;
}
.logo {
padding: 9px 12px;
margin: 0px;
position: absolute;
float: left;
left: 20%;
top: 25px;
font-family: "PT-Sans", "Calibri Light", sans-serif;
font-size: 24px;
letter-spacing: 10px;
text-align: center;
text-decoration: none;
text-shadow: 8px 8px 8px #000000;
text-transform: uppercase;
color: #AF7817; /* Cool Light Blue Color: #708090 */
}
.logo:hover {
color: #B8860B;}
.navbar_list {
position: absolute;
float: right;
right: 20%;
top: 16.25px;
text-align: center;
vertical-align: middle;
}
.navbar_list li {
list-style-type: none;
list-style: none;
float: left;
display: inline;
padding: 9px 12px;
margin: 0px;
font-size: 10px;
}
.nav_link:link {
padding: 10px;
margin: 0px;
font-family: "Lato-Regular", "PT-Sans", "Calibri Light", sans-serif;
font-size: 1.2em;
line-height: 3.7em !important;
text-transform: uppercase;
text-decoration: none;
text-align: center;
color: #ffffff;
}
.nav_link:hover {
color: #a3a3a3;
}
.trouble_in_smalls {
margin: 0px auto;
position: relative;
display: block;
top: 130px;
height: 640px;
width: 1351px;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 5%;
}
.footertext {
font-family: "PT-Sans", Verdana, "Calibri Light", sans-serif;
font-size: 24px;
line-height: 18px;
color: #878787;
text-align: center;
margin: 0px;
float: left;
position: relative;
left: 50%;
top: 5%;}
.left {
text-align: center;
position: relative;
left: 5px;
top: 15px;}
img {
height: 50%;
vertical-align: middle;
position: relative;
float: left;
left: 15%;
top: 25%;
}
.copyright2 {
font-family: "PT-Sans", Verdana, "Calibri Light", sans-serif;
font-size: 12px;
line-height: 18px;
color: #878787;
text-align: center;
margin: 0px;
float: left;
position: relative;
left: 25%;
line-height: 50px;
vertical-align: middle;
}
#media (max-width: 1750px) {
.logo {
margin-left: 15px;
position: relative;
float: inherit;
left: inherit;
}
.navbar_list {
padding-left: 0px;
position: relative;
float: inherit;
display: inline-block;
right: inherit;
}
}
At first I would get rid of some of the height-values on your divs like on the html and body tag. It will make everything more complicated as your project grows and in a responsive context.
If you don't care about supporting older browsers like IE9 and lower you could use flexbox. There is a pretty good guide for it on CSS Tricks:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope i could help you!
I have my code set up so I have the hero image at the bottom and the overlay on top with the text and button in overlay. I also have the navigation bar with a z-index but for some reason the button for my resume in overlay isn't working.
HTML
<div id="header">
<a href="index.html"><div id="leftHeader">
<img src="assets/logo2.jpg" alt="Logo" style="width:65px;height:65px">
<h1>Amanda Farrington</h1>
</div>
<div id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Notes</li>
</ul>
</div>
</div>
<div id="hero">
<div id="heroImage">
<img src="assets/trees.jpg" alt="trees" style="width:100%;height:10%">
</div>
<div id="overlay">
<h2>Amanda Farrington</h2>
<h3>Graphic Artist | Web Designer</h3>
View Resume
</div>
</div>
CSS
#header {
color: #D7DADB;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size : 15px;
text-align: left;
width: 100%;
padding-left: 3em;
position: relative;
height: 15%;
box-sizing: border-box;
padding-top: 1em;
}
#header img
{
float: left;
padding-left: 3em;
}
h1{
width: 9em;
float: left;
padding-left: 0.5em;
color: #45CCCC;
padding-bottom: 1px;
}
#nav {
width: 50%;
margin:0;
padding:0;
text-align: right;
color: red;
font-size:20px;
float: right;
padding-right: 2em;
z-index: 99;
}
#nav ul {
padding: 1px;
}
#nav li {
display: inline;
padding: 38px;
}
#nav li a {
color: #2C3E50;
text-decoration: none;
}
#nav li a:hover {
color: #45CCCC;
}
/*----------hero image styles-------------*/
#hero{
padding-top: 25em;
width: 100%;
height: 30em;
position: relative;
z-index: -1;
}
#heroImage
{
top: 9%;
width: 100%;
z-index: 1;
position: absolute;
}
#overlay{
width: 34em;
top: -15%;
margin-left: 30%;
z-index: 2;
position: relative;
clear: left;
}
h2{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 60px;
float: center;
color: white;
opacity: 1.0;
text-shadow: 2px 2px 3px #000000;
text-align: center;
}
h3{
width: 100%;
position: relative;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 30px;
color: #e5e5e5;
opacity: 1.0;
text-shadow: 2px 3px 2px #000000;
text-align: center;
}
a.down{
z-index: 100;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-decoration: none;
color: #181b1e;
background: #45CCCC;
position: relative;
padding: 0.6em 0.2em;
font-size: 1.2em;
-webkit-border-radius: 6px;
width: 30%;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
a.down:hover{
text-decoration: underline;
color: white;
}
Because z-index works only on elements which are NOT set asposition: static. Bear in mind that every element is set as default to position:static.
Try set to position:absolute; or relative your element.
Also all other types of positioning, like position:fixed, position:sticky.
So I've taken a look at your code and the reason your button doesn’t work is because the div with the ID of #hero (which contains the button) is below the body because it has a z-index of -1.
Set the z-index for #hero to 0 or higher and the button will work.
#hero {
padding-top: 25em;
width: 100%;
height: 30em;
position: relative;
z-index: 0;
}
Check out this JS Fiddle I've created for you:
https://jsfiddle.net/8fqwr6ca/
Edit: Oh, and I forgot to mention–since you want the image to be below, set the #hero 's z-index to 1, set #heroImage to 0, and overlay to 2. That should do the trick (if what I think you want is correct).