2009-11-11 46 views
0

這是我目前的HTML結構。頁腳div獨自坐在BODY中。CSS需要div來擴展它的容器寬度

<div id="footer"> 
    <div class="container"> 
     <div id="footer-bg"> 
      <div class="footer1"> 
       <p class="p1">asd</p> 
       <p class="p2">asd</p> 
      </div> 

      <div class="footer2"> 
       <p class="p1">asd</p> 
       <p class="p2">asd</p> 
       <p class="p3">asd</p> 
      </div> 

      <div class="footer3"> 
       <p class="p1">asd</p> 
      </div> 
     </div> 
    </div> 
    </div> 

下面是它的CSS:

#footer 
    { 
    position: relative; 
    background: url('../footer-bg-repeat.jpg') repeat-x; 
    height: 307px; 
    } 

    #footer #footer-bg 
    { 
    background: url('../footer.jpg') no-repeat top left; 
    height: 528px; 
    width: 1587px; 
    position: absolute; 
    left: -380px; 
    top: -221px; 
    } 

    #footer .footer1 
    { 
    position: absolute; 
    top: 137px; 
    } 

    #footer .footer1 .p1 
    { 
    position: absolute; 
    left: 500px; 
    background: #dcdcdc; 
    height: 23px; 
    width: 80px; 
    text-align: center; 
    line-height: 25px; 
    font-weight: bold; 
    } 

    #footer .footer1 .p2 
    { 
    position: absolute; 
    left: 1000px; 
    top: -20px; 
    background: url() no-repeat top right; 
    height: 40px; 
    width: 249px; 
    text-indent: -9999px; 
    z-index: 6; 
    } 

    #footer .footer2 
    { 
    position: absolute; 
    top: 159px; 
    height: 23px; 
    width: 100%; 
    background: #000; 
    } 

    #footer .footer2 p 
    { 
    display: inline; 
    line-height: 25px; 
    color: #636466; 
    height: 23px; 
    } 

    #footer .footer2 .p1 
    { 
    position: absolute; 
    left: 500px; 
    background: url() no-repeat center right; 
    width: 175px; 
    } 

    #footer .footer2 .p2 
    { 
    position: absolute; 
    left: 700px; 
    background: #dcdcdc url() no-repeat 60px 8px; 
    width: 75px; 
    padding-left: 15px; 
    } 

    #footer .footer2 .p3 
    { 
    position: absolute; 
    left: 800px; 
    } 

    #footer .footer3 
    { 
    position: absolute; 
    top: 190px; 
    } 

    #footer .footer3 .p1 
    { 
    position: absolute; 
    left: 500px; 
    width: 1000px; 
    } 

我試圖讓.footer2和.footer3延長容器允許我對什麼都寬背景色設置的寬度屏幕可能是。

設置100%的寬度只是獲得它的容器的大小 - 正如我所料。但是,我怎樣才能使它達到頁面的寬度?

回答

1

嘗試將左右屬性設置爲0;

+0

試過了,沒有工作。 #footer-bg絕對是位置,它是.footer [1 | 2]的父級,所以左右相對於該div。與.container一樣。 – zilla 2009-11-11 08:25:09

0

您沒有很好地定義問題。

,如果你想將其設置在中間設置利潤率

margin:0 10px; 
width:%your pages width%; 

如果你的意思是針對Firefox別的下載的Firebug插件,並檢查頁面的頁腳做你想要做的,看看結構什麼, CSS規則。 它始終工作