CSS-меню ленты, вызывающее разрыв между содержимым и заголовком

Question

Я не уверен, как удалить большой пробел между моим заголовком и началом слайд-шоу. pivotalpixels.com/colusa_fair/ Я считаю, что проблема связана с навигацией ленты, но после того, как я попробовал множество разных вещей, я не знаю, как перемещать контент без недавних новостей, перемещающихся прямо под панель навигации, которые должны находиться под показ слайдов.

КСС ниже

Спасибо Я признателен за любую помощь!

@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-треугольник», который 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; 

Это должно избавиться от некоторых шатун. Применение этой идеи к верхней «ленте» также может помочь.

UPDATE

Оказывается, тот же самый код может быть использован для синей ленты, а также. Промыть/повторить вышеуказанный код, но для #navigation_container, l-triangle-top и l-triangle-bottom.

Это переместит ваше содержимое слайд-шоу на навигацию.

Вы можете добавить некоторый запас для вашего #header элемента, такие как:

margin-bottom:2em; 

нажать, что «слайд-шоу» вниз до желаемого разделения. (скорректируйте действующий по желанию)

примечание Я только что рассмотрел размещение ленты. Пожалуйста, отрегулируйте верхнее/правое положение по мере необходимости для вашего дизайна.

Надеюсь, что это поможет!