为什么我的网页上的空白空间消失了？

时间：2018-10-31 18:31:56

标签： html

我完全是业余爱好者，并且我自己正在学习HTML，以供工作。我可以进行简单的调整，但最近我为即将到来的慈善活动添加了自定义的贝宝按钮。我以前有一张应该在哪里按下按钮的图片。我用按钮替换了图片，所有内容都被推到页面底部。我有一种预感，图片上方的链接可能占用了它们之间的空间，但是我无法看到空白空间的来源。 Here is a link to the page

这是表单（按钮）与链接框相遇的区域中的代码片段。我为我在这里的措辞表示歉意，就像我说过的所有这些相对较新。

CSS：

    @charset "UTF-8";
/* CSS Document */
body {
    position: relative;
    text-align: center;
    margin: 0px;
    padding: 0px;
    background-color: #008d96;
}
#middle_nav_bar {
min-height: 134px;
height: 176px;
width: 976px;
background-color: white;
}
#whicker_park {
top: 20%;
}
#our_story {
    position: relative;
    left: 150px;
    top: -109px;
}
#follow_us {
    position: relative;
    left: 286px;
    top: -218px;
}
#you_can_help {
    position: relative;
    left: 433px;
    top: -327px;
    width: 138px;
}
#quality {
    position: relative;
    left: 575px;
    top: -436px;
    width: 178px;
}
#main_text {
    background-color: #FFFFFF;
    min-height: 200px;
    position: absolute;
    left: 0px;
    top: 812px;
    max-width: 976px;
}
#text {
    position: relative;
    left: 110px;
    top: 75px;
    max-width: 753px;
}
#text2 {
    position: relative;
    left: 110px;
    top: 20px;
    max-width: 753px;
}
p {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    color: #000000;
}
.p {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    text-decoration: none;
    color: #000000;
}
.p a:link {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    text-decoration: none;
    color: #000000;
}
.p a:visited {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    text-decoration: none;
    color: #000000;
}
.p a:hover {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    text-decoration: none;
    color: #1F8D96;
}
.p a:active {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
    text-decoration: none;
    color: #000000;
}
h1 {
    font-family: "Roboto", sans-serif;
    font-size: 24px;
    line-height: 28px;
    color: #008D96;
    text-align: left;
}
h2 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 22px;
    line-height: 28px;
    text-align: left;
}
h3 {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 18px;
    line-height: 28px;
    padding-left: 0px;
    margin-left: -75px;
    margin-top: 0px;
    font-weight: normal;
}

#wrapper {
    position: relative;
    width: 976px;
    text-align: left;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#header {
    background-color: #FFF;
    margin: 0px;
    padding: 0px;
    height: 505px;
    width: 976px;
    position: relative;
}
#logo {
    position: absolute;
    top: 26px;
    left: 38px;
}
#star {
    position: absolute;
    top: 170px;
    left: 637px;
}
#arc {
    position: absolute;
    top: 439px;
    left: 635px;
}
#rotator {
    position: absolute;
    top: 214px;
    left: 0px;
    min-height: 373px;
    min-width: 619px;
}
#nav {
    position: absolute;
    top: 35px;
    width: 976px;
    text-align: left;
    left: 32px;
}
h3 {
    text-align: center;
    top: auto;
}
.h3 {
    text-align: center;
    top: auto;
    color: #000000;
}
.h3 a:link {
    text-align: center;
    top: auto;
    text-decoration: none;
    color: #000000;
}
.h3 a:visited {
    text-align: center;
    top: auto;
    text-decoration: none;
    color: #000000;
}
.h3 a:hover {
    text-align: center;
    top: auto;
    text-decoration: none;
    color: #008D96;
}
.h3 a:active {
    text-align: center;
    top: auto;
    text-decoration: none;
    color: #000000;
}
#footer {
    background-color: #D4E7EC;
    min-width: 976px;
    min-height: 150px;
    position: relative;
    top: 20px;
}
#footer_text {
    position: relative;
    top: 30px;
    left: 32px;
}
.center {
    text-align: center;
}
.center2 {
    text-align: center;
    line-height: 8px;
    color: #CC0407;
}
#message {
    position: absolute;
    top: 384px;
    left: 664px;
    z-index: 100;
}
.green {
    color: #1F8D96;
}

