0

我最近将悬停功能应用于一组按钮。当应用于不同的网站时,编码很好。当应用于此站点时,链接/热点转到下一个按钮。例如:我有 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" -->

菜单按钮.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 中。

我可以通过在每组按钮之间的第一个按钮之前和最后一个按钮之后添加一些 spacer.png 来解决所有问题。这也解决了我在侧面的间距问题。

谢谢您的帮助。我只是想找到一种简单的方法来让我的按钮在悬停时改变。这种方法是我昨晚在这里发现的第一个方法,现在我正在努力完善它……至少在我的脑海中。我需要对无序列表进行一些研究,因为我听说这会让事情变得更简单......

这是链接(基于我最近完成的网站的后端)www.blackmarkettattoos.com/amysesco/index.shtml

4

1 回答 1

1

我认为问题在于您使用的是 DIV,它是表格单元格内的容器标记,并且您都应用样式(作为类的 DIV 和作为内联的 TD)。

一般来说,最好用列表创建菜单,但如果你必须使用你提供的代码,那么试着去掉 width: 75px; 来自 div.nav-home。

检查这两个链接以了解如何使用列表创建 CSS 菜单:

于 2012-07-10T07:28:58.693 回答