？可扩展的布局与部分 [英] ? Scalable layout with sections
问题描述
我需要帮助重新设计我的网站。我想要一个标题，内容
吧，主要内容和页脚。我希望整个事情是静态的，
是，我希望所有部分始终可见，主要内容
部分可滚动。像这样：
+ ---------------------------------- - +
| logo |
+ -------- + --------------------------- +
|菜单|主要内容，含|
| |滚动条如果内容为|
| |太长了|
| | |
+ -------- + --------------------------- +
| misc数据|
+ ------------------------------------ +
我已经用CSS很好地实现了它但我必须使用
硬编码值进行定位，同时设置它很糟糕因为
当浏览器调整大小（或屏幕分辨率发生变化）时，它结束了
看起来很糟糕。
我是寻找关于如何正确地做到这一点的好教程。我找到了一个看起来很有前景的b $ b，但是当我实现它的方法时它没有工作
，因为他们的例子中间部分具有相同的背景< br $> b $ b很好，但是当我改变背景时，它看起来很糟糕
调整大小因为例如内容部分比菜单栏大
所以默认背景显示在菜单栏后面。此外，页脚
不会一直挂在浏览器底部。
有没有人知道一个好地方？
谢谢。
-
Alec S.
alec< @> synetech<。> cjb<。> net
Hi,
I need help redesigning my website. I want to have a header, contents
bar, main content, and footer. I want the whole thing to be static, that
is, I want all sections to be visible at all times with the main content
section being scrollable. Like this:
+------------------------------------+
| logo |
+--------+---------------------------+
| menu | main content, with |
| | scrollbars if the content |
| | is too long |
| | |
+--------+---------------------------+
| misc data |
+------------------------------------+
I''ve already implemented it nicely with CSS but I''ve had to use
hard-coded values for positioning while setting it up which is bad because
when the browser is resized (or screen resolution changed) it ends up
looking awful.
I''m looking for a good tutorial on how to do this properly. I found one
that looked promising but when I implemented it''s method it didn''t work
because their example had the same background for the middle sections which
was fine, but when I changed the backgrounds, it looks bad when it gets
resized because for example the content section is bigger than the menu bar
so the default background shows up behind the menu bar. Also, the footer
would not stay attached to the bottom of the browser at all times.
Does anyone know of a good place?
Thanks.
--
Alec S.
alec <@> synetech <.> cjb <.> net
推荐答案
Alec S.写道：
Alec S. wrote:
我已经实现了它很好地使用CSS，但我必须使用
硬编码值进行定位，同时设置它是不好的，因为
当浏览器调整大小（或屏幕分辨率改变）时它最终
看起来很糟糕。
I''ve already implemented it nicely with CSS but I''ve had to use
hard-coded values for positioning while setting it up which is bad because
when the browser is resized (or screen resolution changed) it ends up
looking awful.
URL可以帮助你。
您是否尝试使用％或ems而不是像素？
-
jmm dash list（at）sohnen-moe（dot）com
（删除电子邮件的.AXSPAMGN）
An URL would go a long way toward helping you.
Have you tried using % or ems instead of pixels?
--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Alec S.写道：
Alec S. wrote:
我需要帮助重新设计我的网站。我想要一个标题，内容
栏，主要内容和页脚。我希望整个事情是静态的，
是，我希望所有部分始终可见，主要内容
部分是可滚动的。像这样：
+ ------------------------------------ +
| logo |
+ -------- + --------------------------- +
|菜单|主要内容，有|
| |滚动条如果内容|
| |太长了|
| | |
+ -------- + --------------------------- +
| misc数据|
+ ------------------------------------ +
Hi,
I need help redesigning my website. I want to have a header, contents
bar, main content, and footer. I want the whole thing to be static, that
is, I want all sections to be visible at all times with the main content
section being scrollable. Like this:
+------------------------------------+
| logo |
+--------+---------------------------+
| menu | main content, with |
| | scrollbars if the content |
| | is too long |
| | |
+--------+---------------------------+
| misc data |
+------------------------------------+
我的网站（sig）这样做但没有页脚。我认为
不应该太难加入。注意它只适用于支持位置的固定浏览器
; - IE有解决办法，但我原则上拒绝给他们拼凑。
几乎所有尺寸都以em为单位，所以整个事情是
可调整大小。只有标题栏大小是固定的，所以左上角的链接在非常大的字体大小时有点笨拙。这是一个权衡我已经选择了
来制作。
您可能会发现这篇关于动态调整大小的文章很有趣：
http://www.themaninblue.com/写作/ ... ve / 2004/09/21 /
他使用Javascript风格的切换器来改变布局，如果窗口大小
对于正常的布局来说太小了。我使用这个（IMO）对我最新创作的好处（IMO）效果：
http://step-by-step.org.uk/
缩小窗口宽度低于695px和标题，菜单和
装饰图像调整大小和。
-
马克。
http://tranchant.plus.com/
My site (sig) does this but without the footer. I would imagine that
shouldn''t be too hard to add in. Note that it only works on browsers
that support position: fixed; - there are work-arounds for IE but I
refuse to cobble them in on principle.
Almost all sizes are specified in em units, so the whole thing is
resizable. Only the header bar size is fixed, so the top left links get
a bit unwieldy at very large font sizes. That''s a trade-off I''ve chosen
to make.
You might find this article on dynamic resizing interesting:
http://www.themaninblue.com/writing/...ve/2004/09/21/
He uses a Javascript style switcher to change layout if the window size
gets too small for the normal layout. I use this to good (IMO) effect on
my latest creation:
http://step-by-step.org.uk/
Shrink the window width below 695px and the header, menu and
"decoration" images resize and.
--
Mark.
http://tranchant.plus.com/
2004年9月23日星期四18:43:27 GMT ，Alec S. < a@a.com>写道：
On Thu, 23 Sep 2004 18:43:27 GMT, "Alec S." <a@a.com> wrote:
我需要帮助重新设计我的网站....
[...] + ---------------- -------------------- +
| logo |
+ -------- + --------------------------- +
|菜单|主要内容，有|
| |滚动条如果内容|
| |太长了|
| | |
+ -------- + --------------------------- +
| misc数据|
+ ------------------------------------ +
[ ...]我正在寻找一个好的教程...
I need help redesigning my website.... [...]+------------------------------------+
| logo |
+--------+---------------------------+
| menu | main content, with |
| | scrollbars if the content |
| | is too long |
| | |
+--------+---------------------------+
| misc data |
+------------------------------------+ [...]I''m looking for a good tutorial...
[...]
这可能接近你在找什么...
< http://www.css.nu/exp/nf-illustration.html>
[适用于Mozilla& Opera系列浏览器]
....但实际上，MSIE在www上扼杀了很多可能的创造力，因为它完全没有支持一些真正基本的电子
排版区域。
-
Rex
[...]
This may be close to what you are looking for...
<http://www.css.nu/exp/nf-illustration.html>
[for the Mozilla & Opera families of browsers]
....but really, MSIE stifles a lot of possible creativity on the www due
to its total lack of support for some really basic areas of "electronic
typesetting".
--
Rex
这篇关于？可扩展的布局与部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
