2013-04-05 63 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元素或文本时,它会很好地与左边对齐,所以你可以正常阅读它。

希望这会有帮助