重複頁腳html/css在另一頁上，但顯示不同？

我正在做一個網站，我完成了主頁面（頁眉，正文和頁腳）。我爲我的第二頁創建了一個新文檔。我將主頁面的代碼複製並粘貼到第二頁，並且工作完美無瑕。但是當我對頁腳做同樣的處理時，導致頁腳對齊而不是對齊中心。所有的代碼和html都是一樣的。我不知道問題是什麼。我一直在尋找，但迄今爲止沒有運氣。重複頁腳html/css在另一頁上，但顯示不同？

CSS代碼：

.end_text { 
    width: 100%; 
} 

.bottom_left li { 
    float:left; 
    list-style: none; 
} 

.bottom_lmid li { 
    float:left; 
    list-style: none; 
    margin-left: 10px; 
    margin-top: 7px; 
} 

.bottom_lmid li:first-child { 
    margin-left: 100px; 
} 

.bottom_rmid li { 
    float:left; 
    list-style: none; 
    margin-left: 10px; 
    margin-top: 7px; 
} 

.bottom_rmid li:first-child { 
    margin-left: 100px; 
} 

.bottom_right li { 
    float:left; 
    list-style: none; 
    margin-left: auto; 
    margin-top: 0px; 
} 

.bottom_right li:first-child { 
    margin-left: 100px; 
}

HTML代碼：

<div id="footer"> 
    <div class="foot_bar"> 
     <img src="../../images/bestfoodservicesweb_24.jpg" width="862"/> 
    </div> 
    <div class="end_text"> 
      <ul class="bottom_left"> 
       <li><img src="../../images/bestfoodservicesweb_34.jpg" width="80" height="26"/></li> 
      </ul> 
      <ul class="bottom_lmid"> 
       <li><img src="../../images/bestfoodservicesweb_37.jpg" width="63" height="16"/></li> 
       <li><a href="http://www.bestfoodservice.us/contact.aspx"><img src="../../images/bestfoodservicesweb_38.jpg" width="63" height="16"/></a></li> 
       <li><img src="../../images/bestfoodservicesweb_39.jpg" width="99" height="16"/></li> 
       </ul> 
       <ul class="bottom_rmid"> 
        <li><img src="../../images/bestfoodservicesweb_41.jpg" width="26" height="14"/></li> 
        <li><img src="../../images/bestfoodservicesweb_43.jpg" width="38" height="15"/></li> 
        </ul> 
        <ul class="bottom_right"> 
         <li><a href="http://facebook.com"><img src="../../images/bestfoodservicesweb_27.jpg" width="25" height="25"/></a></li> 
         <li><a href="http://twitter.com"><img src="../../images/bestfoodservicesweb_29.jpg" width="25" height="25"/></a></li> 
         <li><a href="http://linkedin.com"><img src="../../images/bestfoodservicesweb_31.jpg" width="25" height="25"/></a></li> 
        </ul> 
      </ul> 
     </div> 
</div>

您將需要向下滾動才能看到頁腳IMAGES

該演示展示了我的頁腳是如何猜想外觀

Demo Here Full Screen Demo

這是它的外觀

Demo 2 Full Screen Demo 2

來源

2013-06-24 Thomas

您的圖片鏈接不正確，請將它們替換爲您的域名包含 – designtocode

@msbodetti您將包含的域名替換爲什麼？我用'img src =「」'在我的電腦上查找文件，這就是它給了我的東西。 – Thomas

你上傳了它到在線服務器嗎？ – designtocode

我想，也許一個標籤沒有關閉。但是，這是我說什麼：

#footer{ 
    width: 860px; 
    margin: 0 auto; 
}

而且它似乎是工作。 Fiddle

來源

2013-06-24 16:44:24 designtocode

該工作正常，但所有圖像都低於主頁面頁腳。有沒有辦法使它一致，所以當點擊不同的頁面頁腳不會移動？ – Thomas

當然你可以將end_text div設置爲相對位置，底部設置爲10px。看看更新的小提琴http://jsfiddle.net/msbodetti/SUKkR/2/embedded/result/ – designtocode

您在第二個演示中沒有info_body ul元素。添加，應該中心頁腳。

還修復了Demo1中的img標記，在定義寬度時錯過了"。

來源

2013-06-24 16:44:57 bukka

'info_body'不是頁腳的一部分。 – Thomas

重複頁腳html/css在另一頁上，但顯示不同？

回答

相關問題