当前位置: 动力学知识库 > 问答 > 编程问答 >

css - FooterWrap breaking box

问题描述:

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;

}

网友答案:

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: