< H2>和< p> 2列布局的填充问题 - 请阅读内部 [英] <h2> and <p> Padding Problems with 2 Column Layout - Please Read Inside
问题描述
大家好，
在创建模拟网站时，我正在尝试遵循规则和
指导我一直在消化的最后一个几个月关于
css定位和可访问性。
好吧，我知道旅程远未结束，我正在使用这个模型作为一个
学习过程。
此刻可以看到我遇到的问题：
http://www.awash.org/vd/index.html
使用此样式表：
http://www.awash.org/vd/vd.css
右栏的部分内容似乎位于左下方
手栏。基本上，我喜欢它现在的样子，但我想要右边的
标题（浅蓝色背景）和段落，
有清晰的空白区域在他们身边。
由于某种原因，我看不到，文字的蓝色背景似乎是
一直画到左边在ie6中的视口，然后在它的顶部绘制
左手栏。无论是那个，还是我的图形
卡以奇怪的顺序渲染东西;）它似乎没有那样渲染
在歌剧中，但它可能只是我看得太快了。
如果我向< h2>添加padding-left元素没有效果。同样的
与< p>相同右栏中的元素。
有人可以告诉我为什么会这样吗？我被困在这里并且会很感激
指针。
也可以随意屠宰我的其余代码并指出任何
其他错误，不正确的方法等等。我知道可能会有kludges
和那里糟糕的编码 - 它还处于早期阶段。
i希望将其作为跨浏览器兼容且最终可访问
。虽然我目前只在ie6和opera7.1
进行测试，但是我们很早就能确定它。
最后，我已经验证了它所以它应该是干净的。
提前感谢您提供的任何帮助。
-
slim
推荐答案
2004年5月11日20:51:38 GMT，slim< sl ** @ antiCorp.invalid>写道：
On 11 May 2004 20:51:38 GMT, slim <sl**@antiCorp.invalid> wrote:
大家好，
在创建模拟网站的同时，我正在尝试遵循规则和我一直在消化的准则关于
css定位和可访问性的最近几个月。
好吧，我知道旅程远未结束，我正在使用这个模型作为
学习过程。
此刻难倒的问题可以在这里看到：
http://www.awash.org/vd/index.html
使用此样式表：
http://www.awash.org/vd/vd。 css
右手栏的部分内容似乎位于左侧栏目的下方。基本上，我喜欢它现在的样子，但我想要右边的
标题（浅蓝色背景）和段落，
周围有明确的空白区域。
hi all,
whilst creating a mock-up site, i am trying to follow the rules and
guidelines i have been digesting over the last few months with regards to
css positioning and accessibility.
well, i know the journey is far from over and i''m using this mock-up as a
learning process.
the problem stumping me at the moment can be seen here:
http://www.awash.org/vd/index.html
using this style sheet:
http://www.awash.org/vd/vd.css
parts of the content of the right hand column seems to sit under the left
hand column. basically, i like the way it looks now but i want the
header on the right (with the light blue background), and the paragraph,
to have clear white space around them.
尝试
div＃rightcol {border：1px dashed red;保证金：1em;填充：1em;}
Try
div#rightcol {border:1px dashed red; margin: 1em; padding: 1em;}
2004年5月11日20:51:38 GMT，slim< sl ** @ antiCorp.invalid>写道：
On 11 May 2004 20:51:38 GMT, slim <sl**@antiCorp.invalid> wrote:
http://www.awash.org/vd/index.html
页面上的其他一些想法：
font-size：80％有点小。是的，它可以调整大小，但你应该使用用户喜欢的大小来读取它的大小 - 表面上可能是浏览器的'b
100％设置。如果它没有设置为他们喜欢的东西，他们抱怨
该网站就像是在你的设备上垂直保持
没有正确设置时责怪电视节目。但是如果你播放有意的
垂直保持问题的电视节目，他们就会尝试调整。 （谢谢Andy Kaufman。）
如果用户已将其设置为
首选项，我们不想让用户进行调整。
0px无用 - 只需使用0.
div＃leftcol {
float：left;
....
宽度：16％;
}
考虑将ems用于此列''宽度，因为它将使用用户的文本首选项缩放宽度
。在非常大的文本设置和狭窄的视图中，这可能会使列非常宽，而且内容非常小，但这显然是不寻常的。内容区域
将占用剩余空间，当然会有所不同。
a：链接a：悬停a：悬停a：活跃 - 使用订单。
我总体上喜欢你的设计。
A few other thoughts on the page:
font-size: 80% is a bit small. Yes, it''s resizable, but you ought to use
the size the user prefers to read - which ostensibly will be the browser''s
100% setting. If it''s not set to what they prefer, their complaining about
the site is like blaming the TV program when the vertical hold on your set
is not set properly. But if you broadcast the TV show with intentional
vertical-hold problems, they then try to adjust. (Thank you Andy Kaufman.)
We don''t want to make the user adjust if they''ve set it to their
preference already.
No use in 0px - simply use 0.
div#leftcol {
float:left;
....
width:16%;
}
Consider using ems for this column''s width, as that will scale the width
with the user''s text preference. In really huge text settings and narrow
viewports, this may make the column unusually wide and the content
unusually small, but that would be, clearly, unusual. The content area
will take up the remaining space, which will vary of course.
a:link a:hover a:hover a:active - use that order.
I overall like your design.
||名字| Neal< ne ***** @ yahoo.com> |消息|
||新闻：op ************** @ news.individual.net: ||
|| name | Neal <ne*****@yahoo.com> | message |
|| news:op**************@news.individual.net: ||
2004年5月11日20:51:38 GMT，苗条< SL ** @ antiCorp.invalid>写道：
On 11 May 2004 20:51:38 GMT, slim <sl**@antiCorp.invalid> wrote:
http://www.awash.org/vd/index.html
页面上的一些其他想法：
http://www.awash.org/vd/index.html
A few other thoughts on the page:
谢谢，这个正是我的追求:)
字体大小：80％有点小。是的，它可以调整大小，但你应该使用用户喜欢阅读的大小 - 表面上可能是浏览器的100％设置。如果它没有按照自己喜欢的方式设置，那么他们抱怨该网站就像是在你的设备上没有正确设置
垂直保持时责备电视节目。但是如果你在电视节目中播放故意垂直保持问题，他们就会尝试进行调整。 （谢谢Andy Kaufman。）我们不想让用户进行调整，如果他们已经根据自己的喜好设置了它。
我现在已将所有字体大小更改为100％，除了水平
导航栏 - 我看到&接受你精心设计的观点，但我希望
明显少于在你的脸上。比它周围的其他文字。
没有用在0px - 只需使用0.
谢谢，已经完成。
div＃ leftcol {
浮动：左;
...
宽度：16％;
}
考虑将ems用于此列的宽度，因为这会根据用户的文字偏好来缩放
宽度。在非常大的文本设置和狭窄的视口中，这可能会使列非常宽并且内容异常小，但这显然是不寻常的。
内容区域占用剩余空间，当然会有所不同。
我现在已将此设置为10em，谢谢。
a：链接a：悬停a：悬停a：活跃 - 使用该订单。
嗯。我改变了这个猜测链接，悬停，访问，活跃。
对吗？上面你已经两次悬停 - 不是我在呻吟，我只是
想要做对了:)
我总体喜欢你的设计。
thanks, this is exactly what i''m after :)
font-size: 80% is a bit small. Yes, it''s resizable, but you ought to
use the size the user prefers to read - which ostensibly will be the
browser''s 100% setting. If it''s not set to what they prefer, their
complaining about the site is like blaming the TV program when the
vertical hold on your set is not set properly. But if you broadcast
the TV show with intentional vertical-hold problems, they then try to
adjust. (Thank you Andy Kaufman.) We don''t want to make the user
adjust if they''ve set it to their preference already.
i have now changed all of the font sizes to 100% except the horizontal
navigation bar - i see & accept your well made point but i would like
that to be clearly less "in your face" than other text around it.
No use in 0px - simply use 0.
thanks, have done.
div#leftcol {
float:left;
...
width:16%;
}
Consider using ems for this column''s width, as that will scale the
width with the user''s text preference. In really huge text settings
and narrow viewports, this may make the column unusually wide and the
content unusually small, but that would be, clearly, unusual. The
content area will take up the remaining space, which will vary of
course.
i have set this to 10em now, thanks.
a:link a:hover a:hover a:active - use that order.
hmm. i have changed this at a guess to link, hover, visited, active. is
that right? above you''ve put hover twice - not that i''m moaning, i just
want to get it right :)
I overall like your design.
谢谢！
-
slim
thank you!
--
slim
这篇关于< H2>和< p> 2列布局的填充问题 - 请阅读内部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
