1

私はこの問題と数日間戦ってきました。すべてのホバーイベントで期待どおりに機能するスプライトメニューがありますが、「中央」要素の上に完全なロゴを配置したいと思います。Dreamweaverを使用しているときは期待どおりに表示されますが、SafariまたはChromeを使用すると、「logo」要素のロゴが間違って配置されます。どんな援助も大歓迎です。

これがHTMLです。

<div id="logo">
<h1 class="logo">
<a href="#" title="Test">Logo</a>
</h1>
</div>
<ul>
 <li><a class="home" href="#">Home</a></li>
 <li><a class="products" href="#">Products</a></li>
 <li><a class="philosophy" href="#">Philosophy</a></li>
 <li><a class="center" href="#">Center</a></li>
 <li><a class="news" href="#">News</a></li>
 <li><a class="myaccount" href="#">My Account</a></li>
 <li><a class="customercare" href="#">Contact Us</a></li>
</ul>​

これは、メニュー要素の1つのCSSと、中央の画像のCSSです。

ul {
width: 1000px;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
list-style-type: none; 
}

ul li {
float: left;    
}

ul li a {
height: 50px;
display: block;
text-indent: -9999px;
}

/*home*/
ul li a.home {
background-image: url('sprites.optimized.png');
background-repeat: no-repeat;
background-position: 0px 0px;
width: 100px;
}

ul li a.home:hover {
background-image: url('sprites.optimized.png');
background-repeat: no-repeat;
background-position: 0px -50px;
}
/*Main Logo*/
#logo {
position: absolute;
width: 100%;
}

#logo h1 {
/* [disabled]height: 100px; */
/* [disabled]width: 201px; */
margin: -100px 282px;
/* [disabled]padding: 0; */
}

#logo h1 a {
color: transparent;
background: transparent url('CenterLogo.png') no-repeat;
width: 370px;
height: 201px;
top: 10px;
left: 30px;
margin: 0 0;
z-index: 200;
}

/***** Header Logo *****/
h1.logo a {
background: url('CenterLogo.png') no-repeat center right /* Company Logo */;
display: block;
height: 35px /* Sets overall height of header */;
margin: 0px 0 0 -2000px ;
outline: none /* Removes Link Outline */;
position: relative;
text-decoration: none;
top: 0px;
width: 2195px;
}​

編集1-------ティムごとに私は次の変更を加えました

ul {
    width: 1000px;
    margin-top: 100px;
    margin-right: auto;
    margin-left: auto;
    list-style-type: none;
    display: block;
}
ul li {
    float: left;
    display: block;
}

また、ロゴの間隔を変更し、相対位置に切り替えて、正しい位置に配置できるかどうかを確認しました。

/*Main Logo*/
#logo {
    position: relative;
    width: 100%;
}
#logo h1 {
    /* [disabled]height: 100px; */
    /* [disabled]width: 201px; */
    margin: -100px 282px;
    /* [disabled]padding: 0; */
}

これで正しい位置に表示できるようになりましたが、ウィンドウを拡大縮小すると、メニューがロゴから離れて移動します。

編集2-------Krazごとに次の変更を加えました。メニューが期待どおりに動作するようになりました。

ul {
    width: 1000px;
    margin-top: 100px;
    /*margin-right: auto;*/
    /*margin-left: auto;*/
    list-style-type: none;
    display: block;
}
4

1 に答える 1

0

ただし、ウィンドウを拡大縮小すると、メニューがロゴから離れて移動します。

あなたのロゴは比較的配置されたブロック要素です。メニューも比較的配置されたブロック要素です。

ロゴは、表示する必要のある場所に表示されるだけです。（左上隅）

ただし、特定の幅（1000px）としてのメニューと、その左右の余白はに設定されていautoます。したがって、コンテナの幅に応じて中央に配置されます。また、おそらく本文なので、ページ幅を大きくするとメニューが右に移動します。

于 2012-10-16T13:46:45.913 に答える