HTML：

<!doctype html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Bi-County Services</title>
    <!-- bjqs.css contains the *essential* css needed for the slider to work -->
    <link href="bjqs.css" rel="stylesheet" /><!-- load jQuery and the plugin --><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="js/bjqs-1.3.min.js"></script>
    <link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700" rel="stylesheet" type="text/css" />
    <link href="css/style_bcs.css" rel="stylesheet" type="text/css" /><script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onload="MM_preloadImages('images/whicker_park_over.png')">
<div id="wrapper">
<div id="grey_bar_top"><img height="18" src="images/gray_bar_top.jpg" width="976" /></div>

<div id="top_nav_bar"><img height="69" src="images/top_nav_bar.jpg" width="976" />
<div id="nav">
<h3><span class="h3"><a href="index.html">Home</a></span> &nbsp;| &nbsp;<span class="h3"><a href="about_us.html">About Us</a></span> &nbsp;| &nbsp;<span class="h3"><a href="success_stories.html">Success Stories</a></span> &nbsp;| &nbsp;<span class="h3"><a href="contact_us.html">Contact Us</a></span> &nbsp;| &nbsp;<span class="h3"><a href="employment.html">Employment</a></span> &nbsp;| &nbsp;<span class="h3"><a href="https://www.bi-countyservices.com/cafe/html//login.html" target="_blank">Portal</a></span> | &nbsp;<span class="h3"><a href="http://bi-countyservices.com/title_vi_notification.pdf" target="_blank">Title VI</a></span></h3>
</div>
</div>

<div id="header">
<div id="logo"><img alt="" height="80" src="images/logo_text.png" width="701" /></div>
</div>

<div id="star"><img alt="" height="254" src="images/star.png" width="311" /></div>

<div id="arc"><img alt="" height="117" src="images/arc_logo.jpg" width="331" /></div>

<div id="rotator">
<div id="banner-fade"><!-- start Basic Jquery Slider -->
<ul class="bjqs">
    <li><img src="images/rotator1.jpg" /></li>
    <li><img src="images/main_images/ax81501.jpg" /></li>
    <li><img src="images/rotator2.jpg" /></li>
    <li><img src="images/main_images/ax81504.jpg" /></li>
    <li><img src="images/rotator3.jpg" /></li>
    <li><img src="images/main_images/ax81505.jpg" /></li>
    <li><img src="images/rotator4.jpg" /></li>
    <li><img src="images/main_images/ax81502.jpg" /></li>
    <li><img src="images/rotator6.jpg" /></li>
</ul>
<!-- end Basic jQuery Slider --></div>
</div>

<div id="mission"><img src="images/mission.jpg" width="976" height="79" alt="mission_statement" /></div>
<div id="middle_nav_bar">
  <div id="whicker_park"><a href="whicker_park.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/whicker_park_over.png',1)"><img src="images/whicker_park_norm.png" alt="" width="147" height="105" id="Image5"></a>
  <div id="our_story"><a href="our_story.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/our_story_over.png',1)"><img src="images/our_story_norm.png" alt="" width="136" height="105" id="Image6"></a></div>
  <div id="follow_us"><a href="https://www.facebook.com/bicountyservicesinc/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/follow_us_over.png',1)"><img src="images/follow_us_norm.png" alt="" width="118" height="105" id="Image7"></a></div>
  <div id="you_can_help"><a href="you_can_help.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/you_can_help_over.png',1)"><img src="images/you_can_help_norm.png" alt="" width="138" height="105" id="Image8"></a></div>
  <div id="quality"><a href="quality.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','images/quality_over.png',1)"><img src="images/quality_norm.png" alt="" width="178" height="105" id="Image9"></a></div>
  </div>
