所以我正在做一个带有各个部分的水平网站,效果很好,但是现在我添加了我的菜单,我遇到了麻烦,它只是破坏了我的整个内容区域和背景。我尝试过使用 z-index,它没有任何效果......并且在它之前放置项目也只是将其推出。
我的 CSS 导航栏
#Navigation
{
margin: 0px;
padding: 20px 0px 0px 700px;
font-family: 'american_captainregular', Helvetica, Arial, sans-serif;
font-size: 55px;
float:left;
}
#Navigation ul, #Navigation li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#Navigation a:link, #Navigation a:visited
{
float: left;
line-height: 14px;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}
#Navigation a:hover { color: #000; }
我的 CSS 图像
#HomeText{
background-repeat: no-repeat;
background-image: url(Images/HomeText.png);
float:left;
height:158px;
width:450px;
margin-left:461px;
margin-top:126px;
}
的HTML
<div id="Content">
<div class="Tabs TabOne" id="HomeTab">
<ul class="MyNav" id="Navigation">
<li><a href="#" class="home">Home</a></li>
<li><a href="#AboutTab" class="about">About</a></li>
<li><a href="#PortfolioTab" class="portfolio">Portfolio</a></li>
</ul>
<div id="HomeText"></div>
</div>
以防万一,我的部分的 CSS
.Tabs{
margin:0px;
bottom:0px;
float:left;
width:3500px;
}
.TabOne{
background: url(Images/BG1.jpg) no-repeat;
}
我从来没有遇到过这种元素被向下推到页面上的问题