I have successfully created a simple navbar on my website using HTML and CSS. Everything seems to be working fine, except for one issue - there is an unwanted space between the image and the navbar itself. My goal is to make the navbar sit right below the image seamlessly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
CrossFit Villains
</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<header>
<span class="title">
<a href="crossfitvillains.com">CrossFit Villains</a>
</span>
<br />
<span>1702 McAra Street, Regina, SK</span>
<br />
<br />
</header>
<div id="banner">
<img src ="banner.jpg" />
</div>
<nav>
<ul id="menu" class="black">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Daily News</a></li>
<li><a href="#">Hours</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Class Sign In</a></li>
</ul>
</nav>
body {
background-image:url('dark_leather.png');
font-family: arial;
color: white;
margin-left: 15%;
}
.title {
font-size: 90px;
font-family: "Space Ranger";
text-decoration: none;
}
#address {
font-size: 18px;
text-decoration: none;
color: white;
}
#email {
text-decoration: none;
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: none;
color: grey;
}
#container {
float:left;
vertical-align: top;
}
.image-section{
float:left;
padding: 0 10px;
}
.cb{
clear: both;
}
.image-title {
padding-left: 50px;
}
footer {
padding-left: 10px;
color: white;
background-color: #333;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
#footertext {
margin-left: 15%;
}
#menu {
text-transform: uppercase;
margin: 50px 0;
padding: 0 0 0 10px;
list-style-type: none;
font-size: 13px;
background: #eee;
height: 40px;
width: 1280px;
border-top: 2px solid #eee;
border-left: 2px solid #eee;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
#menu.black {
border-top: 2px solid #333;
border-left: 2px solid #333;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
background: #333;
}
#menu.black a {
color: #CCC;
}
#menu.black li a:hover, #menu.black li.active a {
color: #999;
background: #555;
border-bottom: 2px solid #444;
}