如何在5框3列布局的底部制作页脚 [英] How to make footer at the bottom in 5 box 3 columns layout

查看:58
本文介绍了如何在5框3列布局的底部制作页脚的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

网站设计非常简单:


============================ ================

|头|

======================================== ====

| | | |

| | | |

|离开|中心|对|

| | | |

| | | |

========================================= ===

|页脚|

======================================== ====


我浪费了整整一个月的生活,令人沮丧的CSS布局尝试和

错误(IE margin hack,quirk夸克,浮动问题, IE浏览器peekaboo等,

等。)


所以我最终使用简单的表布局,因为它很容易1,2,3和

虽然可以是流动的。


但是......我怎样才能强制页脚停留在浏览器的底部

即使很少内容没有将其推到底部。 CSS和表的组合有没有

的机会?请不要使用框架或

脚本。不可能?


非常感谢任何帮助。


彼得。

解决方案

Peter Diedrich< pd ******* @ gmx.de>写道:

我浪费了整整一个月的生活与令人沮丧的CSS布局尝试和
错误(IE边缘黑客,怪癖夸克,浮动问题,IE躲猫猫等等,
等等。)。


很抱歉你没有成功使用CSS。

完成你想要的东西可能会非常棘手。但是,有几个例子听起来非常接近你想要的。
http://www.saila.com/usage/layouts/s...ayout-ie5.html
http://glish.com/css/7.asp
http://bluerobot.com/web/layouts/layout3.html
http://www.projectseven.com/whims/cs ... oxnoscript.htm
http://glish.com/css /2.asp

所以我最终使用了一个简单的表格布局,因为它很容易,因为它可以是1,2,3和



桌子虽然看起来很流畅,却提供了很差的布局解决方案。避免他们

如果可能的话。

-

Michael Wilcox

mjwilco at yahoo dot com

Web开发人员的基本工具 - http://mikewilcox.t35.com


>很抱歉你没有成功使用CSS。

完成你想要的东西可能会非常棘手。但是,有几个例子听起来非常接近你想要的。
http://www.saila.com/usage/layouts/s...ayout-ie5.html
http://glish.com/css/7.asp
http://bluerobot.com/web/layouts/layout3.html
http://www.projectseven.com/whims/cs...oxnoscript.htm
http://glish.com/css/2.asp




感谢提示。我之前彻底研究了以上所有众所周知的例子

,但是他们*都在某个方向上都失败了。

要么他们没有页脚(实际上是在我的初始中被问到的< b / b
发布)或者他们在某些浏览器中表现得很奇怪或者表现不佳

流动性 (僵硬的侧面板或丑陋的文字重叠在

缩小浏览器时)。

所以我最终使用简单的表布局,因为它很容易,因为它可以是1,2,3和
液体。



表,虽然看似液体,但提供的解决方案很差布局。如果可能的话,尽量避免使用它们。




嗯,它们只是简单地渲染*。没有缺陷 - 向后兼容

