I correctly linked my pdf to my project and spelled everything right but when I hover over it and click it, nothing happens. Im not sure if its something to do with the positioning of everything?
body {
margin: 0px;
padding: 0px;
height: 100%;
background: white;
}
/*----------header styles-------------*/
#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;
}
#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: -5%;
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: white;
opacity: 1.0;
text-shadow: 3px 3px 2px #000000;
text-align: center;
}
a.down{
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-decoration: none;
color: #181b1e;
background: #45CCCC;
position: relative;
padding: 0.6em 1em;
font-size: 1.2em;
-webkit-border-radius: 6px;
width: 100%;
}
a.down:hover{
text-decoration: underline;
}
<body>
<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>
It's the z-index -1 on #hero - it's basically making it under the body. Change that to 0 or remove it and you should be good.
Related
I have a home page that has two background colours. What I would like for the navbar li's is that when the screen resizes, and the nav bar text enters the part of the screen where the background is blue, I'd like it to change to grey (the same colour as the other part of the screen)...
Now, I know mixed-blend-mode is a thing, but I don't like how it inverts the colour... Is there a way to specify the colour of mixed-blend-mode? Or are there any other alternatives?
html, body {
margin: 0;
padding: 0;
/*background-color: #eeeeee;*/
}
div {
display: block;
}
ul {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
#desktop-navbar {
text-transform: uppercase;
background-color: transparent;
width: 100%;
height: 90px;
position: fixed;
z-index:1;
}
#desktop-logo{
float: left;
}
.logo {
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
margin-left: 1%;
font-family: Thasadith;
font-weight: 700;
letter-spacing: 3px;
width: auto;
}
#desktop-nav-wrapper {
height: inherit;
padding: 0 45px;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
}
#home {
height: 700px;
position: relative;
}
#home-container {
display: flex;
height: inherit;
}
#home-content {
height: auto;
width: 100%;
background: linear-gradient(90deg, #314455 63%, #dddddd 0%);
}
#desktop-nav-wrapper nav ul {
float: right;
padding-top: 35px;
font-size: 16px;
}
#desktop-nav-wrapper nav li {
position: relative;
display: inline-block;
padding-left: 35px;
color: #000000;
font-family: Thasadith;
font-weight: 900;
}
<div id="desktop-navbar"">
<div id="desktop-nav-wrapper">
<h3 id = "desktop-logo" class="logo"><i class="fas fa-highlighter"></i></h3>
<nav>
<ul id = "desktop-nav-content">
<li>Casa</li>
<li>Sobre Mi</li>
<li>Servicio</li>
<li>Galería</li>
<li>Contacto</li>
</ul>
</nav>
</div>
</div>
<div id="home">
<div id="home-container">
<div id="home-content">
</div>
</div>
</div>
Since you gradient is covering the whole page width, you can then color your text with the opposite gradient and you make it fixed to simulate the changing color effect:
html,
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
#desktop-navbar {
text-transform: uppercase;
background-color: transparent;
width: 100%;
height: 90px;
position: fixed;
z-index: 1;
}
#desktop-logo {
float: left;
}
.logo {
font-size: 42px;
font-weight: 300;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
margin-left: 1%;
font-family: Thasadith;
font-weight: 700;
letter-spacing: 3px;
width: auto;
}
#desktop-nav-wrapper {
height: inherit;
padding: 0 45px;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
color: black;
letter-spacing: 2px;
}
#home {
height: 700px;
position: relative;
}
#home-container {
display: flex;
height: inherit;
}
#home-content {
height: auto;
width: 100%;
background: linear-gradient(90deg, #314455 63%, #dddddd 0%);
}
#desktop-nav-wrapper nav ul {
float: right;
padding-top: 35px;
font-size: 16px;
}
#desktop-nav-wrapper nav li {
position: relative;
display: inline-block;
padding-left: 35px;
color: #000000;
font-family: Thasadith;
font-weight: 900;
/*relevant code*/
background: linear-gradient(90deg, #dddddd 63%, #000 0%) fixed;
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/**/
}
<div id="desktop-navbar">
<div id="desktop-nav-wrapper">
<h3 id="desktop-logo" class="logo"><i class="fas fa-highlighter"></i></h3>
<nav>
<ul id="desktop-nav-content">
<li>Casa</li>
<li>Sobre Mi</li>
<li>Servicio</li>
<li>Galería</li>
<li>Contacto</li>
</ul>
</nav>
</div>
</div>
<div id="home">
<div id="home-container">
<div id="home-content">
</div>
</div>
</div>
I'm fairly new to html, and when I tried to create a webpage, I encountered a problem. I managed to make a navigation bar with a drop down menu directly under the "Games" section, but if I scroll down and open the drop down menu, it no longer opens directly under the navigation bar. This is my HTML code.
<div class="wrapper">
<div id="main-title">
<header>
<h1>Max Reviews</h1>
</header>
</div> <!-- Title box-->
<div id="nav"> <!-- Navigation Bar -->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About Me</li> <!-- Link to about page -->
<li class="drop">
<p>Games</p>
<div class="drop-content">
<p>Red Faction: Guerrilla</p> <!-- Contains links to the respective pages -->
<p>Way of the Samurai 3</p>
<p>Singularity</p>
</div>
</li>
<li>Reviews</li>
<li>External Store</li> <!-- Link to external site -->
<li>Videos</li> <!-- Contains links to Youtube -->
</ul>
</nav>
</div>
<div class="image"> <!-- Banner-->
<a href="singularity.html">
<img src="modified singularity aging 1.jpg" alt="singularity">
<h2><span>Recommended Game of the Month</span></h2>
</a>
</div>
<div id="home-content"><p>Learn more about the site ☛here☚</p></div>
<div id="footer">
<p>© Copyright 2016-2017. All images here were taken and edited by me. All rights reserved. Games featured here might not be suitable for all audience.</p>
</div>
</div>
And this is the stylesheet.
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
position: fixed;
top: 155px;
border: 1px solid black;;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
Please help me as I've been trying to solve this problem for 2 days. Also, this is my first time posting a question here, so forgive me if I indented my code wrongly, or if I inadvertently violated some of the rules of Stack Overflow.
The reason for this behaviour is that your drop-content has position:fixed on hover.
From MDN:
…an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor… Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.
Working example on JSFiddle and here is what I've changed:
#nav ul {
/*overflow: hidden;*/
}
.drop:hover .drop-content {
/*position: fixed;
top: 155px;*/
position: absolute;
}
Update CSS to
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
2 changes done.
Removed overflow:hidden in #nav ul
Keot display:block only in .drop:hover .drop-content
How would i be able to align my navigation links to the header?
This is what i currently have:
But, I'd really like to have the links vertically aligned within the header, like this:
How would i do this?
Below is my CSS & HTML.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
}
.wrapper {
width: 1100px;
max-width: 90%;
margin: 0 auto;
}
#top_header {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
background-color: #26ABF5;
height: 70px;
vertical-align: middle;
}
#logo_top {
display: inline-block;
width: 53px;
padding-top: 8px;
}
#main_nav {
display: inline-block;
font-size: 12px;
padding-left: 170px;
}
#main_nav a {
color: #fff;
font-weight: 400;
text-decoration: none;
margin-left: 6em;
}
.button {
float: right;
justify-content: center;
display: flex;
width: 101px;
margin-top: 14px;
padding-top: 9px;
padding-bottom: 9px;
border-radius: 2px;
background-color: #fff;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #26abf5;
font-size: 13px;
font-weight: 600;
}
<body>
<header id="top_header">
<div class="wrapper">
<img id="logo_top" draggable="false" src="images/logo1.png">
<nav id="main_nav">
FORSIDE
HVAD TILBYDER VI?
PRISER
OM OS
</nav>
<a class="button" href="#">LOG IND</a>
</div>
</body>
Use line-height for vertical-align. Im add the line in #main_nav.
Edit: add float: left; for your logo image.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
}
.wrapper {
width: 1100px;
max-width: 90%;
margin: 0 auto;
}
#top_header {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
background-color: #26ABF5;
height: 70px;
vertical-align: middle;
}
#logo_top {
display: inline-block;
float: left;
width: 53px;
padding-top: 8px;
}
#main_nav {
display: inline-block;
font-size: 12px;
line-height: 70px;
padding-left: 170px;
}
#main_nav a {
color: #fff;
font-weight: 400;
text-decoration: none;
margin-left: 6em;
}
.button {
float: right;
justify-content: center;
display: flex;
width: 101px;
margin-top: 14px;
padding-top: 9px;
padding-bottom: 9px;
border-radius: 2px;
background-color: #fff;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color: #26abf5;
font-size: 13px;
font-weight: 600;
}
<body>
<header id="top_header">
<div class="wrapper">
<img id="logo_top" draggable="false" src="images/logo1.png">
<nav id="main_nav">
FORSIDE
HVAD TILBYDER VI?
PRISER
OM OS
</nav>
<a class="button" href="#">LOG IND</a>
</div>
</body>
I want to sharpen my HTML & CSS skills by recreating the Bootstrap homepage in pure HTML & CSS. I am almost finished, but I seem to be having trouble with my footer. Everything else is positioned the way I would like it, but everything on the footer shoots up to the top and middle of my page. Can anyone tell me what I am missing here?
HTML
<header>
<div class="top-bar">
<p>Aww yeah, Bootstrap 4 is coming!</p>
</div>
<nav>
<div class="nav-bar">
<div class="logo">
Bootstrap
</div>
<div class="left-nav">
<ul>
<li>Getting Started</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
<li>Customize</li>
</ul>
</div>
<div class="right-nav">
<ul>
<li>Themes</li>
<li>Expo</li>
<li>Blog</li>
</ul>
</div>
</div>
<nav>
</header>
</div>
<center>
<main>
<section>
<div class="head-component">
<div class="b-logo">
<p>B</p>
</div>
<div class="short-description">
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
</div>
<div class="download-button">
<button class="dwn">Download Bootstrap</button>
</div>
<div class="current">
<p>Currently v3.3.5</p>
</div>
</div>
</section>
<section>
<div class="mid-section">
<div class="mid-info">
<h2>Designed for everyone, everywhere.</h2>
<p>Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
</div>
<hr class="hz-line" />
<div class="column-left">
<img src="http://getbootstrap.com/assets/img/sass-less.png" />
<h4>Preprocessors</h4>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class="column-middle">
<img src="http://getbootstrap.com/assets/img/devices.png" />
<h4>One framework, every device.</h4>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div class="column-right">
<img src="http://getbootstrap.com/assets/img/components.png" />
<h4>Full of features</h4>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
<div class="clear"></div>
<hr class="hz-line" />
<div class="github">
<p>Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
</div>
<div class="github-button">
<button class="view-git">View the Github Project</button>
</div>
<div class="clear"></div>
<div class="spacer"></div>
<div class="clear"></div>
<div class="photo-section">
<hr class="hrln-full" />
<div class="second-mid-info">
<h2>Built with Bootstrap.</h2>
<p>Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing collection of examples or by exploring some of our favorites.</p>
</div>
<hr class="hz-line" />
<div class="photos">
<img src="http://expo.getbootstrap.com/thumbs/lyft-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/vogue-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/riot-thumb.jpg" />
<img src="http://expo.getbootstrap.com/thumbs/newsweek-thumb.jpg" />
</div>
<hr class="hz-line" />
<div class="expo-button">
<p>We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
<button class="expo">Explore the Expo</button>
</div>
<hr class="hrln-full" />
</div>
</div>
<div class="clearfooter"></div>
</section>
</main>
<div class="clear"></div>
<footer>
<p>Designed and built with all the love in the world by #mdo and #fat.
<br /> Maintained by the core team with the help of our contributors.
<br /> Code licensed under MIT, documentation under CC BY 3.0.</p>
<ul>
<li>Github</li>
<li>Examples</li>
<li>v2.3.2 docs</li>
<li>About</li>
<li>Expo</li>
<li>Blog</li>
<li>Releases</li>
</ul>
</footer>
</center>
CSS
*, *:before, *:after {
box-sizing: border-box;
}
html, body, #wrap {
height: 100%;
}
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #fff;
}
h1 {
font-size: 50px;
}
h2 {
font-size: 40px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 22px;
font-weight: 100px;
}
h5 {
font-size: 15px;
}
h6 {
font-size: 14px;
}
#container {}
ul {
list-style: none;
}
li {
list-style: none;
display: inline;
padding: 10px;
}
a {
list-style: none;
color: inherit;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
}
main {
padding-bottom: 150px;
display: block;
margin: 0 auto;
}
.top-bar {
margin: 0;
padding: 15px 0;
background-color: #0275D8;
text-align: center;
}
.top-bar p {
color: #fff;
font-size: 15px;
font-weight: 600;
text-align: center;
margin: 0;
}
.top-bar:hover {
margin: 0;
padding: 15px 0;
background-color: #0269C2;
text-align: center;
}
.nav-bar {
background-color: #fff;
position: relative;
color: #583F7E;
display: block;
width: 100%;
height: 50px;
}
.logo {
position: absolute;
font-size: 20px;
font-weight: 700;
color: #583F7E;
padding: 15px;
line-height: 0.8em;
margin-left: 100px;
}
.left-nav {
float: left;
font-size: 15px;
font-weight: 500;
text-align: center;
margin-left: 200px;
}
.right-nav {
float: right;
text-align: right;
font-size: 15px;
font-weight: 500;
margin-right: 120px;
}
.left-nav a:hover {
background-color: #f9f9f9;
}
.right-nav a:hover {
background-color: #f9f9f9;
}
.head-component {
background-color: #583F7E;
height: 700px;
display: block;
margin: 0 auto;
}
.b-logo {
margin: 0 auto;
padding-top: 5px;
width: 160px;
height: 300px;
display: block;
}
.b-logo p {
font-size: 130px;
font-weight: 700;
color: #fff;
border: 1px solid #fff;
border-radius: 25px;
text-align: center;
}
.short-description {}
.short-description p {
font-size: 30px;
color: #fff;
font-weight: 300;
width: 850px;
text-align: center;
display: block;
margin: 0 auto;
padding-top: 40px;
}
.download-button {
padding-top: 40px;
}
.dwn {
background: none;
font-size: 20px;
padding: 15px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.dwn:hover {
background: #fff;
font-size: 20px;
padding: 15px;
color: #583F7E;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.current p {
color: #9781A9;
font-size: 14px;
padding-bottom: 75px;
padding-top: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.mid-section {
height: 100%;
background-color: #fff;
display: block;
margin: 0 auto;
}
.mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
text-align: center;
display: block;
margin: 0 auto;
}
.mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
padding-bottom: 20px;
display: block;
margin: 0 auto;
text-align: center;
}
.hz-line {
width: 10%;
color: #f3f3f3;
opacity: 0.5;
}
.column-left {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-left img {
width: 100%;
}
.column-left p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-middle {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-middle img {
width: 100%;
}
.column-middle p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.column-right {
width: 32%;
float: left;
padding-top: 25px;
padding-left: 75px;
font-weight: 100;
color: #333;
}
.column-right img {
width: 100%;
}
.column-right p {
font-weight: 400;
font-size: 16px;
color: #555;
padding-bottom: 20px;
}
.clear {
clear: both;
}
.github {
padding-top: 15px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
text-align: center;
}
.github p {
font-weight: 400;
font-size: 18px;
color: #555;
padding-bottom: 20px;
text-align: center;
}
.view-git {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.view-git:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.hrln-full {
color: #f3f3f3;
opacity: 0.5;
}
.spacer {
height: 60px;
}
.second-mid-info {
padding-top: 75px;
font-weight: 300;
color: #333;
width: 900px;
display: block;
margin: 0 auto;
text-align: center;
}
.second-mid-info p {
font-weight: 400;
font-size: 22px;
color: #555;
text-align: center;
display: block;
margin: 0 auto;
padding-bottom: 30px;
}
.photo-section {
height: 100%;
display: block;
margin: 0 auto;
}
.photos {
padding: 30px;
padding-left: 115px;
}
.photos img {
width: 23%;
}
.expo-button {
padding-top: 15px;
padding-bottom: 120px;
font-weight: 300;
color: #333;
width: 1024px;
display: block;
margin: 0 auto;
}
.expo-button p {
font-weight: 300;
font-size: 22px;
color: #555;
padding-bottom: 30px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo {
background: none;
font-size: 20px;
padding: 10px;
color: #583F7E;
font-weight: 400;
border: 1px solid #583F7E;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.expo:hover {
background: #583F7E;
font-size: 20px;
padding: 10px;
color: #fff;
font-weight: 400;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
display: block;
margin: 0 auto;
}
.clearfooter {
height: 130px;
clear: both;
}
footer {
text-align: center;
bottom: 0;
height: 100%;
left: 0;
width: 100%;
display: block;
margin: 0 auto;
}
footer p {
text-align: center;
}
footer ul {
position: relative;
}
footer li {
color: #489FD6;
}
footer li:hover {
color: #23517C;
text-decoration: underline;
}
footer a {}
From what I can tell I believe its because of two main reasons.
You have set fixed heights for elements with content that is height than the fixed height.
.mid-section {
height: 500px;
background-color: #fff;
margin: 0;
}
.photo-section {
height:500px;
}
The footer has position: absolute but isn't contained by a parent with position: relative. If you would like the footer to stick to the bottom use position: fixed instead.
footer {
text-align: center;
bottom: 0;
height: 100px;
left: 0;
position: absolute;
width: 100%;
}
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).