为从切片构建的导航项添加背景颜色

Question

我正在设计一个自定义导航菜单，您可以看到它的当前状态here。每个单独的导航项如下所示：

因此，基本上每个导航项都“悬挂”在水平条上。图像的主要部分由图像的三个切片组成：

左： 右： 中：

中间 DIV 的背景应用了 repeat-x，因此它会增长以适应导航项的内容，即文本。

这是我目前用于左侧、右侧和中间 DIV 的 CSS：

.left {
    float: left;
    width: 13px;
    background-image: url(nav/images/nav_01.png);
    background-repeat: no-repeat;
    height:46px;
    margin-left:2%;
}

.middle {
    width:auto;
    float:left;
    background-image: url(nav/images/nav_02.png);
    background-repeat: repeat-x;
    font-size:20px;
    font-family: Typewriter;
    color:#393526;
    height:46px;
    padding-left:1px;
}

.right {
    float: left;
    width: 13px;
    background-image: url(nav/images/nav_03.png);
    background-repeat: no-repeat;
    height:46px;
}

到目前为止一切都很好，但是我必须弄清楚如何将连接主水平条的垂直条加入到为导航项构建的图像中，以便它始终居中。我这样做的方法是在中间 div 中包含一个 div，如下所示：

<li>
<div class="nav_image">
<div class="left"></div>
<div class="middle"><div class="top"></div>home</div>
<div class="right"></div>
</div>
</li>

然后将负边距顶部应用于“顶部”DIV：

.top {
    height:27px;
    background-image: url(nav/images/top.png);
    background-repeat: no-repeat;
    background-position-x: center;
    margin-top:-24px;
}

和 'nav_image' DIV 的正边距顶部：

.nav_image {
    margin-top:27px;
}

我不确定这是否是实现我正在寻找的最佳方式，但它目前正在发挥作用。

我遇到的问题是为“nav_image”DIV 设置背景颜色。我想为此设置一种颜色，并在悬停时设置另一种颜色。我希望我可以为这个 DIV 添加圆角，然后为此设置一个背景颜色，以显示在背景图像后面。

目前 DIV 'nav_image' 显示宽度为 1200 像素，高度为 0 像素。我原以为它会继承三个子 DIVS 的总宽度，即左、中和右，但显然这不是正在发生的事情。所以我似乎没有一个 DIV 来应用背景颜色。

我希望这很清楚，感谢阅读，我很高兴得到任何建议。

尼克。

Answer 1

您可以在开始时大大简化标记。

<li>
    <a>
         Home
    </a>
</li>

然后我会使用伪元素而不是直接的 HTML 标记来实现“侧面图像”。我没有对此进行测试，但它应该为您指明正确的方向：

这里的主要补充是：1）在 :before 和 :after 伪元素上使用绝对定位，以及 2）向 <a> 元素添加 13px 左右填充。除此之外，您的代码看起来很正确，并且 3) display: block on the <a> 我认为这对于让它正常工作可能很重要

li a {
    padding: 0 13px;
    width:auto;
    float:left;
    display: block;
    position: relative;
    background-image: url(nav/images/nav_02.png);
    background-repeat: repeat-x;
    font-size:20px;
    font-family: Typewriter;
    color:#393526;
    height:46px;
    padding-left:1px;
}

li a:before,
li a:after {
    content: ' ';
    width: 13px;
    height:46px;
    position: absolute;
    top: 0;
    background-repeat: no-repeat
}

li a:before {
    left: 0;
    background-image: url(nav/images/nav_03.png);
}

li a:after {
    right: 0;
    background-image: url(nav/images/nav_01.png);
}

Answer 2

您好，我认为您应该喜欢这个，我检查了您的代码，并对您的导航和徽标进行了一些修改和轻松创建代码，请检查'

CSS

.header, .navi, ul, li, a, span{
    margin:0;
    padding:0;
}
    .header{
        overflow:hidden;
        z-index:5;    }


        .logo{
            position:relative;
            z-index:1;
    height:188px;
    width:100%;
        }


        .navi{
            position:absolute;
            left:40%;
            right:0;
            z-index:2;
            top:148px;
            list-style:none;
        }


        li{
            float:left;
            background:url('http://soteriabrighton.co.uk/test2/nav/images/top.png') no-repeat 10% 0;
            margin-left:2%;
        }
        .navi a{
            background:url('http://s16.postimage.org/yqxo6bq6p/navi_left.png') no-repeat left top;
            padding-left:9px;
            color:#000;
            margin-top:27px;
            text-decoration:none;
            font-size:22px;
            float:left;
                border-radius:5px 0 0 5px;
        }
        .navi a span{
            background:url('http://s17.postimage.org/ukpot5zcb/navi_right.png') no-repeat right top;
            padding-right:9px;
            float:left;
            line-height:38px;
            border-radius:0 5px 5px 0;
        }
        .navi a:hover span, .navi a:hover{
            background:green;
            color:#fff;
            border-radius:5px;
        }

HTML

<div class="header">
        <img src="http://soteriabrighton.co.uk/test2/logo.png" alt="" class="logo" />
        <ul class="navi">
            <li><a href="#"><span>home</span></a></li>
            <li><a href="#"><span>news</span></a></li>
            <li><a href="#"><span>forums</span></a></li>
            <li><a href="#"><span>articles</span></a></li>
            <li><a href="#"><span>contact</span></a></li>
        </ul>
    </div>

现场演示http://jsfiddle.net/Kj2e9/

Answer 3

1) 将这些添加到 css 中：

ul#list-nav li {
    float:left;
    display:inline;
}

.clear {
    clear:both;
}

2) 在每个<div class="right"></div> 之后添加<div class="clear"></div>

3) 删除.left 的margin-left: 2%;（改为为ul#list-nav li 添加边距）

nav_image 现在应该有正确的宽度和高度了