2013-10-14 94 views
0

我一直有一個新的網站主題的問題,我創建,這以前並沒有發生在我之前,直到我滾動。 這是問題所在。我創建了一個固定的菜單(無論您在頁面上的任何位置,它都會粘貼到頁面的頂部)。當您向下滾動時,菜單將轉到內容框的下方。我也找不到解決辦法。無論如何,我不是專業的HTML或CSS Web開發人員。HTML/CSS固定菜單錯誤 - 固定

來源:

文件:header.php中

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="interface/css/style.css"> 


</head> 
<script type="text/javascript" src="interface/js/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 


$('a').mouseout(function() { 
$(this).stop().animate({ 
    opacity:'0.7' 
    }); 
}); 
$('a').mouseover(function() { 
$(this).stop().animate({ 
    opacity:'1' 
    }); 
}); 

$('#header-container > a').mouseout(function() { 
$(this).stop().animate({ 
    opacity:'0.7' 
    }); 
}); 
$('#header-container > a').mouseover(function() { 
$(this).stop().animate({ 
    opacity:'1' 
    }); 
}); 


}); 
</script> 
<div id="header-container"> 
<div id="header-image" align="center"><a href="#"><img src="interface/images/interface/header.png" title="Home"></a></div> 

<div id="header-social"> 
<a id="icon" href="#"><img src="interface/images/icons/facebook.png" title="Facebook"></a> 
<a id="icon" href="#"><img src="interface/images/icons/twitter.png" title="Twitter"></a> 
<a id="icon" href="#"><img src="interface/images/icons/blog.png" title="Blog"></a> 
</div> 

<div id="header-bottom"></div> 
<div id="menu"> 

<ul><a class="text" href="#" title="">Home</a></ul> 
<ul><a class="text" href="#" title="">About</a></ul> 
<ul><a class="text" href="#" title="">Articles</a></ul> 
<ul><a class="text" href="#" title="">Videos</a></ul> 
<ul><a class="text" href="#" title="">Tutorials</a></ul> 
<ul><a class="text" href="#" title="">Downloads</a></ul> 
<ul><a class="text" href="#" title="">Contact</a></ul> 
<ul><a class="text" href="#" title="">Help</a></ul> 

</div> 
</div> 

<body> 
<div id="main-container"> 

文件:index.php文件

<div id="container"> 
<div id="content-container"> 
lorem ipsum 
</div> 
</div> 

文件:Footer.php

<!--Footer Container--> 
</body> 
</div> 

</html> 

的CSS樣式: style.css:

@font-face { font-family: myriad; src: url('../font/MYRIADPRO-REGULAR.OTF'); } 

/*HTML Ententites*/ 

html{ 
    margin:0; 
    left: 0; 
    right: 0; 
    top:0; 
    bottom: 0; 
    position: absolute; 
    font-family: myriad; 
    color: white; 
} 
body{ 
    background:white; 
} 

a{ 
    text-decoration: none; 
    color: white; 
} 
/*Containers*/ 
#header-container{ 
    background:#202020; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    padding: 100px; 
} 
#header-bottom{ 
height: 1px; 
width: auto; 
background:#8A8A8A; 
position: absolute; 
bottom: 0px; 
left: 0px; 
right: 0px; 
box-shadow: 0 0 50px 5px rgba(255,255,255,.5); 
} 

#header-image{ 
    position: absolute; 
    top:70px; 
    left:300px; 
    cursor: pointer; 
    opacity: .7; 
} 
#header-social{ 
    position: absolute; 
    right:0px; 
    top:50px; 
} 
#header-social > #icon{ 
    opacity: .7; 
} 
#header-social > #icon:hover{ 
    background: url('../images/icons/icon-hover.png') no-repeat; 
    opacity: 1; 
} 

#main-container{ 
    background:#454545; 
    margin-left: -10px; 
    margin-right: -8px; 
    height: 1500px; 
} 

#menu{ 
position: fixed; 
top:0px; 
left: 0px; 
right: 0px; 
height: 50px; 
background: rgba(0,0,0,.5); 

} 
#menu > ul{ 
    display: inline-block; 
    background: rgba(10,174,254,.8); 
    height:40px; 
    cursor: pointer; 
    margin: 5px 0px 10px 0px; 
    width: 100px; 
    text-decoration: none; 
    font-size: 20px; 
    font-family: myriad; 
} 
#menu > ul:hover{ 
    background: rgba(10,174,254,1); 
} 
#menu > ul > .text{ 
    text-align: left; 
    color: white; 
    text-decoration: none; 
    opacity: .7; 

} 

#container{ 
    position: absolute; 
    right: 500px; 
    left: 10px; 
    margin-top:250px; 
    background-clip: content-box; 
} 
#content-container{ 
    background:#646464; 
    padding: 20px; 
    height: 200px; 
    overflow: auto; 
    border-bottom:3px solid #2B312D; 
    border-left:3px solid #2B312D; 
    border-right:3px solid #2B312D; 
    box-shadow: inset 0 0 10px 0px rgba(0,0,0,0.5); 
    border-bottom-left-radius:3px; 
    border-bottom-right-radius:3px; 
} 
#content-header{ 

} 

我想這個問題必須在我的CSS菜單的某個地方。我不認爲它在html中正確分層,但是我又一次吮吸分層,我仍然在學習。 :) 在此先感謝。

LIVE VIEW 向下滾動內容框。

+0

有一個在該頁面沒有菜單。機會是z-index風格的聲明將解決你的問題。 – isherwood

+0

對不起,我混淆了ftp。我只是重新上傳了它。請再看一遍,謝謝。 ;) –

回答

1

設置z-index爲2

#menu { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    height: 50px; 
    background: rgba(0,0,0,.5); 
    z-index: 2; 
} 
+0

甚至1會做的伎倆。 – isherwood

+0

謝謝!!!有效!看起來我需要更多地關注分層。 –

+1

@IrfanDahir而不是改變問題的標題,你可以通過點擊答案旁邊的複選標記來將這個答案標記爲「接受」嗎? (或另一個答案,如果其他人更好地回答你的問題。)這有助於堆棧溢出知道這個問題已經解決:) – 0b10011

0

只是在你菜單添加z-index

CSS

#menu { 
z-index: 99999; 
} 
+1

我沒有超過99999個圖層。 :P但是這也起作用。謝謝。 :D –

+0

99999是使用它的最佳方式:)乾杯 – fiskolin

+2

只爲將來訪問者提供一個說明:將'z-index'設置爲任意值(如'99999')可能導致長期無法管理的樣式表。相反,建立一個如何分配'z-index'(儘可能避免它)的系統是一個不錯的主意,所以你不會意外地在後面掩蓋一個元素(或者沒有掩飾它),因爲你不會沒有你應用程序中使用的所有'z-index'列表。 – 0b10011