如何消除标题和图像滑块之间的间隙

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属性，这可能与问题有关。