將頁腳保留在對象下方

-1

我將我的簡歷作爲我網站的html對象的一部分插入。我已經嘗試了一切，從設置我的頁腳到絕對，將我的對象浮動到左邊，將我的對象放入div中，插入hr以打破頁眉/頁腳空間。將頁腳保留在對象下方

這是一個鏈接到頁面。我想你會馬上看到問題。我完全是自學所以這可能是問題的一部分.... http://buildingautomationmonthly.com/resume.html

這裏是Resume.HTML

<!DOCTYPE html> 
<html> 

<head> 
    <title>Building Automation Monthly: Resume</title> 
    <meta name="description" content="website description" /> 
    <meta name="keywords" content="website keywords, website keywords" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
    <!-- modernizr enables HTML5 elements and feature detects --> 
    <script type="text/javascript" src="js/modernizr-1.5.min.js"></script> 
</head> 

<body> 
    <div id="main"> 

    <header> 
     <div id="strapline"> 
     <div id="welcome_slogan"> 
      <h3>Building Automation Monthly</h3> 
     </div><!--close welcome_slogan--> 
     </div><!--close strapline-->  
     <nav> 
     <div id="menubar"> 
      <ul id="nav"> 
      <li><a href="index.html">Home</a></li> 
      <li class="current"><a href="About Phil.html">About Phil</a></li> 
      <li><a href="http://www.blog.buildingautomationmonthly.com" target="_blank">Blog</a></li> 
      <li><a href="testimonials.html">Testimonials</a></li> 
      <li><a href="projects.html">Projects</a></li> 
      <li><a href="contact.html">Contact Us</a></li> 
      </ul> 
     </div><!--close menubar--> 
     </nav> 
    </header> 
    <hr> 




     <div id="content"> 
     <div class="content_item"> 
      <h2>Phil Zito</h2> 
      <object width="800" height="800" data="Phil Zito-Resume.pdf"></object> 



    </div><!--close site content-->  

    </div><!--close main--> 

    </hr> 
    <footer style="float:center"> 

    <div id="footer_content"> 
     <a href="index.html">Home</a> | <a href="About Phil.html">About Phil</a> | <a href="testimonials.html">Testimonials</a> | <a href="projects.html">Projects</a> | <a href="contact.html">Contact</a><br/><br/> 
     <p> Developed and Coded by Phil Zito </p> 
    </div><!--close footer_content--> 
    </footer>  

    <!-- javascript at the bottom for fast page loading --> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/image_slide.js"></script> 

</body> 
</html>

下面是style.css的

@font-face { 
    font-family: News Cycle; 
    src: url('../fonts/NewsCycle-Regular.eot'); 
    src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf'); 
} 

html 
{ height: 100%;} 

* 
{ margin: 0; 
    padding: 0;} 

body 
{ font: normal 90% Arial, Helvetica, sans-serif; 
    color: #000; 
    background: #000; 
} 

/* tell the browser to render HTML 5 elements as block */ 
article, aside, figure, footer, header, hgroup, nav, section { 
    display:block; 
} 

p 
{ padding: 0 0 10px 0; 
    line-height: 1.7em; 
    font-size: 100% } 

img 
{ border: 0;} 

h1, h2, h3, h4, h5, h6 
{ font: normal 175% 'News Cycle', Arial, sans-serif; 
    color: #000; 
    letter-spacing: -1px; 
    margin: 0 0 10px 0;} 

h2 
{ font: normal 165% 'News Cycle', Arial, sans-serif;} 

h3 
{ font: normal 160% 'News Cycle', Arial, sans-serif;} 

h4, h5, h6 
{ margin: 0; 
    padding: 0 0 0px 0; 
    font: normal 150% 'News Cycle', Arial, sans-serif; 
    color: #FFF; 
    line-height: 1.5em;} 

h5, h6 
{ font: normal 95% 'News Cycle', Arial, sans-serif; 
    color: #888; 
    padding-bottom: 15px;} 

