I've got the below layout and all I'm trying to do is get the height of the boxes at the bottom to be sized by the space available in the browser rather than their content.
I thought it'd be a simple 'height:33%' but looks like it'll be something to do with flex box (which I've tried loads of variations on and have not succeeded)?
Help me Obi-Wan Kenobi's you're my only hope...
html:
</head>
<body>
<div class="parent">
<h1>Right title</h1>
<h2></h2>
<div class="child">
<h3>Left title</a><br></h3>
</div>
</div>
<div class="box">
<p> First Button</a>
</div>
<div class="box">
<p> Second Button</a>
</div>
<div class="box">
<p> Third Button</a>
</div>
</div>
</body>
css
body {
background: #fff;
color: #666666;
font-family: "Open Sans", sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0px;
}
a {
color: #2822a9;
}
a:hover, a:active, a:focus {
color: red;
outline: none;
text-decoration: none;
}
.parent {
width:100%;
padding:10px;
background-color:#CCCCCC;
position:relative;
}
h1 {
font-size: 5vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: right;
}
h2 {
font-size: 4vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: right;
}
.child {
padding: 10px;
width:50%;
height:100%;
background-color:#999999;
position:absolute;
top:0px;
left:0px;
}
h3 {
font-size: 1.75vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: left;
padding: 10;
}
h4 {
font-size: 2vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: left;
padding: 10;
}
.box {
line-height: 1vh;
font-size:2vw;
text-align: center;
border: 1px solid #e6e6e6;
position: relative;
}
.btn-get-started {
font-family: "Poppins", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 2rw;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 50px;
transition: 0s;
margin: 10px;
border: 2px solid blue;
color: blue;
width: 25%;
}
.btn-get-started:hover {
border: 2px solid #2dc997;
}
table, tr, th, td {
position: relative; top: 0; bottom: 0; left: 0; right: 0;
border: 1px solid black;
width:100%;
height:100%
text-align: center;}
Make sure the html element is actually occupying the full screen height. You can then use height: 33% as you mentioned on the box divs. Below I used 28% below to make room for the header "parent" div. I also corrected some html tags.
html
{
height: 100%;
}
body {
background: #fff;
color: #666666;
font-family: "Open Sans", sans-serif;
width: 100%;
height: 100%;
margin: 0;
padding: 0px;
}
a {
color: #2822a9;
}
a:hover, a:active, a:focus {
color: red;
outline: none;
text-decoration: none;
}
.parent {
width:100%;
padding:10px;
background-color:#CCCCCC;
position:relative;
}
h1 {
font-size: 5vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: right;
}
h2 {
font-size: 4vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: right;
}
.child {
padding: 10px;
width:50%;
height:100%;
background-color:#999999;
position:absolute;
top:0px;
left:0px;
}
h3 {
font-size: 1.75vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: left;
padding: 10;
}
h4 {
font-size: 2vw;
font-weight: 100;
text-transform: ;
color: #2822a9;
text-align: left;
padding: 10;
}
.box {
line-height: 1vh;
font-size:2vw;
text-align: center;
border: 1px solid #e6e6e6;
position: relative;
height: 28%;
}
.btn-get-started {
font-family: "Poppins", sans-serif;
text-transform: uppercase;
font-weight: 500;
font-size: 2rw;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 50px;
transition: 0s;
margin: 10px;
border: 2px solid blue;
color: blue;
width: 25%;
}
.btn-get-started:hover {
border: 2px solid #2dc997;
}
table, tr, th, td {
position: relative; top: 0; bottom: 0; left: 0; right: 0;
border: 1px solid black;
width:100%;
height:100%
text-align: center;
}
<body>
<div class="parent">
<h1>Right title</h1>
<div class="child">
<h3>Left title</h3>
</div>
</div>
<div class="box">
<p>First Button</p>
</div>
<div class="box">
<p>Second Button</p>
</div>
<div class="box">
<p>Third Button</p>
</div>
</body>
Related
I've tried having it be an unordered list item without it being a paragraph element, I've tried putting it in a div as well. For some reason I'm just unable to get those to be stacked with the smaller "test" under the bigger TestTest. Seems to work in the rest of the page if I have it as a separate div, just not sure of the reason why it's not working in the footer.
Here is my HTML and CSS:
body {
background-color: #414141;
/* background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden; */
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
width: 0px;
font-family: Arial;
}
#font-face {
font-family: ubuntu-medium;
src: url(/fonts/ubuntu-medium.ttf);
}
#media (max-width: 7680px) {
body {
background: url(/images/background.jpg) no-repeat center center fixed;
background-size: cover;
resize: both;
overflow: scroll;
overflow-x: hidden;
}
}
#media (max-width: 800px) {
body {
background: url(/images/mobilebackground.jpg) no-repeat center center fixed;
}
}
#NavSection {
margin-top: 3%;
}
#MainNav {
position: left;
margin-left: 11%;
}
#Menu li {
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#Menu a:hover {
text-decoration-color: #414141;
text-underline-offset: 0.12em;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 4px;
box-shadow: 0px 13px 4px -3px rgba(65, 65, 65, 0.616);
}
hr {
margin: 0px;
border: 2px solid red;
width: auto;
}
a {
color: #414141;
text-decoration: none;
}
a:active {
color: #ff0000;
}
#SiteTitle {
margin-left: 0.5%;
}
#TestTest {
font-family: Impact;
font-weight: normal;
font-size: 30px;
color: #ffffff;
text-decoration: underline;
text-decoration-color: #414141;
text-decoration-thickness: 2px;
text-underline-offset: 0.08em;
}
#Japan {
color: red;
}
ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#SecondNav {
float: right;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
font-size: 15px;
margin-right: 11%;
}
#SecondMenu a:hover {
text-decoration: overline 4px solid #414141;
box-shadow: 0px -13px 4px -3px rgba(65, 65, 65, 0.616);
}
#SecondMenu li {
margin-bottom: 5px;
font-family: ubuntu-medium;
font-weight: normal;
color: #414141;
padding: 0px 10px;
display: inline;
font-size: 15px;
list-style-type: none;
}
#ContentDiv {
width: 70%;
height: 40%;
position: absolute;
top: 30%;
left: 15%;
transform: translateX(0%);
background-color: rgba(255, 0, 0, 0.4);
}
#ContentSection {
width: 90%;
height: 70%;
position: absolute;
top: 15%;
left: 5%;
background-color: rgba(255, 255, 255, 0.9);
}
#Content {
margin: 3%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 7%;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
}
#FooterTitle {
float: right;
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
float: right;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div id="NavSection">
<div id="TopNav">
<nav id="MainNav">
<ul id="Menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<hr />
<div id="SecondNavSection">
<nav id="SecondNav">
<ul id="SecondMenu">
<li>Archives</li>
<li>Categories</li>
</ul>
</nav>
</div>
<div id="SiteTitle">
<h1 id="TestTest">Test<span id="Japan">Test</span></h1>
</div>
</div>
<div id="ContentDiv">
<main id="ContentSection">
<div id="Content">
<p>Content goes here.</p>
</div>
</main>
</div>
<footer>
<p id="FooterTitle">Test <span id="FooterJapan">Test</span></p>
<p id="FooterCaption">Test</p>
</footer>
</body>
</html>
You should not be using float for FooterTitle and FooterCaption -- So remove the float:right;
Then you can add text-align:right; to the <footer> CSS
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 7%;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
text-align:right;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
The rest .. Like height and getting everything to show in the footer I trust you can do :) -- Personally, I think height:7%; is a bad idea .. Better to give it a static height height, or a height that statically will change inside media queries. --
OR You could scrap the text align right to get it to align left but still float right like:
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
#footer-right-content{
float:right;
text-align:left;
width:100px;
}
HTML
<footer>
<div id="footer-right-content">
<p id="FooterTitle">Test <span id="FooterJapan">Test</span></p>
<p id="FooterCaption">Test</p>
</div>
</footer>
I'm having some troubles to align the upper_navdiv with the content div.
I want the upper_nav with links aligned with the right-hand side margin and that grows in the left-hand side direction depending on how many links there are inside and the width of each boxes.
Could you check which is the problem?
upper_nav is child of header that takes the whole width of the page:
div#upper_nav {
position: absolute;
bottom:0;
right:0;
width:80%;
}
So I would that the width would be the 80% of the parent width but I don't understand why the margin is not aligned correctly.
Here the example of my page:
html {
margin: 0;
padding: 0;
background-color: #ffffff;
font-size: 17px;
}
body {
font-family: Tahoma, Geneva, sans-serif;
color: #000;
text-align: justify;
background-image: url('url_immagine');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div#container {
overflow: hidden;
width: 95%;
margin: 0px auto;
background-color: #ffffff;
}
div#header {
/*background: url('header.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:18vw;*/
position: relative;
}
div#upper_nav {
position: absolute;
bottom: 0;
right: 0;
width: 80%;
/*background-color:#e6e6e6;*/
}
div#navigation_left {
padding: 1% 1%;
float: left;
width: 21%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#content {
overflow: auto;
margin-left: 25%;
background-color: #e6e6e6;
box-shadow: 5px 5px 2px #888888;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
div#footer {
clear: both;
/*background: url('footer.png') no-repeat center center;*/
/*background-size: cover;*/
/*height:5vw;*/
width: 100%;
position: relative;
}
div#footer_content {
position: relative;
bottom: -50%;
text-align: center;
z-index: 9999;
background-color: #e6e6e6;
}
P {
color: #000;
font-family: Tahoma;
}
a {
text-decoration: none;
color: #0066FF;
font-size: 17px;
}
a:hover {
color: #0066FF;
text-decoration: underline
}
h1 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 200%;
}
h2,
h3,
h4,
h5,
h6,
h7,
h8 {
background-color: #737373;
color: #fff;
font-family: verdana;
font-size: 150%;
}
ul#menu_header {
list-style: none;
line-height: 150%;
text-align: center;
}
ul#menu_header li {
background-color: #737373;
right: 0;
width: 19.6%;
margin: 0.2%;
float: left;
/* elementi su singola riga */
}
ul#menu_header li a {
color: #fff;
text-decoration: none;
}
ul#menu_header li.active,
ul#menu_header li:hover {
background-color: #b1b1b1;
}
ul#menu_left {
display: block;
list-style: none;
text-align: left;
text-decoration: none;
padding-left: 5%;
}
ul#menu_left li {
margin: 1%;
font-size: 5vw;
}
ul#menu_left li a {
color: #000;
display: block;
line-height: 150%;
text-decoration: none;
}
ul#menu_left li.active,
ul#menu_left li:hover {
background-color: #c9c9c9;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
.panel a {
color: #000
}
.panel a:hover {
background-color: #b1b1b1
}
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://placehold.it/1600x900" width="100%" alt="Riunione annuale GTTI SIEm2019" />
<div id="upper_nav">
<ul id="menu_header">
<li class="active">Home</li>
<li>Link11</li>
<li>Link22</li>
<li>Link33</li>
<li>Link44</li>
</ul>
</div>
</div>
<div id="navigation_left">
<ul id="menu_left">links</ul>
</div>
<div id="content">
<p>text</p>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</div>
</body>
</html>
You notice the non-alignment resizing the window.
I am designing my first site... the footer section to be specific. I am trying to style the <a> tags into a white color without the default webkit styling but I am unable to do so.
What am I doing wrong, and how can I change the styling?
* {
margin: 0px;
padding: 0px;
}
div {
display: block;
}
.header {
background-color: #333333;
}
.nav {
padding: 0px auto;
margin: 0px auto;
}
.nav ul {
}
.nav ul li {
color: #e6e6e6;
display: inline-block;
padding: 20px 30px 20px 20px ;
font-family: 'raleway', sans-serif;
font-weight: 20px;
}
.nav ul li a {
text-decoration: none;
color: #efefef;
padding: 20px 20px 20px 20px ;
font-family: 'raleway', sans-serif;
font-weight: 20px;
}
.nav ul li a:hover {
color: #efefef;
background-color: #191919;
transition: background .5s;
}
.second_section .container {
background-image: url(http://1.bp.blogspot.com/-I0jOcWYqW94/UdFZ9U8Si0I/AAAAAAAACRw/2Hhb0xY7yzY/s1600/84.jpg);
height: 900px;
width: 100%;
}
.copy {
position: absolute;
margin: 100px 50px 500px 500px;
color: white;
font-family: 'Josefin Sans', sans-serif;
letter-spacing: 2px
}
.copy {
text-align: center;
}
.btn_section {
top: 400px;
text-align: center;
position: relative;
}
.btn {
position: relative;
margin-top: 100px
color: white;
border: solid 2px fixed;
}
.btn_section a {
border: 1px solid white;
padding: 20px 40px;
text-decoration: none;
background-color: #191919;
color: white;
font-family: 'Open Sans', sans-serif;
font-size: 1.33em;
letter-spacing: 2px;
text-transform: uppercase;
}
.btn_section a:hover {
background-color: #e6e6e6;
color: #191919;
transition: background .5s;
cursor: pointer;
}
.third_section a: hover {
background-color: black;
}
.third_section {
height: 20px;
background-color: black;
}
.fourth_section .col {
display: inline-block;
padding-top: 50px;
padding-bottom: 75px;
padding-left: 6%;
padding-right: 6%;
text-align: center;
font-family: 'Raleway';
width: 20%;
vertical-align: top;
}
.fourth_section img {
padding: 5px 5px 10px 5px;
height: 32px
}
.fourth_section > h2 {
font-family: 'Raleway';
font-size: 1.33em;
}
.col > p {
font-size: 1.12em;
}
.col a {
text-decoration: none;
color: #323232;
}
.col {
text-align: center;
font-family: Garamond;
}
.footer {
height: 100px;
background-color: #333;
padding: 20px;
}
.footer a {
text-decoration: none;
}
.footer_info {
position: relative;
text-decoration: none;
margin-bottom: 10px;
color: white;
}
<div class="header">
<div class="nav">
<ul>
<li>ABOUT</li>
<li>WORK</li>
<li>TEAM</li>
<li>CONTACT</li>
</div>
</div>
<div class="second_section">
<div class="container">
<div class="copy">
<h1>ACTUATE CONTENT</h1>
<br>
<h3>Expert content for every business</h3>
</div>
<div class="btn_section">
Write For Me!
</div>
</div>
<div class="third_section">
</div>
<div class="fourth_section">
<div class="col">
<img src="https://cdn0.iconfinder.com/data/icons/seo-smart-pack/128/grey_new_seo2-17-256.png"><h2>RESEARCH</h2>
<br>
<p>Our meticulous research methods will uncover the most relevant information for your project. </p>
</div>
<div class="col">
<a href="#"><img src="https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png">
<h2>WRITING</h2></a>
<br>
<p>Our seasoned, handpicked writers craft stellar content for your specific needs.</p>
</div>
<div class="col">
<a href="#"><img src="http://i.imgur.com/AinCaug.png">
<h2>EDITING</h2></a>
<br>
<p>Our editors work with leading authors and publishers to bring out the best in their writing.</p>
</div>
</div>
<div class="footer">
<div class="footer_info">
<p>Terms of Use / Privacy Policy</p>
</div>
</div>
Add your styles into this :
.footer .footer_info a {
...
}
I am having an issue where my navigation a is conflicting with an a href on .content - I have been trying to tackle this for the last few hours and no luck, thanks.
ul.nav {
list-style-type: none;
margin: 0;
min-width: 360px;
}
ul.nav li {
display: table-cell;
text-align: center;
}
a.active {
background-color: #cc293f;
font-weight: 700;
}
.nav-container {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
margin: 5px 0 0;
}
.table {
display: table;
margin: 5px auto;
}
a {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
border-right: 1px solid #fff;
color: #fff;
float: left;
padding: .2em .6em;
text-decoration: none;
width: 10em;
}
a:hover {
background-color: #cc293f;
}
.content {
border-radius: 10px 10px 10px 10px;
border: 2px solid #cc293f;
margin-top: 10px;
min-width: 360px;
min-height: 650px;
}
.content h1 {
font-size: 26px;
color: #fff;
text-align: center;
margin-top: 5px;
}
.content h2 {
font-size: 22px;
text-align: center;
margin-top: -35px;
}
.content p {
font-size: 18px;
margin-top: -5px;
margin-left: 10px;
}
.content #p2 {
font-size: 19px;
margin-left: 50px;
margin-top: -5px;
}
<html>
<body>
<div class="nav-container">
<div class="table">
<ul class="nav">
<li style="border-left:1px solid white;"><a class="active" href=
"index.html">Home</a></li>
<li>FAQs</li>
<li>Resolution Center</li>
<li>Upload</li></ul>
</div>
</div>
<div class="content">
<p>example</p>
<img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png" height="75" width="75">
</body>
</html>
You declare style for global <a> tag, so all <a tags will use that style. Special style for <a tags from .content class can be achieved by adding to your css file: .content a { your instructions }.
Furthermore, use ul nav li a to specify your desired options for the menu. If you have multiple ul list in your project, use a specific class for each of them.
See this now has very different properties on default and hover.
ul.nav {
list-style-type: none;
margin: 0;
min-width: 360px;
}
ul.nav li {
display: table-cell;
text-align: center;
}
a.active {
background-color: #cc293f;
font-weight: 700;
}
.nav-container {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
margin: 5px 0 0;
}
.table {
display: table;
margin: 5px auto;
}
a {
font-family: 'Catamaran', sans-serif;
background-color: #505050;
border-right: 1px solid #fff;
color: #fff;
float: left;
padding: .2em .6em;
text-decoration: none;
width: 10em;
}
a:hover {
background-color: #cc293f;
}
.content {
border-radius: 10px 10px 10px 10px;
border: 2px solid #cc293f;
margin-top: 10px;
min-width: 360px;
min-height: 650px;
}
.content h1 {
font-size: 26px;
color: #fff;
text-align: center;
margin-top: 5px;
}
.content h2 {
font-size: 22px;
text-align: center;
margin-top: -35px;
}
.content p {
font-size: 18px;
margin-top: -5px;
margin-left: 10px;
}
.content #p2 {
font-size: 19px;
margin-left: 50px;
margin-top: -5px;
}
.content a {
background:blue;
transition:1s;
}
.content a:hover {
transform:translateX(500px);background:red;
}
<html>
<body>
<div class="nav-container">
<div class="table">
<ul class="nav">
<li style="border-left:1px solid white;"><a class="active" href=
"index.html">Home</a></li>
<li>FAQs</li>
<li>Resolution Center</li>
<li>Upload</li></ul>
</div>
</div>
<div class="content">
<p>example</p>
<img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png" height="75" width="75">
</body>
</html>
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.