搜索
搜索

页脚内容

Michael Zucker 发表于 Dev
25
迈克尔·扎克（Michael Zucker）

因此，我查看了所有与此相关的帖子，并尝试了所有方法...我的内容正在按需降低页脚。但是，div的一小部分覆盖了我的页脚。可以在http：// www找到。newshongumpto.org

它只是div的底部，我无法弄清楚原因。我不得不将页脚css移动到实际的include文件，因为找不到媒体查询来隐藏移动页脚，但是我离题了。我知道，这里发生了很多事情：

网站CSS：

@charset "UTF-8";

.navbar-nav> li > a {
  font-family: 'Arial';
  font-weight: bold;
  color: #000000;
  font-size: 15px;  
}

.dropdown-menu > li > a {
    font-family: 'Arial';
  font-weight: bold;
    color: #000000;
    font-size: 15px;    
}

.navbar-default { 
  border-color: #000000; 
}

.nav.navbar-nav a:hover {
  color: #206E38;
}

.dropdown-menu .dropdown .dropdown-toggle a {
    font-family: 'Arial';
    font-weight: bold;
    font-size: 15px;
}

.banner {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,206e38+100&1+0,0.52+43,1+100 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(159,193,169,0.52) 43%, rgba(32,110,56,1) 100%); /* FF3.6-15 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#206e38',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}


.ptobigtitle {
    font-family:'Anton', sans-serif;
    padding: 10px;

}

.ptosubtitle {
    font-family: 'Anton', sans-serif !important;
    padding-left: 10px;
    font-size: 30px;
    color: #535252;
}

.navbar-btn {
    float: right;

}

.btn-default {
    background-color: #206E38;
    color:#FFF;
}
.jumbotronimg {
    float: right;
}

.learnmorebtn {
    margin-left: 200px;

}

.articleheadline{
    font-family: 'Anton', sans-serif;
    font-size: 20px;
    background: #A1C2AB;
    color: #000;
    letter-spacing: 2px;
    padding: 5px;
    max-width: 400px;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border-style: solid;
    border-width: 1px;
}

.info{

    text-align: center;
    top: 37px;
}

.rightinfo{

    text-align: center;
}


.footer { 

    display:block;
    background:#CDCDCD;
    overflow:hidden;
    margin-bottom: 0;
    postion: fixed !important;
    height: auto;
    bottom: 0 !important;
    width: 100%;
    clear: both;

        }


.bottomfooter {
    color:#FFF;
    font-family: 'Arial';
    font-size: 10px;
    background: #CDCDCD;
    bottom: 0;
}


.footerheading {
    font-family: 'Anton', sans-serif;
    font-size: 18px;
    text-align: center;
    text-decoration: underline;


}

.form-inline{
    background: #CDCDCD;
}

#mc_embed_signup #mce-EMAIL{
    font-family: "Arial";
    font-size: 13px;
    padding: 5px;
    padding-top: 2px;
    margin-left:auto;
    margin-right:auto;
}


.callistcontainer {
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    width: 300px;
    overflow: scroll;
}

.footertext{
    font-size: 11px;
    table-layout: fixed;
    width: 100%;
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right:auto;

}
.footerposition{
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
    border-right: solid;
    border-width: 1px
}

.footername{

    border-width: 1px;
    text-align: center;
}

.footerphone{

    border-width: 1px;
    text-align: center
}

.footeremail {
    padding-left: 10px;

    border-width: 1px;
    text-align: center
}

.vl {
    border-right: solid;
    border-width:1px;
    border-color: #000000;
}

.footernavigation {
    text-align: center;
    color: #000000;
    font-size: 11px;
    margin-left:auto;
    margin-right: auto;
    border: none;
    border-collapse: separate;
    border-spacing: 20px 0

}
.footernavheader{
    text-align: center;
    text-decoration: underline;
    font-size: 11px
}
.copywrite{
    font-family: "Arial";
    font-size:11px;
    text-align: center;
    font-weight:bold;
    padding-top: 25px;

}

#mc-embedded-subscribe{
    -webkit-appearance: none;
    margin-left:285px
}
.paypal_btn{
display: inline-block;
font-family: "Gotham", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
font-size: 14px;
font-weight: 500;
color: #000000;
text-align: center;
padding: 5px 10px;
margin-top: 10px;
margin-left: 30px;
background: #FFD700;
border: solid;
border-width:thin;
border-color: #C5C5C5;
cursor: pointer;
outline: none;
border-radius: 3px;
}
.paypal_btn:hover{ background:#e7e7e7; 
}

.shongumTitle{
    font-family: 'Anton', sans-serif !important;
    font-size: 20px;
    color: #767373;
    padding-right:5px

}
.store{
    margin-top:60px;
}

脚CSS

<style>
    .footer {
    display: none;
}
@media (min-width: 767px) {
        .footer { 

    display:block;
    background:#CDCDCD;
    overflow:hidden;
    margin-bottom: 0;
    postion: fixed;
    height: auto;
    bottom: 0;
    width: 100%;
    clear: both;


</style>

的HTML 

    <?php include("includes/navigation.php");?>



    <div class="jumbotron banner">
          <img src="images/ShongumSkyhawkBird_bg.png" alt="Shongum Elemtary School - Skyhawks" width="252" height="321" class="jumbotronimg img-responsive"/>
        <h1 class="ptobigtitle">Shongum Elementary School</h1>
        <h2 class="ptosubtitle">Parent Teacher Organization - A Quest for Excellence</h2>
        <a class="btn btn-primarybtn-lg btn-default learnmorebtn" href="contentPages/about.php">Learn more »</a>
      </div>
<div class="col-lg-4 info">
  <h2 class="articleheadline"><img src="images/003-calendar.png" width="32" height="32" alt=""/> UPCOMING EVENTS</h2><br>
    <div class="callistcontainer">
  <link href="http://www.newshongumpto.org/calendarScript/core/framework/libs/pj/css/pj.bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="http://www.newshongumpto.org/calendarScript/index.php?controller=pjFront&action=pjActionLoadCss&theme=5" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.newshongumpto.org/calendarScript/index.php?controller=pjFront&action=pjActionLoad&theme=5&view=list&icons=T&cats=T"></script>
    </div>
    </div>
<div class="col-lg-4 info">
  <h2 class="articleheadline">
  <img src="images/001-news.png" width="32" height="32" alt=""/> LATEST NEWS</h3>
  <p><style type="text/css">
<!--
.display_archive {font-family: arial,verdana; font-size: 12px;}
.campaign {line-height: 125%; margin: 5px;}
//-->
</style>
<script language="javascript" src="//ShongumPTO.us14.list-manage.com/generate-js/?u=94f392b8b8898807cb75b5931&fid=6999&show=5" type="text/javascript"></script></p>
  <p> </p>
</div>

<div class="col-lg-4 rightinfo">
  <h2 class="articleheadline">
  <img src="images/002-group.png" width="32" height="32" alt=""/> GET INVOLVED!</h3>
</div>
    </div>
    <br>

<?php include("includes/footer.php");?>

</body>
</html>

脚

<body id="footer" is="dmx-app">
<dmx-serverconnect id="serverconnect1" url="../dmxConnect/api/homePage/officerInfo.php"></dmx-serverconnect>
<div class="footer">
<div class="container-fluid">
    <div class="col-lg-4">
      <h2 class="footerheading"> Officers</h2>
      <div class="footertext" dmx-repeat:repeat1="serverconnect1.data.ptoOfficers">
        <table width="549" height="46" class="footertext">
  <tbody>
    <tr>
      <td class="footerposition">{{col_position}}</td>
      <td class="footername">{{col_firsrtName}} {{col_lastName}}</td>
      <td class="footerphone">{{col_phone}}</td>
        <td> <a href="mailto:{{col_email}}" class="footeremail">{{col_email}}</a> </td>
    </tr>
  </tbody>
</table>
      </div>
    </div>
    <div class="col-lg-4">
      <h2 class="footerheading">Navigate</h2>
      <table class="footernavigation">
  <tbody>
    <tr>
        <p class="footernavheader"><strong>PTO</strong></p>
    </tr>
      <tr>
      <td><a href="../contentPages/about.php">About Us</a></td>
      <td><a href="../contentPages/membership/membership.php">Membership</a></td>
    </tr>
    <tr>
      <td><a href="../contentPages/programs/programs.php">Programs</a></td>
      <td><a href="../contentPages/classes/classes.php">Classes</a></td>
    </tr>
    <tr>
      <td><a href="../contentPages/store.php">Store</a></td>
        <td><a href="http://maschiofood.com/shongum-elementary-school/">Lunch Menu</a></td>
    </tr>
    <tr>
     <td><a href="../contentPages/newsCalendar/news.php">News</td>
     <td><a href="../contentPages/newsCalendar/calendar.php">Calendar</td>
    </tr>
   </tbody>
      </table>
        <br>
      <table class="footernavigation">
  <tbody>
    <tr>
        <p class="footernavheader"><strong>Randolph School District</strong></p>
    </tr>
      <tr>  
      <td><a href="https://www.rtnj.org/Page/2444">RAM Alerts</a></td></td>
      <td><a href="https://www.rtnj.org/domain/162">District Calendar</a></td></td>
    </tr>
  </tbody>
</table>

  </tbody>
</table>
    </div>
    <div class="col-lg-4">
      <h2 class="footerheading">Stay in Contact!</h2>
      <!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#CDCDCD; clear:left; font:10px "Arial",sans-serif;  width:500px;}
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://ShongumPTO.us14.list-manage.com/subscribe/post?u=94f392b8b8898807cb75b5931&amp;id=07d0e3a6fb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Newsletter Signup" required>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_94f392b8b8898807cb75b5931_07d0e3a6fb" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-default"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->
    </div>
<br>
<br>
<div class="col-lg-12 copywrite"> © <?php echo date("Y"); ?> Shongum Elementary School Parent Teacher Organization

  </div>
</div>
<script type="text/javascript">
/* dmxServerAction name "ptoOfficersExecutor" */
       jQuery.dmxServerAction(
         {"id": "ptoOfficersExecutor", "url": "../dmxConnect/api/homePage/officerInfo.php", "method": "GET", "sendOnSubmit": false, "sendOnReady": true, "data": {}}
       );
  /* END dmxServerAction name "ptoOfficersExecutor" */
