2014-04-04 87 views
0

我無法使我的網站上的頁腳正常工作。頁腳分爲兩部分。第一部分是mainFooter區域,第二部分是版權區域。頁腳徽標未正確對齊,並且與頁腳內容重疊

我在版權區有logo,在mainFooter有logo。我需要在任何時候都對齊其中的兩個。這真的是一個標誌,但分爲兩個頁腳,因爲它是一個愚蠢的標誌。

這是它:

enter image description here

因爲這條線,我們有兩個部分拆分頁腳。但是「現在的藝術」的文本永遠不可能與建築物錯位。

所以我解決這個問題的方法是在兩個元素上使用絕對定位,設置右邊:0底部:0並使用margin-top/bottom調整它們的位置。

問題是,這隻有在徽標真的很遠並且不與頁面上的其他內容真正對齊時才起作用,因爲其他所有內容都居中。這就是我的意思是:

enter image description here

我個人不太在意最右邊的logo排列,在這一點上,你已經到達頁面的結尾,它不與頁腳中的內容重疊,仍然看起來相當不錯,但我們的客戶設計師(而非網頁)是這些東西的堅持者。

This is the dev site we're working on

有沒有人對我們如何處理這個任何想法?在頁腳中有標識,但要確保事物正確對齊,並且不與頁腳中的內容重疊?

+0

在提供的網址中,似乎所有的都是對齊的 – csharpwinphonexaml

+0

是的,沒有應用絕對位置。因此,當您調整瀏覽器窗口大小時,您會注意到文本和建築物並不總是在一起,如果您將瀏覽器移動到大小,建築物將完全移動到左側並與其他內容重疊。 – Batman

+0

你可以從徽標和文本只做一個標誌,然後對齊到右邊,確保它保持對齊到白線 – csharpwinphonexaml

回答

2

把周圍的頁腳內容的div容器(和標識的)有下面的CSS:

.container{ 
    width: 960px; 
    margin: auto; 
    position: relative; 
} 

朝着這個div容器現在你的絕對定位的元素將被定位相對的,而不會移動太遠向右移動,但停留在邊界框中。

+0

像這樣http://jsfiddle.net/wqu6A/4/ – Batman

+0

@Batman是的,現在需要再調整一下位置,直到它正確。但是這應該防止文本錯位。 –