Navigation overlapping banner image

Question

The navigation is overlapping onto my banner. I've never had this problem and can't figure out why it is doing it now. I've tried replacing it with another image and it seems to be fine which is just confusing me more > http://tinypic.com/r/m8iqnr/8

This is where I want the navigation to sit, below the header. It goes here fine when I make the window smaller, as the banner image is responsive > http://tinypic.com/r/19plwl/8

<title>ISGM | Home</title>

</head>

<body id="body">

<div id="container">

<header id="head">

<h1 id="header">International Student's Guide to Manchester - Home</h1>

<img id="logo" src="media/logo.png" alt="Synergy Projects">

<a href="index.html"><img id="banner" src="media/banner.png" alt="International Student's Guide to Manchester" border="0"></a>

<p id="slogan"><em>Built by students, for students</em></p>

</header>

<nav>

<div id="navcontainer">
 <ul id="navlist">
 <li id="active"><a href="tours.html" id="current">Tours and Trips</a></li>
 <li><a href="pages/food.html">Food</a></li>
 <li><a href="pages/accommodation.html">Accommodation</a></li>
 <li><a href="pages/nightlife.html">Nightlife</a></li>
 </ul>
</div>

</nav>

#header {text-indent: 100%;
white-space: nowrap;
overflow: hidden;
font-size: 0px;}

#logo {max-width: 15%;
float: left;}

#banner {max-width: 80%;
float: right;}

#body {padding-left: 10%;
padding-right: 10%;
margin-top: 0%;
margin-bottom: 0%;}

/* Nav */

ul#navlist
{margin-left: 0;
padding-left: 0;
white-space: nowrap;}

#navlist li
{display: inline;
list-style-type: none;}

#navlist a { padding: 3px 10px;}

#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

/* Nav Close */

Sorry if this is answered elsewhere. I did view other similar questions but I am a beginner so I didn't really understand much of the other answers.

Thanks in advance, Josh

Answer 1

The issue seems to be because your banner image has a fluid width: the height and width will grow/shrink to fill the space. At smaller screen widths the image is shorter and does not extend beyond your navigation's position.

I suggest you clear your nav element to force it to appear after your floated banner image. Add this code to your existing styles - you can alter the padding value to your taste:

nav {
    padding-top: 8px;
    clear: both;
}

I have made a fiddle showing how this works: http://jsfiddle.net/chicgeek/5SBej/

Navigation overlapping banner image

Question

1 answers

solution1
0 ACCPTED 2014-02-26 22:08:12

Navigation overlapping banner image

Question

1 answers

solution1 0 ACCPTED 2014-02-26 22:08:12

solution1
0 ACCPTED 2014-02-26 22:08:12