有一個圖像突出頁腳

我正在爲一個類的項目工作，並有一個問題。有一個圖像突出頁腳

該網站可以在這裏找到：http://ispace.ci.fsu.edu/~seb10/cgs2821/proj10

我現在已經是我對定位使用HTML和一個div聯樣式底部的股利。

現在看起來不錯，但當然這取決於正在使用的瀏覽器。

我希望該圖像始終顯示在底部而不必使用內聯樣式。本質上，我希望它能夠突出頁腳，但不會有任何其他影響或移動。

如果可能的話，這樣做的過程是什麼？

下面是CSS的一個鏈接：http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/style.css

非常感謝您的幫助提前。

來源

2013-04-22 Sam

關鍵是放置圖像的位置絕對。我已將桅杆插圖移至頁腳：http://jsfiddle.net/David_Knowles/98PLA/
這是否解決您的問題？

#footer .container {overflow: visible;} /* use a different technique to wrap floated elements so you can place image in the footer and have it stick out - see underneath */ 
.fltright {position: absolute; bottom: 56px; right: 0;} 

/* For modern browsers */ 
.container:before, 
.container:after { 
    content:""; 
    display:table; 
} 
.container:after { 
    clear:both; 
} 
/* For IE 6-7 (trigger hasLayout) */ 
.container { 
    zoom:1; 
} 

    <div id="footer"> 
     <!-- Begin Container --> 
      <div class="container"> 
       <img class="fltright" src='http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/images/derrick.png' alt="derrick" width="300"/> 
       <h1>Copyright &copy; 2013 <br />All Rights Reserved</h1> 
       <h3><a href="mailto:[email protected]">Webmaster</a> |<a href="#">Site Map</a> | <a href="about.html">About</a></h3> 
      </div> 
      <!-- End Container --> 
    </div> 
    <!-- End Footer -->

來源

2013-04-22 18:45:43 Timidfriendly

This works great。然而，我遇到了一個問題，那就是我的個人圖片在關於頁面現在被擡起並推到標題下。另外，我並不太擔心這不適用於iPad的Google Chrome瀏覽器，但是頁腳因爲更大而圖片變得看不見，因爲它們共享相同的顏色。任何想法爲什麼它不起作用？除此之外，這是有幫助的。謝謝。 – Sam 2013-04-22 19:28:19

沒關係，我固定了我的關於頁面...我忘了你編輯了影響該圖像的.fltright。只需要使其成爲.fltright2並更改HTML。這解決了它。仍然好奇iPad的Google Chrome問題...因爲它在iPhone谷歌瀏覽器應用程序中運行正常......很奇怪。也許應用程序有問題。 – Sam 2013-04-22 19:32:33

我假設油井塔圖像是要定位的圖像。我會創建一個帶有透明背景的.png文件，然後將其設置爲.container元素的背景圖像。

.png透明將允許其他背景圖案通過您的矢量圖像的開放空間（透明）部分顯示。

只要您的頁腳元素在您的容器元素之後流動，此工作正常。

來源

2013-04-22 18:15:43

使圖像忽略它的父元素，可以用來定位和z-index的組合：

position: absolute; 
z-index: 2;

您也可以嘗試用這取決於你想要什麼的display和overflow特性玩弄它看起來像。

來源

2013-04-22 18:30:54 RandomUs1r

當我查看您的代碼時，我想出了這些css值，以便在您的頁面上完全對齊.sidebar。你有position: relative;來定位它，但是，它移動相對到如何大的窗戶和周圍的元素。這就是它可能在四處移動的原因。但是，position: absolute;不考慮周圍的元素，因此將保持放置狀態。

.sidebar { 
    position: absolute; 
    top: 233px; 
    right: 10px; 
}

來源

2013-04-22 18:38:20

有一個圖像突出頁腳

回答

相關問題