헤더와 이미지 슬라이더 사이의 틈을 제거하려면 어떻게합니까?

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; 
} 

자바 스크립트/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 속성을 사용 중지하는 것으로 문제와 관련이 있습니다.