</script>
</body>
</html>
谜语

你有这个...

.info {
    text-align: center;
    top: 37px;
}

删除37px，它将修复它。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

页脚涵盖了主要内容

主要内容div重叠页脚

粘性页脚（未固定）隐藏主要内容

Bootstrap 4-将页脚推到页面底部，并用主要内容填充高度

如果主要内容很短，则带有页脚的可滚动侧边栏可见

使用flexbox设置侧边栏的主要内容+粘页眉/页脚

页脚保持在底部，两侧各有2个div，主要内容

如何将部分内容调整到卡片停止通过页脚

缩小浏览器时在页面的部分内容上显示响应页脚

我的页脚不会停留在我的主要内容范围内

HTML内容覆盖页脚

调整页脚内容

页眉/页脚之间的内容

绝对页脚覆盖内容

随内容移动的页脚

页脚覆盖页内容

页脚内容居中

内容与页脚重叠

不同宽度内容div的页脚上的页脚

UITableView页脚，停止浮动内容

HTML页脚内容不居中

内容和页脚中的页码

渲染内容前页脚问题

Vuetify v页脚叠加内容

页脚导航栏重叠内容

粘性页脚重叠正文内容？

更改magento中的页脚内容

内容超出页面底部的页脚

页脚覆盖了我的内容

TOP 榜单

  1. 1

    UITableView的项目向下滚动后更改颜色，然后快速备份

  2. 2

    Linux的官方Adobe Flash存储库是否已过时？

  3. 3

    用日期数据透视表和日期顺序查询

  4. 4

    应用发明者仅从列表中选择一个随机项一次

  5. 5

    Mac OS X更新后的GRUB 2问题

  6. 6

    验证REST API参数

  7. 7

    Java Eclipse中的错误13，如何解决？

  8. 8

    带有错误“ where”条件的查询如何返回结果？

  9. 9

    ggplot：对齐多个分面图-所有大小不同的分面

  10. 10

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  11. 11

    如何从视图一次更新多行（ASP.NET - Core）

  12. 12

    计算数据帧中每行的NA

  13. 13

    蓝屏死机没有修复解决方案

  14. 14

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  15. 15

    离子动态工具栏背景色

  16. 16

    VB.net将2条特定行导出到DataGridView

  17. 17

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  18. 18

    在Windows 7中无法删除文件（2）

  19. 19

    python中的boto3文件上传

  20. 20

    当我尝试下载 StanfordNLP en 模型时，出现错误

  21. 21

    Node.js中未捕获的异常错误，发生调用

热门标签

归档