FooterWrap 打破盒子

发布于 2024-09-17 05:45:10 字数 2718 浏览 3 评论 0原文

我的页脚 CSS 出了什么问题?

使用 Firefox 中的 Web Dev 工具栏,我可以看到它有一个框,并且似乎将其全部推到下一行 - 我看不到填充或边距。

我确信这是一个简单的修复 - 如果有人能指出发生了什么那就是王牌!

谢谢你们!


Love Jungle Clothing Brand的网站在这里,

这是代码:

/****** Footer *****/
/*new div Neil */


#footerwrap
{width: 100%;
margin: 0 auto;
text-align:left;
height:40px;
background-color:#000;
clear:both;
margin-top:10px;
overflow:hidden;
z-index:1000;
}




/*new div container Neil */
#footer {
    width: 990px;
    height:60px;
    margin: 0 auto;
    padding-top:10px;
    background-color:#000;
    clear:both;
    text-align:center;
    z-index:1000;
}


#footer ul {
    padding: 0px 0 0 0;
    margin: 0 0 0 0px;
    list-style-type: none;
}
#footer li {
    float: right;
    padding: 0;
    margin: 0 auto;
    display: inline;
}




#footerLeft ul {
    padding: 0px 0 0 0;
    margin: 0 0 0 0px;
    list-style-type: none;
}
#footerLeft li {
    float: left;

}


#footer a {

    display: block;
    height: 40px;
    background-repeat: no-repeat;
    display: inline;
    text-decoration:none;
    text-align:center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 90%;
white-space:nowrap;
    margin:0 auto;
        z-index:1000;


}



#footerwrap a {

    display: block;
    color:#fff;
    height: 20px;
    background-repeat: no-repeat;
    padding-right:40px;
    margin:0 auto;
        z-index:1000;

}




/****** Footer *****/
/*new div Neil */


#footerwrap
{width: 100%;
margin: 0 auto;
text-align:left;
height:40px;
background-color:#000;
clear:both;
margin-top:10px;
overflow:hidden;
z-index:1000;
}




/*new div container Neil */
#footer {
    width: 990px;
    height:60px;
    margin: 0 auto;
    padding-top:10px;
    background-color:#000;
    clear:both;
    text-align:center;
    z-index:1000;
}


#footer ul {
    padding: 0px 0 0 0;
    margin: 0 0 0 0px;
    list-style-type: none;
}
#footer li {
    float: right;
    padding: 0;
    margin: 0 auto;
    display: inline;
}




#footerLeft ul {
    padding: 0px 0 0 0;
    margin: 0 0 0 0px;
    list-style-type: none;
}
#footerLeft li {
    float: left;

}


#footer a {

    display: block;
    height: 40px;
    background-repeat: no-repeat;
    display: inline;
    text-decoration:none;
    text-align:center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 90%;
white-space:nowrap;
    margin:0 auto;
        z-index:1000;


}



#footerwrap a {

    display: block;
    color:#fff;
    height: 20px;
    background-repeat: no-repeat;
    padding-right:40px;
    margin:0 auto;
        z-index:1000;

}

What's up with my Footer CSS ?

Using the Web Dev toolbar in Firefox I can see that it's got a box and it seems to be pushing it all down to the next line - no padding or margins that I can see..

I'm sure it's an easy fix - if someone could point out what's up that would be ace!

Thanks guys!


Website is here for Love Jungle Clothing Brand

Here is the code:

/****** Footer *****/
/*new div Neil */


#footerwrap
{width: 100%;
margin: 0 auto;
text-align:left;
height:40px;
background-color:#000;
clear:both;
margin-top:10px;
overflow:hidden;
z-index:1000;
}




/*new div container Neil */
#footer {
    width: 990px;
    height:60px;
    margin: 0 auto;
    padding-top:10px;
    background-color:#000;
    clear:both;
    text-align:center;
    z-index:1000;
}


