導航重疊橫幅圖像

導航重疊到我的橫幅上。我從來沒有遇到過這個問題，也不知道現在爲什麼這樣做。我試圖用另一個圖像替換它，它似乎很好，這只是讓我更困惑>http://tinypic.com/r/m8iqnr/8 導航重疊橫幅圖像

這是我想讓導航坐在標題下的位置。當我使窗口變小，如橫幅圖像響應它放在這裏細>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 */

如果對不起，這是其他地方的回答。我的確看過其他類似的問題，但我是初學者，所以我並沒有真正理解其他答案。

由於提前，喬希

來源

2014-02-26 Toddy

這個問題似乎是因爲您的橫幅圖像具有流體寬度：寬度和高度將增長/收縮，以填補空間。在較小的屏幕寬度下，圖像更短，並且不會超出您的導航位置。

我建議您清除nav元素，以強制它在浮動的橫幅圖像之後出現。此代碼添加到您現有的風格 - 你可以改變填充值你的口味：

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

我已經展示如何工作的小提琴：http://jsfiddle.net/chicgeek/5SBej/

來源

2014-02-26 22:08:12 chicgeek

謝謝你這麼多chicgeek :-) – Toddy

沒問題！很高興我能幫上忙。 – chicgeek

導航重疊橫幅圖像

回答

相關問題