CSS布局挫败感 [英] CSS layout frustration

问题描述

我正在尝试（再一次）弄清楚如何制作一个可以替换表的强大的

CSS布局样式。我希望能够

做一个基本的两列布局，一个列的标题，

a两个列的主体和一个两列的页脚。


问题，以及一直让我回到使用表格的问题，

就是健壮这个词。绝对定位得到松散，

因为它将定位元素完全排除在

浮动方案之外，并且东西开始套印。也没有

似乎是一种可靠的方式来指定绝对定位

当有多个元素要垂直地玩弄

和水平。


我目前正尝试使用百分比宽度的浮动定位（左边和

右边），它*几乎*有效。 （意思是

，它几乎*强大，这就是为什么我总是退出使用

CSS进行布局。）目前的问题是，如果窗口

宽度缩小到某个任意点，浮动元素

不再是并排的;一滴低于另一个，而

仍然保持浮动状态向左或向右。似乎

完全没有理由这样做;浮动的元素使用

百分比宽度，这样他们应该总是不要花费整个页面宽度。


该页面位于 http://www.firelily.com/test/test3。 html 与

嵌入的样式，以便于调试。这是关键的

样式表的一部分似乎需要修复：


#content {

宽度：100 ％;

}


#content #main {

保证金：0 .5em;

float：right;

宽度：75％;

}


#content #leftNav {

保证金：0 .5em;

浮动：左;

宽度：20％;

}


页脚的设置方式相同，并且遇到同样的问题。


我在这个页面上找不到的另一个问题是
右边标注框上的
最高保证金，它应该在页面上方的引用文本框中显示为

，但不是。这是次要的，

虽然如果有人能发现差异，我会爱

来听听它。


WinXP上当前的IE和后级Firefox都会出现问题

。


感谢您对修复此页面的任何建议！


Diane

I''m trying (once again) to figure out how to make a robust
CSS layout style that can replace tables. I''d like to be able
to do a basic two-column layout, with a one-column header,
a two column body, and a two-column footer.

The problem, and one that always sends me back to using tables,
is that word "robust." Absolute positioning gets squirrelly,
because it takes the positioned elements completely out of the
float scheme, and stuff starts overprinting. Nor does there
seem to be a reliable way to specify absolute positioning
when there are multiple elements to be juggled both vertically
and horizontally.

I''m currently trying to use just float positioning (left and
right) with percentage widths, and it *almost* works. (Meaning
that it''s *almost* robust, which is why I always quit using
CSS for layout.) The current problem is that if the window
width shrinks to some arbitrary point, the floating elements
are no longer side by side; one drops below the other, while
still remaining "floated" to the left or right. There seems
to be no reason at all for this; the floated elements use
percentage width so that they should always have don''t take
the entire page width.

The page is at http://www.firelily.com/test/test3.html with
the styles embedded for easier debugging. Here''s the key
part of the stylesheet that seems to need fixing:

#content {
width: 100%;
}

#content #main {
margin: 0 .5em;
float: right;
width: 75%;
}

#content #leftNav {
margin: 0 .5em;
float: left;
width: 20%;
}

The footer is set up the same way, and has the same problems.

The other problem that I can''t figure out on this page is the
top margin on the right callout box, which should behave like
the quoted text box just up the page, but doesn''t. This is minor,
although if someone can spot what the difference is, I''d love
to hear about it.

The problem occurs with both current IE and back-level Firefox
on WinXP.

Thanks for any suggestions on fixing this page!

Diane

推荐答案

Diane Wilson写道：

Diane Wilson wrote:

我正在尝试（再一次） ）弄清楚如何制作一个可以替换表的强大的CSS
布局样式。我希望能够做一个基本的两列布局，一个列标题，一个两列
主体和一个双列页脚。


可能Ben的一个模板会给你提供线索：

http://benmeadowcroft.com/webdev/css...s/spider1.html

该页面位于 http://www.firelily.com/test/test3.html使用

I''m trying (once again) to figure out how to make a robust CSS
layout style that can replace tables. I''d like to be able to do a
basic two-column layout, with a one-column header, a two column
body, and a two-column footer.
Possibly one of Ben''s templates will give you clues:

http://benmeadowcroft.com/webdev/css...s/spider1.html
The page is at http://www.firelily.com/test/test3.html with the

读。 IOW，将100％分配给body元素，然后仅为< hx>等事件分配

不同（更大）的百分比并且可能

（较小，但不低于85％）的copywrite / legalese。


哦，在你的CSS中有很多额外的东西。请记住，CSS中的C

是级联。


-

-bts

- 这个空间故意留空。

Please don''t assign a text size smaller than my default. Very hard to
read. IOW, assign 100% to the body element, and then only assign
different (larger) percentages for things like <hx> and possibly
(smaller, but not less than 85%) for copywrite/legalese.

