CSS ribbon menu causing gap between content and header - css

Question

I am not sure how to remove the large gap between my header and the beginning of the slideshow. pivotalpixels.com/colusa_fair/ I believe that the problem is something to do with the ribbon navigation but after trying tons of different things I do not know how to move the content up without the recent news moving up to right underneath the navigation bar, which needs to be under the slideshow as it currently is.
css is below
Thanks I appreciate any help!
#charset "utf-8";
/* CSS Document */
body {
margin:0px;
padding:0px;
background-color:#c4c0be;
background-image:url(../images/bluewoodbkgd.jpg);
margin:0px; padding:0px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#7f7d78;
font-size:13px;
line-height:19px;
}
h1{}
h2 {
margin:0px 0px 10px 0px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
font-weight: bold;
}
h3{font-size:16px; color: #142b4e; font-weight: bold;}
small {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#007de2;
text-decoration:none;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }
#main {
min-height: 500px;
}
#footer {
color:white;
}
.container {
width:994px;
margin:0 auto;
}
#header {
padding-top:10px;
margin: 0;
}
#logo h1 {
margin:0px;
display:block;
text-indent:-9999px;
}
/* Fix up IE6 PNG Support */
img, #logo { behavior: url(scripts/iepngfix.htc); }
#logo {
position: absolute;
top:-25px;
background-image:url(../images/logo_colusa.png);
background-repeat:no-repeat;
margin: 0 0 0 25px;
width:240px;
height:147px;
}
#navigation_container {
width: 994px;
margin: 0;
}
ul#menu{
margin: 0;
top:10px;
position: absolute;
left: 300px;
}
ul#menu li {
list-style: none;
float: left;
display: inline;
}
ul#menu li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
text-decoration: none;
margin: 0 10px 0 0;
color:#FFF;
font: 18px/27px 'ArvoRegular', Arial, sans-serif;
line-height: 28px;
}
ul#menu li a.active, ul#menu li a:hover {
color:#5a8c35;
text-decoration: underline;
margin-top: 2px;
}
.rectangle {
background: #142b4e;
height: 52px;
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 */
margin: 35px 0 0 0;
}
.l-triangle-top {
border-color: #142b4e transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 0px;
left: -50px;
}
.l-triangle-bottom {
border-color: transparent transparent #142b4e;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: -49px;
left: -150px;
}
.r-triangle-top {
border-color: #142b4e transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -45px;
top: -50px;
}
.r-triangle-bottom {
border-color: transparent transparent #142b4e;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -100px;
right: -145px;
}
#sec_navigation_container {
width: 600px;
margin: 0 0 0 255px;
}
ul#menu_sec{
margin: 0;
top:10px;
position: absolute;
left: 110px;
}
ul#menu_sec li {
list-style: none;
float: left;
display: inline;
}
ul#menu_sec li a {
text-shadow: 0 2px 1px rgba(0,0,0,0.5);
text-decoration: none;
margin: 0 10px 0 0;
color:#FFF;
font: 18px/27px 'ArvoRegular', Arial, sans-serif;
line-height: 28px;
}
ul#menu_sec li a.active, ul#menu_sec li a:hover {
color:#ce6536;
text-decoration: underline;
margin-top: 2px;
}
.rectangle_mainsec {
background: #ce6536;
height: 52px;
position: relative;
z-index: 500; /* the stack order: foreground */
margin: 0;
}
.l-triangle-top-sec {
border-color: #ce6536 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: 0px;
left: -50px;
}
.l-triangle-bottom-sec {
border-color: transparent transparent #ce6536;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: left;
top: -49px;
left: -150px;
}
.r-triangle-top-sec {
border-color: #ce6536 transparent transparent;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
right: -125px;
top: -53px;
}
.r-triangle-bottom-sec {
border-color: transparent transparent #ce6536;
border-style:solid;
border-width:50px;
height:0px;
width:0px;
position: relative;
float: right;
top: -100px;
right: -225px;
}
/*
Block-Styles
*/
.block {
margin-bottom:20px;
}
.block_inside {
padding:0 20px;
}
.image_block {
border:1px solid #557f9d;
background-color:#ffffff;
padding:5px;
float:left;
}
.image_block img {
border:1px solid #b5b5b5;
}
#block_slideshow{
overflow: hidden;
width: 100%;
}
.upcoming_events {
float:left;
width:315px;
height: 325px;
margin-left:30px;
padding: 10px;
border: 1px solid #557f9d;
background-color:#ffffff;
}
.upcoming_events h2, #event_items h2{
position: relative;
width: 90%;
font: 24px/27px 'DancingScriptOTRegular', Arial, sans-serif;
padding: 6px 20px 6px 30px;
margin: 4px 10px 10px -31px;
color: #fff;
background-color: #5a8c35;
text-shadow: 0px 1px 2px #7c7c7c;
-webkit-box-shadow: 0px 2px 2px 0px #295e04;
-moz-box-shadow: 0px 2px 2px 0px #295e04;
box-shadow: 0px 2px 1px 0px #295e04;
border: 1px solid #295e04;
}
.upcoming_events h2:before, #event_items h2:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -2px;
top: 0px;
border-style: solid;
border-width:20px;
border-color: transparent #fff transparent transparent;
}
.upcoming_events h2:after, #event_items h2:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #295e04 #295e04 transparent transparent;
}
.block_content{ padding: 10px;}
#block_recent{overflow:auto;
margin-bottom:20px; }
#event_items {
width:560px;
margin-right:25px;
margin-left: 20px;
float:left;
padding: 10px;
border: 1px solid #557f9d;
background-color:#ffffff;
}
#countdown {
float:right;
width:332px;
height: 175px;
margin-right: 20px;
margin-bottom:20px;
background-image: url(../images/countdown.png);
background-repeat:no-repeat;
}
#block_right {
float:right;
width:332px;
height: 175px;
margin-right: 20px;
margin-bottom: 20px;
background-image: url(../images/countdown.png);
background-repeat:no-repeat;
}
.mini_event_item {
width: 48%;
margin: 5px 0px 10px 10px;
float: left;
}
.date{color: #5a8c35; font-weight: bold;}
.mini_event_item .block_inside {
padding:25px 30px 15px 30px;
}
.mini_event_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }
#sponsors{margin: 10px 0px; padding: 10px; height: 95px; background-color: #142b4e; }
.sponsor_item,footer_item{float: left; margin-right: 10px; padding: 10px; height: 70px; background-color: #ffffff; border: 1px solid #000;}
#footer {
font: 18px/27px 'ArvoRegular', Arial, sans-serif;
}
.footer_column {
float:left;
width:300px;
margin-right:10px;
}
#footer .long {
width:670px;
}
#footer h3 {
color:#fff;
text-shadow: 1px 1px 1px #000;
}
#footer h4{
font-size: 16px;
text-shadow: 1px 1px 1px #000;
}
#footer p{ font-size: 12px;
}
ul.industry_links{
padding: 10px;
display: inline;
}
ul.industry_links li {
float:left;
list-style:none;
text-align: center;
}
ul.industry_links li a{
display:block;
width: 135px;
height: 79px;
margin-right: 10px;
padding: 10px;
background-color: #ffffff;
border: 1px solid #039;
text-align: center;
}
.footer_column ul li, .footer_column ul {
list-style:none;
margin:0px;
padding:0px;
font-size: 12px;
}

Answer 1

The r-triangle-top-sec and r-triangle-bottom-sec elements that generate the "ribbon" effect are using the "CSS Triangle Trick" which requires a large border size (50px in this case).
This is causing a lot of extra height due to the invisible border rendering.
One quick fix is to position:absolute these elements.
First, make the container position:relative so the child elements will use it as a positioning reference point
#sec_navigation_container{
position:relative /* Add */
/*...*/
}
Add this to r-triange-top-sec
position: absolute;
top: 0;
right: -50px;
Add this to r-triange-bottom-sec
position: absolute;
top: -50px;
right: -50px;
That should get rid of some of that spacing. Applying this idea to the upper "ribbon" might help as well.
UPDATE
Turns out, the exact same code can be used for the blue ribbon as well. Rinse/repeate the above code but for #navigation_container, l-triangle-top and l-triangle-bottom.
That will move your "slideshow" content flush to the navigation.
You can then add some margin to your #header element such as:
margin-bottom:2em;
to push that "slideshow" back down to a desired separation. (adjust the valid as desired)
note I just eyeballed the placement of the ribbon. Please adjust top/right position as needed for your design
I hope that helps!