Max Gerritsen Max Gerritsen - 2 months ago 6
CSS Question

Div content align problems

I don't have much experience with HTML and CSS. I've got some problems with aligning my div content. The text (Oculus Rift, Next-generation Virtual Reality) has to be in line with de mouse scroll button, in the bottom right. But the text overlaps the div above (my sticky header). I just can't get it to work. I've hosted the site over here. I want it to look like this.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>InGadget | D&#233; site voor al uw gadget nieuws!</title>

<meta name = "keywords" content = "InGadget | D&#233; site voor al uw gadget nieuws!" />
<meta name = "description" content = "InGadget is d&#233; site voor alles over gadgets." />
<meta name="viewport" content="width=device-width">


<link href="main.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/animatescroll.js"></script>

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

<script src="js/classie.js"></script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 100,
header = document.querySelector(".navbar");
if (distanceY > shrinkOn) {
classie.add(header,"scroll");
} else {
if (classie.has(header,"scroll")) {
classie.remove(header,"scroll");
}
}
});
}
window.onload = init();
</script>

<script>
function logoSwitch () {
$('.altLogo').each(function() {
$(this).css('top',
$('.startLogo').offset().top - $(this).closest('.row').offset().top
);
});
};

$(document).scroll(function() {logoSwitch();});

logoSwitch();
</script>

</head>
<body>
<div class="navbar">
<div class="container clearfix">
<a id="logo" href="index.html"></a>
<div class="nav">
<a href="index.html">Home</a>
<a href="#">Nieuws</a>
<a href="#">Forum</a>
<a href="#">Things I &#10084;</a>
<a href="#">Contact</a>
</div>
</div>
</div>
<div class="header">
<div class="header-content">
<h1>Oculus Rift<br>
Next-generation Virtual Reality.</h1>
<div class="mouse-icon" onclick="$('.section1').animatescroll();" style="cursor:pointer;">
<div class="wheel"></div>
</div>
</div>
</div>

<div class="section1">
Placeholder
</div>

</body>
</html>


CSS:

/* BASICS */
@font-face {
font-family: Neusa-SemiBold;
src: url(fonts/neusa/Neusa-SemiBold.otf);
}

@font-face {
font-family: Neusa-ExtraBold;
src: url(fonts/neusa/Neusa-ExtraBold.otf);
}

* {
margin: 0;
padding: 0;
}

.container {
width: 80%;
margin: auto;
}

.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}

/* NAVBAR */
.navbar {
width: 100%;
height: 150px;
position: fixed;
z-index: 999;
-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
-ms-transition: height 0.6s;
-o-transition: height 0.6s;
transition: height 0.6s;
}

#logo {
width: 275px;
height: 150px;
background: transparent url(images/logo.png) no-repeat;
background-size: contain;
float: left;
}

.scroll #logo {
background-image: url(images/logo2.png);
}

.nav {
float: right;
right: 0px;
}

.nav a {
line-height: 75px;
padding-left: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 20px;
text-decoration: none;
color: #ffffff;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}

.nav a:hover {
text-decoration: underline;
}

/* STICKY NAVBAR */

.navbar.scroll {
background-color: #ffffff;
height: 75px;
}

.navbar.scroll#logo {
width: 140px;
height: 140px;
background: transparent url(images/logo2.png) left top no-repeat;
}

.navbar.scroll .nav a {
color: #000000;
line-height: 75px; }

/* SECTIONS */
.header {
background:
linear-gradient(to top right,
rgba(255, 65, 54, 0.5),
rgba(24, 0, 255, 0.5)
),
url(nieuws/VR/images/oculusrift.jpg) fixed;
background-size: cover;
height: 100vh;
width: 100%;
}

.header-content {
width: 80%;
margin: auto;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #ffffff;
text-align: right;
}

.section1 {
margin-top: 20px;
background-color: #f2f2f2;
height: 500px;
}

/* MOUSE ICON */
.mouse-icon {
border: 4px solid #ffffff;
border-radius: 32px;
height: 50px;
width: 30px;
}

.mouse-icon .wheel {
-webkit-animation-name: scrolling;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
animation-name: scrolling;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-play-state: running;
}

.mouse-icon .wheel {
border-radius: 10px;
background: #ffffff;
width: 6px;
height: 10px;
top: 4px;
margin-left: auto;
margin-right: auto;
position: relative;
}

@-webkit-keyframes scrolling {
0% { top:5px; opacity: 0;}
30% { top:10px; opacity: 1;}
100% { top:25px; opacity: 0;}
}

@keyframes scrolling {
0% { top:5px; opacity: 0;}
30% { top:10px; opacity: 1;}
100% { top:25px; opacity: 0;}
}

Answer

Put the 'header-content' div inside another div with class 'header-content-container' and add this CSS:

.header-content-container {
      position: absolute;
      bottom: 0;
      width: 100%;
}