项目互相推挤

时间:2013-03-10 20:23:06

标签: html css

所以我正在做一个横向网站,其中各个部分工作正常,但现在我添加了我的菜单,我遇到了麻烦,它只是破坏了我的整个内容区域和背景。 香港专业教育学院曾尝试过使用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;
}

我从来没有遇到过这样的问题,因为元素被推到了页面上,就像这个

一样

http://jsfiddle.net/BoneStarr/AGfwn/

0 个答案:

没有答案