0

我的问题

我想让 2 个ribbonpurplefade.gif 再次出现在我涂成粉红色的导航菜单栏块上（我把它变成了丑陋的粉红色，这样我就可以看到块的边界）。

顶部的ribbonpurplefade.gif 应该位于导航菜单的顶部，它们之间没有间隙。底部的ribbonpurplefade.gif 应该紧贴导航菜单的底部，它们之间没有间隙。

我所做的任何事情都无法消除差距！那是我的问题！:)

我在所有东西周围都涂上了颜色，这样我就可以直观地看到块的位置。如果你知道我做错了什么 - 请告诉我 :) 是的，颜色真的很难看 - 这样我就可以看到积木了 :) 提前致谢！

如果您不知道什么是块，请查看 w3.org - 他们使用术语自由地描述匿名块<div>This is a block</div> <p>This is also a block</p>等......

我尝试了什么

我已经在 img 标签上尝试了 0px 的边距和填充。唯一似乎有效的方法是使用负值，但我不明白为什么会这样......我似乎能够使用ribbonpurplefade.gif作为背景图像让它们排列，但后来我无法拉伸它们的CSS。因此，我从使用背景图像更改为使用如下所示的图像，并一直试图让它们触摸导航菜单。

我想要的是 2 个ribbonpurplefade.gif 紧贴导航菜单块。为什么这不起作用超出了我的范围。我什至尝试了重置 CSS 文件，但它仍然可以。也许这是不可能的。我什至尝试过 hspace 和 vspace 但它们现在已经贬值了。

任何解决方案都需要与 IE7 及更高版本（以及备用浏览器 FF、Chrome、Op）一起使用

HTML

<div class="navribbon"><img src="graphics/common/ribbonpurplefade.gif"></div>
<!-- THIS IS WHERE THE TOP GAP IS. I CANT GET RID OF IT COMPLETELY -->
<!-- NAVIGATION BAR HERE -->
<div class="navmenu">
    <ul>
        <li>Home</li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Services & Pricing</a></li>
        <li><a href="#">Online Store</a></li>
        <li><a href="#">Support & Drivers</a></li>
        <li><a href="#">Company Information</a></li>
    </ul>
</div>
<!-- NAVIGATION ENDED -->
<!-- THIS IS WHERE THE BOTTOM GAP IS. I CANT GET RID OF IT COMPLETELY -->
<div class="navribbon"><img src="graphics/common/ribbonpurplefade.gif"></div>

CSS

/* NAVIGATION RIBBONS BELOW */
.navribbon {
    padding:0px;
    margin:0px;
    /*background-color:#129933;*/
}

.navribbon img {
    padding:2px;
    margin:0px;
    background-color:#00FF66;
}

/* NAVIGATION CSS BELOW*/
.navmenu {
    text-align:center;
    padding:9px;
    margin:0px;
    font-size:14px;
    background-color: #FF0066;
    border:dotted;
}

.navmenu ul {
    margin: 0px;
    padding: 0px;
}

.navmenu li {
    display:inline;
    font-weight:bold;
    /*background-color: #99FF99;*/
}

.navmenu ul a {
    text-decoration:none;
    /*color:#4E4E4E;*/
    /*color: #276056;*/
    color:#267CB2;
}

.navmenu a:hover {
    text-decoration:underline;
    color:black;
}

.navmenu li:after {
    content: "\\";
    padding: 0px 5px;
    color: #999;
}

.navmenu li:last-child:after {
    content: none;
}

更新：2012 年 5 月 22 日

好吧，我尝试使用表格并将顶部图像向下居中，底部图像向上居中，但它仍然在那里留有空隙。我想我剩下的唯一解决方案是创建一个 DIV 块并将元素绝对定位在 div 内或在 Photoshop 中重做所有这些功能区，调整它们的大小，然后重新保存它们。呃……为了这么简单的事情做了这么多工作。我只是不明白为什么在我说的每个元素上都有一个间隙 - 0px 表示边距，填充 - 我的意思是......我们无法控制东西的去向吗？为什么它必须是与另一个块元素紧密排列的背景？愚蠢的网页设计真的让我很生气。几乎感觉要把一切都变得绝对。啊！

4

3 回答 3

1

我想在我的头撞到砖墙上一个小时后，我已经想通了。默认情况下，img标签是一个inline元素，所以它有一个最小高度，由font-size放置它的地方决定。这意味着，无论您给它低于该最小值的高度是多少，它总是希望为可能围绕它的文本腾出空间。这就是为什么在它的上方和下方总是有一些边距或填充。

解决您的问题的方法是制作您的img标签display:block。

于 2012-05-22T23:56:02.653 回答
0

我想你的意思是 2 个紫色渐变条吧？如果是这种情况：您忘记在下栏中添加 width="100%" 。

因此，在 css 中执行以下操作要好得多：

.navribbon
{
background-image: url('../graphics/common/ribbonpurplefade.gif'); <-- Check path to be sure
background-repeat: repeat-x;
height: 11px;
width: 100%;
}

如果您选择 CSS 解决方案.. 然后删除<img>您的 div 内部。

于 2012-05-22T07:20:16.957 回答
0

据我了解，您对色带图像宽度都有问题

<img src="graphics/common/ribbonpurplefade.gif" alt="ribbon" width="100%" border="1">

使用这个我在第二个图像宽度=“100%”中有变化，如果你有任何其他问题，那么请使用 http://jsfiddle.net/

谢谢。

于 2012-05-22T07:58:14.267 回答