span 
{ color: #FFF; 
    text-shadow: 0px 1px 0px #000;} 

a, a:hover 
{ color: #000; 
    background: transparent; 
    font-weight: bold; 
    outline: none; 
    text-decoration: underline;} 

a:hover 
{ text-decoration: none;} 

ul 
{ margin: 2px 0 22px 30px; 
    line-height: 1.7em; 
    font-style: normal; 
    font-size: 100%;} 

ol 
{ margin: 8px 0 22px 20px;} 

ol li 
{ margin: 0 0 11px 0;} 

#main, header, #banner, #menubar, #site_content, footer, #content_grey, nav, #slideshow_container, #footer_content 
{ margin-left: auto; 
    margin-right: auto;} 

#main 
{ background: #fff;} 

header 
{ height: 150px; 
    background: #CCC; 
    background: -moz-linear-gradient(#BBB, #FFF); 
    background: -o-linear-gradient(#BBB, #FFF); 
    background: -webkit-linear-gradient(#BBB, #FFF);} 

nav 
{ height: 60px; 
    background: transparent;} 

#strapline 
{ width: 940px; 
    height: 80px; 
    text-align: center; 
    margin: 0 auto;} 

#welcome_slogan 
{ width: 940px; 
    float: left; 
    height: 70px; 
    padding-top: 10px; 
    margin: 0 auto;}  

#welcome_slogan h3 
{ font: bold 300% 'News Cycle', Arial, sans-serif; 
    letter-spacing: -3px; 
    color: #000;} 

#menubar 
{ width: 940px; 
    height: 55px; 
    padding-top: 10px; 
    text-align: center; 
    margin: 0 auto; 
    background: transparent;}  

ul#nav 
{ margin:0;} 

ul#nav li 
{ padding: 0 0 0 0px; 
    list-style: none; 
    margin: 2px 0 0 0; 
    display: inline; 
    background: transparent;} 

ul#nav li a 
{ float: left; 
    font: bold 130% 'News Cycle', Arial, sans-serif; 
    height: 24px; 
    margin: 8px 20px 0 0; 
    text-shadow: 0px 1px 0px #000; 
    padding: 0px 20px 10px 20px; 
    text-align: center; 
    text-decoration: none; 
    text-shadow: 1px 1px #fff; 
    color: #000; } 

ul#nav li.current a, ul#nav li:hover a 
{ text-shadow: 0px 1px 0px #FFF; 
    color: #000; 
    background: #E8D82A; 
    background: -moz-linear-gradient(#F2E986, #CFC017); 
    background: -o-linear-gradient(#F2E986, #CFC017); 
    background: -webkit-linear-gradient(#F2E986, #CFC017); 
    border-radius: 7px 7px 7px 7px; 
    -moz-border-radius: 7px 7px 7px 7px; 
    -webkit-border: 7px 7px 7px 7px; } 

#slideshow_container 
{ height: 270px; 
    padding-top: 20px;} 

.slideshow 
{ width: 940px; 
    height: 250px; 
    margin: 0 auto;} 

/* styling for the slideshow on the homepage */ 
ul.slideshow { 
    list-style: none; 
    width: 940px; 
    height: 250px; 
    overflow: hidden; 
    position: relative;} 

ul.slideshow li { 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    left: 0; 
    right: 0;} 

ul.slideshow li.show { 
    z-index: 500;} 

ul img { 
    border: none;} 

#slideshow-caption { 
    width: 940px; 
    height: 38px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    z-index: 500;} 

#slideshow-caption .slideshow-caption-container { 
    padding: 10px 25px 10px 25px; 
    background: transparent url(../images/transparent.png) repeat; 
    z-index: 1000;} 

#slideshow-caption p { 
    padding: 0; 
    font: normal 130% arial, sans-serif; 
    color: #FFF; 
    text-shadow: 1px 1px #000;} 

#site_content 
{ width: 940px; 
    overflow: hidden;} 

.sidebar_container 
{ float: left; 
    margin: 0 10px 0 10; 
    width: 240px;} 

.sidebar 
{ float: left; 
    width: 240px; 
    margin-bottom: 10px;} 

.sidebar_item 
{ font: normal 100% Arial, Helvetica, sans-serif; 
    width: 240px;} 

.sidebar h2 
{ padding: 5px 0 0 0; 
    font: normal 140% 'News Cycle', Arial, sans-serif; 
    height: 30px;} 

#content 
{ width: 680px; 
    margin: 0 0 20px 0; 
    float: right;} 

.content_item 
{ width: 660px; 
    margin-bottom: 20px;} 

.content_container 
{ width: 320px; 
    margin: 20px 10px 0 0; 
    float: left;} 

footer 
{ background: #CCC; 
    background: -moz-linear-gradient(#FFF, #BBB); 
    background: -o-linear-gradient(#FFF, #BBB); 
    background: -webkit-linear-gradient(#FFF, #BBB); 
    margin-bottom: -20px;} 

#footer_content{ 
    width: 940px; 
    padding-top: 25px; 
    padding-bottom: 20px; 
    font-weight: bold; 
    text-align: center; 
    text-shadow: 1px 1px #fff; 
    color: #000;} 

footer a, footer a:hover 
{ text-shadow: 1px 1px #fff; 
    color: #000; 
    text-decoration: none;} 

footer a:hover 
{ text-decoration: underline;} 

.button_small 
{ font: normal 110% Arial, Helvetica, sans-serif; 
    float: left; 
    padding: 5px 10px 7px 10px; 
    background: #E8D82A; 
    background: -moz-linear-gradient(#F2E986, #CFC017); 
    background: -o-linear-gradient(#F2E986, #CFC017); 
    background: -webkit-linear-gradient(#F2E986, #CFC017); 
    border-radius: 7px 7px 7px 7px; 
    -moz-border-radius: 7px 7px 7px 7px; 
    -webkit-border: 7px 7px 7px 7px; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px; 
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;} 

.button_small a 
{ color: #000; 
    text-shadow: 1px 1px #fff;} 

.form_settings 
{ margin: 15px 0 0 0;} 

.form_settings p 
{ padding: 0 0 4px 0;} 

.form_settings span 
{ float: left; 
    width: 280px; 
    text-align: left; 
    text-shadow: none; 
    color: #000;} 

.form_settings input, .form_settings textarea 
{ padding: 2px; 
    width: 299px; 
    font: 100% arial; 
    border: 1px solid #E5E5DB; 
    background: #FFF; 
    color: #47433F;} 

.form_settings input[type="checkbox"] 
{ padding: 2px 0; 
    width: 15px; 
    font: 100% arial; 
    border: 0; 
    background: #FFF; 
    color: #47433F; 
    margin: 28px 0;} 

.form_settings .submit 
{ font: bold 100% arial; 
    border: 1px solid; 
    width: 99px; 
    margin: 0 0 0 206px; 
    height: 26px; 
    padding: 2px 0 3px 0; 
    cursor: pointer; 
    background: #E8D82A; 
    background: -moz-linear-gradient(#F2E986, #CFC017); 
    background: -o-linear-gradient(#F2E986, #CFC017); 
    background: -webkit-linear-gradient(#F2E986, #CFC017); 
    color: #000; 
    text-shadow: 0px 1px 0px #fff; 
    border-radius: 7px 7px 7px 7px; 
    -moz-border-radius: 7px 7px 7px 7px; 
    -webkit-border: 7px 7px 7px 7px;} 

.email 
{ padding: 0 0 10px -200px; 
    line-height: 1.7em; 
    font-size: 100% }

來源

2013-05-04 Phi

從刪除float:center您的頁腳內聯樣式使您的footer頁腳和以下樣式。

原因是您的內容的float被擡到頁腳，您可以通過提及clear:both來重置浮動。

添加到您的頁腳

footer { 
background: #CCC; 
background: -moz-linear-gradient(#FFF, #BBB); 
background: -o-linear-gradient(#FFF, #BBB); 
background: -webkit-linear-gradient(#FFF, #BBB); 
margin-bottom: -20px; 
clear: both; // add this 
}

看看這是你在找什麼。

此外，你有一個float:right您的內容。可能你的男人想把它浮起來。

就像一個指針;這may be一個很好的閱讀。

來源

2013-05-04 03:14:15 PSL

謝謝，不知道我是如何錯過在頁腳浮動.... – Phi 2013-05-04 11:23:37

將頁腳保留在對象下方

回答

相關問題