Question

我正在建立一个网站，我仍然处于学习的阶段，我会说这是我最复杂的布局。基本上我在页面顶部有一个不寻常的横幅，我认为这会导致我的问题。在页面的页脚上方有一个很大的空白区域。我认为这是由于我不得不使用像top这样的东西：-200px;在我的一些div上，以便他们在正确的位置。

让一个有经验的眼睛的人看一遍真的很有帮助。

这是网站 - www.redchevron.co.uk

这是html -

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/font.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" type="text/css" href="css/home_stylesheet.css">
<title>Red Chevron | Graphic Design</title>
<META NAME="description" CONTENT="At Red Chevron, we strive to bring you crisp, quality designs to suit your needs.  Digital Graphics | Corporate Identity | Promotional Material">
<META NAME="keywords" CONTENT="graphics, rob, jeffrey, graphic, design, photoshop, logo, business, card, leaflet, flyer, freelance, red, chevron, redchevron, designer, digital, quality, media">
<script>
  $(“body”).Scrollbar();
  </script>
</head>

<body>



<div class="banner">
<div class="navigation">

        <ul>
          <li><a class="nav" href="index.html">Home</a></li>
          <li><a class="nav" href="#">Portfolio</a></li>
          <li><a class="nav"></a></li>
          <li><a class="nav" href="#">About me</a></li>
          <li><a class="nav" href="#">Contact</a></li>


        </ul>

      </div>
</div>

<div class="headround">

</div>

<div class="headlogo">
<img src="images/head_logo.png">
</div>

<!-- stop here for header -->


<div class="maincont">
<div class="mainfeat">
<img src="images/feat_flag.png">
<div class="maininfo"><!--feature-->

</div>
</div>
  </div>


<div class="maincont">
<div class="mainfeat">
<img src="images/news_flag.png">
<div class="maininfo"><!--news-->
  <h2> Coming Soon </h2>
Thank you for visiting Red Chevron.<br><br>
My name is Rob Jeffrey, founder of Red Chevron. I offer quality, affordable graphic design services to suit your needs. 
Whether you need a new Corporate Identity, promotional material, or anything in between, I am here to make your ideas a reality.<br><br>

I have spent over 6 years refining and polishing my Digital Design skills in order to give my clients the very best results.<br><br>
Unfortunately this site is currently under construction.<br>
If you would like to contact me, please use the details below:<br><br>
Rob Jeffrey<br>
<b>Call:</b> 07925 870385<br>
  <b>Email:</b> rob.jeffrey@redchevron.co.uk 
</div>
</div>
  </div>


<div class="maincont">
<div class="mainfeat">
<img src="images/pipe_flag.png">
<div class="maininfo"><!--pipeline-->

</div>
</div>

    <div class="footer">
&copy; 2014 Red Chevron  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; All Rights Reserved
  </div>
  </div>

  <!-- Start of footer -->




</body>

</html>

和css -

标题 -

*{
margin:0px;
  padding:0px;

}

body{
  overflow-x:hidden;
}


.banner{
width:100%;
height:80px;
position:relative;
z-index:10;
background-color:white;
box-shadow: 0px 2px 15px  rgba(0, 0, 0, 0.6);
  overflow:hidden;

}

.headround{
background: #fff;
  position:relative;
  float: center;
    margin:auto;
  height: 76px;
  width: 164px;
  z-index:100;
 -webkit-border-radius: 0px 0px 76px 76px;
    -moz-border-radius: 0px 0px 76px 76px;
    border-radius: 0px 0px 76px 76px;
  box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
}

.headlogo{
position:relative;
z-index:101;
width:124px;
margin:auto;
float:center;
top:-144px;
}

.navigation
{
  width: 1300px;
  overflow:auto;
  margin:25px auto 0px auto;
  padding:0px;
  float:center;



}


ul {
  list-style-type:none;
  margin:auto;
  padding:0;
text-align:center;

}


li {
  display:inline-block;
  float:center;
  text-align:center;
  font-size:34px;
font-family:walkway;
}

.nav {
  display:inline-block;
  width:250px;
  height:30px;
  color:black;
  text-decoration:none;
text-align:center;
  padding:2px;
  float:center;


}


::-webkit-scrollbar {
 width: 10px;
 height: 10px;

}

::-webkit-scrollbar-track {
 background-color: rgba(235,235,235,1);
 -webkit-border-radius: 0px;

}
 ::-webkit-scrollbar-thumb:vertical {
 background-color: rgba(231,52,39,1);
 -webkit-border-radius: 0px;
 }
 ::-webkit-scrollbar-thumb:vertical:hover,
 ::-webkit-scrollbar-thumb:horizontal:hover {
 background: rgba(231,52,39,1);

}
 ::-webkit-scrollbar-thumb:horizontal {
 background-color: rgba(231,52,39,1);
 -webkit-border-radius: 0px;
 }

主页样式表 -

*{
margin:0px;
padding:0px;
}

body{
  overflow-y:hidden;
}

.maincont{
  margin:0 auto;
  float:center;
  width:1350px;
  padding-left:1px;
  height:auto;
  z-index:1;
  position:relative;
  top:-220px;
  color:white;
  font-family:verdana;
  font-size:11pt;
}

.mainfeat{
  width:450px;
  height:auto;
  text-align:center;
  float:left;
  margin:auto;

}



.maininfo{
  height:428px;
  width:378px;
  top:-56px;
  z-index:-1;
  position:relative;
  background:#303030;
  margin:0px 30px;
  padding:61px 5px 5px 5px;
}

h2{
  color:#e73427;
}

和页脚 -

.footer{
  width:100%;
  height:auto;
  text-align:center;
  color:#b4b4b4;
  font-family:verdana;
  clear:both;
  padding:10px;
  bottom:-100px;
  vertical-align:bottom;
}

就像我说我是初学者所以如果有更合理的方式来构建我的横幅并摆脱白色空间，请告诉我。

非常感谢你们

Answer 1

正如你所说，看起来罪魁祸首就是你对位置CSS的使用。如果我从maincont div中禁用top: -220px;，则会消除差距。

至于解决方案......？我不太确定，真的。有很多更简洁的方法来编写你正在尝试做的事情，使用不同的方法，从我在页面源中看到的。

也许其他人可能会建议你可以修改它的方法，但从我的角度来看，我会重做或多或少的一切，因为其他问题，例如我们在关于溢出的评论中讨论过的问题。此外，页面的宽度和溢出-x基本上会阻止用户在较小的屏幕/浏览器宽度/分辨率上看到网站右侧的一大块。

Answer 2

不是最好的也不是最好的编码方式，但有时在底部的负边距相当于负顶部工作或更改顶部：-220px;至margin-top：-220px;

由于位置限制空白空白？

2 个答案: