Could you help me with removing the space after the ribbon navbar in this fiddle:
http://jsfiddle.net/BC3FL/?
I understand why it's there, but I'm struggling to find a solution without using fixed negative margins for elements below the navbar.
I've tried absolute positioning for flaps, but that causes issues with different browsers due to varying heights and widths. Additionally, overflow:hidden with another container doesn't work either:
http://jsfiddle.net/KBs42/
since the flaps need to be positioned above the navigation bar.
Here is a simplified version of the code:
<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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97e3fff6fcfcf6e5d7e7f6f4faf6f4b9f4f8b9fef9">[email protected]</a>"> 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>
User 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>
Thank you for any advice or feedback you can provide.