Question

我有一个与角落横幅（图片）冲突的导航菜单。但是，它与导航菜单重叠。

以下是大于1024x768的分辨率：

以下是分辨率为1024x768（或更低）的浏览器的样子：

这是我的代码（角落横幅和导航菜单）：

#cornerbanner {
    background: url("../images/corner_banner.png") no-repeat;
    display: block;
    height: 117px;
    width: 117px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    text-decoration: none;
    margin-top: -1px;
    clear: both;
}

ul#navigation {
    float: right;
    display: inline;
    margin-top: -28px;
}

ul#navigation li {
    list-style:none;
    display: inline;
    margin-left: 80px;
    text-transform: uppercase;
}

ul#navigation li a {
    color: #4C4C4C;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
}

ul#navigation li.active {
    border-bottom: 2px solid #C63E24;
    padding-bottom: 3px;
}

Answer 1

你如何希望以低于1024的分辨率查看？你想让李小姐自己调整一下吗？或者出现水平滚动条？

我的建议是考虑固定宽度设计与网格系统相结合，如：

修改

如果你想要它们并排，你可以：

浮动#cornerbanner而非绝对位置

在ul＃navigation
上放一个右边距：117px

这两个都要求包含它们的父级足够宽以容纳它们。

角旗与导航菜单冲突

1 个答案: