2

ヘッダーとページの本文があります。本体の幅は1200ピクセルで、3列です。左の列は20％、中央の列は55％、右の列は25％です。ページのヘッダーは、position：absoluteおよびtop：0pxのページ幅の100％です。そして0pxを残しました。

ナビゲーションバーを本体の中央の列に揃えたいのですが、問題があります。ナビゲーションバーの左端は、中央のボディ列の左端の真上にあり、右端も同じである必要があります。計算に問題があるか、設定が間違っています。

私が何を望んでいるのかが明確になっていることを願っています。これが私のウェブサイトです：http ：//darkonyx.webatu.com/

これが私のhtmlコードです：

<div id="headerwrapper">
<div id="navbar">
    <ul id="nav">
        <li><a href="">Home</a></li>
        <li><a href="/roster/roster.html">Roster</a></li>
        <li><a href="/about/about.html">About</a></li>
        <li><a href="/faq/faq.html">FAQs</a></li>
        <li><a href="/contact/contact.html">Contact</a></li>
    </ul>
</div>

関連するcssスタイルで：

#headerwrapper {
position:absolute;
top:0px;
left:0px;
z-index:999;
width:100%;
overflow:hidden;
height:120px;
background:url(img/headerBG.jpg);
-moz-box-shadow: 0px 6px 20px #000;
-webkit-box-shadow: 0px 6px 20px #000;
box-shadow: 0px 6px 20px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');
#navbar{
position:absolute;
top:85px;
left:50%;
width:1200;
margin-left:-600;}
#nav {
width: 100%;
float: left;
padding: 0;
list-style: none;
background-color: #222;}
#nav li {
width:20%;
float: left;}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #666;
border-right: 1px solid #777;
border-top: 1px solid #777;
border-left: 1px solid #777; }
#nav li a:hover {
color: #000;
background-color: #555;}
4

2 に答える 2

0

次のオプションをheaderwrapperに追加する必要があります。

left:50%;
margin-left:-600px;

幅を1200pxに変更します

https://dl.dropbox.com/u/62849616/Stackoverflow/hor-nav-bar.png

内側のdivの幅を100％に変更すると、次のようになります。

https://dl.dropbox.com/u/62849616/Stackoverflow/hor-nav-bar2.png

于 2012-11-22T08:19:36.113 に答える
0

If you have a position: absolute within a class, it's parent should have a position: relative in order for that child div to work well when it comes to positioning.

So 

1. Give your #headerwrapper** a position:relative
2. Remove top: 100px from #bodycontainer
3. Put #navbar into another div, giving this div a margin:0 auto (to be centered) and the same width as the middle body column
4. Remove left % from #navbar and remove any position absolutes within it

Follow that and you'll be good to go!!

Edit: Heres the code

<div style="
width: 950px;
margin: 0 auto;
height: 115px;
overflow: hidden;">

<div id="navbar">
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="/roster/roster.html">Roster</a></li>
<li><a href="/about/about.html">About</a></li>
<li><a href="/faq/faq.html">FAQs</a></li>
<li><a href="/contact/contact.html">Contact</a></li>
</ul>
</div>
</div>

Here's the whole stylesheet CSS for a quick copy-paste (take a backup of yours first!!): http://pastebin.com/w5UC8ELF

于 2012-11-22T07:38:15.237 に答える