#footer ul {
    padding: 0px 0 0 0;
    margin: 0 0 0 0px;
    list-style-type: none;
}
#footer li {
    float: right;
    padding: 0;
    margin: 0 auto;
    display: inline;
}




#footerLeft ul {
    padding: 0px 0 0 0;
    margin: 0 0 0 0px;
    list-style-type: none;
}
#footerLeft li {
    float: left;

}


#footer a {

    display: block;
    height: 40px;
    background-repeat: no-repeat;
    display: inline;
    text-decoration:none;
    text-align:center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 90%;
white-space:nowrap;
    margin:0 auto;
        z-index:1000;


}



#footerwrap a {

    display: block;
    color:#fff;
    height: 20px;
    background-repeat: no-repeat;
    padding-right:40px;
    margin:0 auto;
        z-index:1000;

}




/****** Footer *****/
/*new div Neil */


#footerwrap
{width: 100%;
margin: 0 auto;
text-align:left;
height:40px;
background-color:#000;
clear:both;
margin-top:10px;
overflow:hidden;
z-index:1000;
}




/*new div container Neil */
#footer {
    width: 990px;
    height:60px;
    margin: 0 auto;
    padding-top:10px;
    background-color:#000;
    clear:both;
    text-align:center;
    z-index:1000;
}


#footer ul {
    padding: 0px 0 0 0;
    margin: 0 0 0 0px;
    list-style-type: none;
}
#footer li {
    float: right;
    padding: 0;
    margin: 0 auto;
    display: inline;
}




#footerLeft ul {
    padding: 0px 0 0 0;
    margin: 0 0 0 0px;
    list-style-type: none;
}
#footerLeft li {
    float: left;

}


#footer a {

    display: block;
    height: 40px;
    background-repeat: no-repeat;
    display: inline;
    text-decoration:none;
    text-align:center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 90%;
white-space:nowrap;
    margin:0 auto;
        z-index:1000;


}



#footerwrap a {

    display: block;
    color:#fff;
    height: 20px;
    background-repeat: no-repeat;
    padding-right:40px;
    margin:0 auto;
        z-index:1000;

}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

束缚m 2024-09-24 05:45:10

您是否尝试使用“页脚粘贴”方法?或者您只是想让文本内容垂直居中。如果是后者,请尝试以下操作:

查看页脚文件,您有以下 html:

<div id="footerwrap"> 
   <div id="footer">
      <div id="footerLeft">
      <a href="/about/"></a><li><a href="/about/">Made in Australia</a></li>
      </div>

<ul>
<span>
<center>
         <li><a href="/store/">Store</a></li>
         <li><a href="/about">About</a></li>
         <li><a href="/press">Press</a></li>
         <li><a href="/stockists">Stockists</a></li>
         <li><a href="/contact"><span>Contact</span></a></li>
</center>
</span>
</ul>

    </div>
</div>

此行:

  • < ;a href="/about/">澳大利亚制造
  • 需要删除。

    如果您想了解有关页脚粘贴方法的更多信息,请查看 http://bonrouge.com/~home

    Are you trying to use the "footer stick" method? Or do you just want to have the text content sort of vertically centered. If the latter, try this:

    Look in your footer file, you have the following html:

    <div id="footerwrap"> 
       <div id="footer">
          <div id="footerLeft">
          <a href="/about/"></a><li><a href="/about/">Made in Australia</a></li>
          </div>
    
    <ul>
    <span>
    <center>
             <li><a href="/store/">Store</a></li>
             <li><a href="/about">About</a></li>
             <li><a href="/press">Press</a></li>
             <li><a href="/stockists">Stockists</a></li>
             <li><a href="/contact"><span>Contact</span></a></li>
    </center>
    </span>
    </ul>
    
        </div>
    </div>
    

    This line: <a href="/about/"></a><li><a href="/about/">Made in Australia</a></li> needs to be removed.

    If you want more info on the footer-stick method check out http://bonrouge.com/~home

    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文