2014-04-04 64 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是的,现在需要再调整一下位置,直到它正确。但是这应该防止文本错位。 –