Question

我正在制作这个网站，图像和我要放的桌子之间有一个空白区域，我试图找到是否有代码制作该空间但没有找到任何内容。哪里可以问题??

谢谢！

<style>
body {
	padding: 0;
	margin: 0;
    background-color: #F0F0F0;
}

#nav {
	
	font-family:sans-serif;
    background-color:#F0F0F0;
    position: fixed;
	top: 0;
	width: 100%;
	color: #383838;
	height: 27px;
	text-align: center;
	padding-top: 9px;
	z-index: 999;
	

	/* Adds shadow to the bottom of the bar */
	-webkit-box-shadow: 0px 0px 0px 0px #FFA600;
	-moz-box-shadow: 0px 0px 0px 0px ##FFA600;
	box-shadow: 0px 0px 0px 1px #FFA600;
}

#nav a {
	
	font-size: 14px;
	padding-left: 70px;
	padding-right: 50px;
	color: #383838;
	text-decoration: none;
	z-index: 999;
}

#nav a:hover {
	color: #FCC772;
	z-index: 999;
	
} 

header{
	position: relative;
    width: 390px;
	top: 80px;
	padding-bottom:20px;
    z-index: 1;
	margin:0 auto;
}

#hd2{
	padding-top:90px;
	position: relative;
	padding-bottom:15px;
}

.wbox {
	position: relative;
	top: -370px;
   	opacity: 0.6;
	width:750px;
	height:280px;
	z-index: 1;
	margin:0 auto;
}

#textini {
	
	top: -570px;
    height: 150px;
    position: relative;
	padding-bottom:0px;
	margin:0 auto;
	z-index: 3;
}

#textini p{
	padding-bottom:0px;
	padding-top:0px;
	font-family:sans-serif;
	text-align: center;
	font-weight:normal;
	font-size: 28px;
	z-index: 3;
	color:#383838;
}

.s3{
	margin-top:50px;
	margin:0 auto;
	position: relative;

}

.font_8{
	font-family:sans-serif;
	color:#ffffff;
	font-size:18px;
	font-weight:normal;
	margin:0 auto;
	text-align:center;
}

footer {
    background-color:rgba(56, 56, 56, 1);
    clear:both;
    padding:30px;
	border-top: 0px solid rgba(146, 146, 146, 1);
	border-bottom: 0px solid rgba(146, 146, 146, 1);
}
</style>
</head>

<html>
<head>
<meta charset="UTF-8">
	
	<title>Números & Vírgulas</title>
	
	<link rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div id="page-wrap">

<div id="nav" style="overflow:hidden">
<a href="index.html">INÍCIO</a>
<a href="index.html">ATUAÇÃO</a>
<a href="index.html">QUEM SOMOS</a>
<a href="index.html">CONTATOS</a>
</div>

<header>
  <img src="http://i61.tinypic.com/2vjwxv5.png" style="width:100%;height:100%" alt="" />
</header>

<div id="hd2">
<img src="http://i61.tinypic.com/fn4n6q.png"; style="width:100%;height:424px"; alt="" />
</div>

<div class="wbox">
<img src="http://i60.tinypic.com/2ypel9c.png" style="width:100%; height:100%" alt="" />
</div>

<div id="textini">
<p>Os Números constituem uma linguagem universal mas <br> uma Vírgula pode mudar tudo.</p>
<p style="margin-left:350px;font-size:15px">Por: Dr. Sérgio Rosa</p>
</div>

<table style="width:100%:">
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</div>
</table>



<div style="width:330px; top:55px;" class="s3">
 <p style="line-height: 1.6em;" class="font_8"><span style="line-height:1.6em;">© 2013 Números & Vírgulas</span></p>
</div>
<!--
<div class="in" style="width:0 auto; padding-left:0px; right:300px;">
<a href="https://www.linkedin.com/company/n%C3%BAmeros-&-v%C3%ADrgulas---contabilidade-gest%C3%A3o-e-forma%C3%A7%C3%A3o-unipessoal-lda-?trk=top_nav_home">
<img src="http://i59.tinypic.com/jphpix.png" alt=" " style="width:24px;height:24px;margin:0 auto;float:right">
</a>
</div>
-->

<footer>
<br>
</footer>


</body>

</html>

Answer 1

您可以使用下面的

更新您的css来解决问题

＆＃13;

#textini {
  top: -215px;
  height: 150px;
  position: relative;
  padding-bottom: 0px;
  margin: 0 auto;
  z-index: 3;
}
.wbox {
  position: relative;
  top: -370px;
  opacity: 0.6;
  width: 750px;
  height: 280px;
  z-index: 1;
  margin: 0 auto;
  margin-bottom: -370px;
}

＆＃13;

Answer 2

您的空间由<div class='wbox'></div>和<div class='textini'></div>占用，但它们具有设定的高度，但您使用负top值来定位它们。

以下是没有2个元素的网站fixed

因此，您需要重新构建您的网站。

Answer 3

尝试更改relative position to absolute的{{1}}： Demo

<强> CSS：

.wbox & #textini

网站中间的空白区域

3 个答案: