1

私はメニューに取り組んでおり、Chrome/Safari で完全に機能しています。URL はhttp://www.penuli.nl/aboutvanwow.htmlです。

しかし、FF はツールチップで苦労しています。ボタンにカーソルを合わせるたびに、他のすべてのボタン (リスト アイテム内の div) が親であるリスト アイテムの下部にジャンプします。すべてのアイテムは、他のアイテムを「押す」ことなく互いに収まるほど大きいため、なぜそうするのか理解できません。

コメント ボックスには、メニューについて作成したイラストへのリンク があります (画像を投稿するのに十分な評判ポイントがありません)。

もう少し複雑にしているのは (しかし、それとは関係がないはずです)、ボタンがページ内でアニメーション化されることです。これは、それらの位置が相対的であることを意味します。

別の質問を読んで、Stackoverflow の皆さんのおかげで 1 つの解決策を見つけましたが、これはアニメーションを変更する必要があることを意味します。すべてのボタンをページの下に「落下」させるイベント。何も機能しない場合は、もちろんそのアニメーションをキャンセルできます。多かれ少なかれアニメーションよりもサイトがきちんと機能することが重要ですが、両方で機能するソリューションは優れています! 前もって感謝します。

いくつかの CSS (アニメーションの開始と終了のためのいくつかの行なし):

#wrap ol#menu{
margin-left: 0;
padding-left: 0;
width: 1000px;
height: 160px;
}

#wrap ol#menu li{
display: inline-block;
list-style-type: none;
width: 138px;
height: 160px;
background-image: url("/images/backgroundbutton.png");
background-repeat:no-repeat;
background-color: white;
cursor: pointer;
position: relative;
z-index: 0;
}

#wrap ol#menu li .button{
width: 138px;
height: 82px;
z-index: 2;
position: relative;
background-repeat:no-repeat;
}

ol#menu li:nth-child(7n+1) .button {
background-image: url("/images/button-1.png");
}

#wrap ol#menu li .tooltip{
background-image: url("/images/tooltip.png");
position: relative;
background-repeat:no-repeat;
top: -30px;
width: 138px;
height: 130px;
z-index: 1;
display: none;
}
4

2 に答える 2

0

うわー、それはかなり奇妙です。リスト項目を div のコレクションに変更してみてはいかがでしょうか。

于 2010-12-14T10:20:11.863 に答える
0

リスト項目をフローティングにすると、問題を解決できます。

あなたの#wrap ol#menu liルールでは、交換：

display: inline-block;

と：

float:left;

(display:inline-block を維持することは問題ではありませんが、要素がフローティングされているため、もう必要ありません)

于 2010-12-14T10:20:59.507 に答える