0

最近、一連のボタンにホバー機能を適用しました。別の Web サイトに適用した場合、コーディングは問題ありませんでした。このサイトに適用すると、リンク/ホットスポットは次のボタンに移動します。例: ボタン home/about/gallery/blog/prints/contact があり、CSS スタイル シートで設定された寸法では、リンクがそれらの寸法にのみ適用されると考えるでしょう。これとは違います。リンク/ホットスポットは、テーブルの端からホーム ボタンの反対側まで、index.shtml にリンクされていることを示しています。ボタンの間にはスペースがありますが、リンク/ホットスポットは、次のボタン リンク/ホットスポットに到達するまで、スペースを 50% 横切ります。そして最後のボタン「コンタクト」は、テーブルの反対側の端まで伸びています。私が間違っていることについての手がかりはありますか？

CSS:

div.nav-home {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 130px;
Margin-right: -60px;
background-position: right top;
background-repeat: no-repeat;
width: 75px;
height: 64px;
}
#home {
background-image: url('img/home.png');
}
#home:hover {
background-image: url('img/home_hover.png');
}

インデックス.shtml:

<table width="1213" height="64" align="center" background="img/tablebg2.png">
<!--#include file="menubuttons.html" -->

menubuttons.html:

<tr>    
<td align="center" width="75">
    <a href="/index.shtml" title="HOME" ><div id="home" class="nav-home"></div></a>
</td>

<td align="center" width="86">
    <a href="/about.shtml" title="ABOUT" ><div id="about" class="nav-about"></div></a>
</td>

<td align="center" width="94">
    <a href="/gallery.shtml" title="GALLERY" ><div id="gallery" class="nav-gallery">
</div></a>
</td>   

<td align="center" width="63">
    <a href="/blog.shtml" title="BLOG" ><div id="blog" class="nav-blog"></div></a>
</td>   

<td align="center" width="85">
    <a href="/prints.shtml" title="PRINTS" ><div id="prints" class="nav-prints"> 
 </div></a>
</td>

<td align="center" width="103">
    <a href="/contact.shtml" title="CONTACT" ><div id="contact" class="nav-contact">
</div></a>
</td>   
</tr>

修正済み: (おそらく正しくない?)

私はコーディングを始めて 2 か月しか経っていませんが、書き方についてはかなり良い考えを持っていますが、DIV タグなど、すべてが何を意味するのかわかりません。私は昨夜ここで検索していたことを知っており、div を TD 内に配置すると想定していました。

ボタンの各セットの間の最初のボタンの前と最後のボタンの後にいくつかのスペーサー.pngを追加するだけで、すべてを修正できました。これにより、側面の間隔の問題も修正されました。

助けてくれてありがとう。ホバー時にボタンを変更する簡単な方法を見つけようとしています。この方法は、私が昨夜ここで見つけた最初の方法であり、現在それを完成させようとしています..少なくとも私の頭の中で。順序付けられていないリストを少し調査する必要があると聞いたので、それが物事をより簡単にする...

ここにリンクがあります（最近完成したサイトのバックエンドに基づいています）www.blackmarkettattoos.com/amysesco/index.shtml

4

1 に答える 1

1

問題は、テーブルのセル内のコンテナー タグである DIV を使用しているという事実であり、両方にスタイルを適用する (DIV をクラスとして、TD をインラインとして) ことだと思います。

通常、リストを使用してメニューを作成することをお勧めしますが、提供したコードを使用する必要がある場合は、 width: 75px; を削除してみてください。div.nav-home から。

リスト付きの CSS メニューを作成する方法については、次の 2 つのリンクを確認してください。

于 2012-07-10T07:28:58.693 に答える