1

我不确定如何消除标题和幻灯片开头之间的大间隙。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;

}
4

1 回答 1

2

r-triangle-top-sec生成“ribbon”效果的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;

将该“幻灯片放映”推回所需的间隔。（根据需要调整有效值）

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

我希望这会有所帮助！

于 2013-04-16T18:37:16.067 回答