I've been trying to align a horizontal navigation bar right below a banner and link directly to specific sections on the same page.
- No matter what I do, I can't seem to remove the white space between the banner image and the navigation bar. It showed up after I changed the banner from pure HTML to an image, but fixing it with images hasn't helped.
- The links for Bio and Issues position those headings at the top of the view, but Intro does not.
Here's the JSFiddle
Here is the working code:
h1 {
color: black;
text-align: center;
}
html, body {
padding:0;
margin:0;
border: 0;
}
#statement {
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0%);
width: 810px;
}
#navbar {
float: left;
padding: 0;
}
#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
display: table;
}
#navbar li {
float: left;
text-align: center;
}
#navbar li a {
font-size: 30px;
display: table-cell;
width: 270px;
height: 50px;
text-decoration: none;
color: black;
vertical-align: middle;
background-color: #f0e68c;
}
#navbar li a:hover {
color: #f0e68c;
background-color: black;
}
<body>
<div id="statement">
<img src="http://dreamatico.com/data_images/ocean/ocean-5.jpg" width="810px" height="300px">
<div id="navbar">
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#bio">Bio</a></li>
<li><a href="#issues">Issues</a></li>
</ul>
</div>
<h1 id="intro">Intro</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rid...
<!-- Truncated for brevity -->
</div>
</body>