到HTML 2,火箭快速和最薄的可能代码(与CSS相比

只在纸上优雅。它只是不如表格那么好。

我的简单表格布局工作如此流畅......除了页脚。


还有什么进一步的帮助吗? />

Peter


Peter Diedrich< pd ******* @ gmx.de>写道:

感谢您的提示。我之前彻底研究了以上所有着名的例子,但是他们*都在某个方向上都失败了。
要么他们没有页脚(实际上是在我最初的帖子中被问到的话)


你的页脚究竟有多大?可以在你的

内容的底部,比如projectseven的版权吗?

或者他们在某些浏览器中表现得很奇怪或者说流动性很差(当缩小浏览器时,刚性侧面板或丑陋的文本重叠)。


哪些浏览器为你做了这个?哪个设计?在主流浏览器中,这些都经过测试,结果很好。

嗯,它们只是简单地渲染*。


你有没有听过在演讲浏览器中呈现的布局表?

或者看到它是由像Lynx这样的纯文本浏览器呈现的?您是否曾经认为,当在HTML 2中引入表格时,它们是表格式的

数据,而不是演示文稿?

火箭快速且极薄的可能代码(与CSS相比
*包括*所有这些讨厌的黑客需要)。


制作超薄代码的桌子?不,不是真的。他们创造了更多问题然后他们是值得的。另一方面,CSS代码由浏览器缓存而且

肯定不需要令人讨厌的黑客攻击。

CSS定位出现优雅仅在纸上。

http://www.csszengarden.com/

它不能像桌子一样工作。
我的简单表格布局工作如此顺利......除了页脚。




当转换到CSS设计时,人们发现最困难的事情之一就是学习放弃表格,四四方方的设计。考虑将代码编写为

,尽可能简单且语义正确。使用h1,h2,h3等

标题,< p>用于段落,导航列表列表等。一旦

它已被正确编写和订购,然后添加一些风格。你没有超过

,你会发现,如果你让你的页面变得简单并且

结构相同,那么相同的样式表将起作用对于任何页面。

-

Michael Wilcox

mjwilco在yahoo dot com

基本工具用于网络开发人员 - http://mikewilcox.t35.com


The site design is pretty simple:

============================================
| Head |
============================================
| | | |
| | | |
| left | center | right |
| | | |
| | | |
============================================
| Footer |
============================================

I wasted a whole month of my life with frustrating CSS layout try and
error (IE margin hack, quirk quark, float problems, IE peekaboo, etc.,
etc.).

So I ended up using a simple table layout as it is easy as 1,2,3 and
is liquid as it can be.

But... How can I force the footer to stay at the bottom of browser
even if few content does not push it to the bottom. Is there any
chance with a combination of CSS and tables? Please no frame or
scripting. Impossible?

Any help would be very much appreciated.

Peter.

解决方案

Peter Diedrich <pd*******@gmx.de> wrote:

I wasted a whole month of my life with frustrating CSS layout try and
error (IE margin hack, quirk quark, float problems, IE peekaboo, etc.,
etc.).
I''m sorry you were unsuccessful with CSS. It can be very tricky to
accomplish what you want. However, there are several examples which sound
very close to what you want.
http://www.saila.com/usage/layouts/s...ayout-ie5.html
http://glish.com/css/7.asp
http://bluerobot.com/web/layouts/layout3.html
http://www.projectseven.com/whims/cs...oxnoscript.htm
http://glish.com/css/2.asp
So I ended up using a simple table layout as it is easy as 1,2,3 and
is liquid as it can be.



Tables, while seemingly liquid, offer a poor solution to layout. Avoid them
if possible.
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com


> I''m sorry you were unsuccessful with CSS. It can be very tricky to

accomplish what you want. However, there are several examples which sound
very close to what you want.
http://www.saila.com/usage/layouts/s...ayout-ie5.html
http://glish.com/css/7.asp
http://bluerobot.com/web/layouts/layout3.html
http://www.projectseven.com/whims/cs...oxnoscript.htm
http://glish.com/css/2.asp



Thanks for the hint. I studied all above well-known examples
thoroughly before but they *all* fail each in certain direction.
Either they have no footer (actually being asked in my initial
posting) or they behave strange in some browsers or have poor
"liquidicity" (rigid side panels or ugly text overlapping when
narrowing the browser).

So I ended up using a simple table layout as it is easy as 1,2,3 and
is liquid as it can be.



Tables, while seemingly liquid, offer a poor solution to layout. Avoid them
if possible.



Mmmh, they simply render *perfectly*. No flaws - Compatible backwards
to HTML 2, rocket fast and slimmest possible code (compared to CSS
*including* all these nasty hacks required). CSS positioning appears
elegant on the paper only. It simply does not work as well as tables.
My simple table layout works so smooth ...except the footer.

Any further help?

Peter


Peter Diedrich <pd*******@gmx.de> wrote:

Thanks for the hint. I studied all above well-known examples
thoroughly before but they *all* fail each in certain direction.
Either they have no footer (actually being asked in my initial
posting)
Exactly how big do you need your footer? Can it be at the bottom of your
content, like the copyright at projectseven?
or they behave strange in some browsers or have poor
"liquidicity" (rigid side panels or ugly text overlapping when
narrowing the browser).
Which browsers did this for you? Which designs? These were all tested to be
fine in the major browsers.
Mmmh, they simply render *perfectly*.
Have you ever listened to a layout table being rendered in a speach browser?
Or seen it rendered by a text-only browser like Lynx? Have you ever
considered that when tables were introduced in HTML 2 they were for tabular
data, not presentation?
rocket fast and slimmest possible code (compared to CSS
*including* all these nasty hacks required).
Tables making slim code? No, not really. They create more problems then
they''re worth. CSS code, on the other hand, is cached by the browser and
most certainly does not require "nasty hacks."
CSS positioning appears
elegant on the paper only.
http://www.csszengarden.com/
It simply does not work as well as tables.
My simple table layout works so smooth ...except the footer.



One of the things people find hardest when switching to a CSS deign is
learning to let go of tabular, boxy designs. Consider writing your code as
simply and sematically correct as possible. Use h1, h2, h3, etc for
headings, <p> for paragraphs, lists for navigation lists, and so on. Once
it''s been written and ordered correctly, then add some style. You don''t have
to go overboard, and you''ll find that if you make your pages simple and
structred the same, the same style sheet will work for any page.
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com


这篇关于如何在5框3列布局的底部制作页脚的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