我在CSS中不太好。我正在嘗試製作HTML結構,但我無法在正確的位置找到頁腳。這是一個link,您可以在其中查看和測試代碼。你能提出一些建議嗎?我必須說我不希望頁腳div得到position:fixed
選項。頁腳沒有放置在正確的位置
回答
刪除ID #placeHolder
和footer_area
的位置,並添加CSS
#placeHolder {
background-color: #FAFAFA;
border-radius: 5px 5px 5px 5px;
margin: 0 auto;
padding-bottom: 10%;
width: 70%;
}
.footer_area {
background-position: 0 0;
border-radius: 5px 5px 5px 5px;
clear: both;
color: #333333;
font: 12px/25px Arial,Helvetica;
height: 10%;
margin: 40px auto 0;
padding-top: 10%;
text-align: center;
width: 70%;
}
有幾件事情,可以幫助您更好地瞭解CSS的工作原理是怎樣相對的,絕對的,靜態的,固定的作品。
對於一個快速刷上去,你可以點擊這裏http://www.w3schools.com/cssref/pr_class_position.asp
默認情況下,所有的元素都是靜態定位和所有元素繼承他們在一個分層模式定位。 I.E. DOM中的第一個元素首先是以下內容:
在這種情況下,您已將#placeholder元素的位置定位爲:absolute;結果是#placeholder被從其他元素的序列中剝離出來並放置在它的順序之外,現在它正在考慮body標籤並將其放置到body標籤中。這裏唯一的例外是,如果您修改位置:relative的#placeholder的父元素,那麼#placeholder將採用相對於該元素而不是body元素的絕對定位。
其次,我可以看到你正在嘗試使用百分比基數來實現靠近窗口中心的元素對齊。在這種情況下,15%,這不會給你一個絕對的中心內容。發生的情況是當前窗口寬度的15%(假設我的瀏覽器打開爲1000px寬)將返回當前窗口寬度的15%,在這種情況下爲150px;實質上,你最終將窗口左側的元素左邊150px定位。
此外;不得不在所有元素上放置這種定位可能會變得有點麻煩。一個可以讓你的生活更輕鬆的小技巧就是把你所有的內容包裝在一個div中,並把這個div包裝起來。我通常會將它分類爲<div class="wrapper">
,然後在您的css中,您可以給.wrapper一個寬度爲1000px或70%的寬度和一個margin:0 auto;這會自動爲你的中心的這個div的內容,因此中心您的網站。如果您想讓它適用於真正舊的瀏覽器,請保留我已演示的相同內容,只添加兩個屬性。第一個CSS屬性爲正文{text-align:center;}和第二個到.wrapper {text-align:left;}。如果你還在意ie6,這將使它在IE6中工作。它的作用是將第一個<div class="wrapper">
對齊到body的中心,但是然後指定wrapper中的所有內容應該對齊,這樣當你添加dom元素或文本時,它會很好地與左邊對齊,所以你可以正常閱讀它。
希望這會有幫助
- 1. SAPUI5頁腳沒有顯示在正確的位置
- 2. 頁腳未進入正確位置
- 3. 'inline'的正確放置位置
- 4. 在UITableView中放錯位置的頁腳
- 5. 頁腳在頁面底部的位置不正確
- 6. 頁腳漂浮在某些頁面上的位置不正確
- 7. View.getY()沒有返回正確的位置
- 8. 將HTML放在正確的位置
- 9. 按鈕位置不能正確放置
- 10. 放置腳本的位置
- 11. div位置不在正確的位置
- 12. 頁腳位置
- 13. libGDX spiriteBatch.draw()沒有定位在正確的位置
- 14. 可放開不會正確的位置
- 15. HTML 5拖放到正確的位置
- 16. 放置_changed的正確位置在哪裏? Rails中的方法?
- 17. 把圖像放在沒有位置的特定位置:絕對
- 18. 正確的位置
- 19. 如何在codeigniter的正確位置放置內容?
- 20. Graphviz。如何自動將節點放置在正確的位置
- 21. 將InnerHTML放置在正確的位置並使用動態javascript
- 22. ggplot2:aspect_ratio並在正確的位置放置標題/軸標籤
- 23. 在Rails 5中放置可下載文件的正確位置
- 24. 在OOP應用程序中放置查詢的正確位置
- 25. XSLT在正確的位置
- 26. 爲什麼Highchart中的文字沒有放在正確的位置?
- 27. 把花括號放在正確的位置有問題嗎?
- 28. 字體真棒圖標沒有正確定位在頁腳
- 29. MigraDoc頁腳位置
- 30. joomla頁腳位置
你想在哪裏放置頁腳?什麼是正確的地方? 哦,我想我明白了。你想要它在內容區域下面。 – crazyrohila 2013-04-05 05:54:17
使用float:left;在頁腳 – 2013-04-05 05:55:39
爲什麼你不想使用'position:fixed'?看到這個支持圖http://caniuse.com/#feat=css-fixed – 2013-04-05 05:55:45