Oh, in your CSS there is a lot of extra stuff. Remember, the C in CSS
is Cascading.

--
-bts
-This space intentionally left blank.

Diane Wilson< di *** @ firelily.com>写道：

Diane Wilson <di***@firelily.com> wrote:

我正在尝试（再一次）弄清楚如何制作一个可以替换表的健壮的CSS布局样式。我希望能够做一个基本的两列布局，一个列的标题，一个两列的主体和一个两列的页脚。
就是那个词健壮。

I''m trying (once again) to figure out how to make a robust
CSS layout style that can replace tables. I''d like to be able
to do a basic two-column layout, with a one-column header,
a two column body, and a two-column footer.

The problem, and one that always sends me back to using tables,
is that word "robust."

唉一些半开明的人试图说服别人他们不应该使用表格进行布局。虽然理论上是正确的，但是使用浮动来创建布局。从根本上来说是不合适的。
和糟糕的黑客攻击。在实践中，该方法引入了许多问题，既为作者提供了b
，又为用户提供了（更糟糕的）。


除非你真的擅长创建 CSS布局，你会通过使用表格进行布局来为你的

访问者提供帮助。 IE中的CSS支持不是很好，足以轻松创建与HTML一样健壮的CSS布局

表格。


许多CSS布局使用浮动或绝对定位属于非常基本的品种，或者它们会引入各种类似的问题，这些问题可能会受到类似的b $ b表格布局的影响。
< br $>
-

Spartanicus

Alas some of the semi enlightened are trying to convince others that
they should not use tables for layout. Although theoretically correct,
the use of floats for creating a "layout" is fundamentally inappropriate
and an awful hack. In practice the method introduces many problems, both
for the author and (worse) for the user.

Unless you are truly skilled in creating a "CSS layout", you''d do your
visitors a favour by using a table for layout. CSS support in IE isn''t
good enough to easily create CSS layouts that are as robust as HTML
tables.

Many "CSS layouts" using floats or absolute positioning are of the very
basic variety, or they introduce all sorts of problems that a comparable
table layout would not suffer from.

--
Spartanicus

文章< 2L ************ *****@twister.nyroc.rr.com>，
a。***** ****@example.inva 盖子说...

In article <2L*****************@twister.nyroc.rr.com>,
a.*********@example.invalid says...

Diane Wilson写道：

Diane Wilson wrote:

我正在尝试（再次）弄清楚如何制作一个强大的CSS
布局样式，可以替换表格。我希望能够做一个基本的两列布局，一个列标题，一个两列
主体和一个两列页脚。
可能是一个Ben的模板将为您提供线索：

http://benmeadowcroft.com/webdev/css...s/spider1.html

I''m trying (once again) to figure out how to make a robust CSS
layout style that can replace tables. I''d like to be able to do a
basic two-column layout, with a one-column header, a two column
body, and a two-column footer.
Possibly one of Ben''s templates will give you clues:

http://benmeadowcroft.com/webdev/css...s/spider1.html

做得还不够。首先，没有单独的页面标题，

这意味着一旦添加了标题，他的绝对定位

技巧就会出现左右列这是一个严重的问题。

他还回避了在页脚中做列的问题。

Doesn''t do nearly enough. For one thing, there''s no separate page header,
which means that once the header is added, his absolute positioning
trick for the left and right columns is going to be a serious problem.
He also sidesteps the issue of doing columns within the footer.

页面位于 http://www.firelily.com/test/test3.html使用

请不要指定小于我的默认值的文本大小。很难阅读。 IOW，将100％分配给body元素，然后仅为< hx>等事物分配不同（更大）的百分比。并且可能
（较小，但不低于85％）用于copywrite / legalese。

Please don''t assign a text size smaller than my default. Very hard to
read. IOW, assign 100% to the body element, and then only assign
different (larger) percentages for things like <hx> and possibly
(smaller, but not less than 85%) for copywrite/legalese.

这个文本大小比我通常使用的小一点;这个

是一个实验性的页面，其中包含大量相关的测试内容。我需要能够适应很多东西，以便看到

如何互动。


至少文本大小完全响应文本尺寸
浏览器中的
选项。

哦，在你的CSS里有很多额外的东西。请记住，CSS中的C
是级联。

This text size is a little smaller than I would normally use; this
is an experimental page with a lot of test stuff going on relative
to styles. I needed to be able to fit a lot of stuff in view to see
how things interact.

At least the text sizing is completely responsive to the text size
option in the browser.
Oh, in your CSS there is a lot of extra stuff. Remember, the C in CSS
is Cascading.

你能为我模糊一点吗？


Diane

Could you vague that up for me, please?

Diane

这篇关于CSS布局挫败感的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！