Question

我的问题

我希望2个ribbonpurplefade.gif再次向右移动我粉红色的导航栏块（我把它变成了一个丑陋的粉红色所以我可以看到块的边界）。

顶部的ribbonpurplefade.gif应该正好位于navmenu的顶部，它们之间没有任何差距。底部的ribbonpurplefade.gif应该贴在navmenu的底部，它们之间没有GAPS。

我没有做任何事情摆脱差距！那是我的问题！：） 的

我在所有东西周围都放了颜色，所以我可以直观地看到这些块的位置。如果你知道我做错了什么 - 请让我知道:)是的，颜色真的很难看 - 它是这样我可以看到块:)提前感谢！

如果您不知道哪些块可以查看w3.org - 它们使用了大量描述匿名块的术语，<div>This is a block</div> <p>This is also a block</p>等等...... < / p>

我做了什么

我已尝试使用0px进行边距和填充以及img标记。似乎工作的东西是使用负值，但我不明白为什么会这样......我似乎能够让他们使用ribbonpurplefade.gif作为背景图像排队但我无法将它们拉伸CSS。所以，我从使用背景图像变为使用图像，如下所示，并一直试图让它们触摸导航菜单。

我想要的是2个ribbonpurplefade.gif要紧贴navmenu区块。为什么这不起作用超出了我的范围。我甚至尝试过重置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表示保证金，填充 - 我的意思是......我们无法控制其中的内容吗？为什么它必须成为一个与另一个块元素紧密排列的背景？愚蠢的网页设计真的让我感到震惊。几乎觉得让一切都绝对。哎呀！

Answer 1

我想在经过一个小时的撞击砖墙后，我已经想到了这个。默认情况下，img标记是inline元素，因此它的最小高度由流行的font-size指示，无论它放在何处。这意味着无论你给它的高度低于最小值，它总是希望为可能包围它的文本腾出空间。这就是为什么在它上面和下面总会出现一些边缘或填充的原因。

问题的解决方案是制作img代码display:block。

Answer 2

我认为你的意思是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解决方案..然后删除div中的<img>。

Answer 3

根据我的理解，你的两个色带图像宽度都有问题

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

使用此我在第二张图片宽度=“100％”中有更改，如果您有任何其他问题，请使用 http://jsfiddle.net/

感谢。

出于某种原因，我在将图像置于块顶部时遇到问题

3 个答案: