user2287917 user2287917 - 9 months ago 45
CSS Question

Remove gap between header (header img ?) and nav

helpers :) I have a gap between the header and the nav bar, this occurs on all pages except index.html. Please view the site here: danachapmanmassage.com. I have checked to see if I have any margins, padding, or borders are affecting it - didn't find any.

HTML

<header>
<img src='images/5for5.png'
alt='Special Offer: 5 massages for just $50 each! Available through January, 2015.'>
</header>


<nav>
<ul>
<li><a href='index.html'>Home</a></li>
<li><a href='services.html'>Services</a></li>
<li><a href='about.html'>About</a></li>
<li><a href='contact.html'>Contact</a></li>
</ul>
</nav>


CSS main styles

header {
width: 100%;
}


/* ============================================= Nav Styles ============================================= */
nav {
width: 100%;
height: 2.5em;
background: -webkit-linear-gradient(left, #AA893C, #806720, #E9D07C, #806720, #AA893C); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, #AA893C, #806720, #E9D07C, #806720, #AA893C); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, #AA893C, #806720, #E9D07C, #806720, #AA893C); /* For Firefox 3.6 to 15 */
background: linear-gradient(to left, #AA893C, #806720, #E9D07C, #806720, #AA893C); /* Standard syntax */
}

nav ul {
width: 100%;
text-align: center;
}

nav li {
width: 25%;
padding-top: .75em;
list-style-type: none;
float: left;
}

nav a {
font-family: 'abeatbykairegular';
font-size: 1em;
text-decoration: none;
color: #ffffff;
}

nav a:hover {
color: #42210B;
}


CSS page specific styles (for services.html)

header img {
width: 100%;
}

menu {
width: 100%;
margin-top: 2%;
}

menu ul {
width: 40%;
margin-left: 56%;
}

menu li {
width: 20%;
list-style-type: none;
text-align: center;
float: right;
}

menu a {
font-family: 'abeatbykairegular';
font-size: .85em;
text-decoration: none;
color: #ffffff;
}

menu a:hover {
color: #42210B;
}


Any help will be greatly appreciated!

Answer Source

Modify your styles2.css file.

Starting on line 23 should look like this:

CSS:

header img {
    width: 100%;
    display: block;
}