CSS 功能区菜单导致内容和标题之间出现间隙

Question

我不确定如何消除页眉和幻灯片开头之间的巨大差距。 pivotalpixels.com/colusa_fair/我认为问题与功能区导航有关，但是在尝试了很多不同的事情之后，我不知道如何在没有最近的新闻向上移动到导航栏正下方的情况下向上移动内容，导航栏需要在幻灯片下方就像现在一样。

css在下面

谢谢，感谢任何帮助!

    @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

生成“丝带”效果的 r-triangle-top-sec 和 r-triangle-bottom-sec 元素使用了“CSS Triangle Trick”需要较大的边框尺寸(在本例中为 50px)。

由于不可见的边框渲染，这导致了很多额外的高度。

一个快速解决方法是 position:absolute 这些元素。

首先，使容器成为position:relative，这样子元素将使用它作为定位引用点

#sec_navigation_container{
    position:relative /* Add */
    /*...*/
}

将此添加到 r-triange-top-sec

position: absolute;
top: 0;
right: -50px;

将此添加到 r-triange-bottom-sec

position: absolute;
top: -50px;
right: -50px;

这应该会消除一些间距。将这个想法应用到上层“功能区”也可能有所帮助。

更新

事实证明，完全相同的代码也可以用于蓝丝带。冲洗/重复上面的代码，但 #navigation_container、l-triangle-top 和 l-triangle-bottom。

这会将您的“幻灯片”内容移动到导航中。

然后您可以为您的 #header 元素添加一些边距，例如:

margin-bottom:2em;

将“幻灯片放映”推回所需的分隔。 (根据需要调整有效值)

请注意我只是目测了丝带的位置。请根据您的设计需要调整顶部/右侧位置

希望对您有所帮助!