我有一个带有我的徽标和标题的标题。就在 Title Mobility 组的右侧,我想创建一个导航栏,该导航栏与标题底部的不同选项卡一直接触到标题的右侧。乱搞我可以创造一些东西,但我似乎无法正确定位它。
我只是不知道如何将此导航栏添加到我的标题 div。
HTML 代码:
<div id="page">
<div id="header">
<a href="http://wireless.fm.intel.com/test/index.php">
<img src="http://wireless.fm.intel.com/test/logo2.png" border=0 >
</a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
<div id="navigation">
<a href="#">About</a>
<a href="#">Reports</a>
<a href="#">Documents</a>
<a href="#">Checklists</a>
<a href="#">License Tools</a>
<a href="#">Presentations</a>
<a href="#">Software Releases</a>
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
CSS 代码:
html, body {
padding:0;
margin:0;
height:100%;
}
#page {
min-height:100%;
position:relative;
height:100%;
}
#header {
background-color:#115EA2;
height:100px;
width:97.5;
}
#main {
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:90%;
height:auto;
height:89%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer {
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
#header img {
float:left;
display:inline;
}
#header h2 {
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
font-family: Sans-serif;
float:left;
margin-top:20px;
margin-left:20px;
text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active {
color: #FFFFFF;
text-decoration: none;
}
导航条码:
#navigation {
position:relative;
top:0;
left:0;
right:0;
bottom:0;
width:70%;
background-color:gray;
color:green;
height:35px;
text-align:center;
padding-top:15px;
}
#navigation a {
font-size:14px;
padding-left:15px;
padding-right:15px;
color:black;
text-decoration:none;
}
#navigation a:hover {
color:blue;
}
更新
只是想说谢谢大家的帮助。