2013-04-05 61 views
-2

我在CSS中不太好。我正在嘗試製作HTML結構,但我無法在正確的位置找到頁腳。這是一個link,您可以在其中查看和測試代碼。你能提出一些建議嗎?我必須說我不希望頁腳div得到position:fixed選項。頁腳沒有放置在正確的位置

+1

你想在哪裏放置頁腳?什麼是正確的地方? 哦,我想我明白了。你想要它在內容區域下面。 – crazyrohila 2013-04-05 05:54:17

+0

使用float:left;在頁腳 – 2013-04-05 05:55:39

+0

爲什麼你不想使用'position:fixed'?看到這個支持圖http://caniuse.com/#feat=css-fixed – 2013-04-05 05:55:45

回答

2

刪除ID #placeHolderfooter_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%; 
} 
1

有幾件事情,可以幫助您更好地瞭解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元素或文本時,它會很好地與左邊對齊,所以你可以正常閱讀它。

希望這會有幫助