<div>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input name="cmd" type="hidden" value="_s-xclick" /> <input name="hosted_button_id" type="hidden" value="9CBETSUBHDDX4" /> <input alt="PayPal - The safer, easier way to pay online!" name="submit" src="http://www.bi-countyservices.com/images/2018givingtuesday.png" style="border-width: 0px; border-style: solid; width: 975px; height: 460px;" type="image" /> <img alt="" border="0" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width=".5" /><a><img alt="mission_statement" height="81" src="images/mission.jpg" width="976" /></a></form>

</div>

<div id="footer">
<div id="footer_logo"></div>
<div id="footer_text">
<h3><img alt="" height="45" src="images/footer_logo.png" width="300" /></h3>

<h3><span class="h3"><a href="index.html">Home</a></span> &nbsp;| <span class="h3"><a href="about_us.html">About Us</a></span> &nbsp;| <span class="h3"><a href="success_stories.html">Success Stories</a></span> &nbsp;| <span class="h3"><a href="contact_us.html">Contact Us</a></span> &nbsp;| <span class="h3"><a href="employment.html">Employment</a></span> &nbsp;| <span class="h3"><a href="https://www.bi-countyservices.com/cafe/html//login.html" target="_blank">Portal</a></span> | <span class="h3"><a href="title_vi_notification.pdf" target="_blank">Title VI</a></span></h3></div>
</div>
</div>
</div>
<script class="secret-source">
        jQuery(document).ready(function($) {

          $('#banner-fade').bjqs({
            height      : 373,
            width       : 619,
            responsive  : true,
            // control and marker configuration
            showcontrols : false, // show next and prev controls
            centercontrols : false, // center controls verically
            showmarkers : false, // Show individual slide markers
            centermarkers : false, // Center markers horizontally

          });

        });
      </script></body>
</html>

4 个答案:

答案 0 :(得分：2)

您永远不会关闭whicker_park div（或将其关闭在错误的位置），因此下面的元素（例如our_story，follow_us）实际上位于whicker_park ID而非兄弟姐妹之内。

尝试像其余部分一样关闭该div，您也没有关闭“页脚” div。...

答案 1 :(得分：1)

1。）如果图像只是白框，可能不希望显示图像，就像#whicker_park div之前一样。如果您删除了它，而是将中间div更改为：

#middle_nav_bar {
min-height: 134px;
height: 176px;
width: 976px;
background-color: white;
}

您将获得相同的效果，但它不会依赖图像，这将占用您网站上的空间并可能影响其他元素。

2。）要使图标恢复原位，只需更改

#whicker_park {
top: -125px;
}

到

#whicker_park {
top: 20%;
}

3。）将表单的Paypal按钮移到#wrapper div之外。完成这些更改后，该网站将按照您的要求进行显示。

The final product.

答案 2 :(得分：0)

间距是通过将每个链接的顶部和左侧样式设置为页面上的确切位置引起的。给他们一个css类，并用这样的嵌入式显示为它们设置样式会更合适：

编辑：当其他答案指出时，正确关闭whicker_park div。

.sitelink {
  display: inline-block;
  
  /* these are just to give the divs some visual content to demo here */
  background-color: blue;
  width: 50px;
  height: 50px;
  margin: 10px;
}
<div class="sitelink" id="whicker_park"></div>
<div class="sitelink" id="our_story"></div>
<div class="sitelink"></div>
<div class="sitelink"></div>
<div class="sitelink"></div>
<div class="sitelink"></div>

答案 3 :(得分：0)

简单的技巧是将“ height”属性添加到“ #whicker_park” 

#whicker_park {
    position: relative;
    left: 116px;
    top: -125px;
    width: 178px;
    height: 0px;
}
相关问题
最新问题