0

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

导航项

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

左：在此处输入图像描述 右：在此处输入图像描述和中间：在此处输入图像描述

中间 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 来应用背景颜色。

我希望这很清楚，感谢您的阅读，我很乐意就此获得任何建议。

缺口。

4

3 回答 3

1

1）将这些添加到CSS：

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

.clear {
    clear:both;
}

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

3) 删除.left's margin-left: 2%;(改为添加边距ul#list-nav li)

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

于 2012-05-28T03:02:49.850 回答
0

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

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/

于 2012-05-28T05:28:37.780 回答
0

您可以简化标记很多开始。

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

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

<a>这里的主要补充是：1）在 :before 和 :after 伪上使用绝对定位和 2）向元素添加 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);
}
于 2012-05-28T05:29:29.917 回答