开发者

CSS Footer Alignment Issue

I can't get this footer to align and sit on the bottom properly - it should be 3 column and centered on the page. Can anyone help?

CSS Footer Alignment Issue

/* FOOTER */

#footer {
line-height: 80px;
width:100%;
color: #fff;
height: 80px;
background-color: #111;
padding: 30px 0px 0px 0px;
}


/* column width */
#footer > ul > li {
width: 250px;
  list-style:none;
 float: left;
 border-left: 1px solid #fff;
 padding-left: 10px; 
  }

#footer > ul > li > ul {
    font-weight: normal;
      list-style:none;
       font-size: .80em;
 }

 #footer a, #footer a:visited, #footer a:active {
    color: #ffffff;
  }

  #footer a:hover {
    color: #ffffff;
  }



<div id="footer">
   <ul>
      <li>
         <ul>
             <li><a href="default.asp">About</a></li>
              <li><a href="default.asp">Contact&开发者_如何学Golt;/a></li>
             <li><a href="default.asp">Spare</a></li>
       </ul> </li>
     <li>
         <ul>
             <li><a href="default.asp">Terms</a></li>
            <li><a href="default.asp">Privacy</a></li>
           <li><a href="default.asp">Disclaimer</a></li>
        </ul> </li>
   <li>
        <ul>
    <li> or content on this website. Full disclaimer</li>   
        </ul>
</ul>


The padding and margin on the body element needs to be zero if you want elements to be flush against the browser window.


I don't think you can center a group of elements if they're floated. Have you considered applying display:inline-block to the column LIs, instead of float:left?


Set #footer width property to as much as you want (750px min since you set the li width to 250px) and then set margin-left and margin-right to auto. This will center the footer. As far as the bottom position goes you could adjust it by changing the setting/changing the margin-top property of the #footer div ... i don't understand exactly what "sits on the bottom properly" means


Simple, Give each group a width of about 32% then give the footer a padding so the left on is not flush with the edge.

#footer > ul > li {
width: 32%;
list-style:none;
float: left;
border-left: 1px solid #fff;
padding-left: 10px; 
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