Question

我一直试图制作一个由5个并排图像组成的基于表格的导航栏，当悬停和点击时，使用降低的不透明度“突出显示”：活动和：悬停在浅色背景颜色。例如

    .navbright {
background-color:#FFC39A;
}
.navbright:hover {
opacity: 0.6;
}

.navbright:active {
opacity: 0.3;
}

问题是背景颜色的实现。它总是比图像低几个像素。我研究过的所有解决方案都没有奏效，即边界崩溃：崩溃;边距：-3px;将所有边框填充间距边距设置为0等等。

我想找到一个基于消除额外空间/背景空间的Table解决方案。如果这是不可能的，也许有人可以告诉我如何使用严格的CSS而不是表来构造相同的构造。

我使用“工作”的一个案例是当我使用div时，将background-color设置为div类的一部分，即：

    <td><div class="navbright"><a href="http://www.example.com"><img src="/images/Home.jpg" alt="" width="200"></a></div></td>

然而，有了这个解决方案，在：活动阶段出现了令人讨厌的额外线路，这里没有解决：CSS HTML line appearing on div :active更不用说背景图像停止工作的事实......

所以我开始用表bgcolor来解决它。无论我做什么，我都无法摆脱桌子上出现的额外背景色。我很累，需要专家的帮助。这是表编码：

    <table id="page" align="center" width="1000" height="37">
<tr>
  <td><a class="navbright" href="http://www.criticalawakening.com"><img src="/images/Home.jpg" alt=""></a></td>
  <td><a class="navbright" href="http://www.criticalawakening.com/Articles.html"><img src="/images/Articles.jpg" alt=""></a></td>
  <td><a class="navbright" href="http://www.criticalawakening.com/Forum.html"><img src="/images/Forum.jpg" alt=""></a></td>
  <td><a class="navbright" href="http://www.criticalawakening.com/Store.html"><img src="/images/Store.jpg" alt=""></a></td>
  <td><a class="navbright" href="http://www.criticalawakening.com/Contact.html"><img src="/images/Contact.jpg" alt=""><a></a></td>
</tr>

#page基本上是试图折叠额外空间

    #page td {
  padding:0; margin:0;
}

#page {
border-collapse: collapse;
}

感谢任何帮助。而且，如果有人对没有表格的CSS设计有一个好主意来实现同样的事情，请告诉我。基本上，它是一个1000px宽的中心柱。

Answer 1

哇，这是一项繁重的工作。我找到了一个解决方案，也许不是 THE 最佳解决方案。

首先，我将TABLE设置为容纳背景颜色，并将其显示为BLOCK ...

    <table style="display:block;position:relative;top:0px;" align="center" height="37" width="1000" bgcolor="#FFC39A" cellpadding="0" cellspacing="0">

我决定使用简单的内联系列图像来处理它。我将IMAGE设置为.navbar类，并将其规则更改为：

.navbright {
position: relative;
top: 0px;
}

完全从课堂上拿走整个背景任务。将位置设置为相对允许定位具有更大的灵活性，即使它们都被0px修改......去图......

还有一个边界的最后一个小故障：在我的链接上活跃但这是另一个问题...... CSS HTML line appearing on div :active

CSS HTML表背景颜色溢出

1 个答案: