Question

导航重叠在我的横幅上。我从来没有遇到过这个问题，也无法弄清楚它为什么要这样做。我试过用另一个图像替换它，它看起来很好，这让我更加困惑＆gt; http://tinypic.com/r/m8iqnr/8

这是我希望导航位于标题下方的位置。当我使窗口变小时，它在这里很好，因为横幅图像响应＆gt; http://tinypic.com/r/19plwl/8

HTML 的

<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>

CSS

#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 */

很抱歉，如果在其他地方得到解答。我确实看过其他类似的问题，但我是初学者，所以我对其他答案并不太了解。

提前致谢，约什

Answer 1

问题似乎是因为您的横幅图像具有流畅的宽度：高度和宽度将增大/缩小以填充空间。在较小的屏幕宽度下，图像较短，并且不会超出导航位置。

我建议您清除nav元素，以强制它在浮动的横幅图像后显示。将此代码添加到现有样式中 - 您可以根据自己的喜好更改填充值：

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

我做了一个小提示，展示了它的工作原理：http://jsfiddle.net/chicgeek/5SBej/

导航重叠横幅图像

1 个答案: