絲帶導航欄（Navbar）襟翼浮動位置

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; 
} 

這將阻止你的三角形元素佔用空間並推動你的內容。