This web page I'm working on is giving me a headache. The #titlediv just won't center and the navbar keeps disappearing randomly. It seems like a big issue that I can't wrap my head around. If anyone out there can help salvage it, here's the link:
http://jsfiddle.net/glenohumeral13/c604vbrn/
Here's the code snippet:
<body>
<div id="parallaxish"></div>
<div id="navbar">
<nav>
<a href="#item1">Item1</a>
<a href="#item2">Item2</a>
<a href="#item3">Item3</a>
</nav>
</div>
<div id="contentdiv">
<div id="welcome">
<div id="titlediv">
<h1>Title will go here</h1>
</div>
</div>
<div class="barrier"></div>
<div id="item1">
<h1>Item1</h1>
</div>
<div class="barrier"></div>
<div id="item2">
<h1>Item2</h1>
</div>
</div>
</body>
CSS Styles:
* {
margin: 0;
padding: 0;
}
body {
color: #fff;
background-color: #000;
font-family: Helvetica, Arial, sans-serif;
}
img {
max-width: 100%;
height: auto;
}
#parallaxish {
background-image: url('http://24.media.tumblr.com/tumblr_m54j1nIYN21r0k830o1_500.jpg');
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-position: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
height: auto;
}
#navbar {
float:right;
height: 30px;
margin-right: 100px;
}
nav a {
text-decoration: none;
display: inline;
list-style-type: none;
padding-right: 15px;
padding-top: 10px;
float: left;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
-o-transition: color 1s ease-out;
transition: color 1s ease-out;
font-weight: 100;
color: #fff;
-webkit-font-smoothing: antialiased;
}
nav a:hover {
color: #16a085;
}
#welcome {
height: 600px;
width: 100%;
text-align: center;
text-transform: uppercase;
background-color: black;
}
#welcome h1, #item1 h1, #item2 h1 {
font-weight: 100;
-webkit-font-smoothing: antialiased;
}
#titlediv {
border: 2px solid #fff;
width: 180px;
margin: auto;
padding: auto auto;
position: absolute;
left: 0;
right: 0;
overflow: auto;
}
.barrier {
height: 120px;
width: 100%;
background: transparent;
}
#item1 {
height: 600px;
width: 100%;
text-align: center;
background-color: white;
color: #16a085;
}
#item1 h1, #item2 h1 {
padding: 5% 0;
}
#item2 {
height: 600px;
width: 100%;
text-align: center;
background-color: black;
color: white;
}