如何刪除標題和圖像滑塊之間的空隙

Question

這裏是我嘗試開發的一個簡單頁面。

我完全不熟悉html，css和jQuery。

有一個標題菜單，下面是一個圖像滑塊，我已經使用一些YouTube教程編碼。圖像每3秒鐘淡入淡出。

我的標題和滑塊之間存在間隙，我不知道如何擺脫它？當我嘗試在body:after{ background-image:url(...)}中應用背景圖像時，因爲我想讓圖像具有不透明度，所以不會顯示背景圖像。

任何幫助將不勝感激，也是我想知道我的形象滑塊我怎麼

1. 添加內容，如在圖像的描述或它的鏈接？
2. 將視頻集成到我的滑動條中，主要是從YouTube上播放的視頻？

這裏是的jsfiddle：http://jsfiddle.net/vj1023/57aqkdg2/6/

HTML

<header class="mainHeader"> 


    <nav> 
    <ul> 
     <li><a href=" #">LIFE</a></li> 
     <li><a href=" #">REVIEWS</a></li> 
     <li><a href=" #">LISTS</a></li> 
     <li><a href=" #">PHOTO-ESSAYS</a></li> 
     <li><a href=" #">PARENT'S SPEAK</a></li> 
     <li><a href=" #">AGONY AUNT</a></li> 
    </ul> 


    </nav> 

    <div class="sliderWrapper"> 
    <div id="slider"> 
     <Img id="1" src="http://v-pluse24.ru/wp-content/uploads/2014/10/1822-Soccer-Ball-www.WallpaperMotion.com_.jpg"> 
     <Img id="2" src="images/img2.jpg"> 
     <Img id="3" src="images/img3.jpg"> 
     <Img id="4" src="images/img4.jpg"> 
    </div> 
    </div> 

</header> 



<script src="js/jQuery.js"></script> 
<script src="js/slider.js"></script> 
</body> 

CSS

a 
{ 
    text-shadow: 0px 4px 6px #000; 
    color:white!important; 
    text-decoration: none; 
} 

.mainHeader nav 
{ 
    background: rgba(19, 17,17, 0.7); 
    height: 40px; 
    padding: 0px; 
    margin: 0px; 
} 


.mainHeader nav 
{ 
    background: rgba(19, 17,17, 0.7); 
    height: 40px; 
    padding: 0px; 
    margin: 0px; 
} 




img 
{ 
    margin: 0px; 
} 


.mainHeader nav ul 
{ 
    float: right; 
    list-style: none; 
    margin: 0 ; 
} 

.mainHeader nav ul li 
{ 

    display: inline; 
} 

.mainHeader nav a 
{ 
    color: #FFF; 
    display: inline-block; 
    padding: 10px 20px; 
    height: 40px; 
    text-shadow: 0px 1px 3px #FFF; 
} 


.body 
{ 
    margin: 0 auto; 
    clear: both; 
} 



body:after 
    { 
     content: ""; 
     background-color: white; 
     background-repeat:no-repeat; 
     background-size:cover; 
     background-attachment:fixed; 
     background-size:cover; 
     opacity: 0.6; 
     top: 0; 
     left: 0; 
     bottom: 0; 
     right: 0; 
     position: absolute; 
     z-index: -1; 
     text-align: left; 
    } 



.sliderWrapper 
{ 
    vertical-align: top; 
    padding: 0px; 
    margin: 0px; 
} 

#slider 
{ 
    vertical-align: top; 
    width: 100%; 
    height: 400px; 
    overflow: hidden; 
    margin: 0px; 
} 

#slider > Img 
{ 
    width: 100%; 
    height: 400px; 
    float: left; 
} 


.sliderWrapper > a 
{ 
    background-color:white; 
    text-decoration: none; 
    border-radius: 5px; 
    position: absolute; 
    top: 400px; 
} 

使用Javascript/jQuery的

sliderInt=1; 
sliderNext=2; 

$(document).ready(function(){ 
    $('#slider>img#1').fadeIn(100); 
    startSlider(); 
}); 

function startSlider(){ 
    count= $("#slider>img").size(); 

    loop = setInterval(function(){ 

     if(sliderNext>count){ 
      sliderNext=1; 
      sliderInt=1; 
     } 

     $("#slider>img").fadeOut(100); 
     $("#slider>img#"+sliderNext).fadeIn(100); 

     sliderInt=sliderNext; 
     sliderNext = sliderNext+1; 

    }, 2500); 
} 

Answer 1

繼續前進，改變

.mainHeader nav a 
{ 
    color: #FFF; 
    display: inline-block; 
    padding: 10px 20px; 
    height: 40px; 
    text-shadow: 0px 1px 3px #FFF; 

} 

要

.mainHeader nav a 
{ 
    color: #FFF; 
    display: inline-block; 
    padding: 0 20px; 
    height: 40px; 
    text-shadow: 0px 1px 3px #FFF; 

} 

不同的是，有這個CSS類10px的頂部填充，現在有沒有。

編輯：這實際上打破了鏈接的對齊，但絕對是問題。

當你試圖很難找到它們時，這些錯誤非常有彈性。 我通常會做的就是點擊F12並開始禁用不同標籤的css屬性，這可能與問題有關。