Question

任何人都可以建议我如何摆脱以下小提琴中的功能区导航栏之后的空间： http://jsfiddle.net/BC3FL/？

我知道为什么它被创建但是无法弄清楚如何避免它，除了给条形下面的元素提供固定的负边距..

另外，我尝试了襟翼的绝对位置，但随着高度宽度的变化，它不适用于不同的浏览器。溢出：隐藏在另一个容器中也不会起作用： http://jsfiddle.net/KBs42/ 因为襟翼必须在导航栏上方。

小提琴的基本代码是：

<div id="navigation_container">
<!-- the left side of the fork effect -->
<div class="l-triangle-top"></div>
<div class="l-triangle-bottom"></div>
<!-- the right side of the fork effect -->
<div class="r-triangle-top"></div>
<div class="r-triangle-bottom"></div>
<!-- the ribbon body -->
<div class="rectangle">
<!-- the navigation links -->
<ul id="navigation2">
   <li><a href="index.html"> Home</a></li>
   <li><a href="intro.html"> About</a></li>
   <li><a href="client.html"> Clients</a></li>
   <li><a href="catg.html"> Products</a></li>
   <li><a href="mailto:thakkar@pacmac.co.in"> Contact</a></li>
</ul>
<!-- end the ribbon body -->
</div>
</div>
<!-- end container --> 
<div style="clear:both;"></div>
<div id="wrap">
<p>HEY</p>
</div> 
</div>

和CSS：

#navigation_container {
 margin: 0 auto;
 width: 1080px;
 overflow:hidden;
 height:80px;
 padding: auto;
}
#navigation2 li {
        list-style: none;
        display: block;
        float: left;
  margin: 1em 0.8em;
}
#navigation2 li a {
        text-shadow: 0 2px 1px rgba(0,0,0,0.5);
        display: block;
        text-decoration: none;
        color: #f0f0f0;
        font-size: 1.6em;
        margin: 0;
        line-height: 28px;
}
#navigation2 li.active a:hover,
#navigation2 li a:hover {
        margin-top: 2px;
}

#navigation2 li.active {
        font-style: italic;
}
#navigation2 li.active a {
}
.rectangle {
   background: #e5592e;
   height: 62px;
   width:920px;
   margin: 0 auto;
   position: relative;
   -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
   box-shadow: 0px 0px 4px rgba(0,0,0,0.55);

   -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
 border-radius: 2px;

   z-index: 500; /* the stack order: foreground */
}
.l-triangle-top {
    border-color: #D9542B transparent transparent;
    border-style: solid;
    border-width: 50px;
    float: left;
    height: 0;
    left: 30px;
    position: relative;
    top: 10px;
    width: 0;
}

.l-triangle-bottom {
    border-color: transparent transparent #D9542B;
    border-style: solid;
    border-width: 50px;
    float: left;
    height: 0;
    left: -68px;
    position: relative;
    top: -35px;
    width: 0;
}
.r-triangle-top {
    border-color: #D9542B transparent transparent;
    border-style: solid;
    border-width: 50px;
    float: right;
    height: 0;
    position: relative;
    right: 30px;
    top: 10px;
    width: 0;
}
.r-triangle-bottom {
    border-color: transparent transparent #D9542B;
    border-style: solid;
    border-width: 50px;
    float: right;
    height: 0;
    position: relative;
    right: -68px;
    top: -35px;
    width: 0;
}
</style>

非常感谢。欢迎任何建议/批评。

Answer 1

我会给你的容器元素一个相对位置，然后将三角形片段设置为绝对定位。

#navigation_container {
    position: relative;
}
.l-triangle-top {
    position: absolute;
    left: -50px;
    top: -5px;
}
.l-triangle-bottom: {
    position: absolute;
    left: -50px;
    top: -45px;
}
.r-triangle-top {
    position: absolute;
    right: -50px;
    top: -5px;
}
.r-triangle-bottom: {
    position: absolute;
    right: -50px;
    top: -45px;
}

这将阻止你的三角形元素占用空间并推倒你的内容。

功能区导航栏（Navbar）浮动位置的襟翼

1 个答案: