滑动门的麻烦 [英] Trouble with Sliding Doors
问题描述
我在滑动门方面遇到了一些问题，如A />
List Apart中的文章所述（ http://www.alistapart.com/articles/slidingdoors/ ）和CSS Tab Designer v2中详述的
。 0程序。
我的选项卡看起来很好，只要我使用中小字体但很快
因为我设置浏览器使用更大的字体，他们开始打破我。您可以在 http：//中看到最好的
sfl.london.on.ca/meetingsite.shtml 。如果您使用IE7转到
此页面，并且您的文字大小设置为中等，您会看到我
有一个很好的9行水平标签行。如果你点击每一个，你会看到
一切正常：所有的标签都停留在一排，所有标签都很好地嵌在一起
彼此相邻。 />
但是，如果您将文字大小设置为更大或最大的或最大的 ，你会看到
一行标签包裹，以便最后几个项目出现在第二行。
现在，我没有问题如果下面一行标签是
很好地对齐在下排的左边。不幸的是，它们与左边对齐了_ $ _
。更糟糕的是，如果你从上面
行的最左边的标签开始向右走，你可以看到
下方标签行的位置保持不变改变并进一步向右移动。
我已经看过CSS了，我很难理解为什么这会发生什么？b $ b发生了什么。有人能够更清楚地了解它是如何工作的吗
帮助我弄清楚如何让这些标签表现得更好？
-
Rhino
I''m having some problems with Sliding Doors, as described in an article in A
List Apart (http://www.alistapart.com/articles/slidingdoors/) and as
detailed in the CSS Tab Designer v2.0 program.
My tabs look fine as long as I am using medium and small fonts but as soon
as I set the browser to use bigger fonts, they start to break on me. You can
see this best at http://sfl.london.on.ca/meetingsite.shtml. If you go to
this page with IE7 and your text size set to "medium", you''ll see that I
have a nice row of 9 horizontal tabs. If you click on each one, you''ll see
that everything works fine: all the tabs stay on one row, all nicely nestled
beside one another.
However, if you set the text size to "larger" or "largest" , you''ll see that
the row of tabs wraps so that the last few items appear on a second line.
Now, I wouldn''t have a problem with that if the lower row of tabs were
nicely aligned to the left of the lower row. Unfortunately, they are _not_
aligned to the left. Worse, if you start at the leftmost tab on the upper
row and work your way to the right, you can see that the positioning of the
lower row of tabs keeps changing and moving further to the right.
I''ve looked at the CSS and I''m at a loss to understand why this is
happening. Can someone with a clearer understanding of how this works please
help me figure out how to make those tabs behave better?
--
Rhino
推荐答案
在文章< ff ********** @ news.datemas.de> ;，
" rhino" < No *********************** @ anonymous.comwrote：
In article <ff**********@news.datemas.de>,
"rhino" <No***********************@anonymous.comwrote:
我'' m滑动门有一些问题，如A />
List Apart中的一篇文章所述（ http://www.alistapart.com/articles/slidingdoors/ ）以及CSS Tab Designer v2.0程序中详述的
。
我的选项卡看起来很好，只要我使用中小字体但很快
因为我设置浏览器使用更大的字体，它们开始打破我。您可以在 http：//中看到最好的
sfl.london.on.ca/meetingsite.shtml 。如果您使用IE7转到
此页面，并且您的文字大小设置为中等，您会看到我
有一个很好的9行水平标签行。如果你点击每一个，你会看到
一切正常：所有的标签都停留在一排，所有的标签都很好地相互隔开
。
I''m having some problems with Sliding Doors, as described in an article in A
List Apart (http://www.alistapart.com/articles/slidingdoors/) and as
detailed in the CSS Tab Designer v2.0 program.
My tabs look fine as long as I am using medium and small fonts but as soon
as I set the browser to use bigger fonts, they start to break on me. You can
see this best at http://sfl.london.on.ca/meetingsite.shtml. If you go to
this page with IE7 and your text size set to "medium", you''ll see that I
have a nice row of 9 horizontal tabs. If you click on each one, you''ll see
that everything works fine: all the tabs stay on one row, all nicely nestled
beside one another.
我不需要在浏览器中更改默认文本大小以查看
效果，因为我增加了默认字体用户样式表中的大小
几个眼睛处方前！
简单地调整窗口大小也会导致同样的问题，所以你可以
想要在某处设置合理的最小宽度值。唯一的
方式我可以将所有标签排成一排，是为了使
文字大小太小而不易读。
我认为你的部分问题可能在于：
＃content-col {
position：relative;
top：0;
左：12em;
padding-left：35px;
float：left;
宽度：87.5％;
}
如果您将以em为单位的宽度设置为保留所有标签的宽度
$ b连续$ b，这有用吗？
I don''t need to change the default text size in my browser to see the
effect, since I increased the default font size in the user style sheet
several eye prescriptions ago!
Simply resizing the window causes the same problem, too, so you may
want to look at setting a reasonable min-width value somewhere. The only
way I can get all your tabs lined up in a horizontal row, is to make the
text size too small to be legible.
I think part of your problem may lie here:
#content-col {
position: relative;
top: 0;
left: 12em;
padding-left: 35px;
float: left;
width: 87.5%;
}
If you set the width in em units to something that keeps all your tabs
in a row, does that work?
2007-10-24，rhino< No ************** *********@anonymous.comwrote:
On 2007-10-24, rhino <No***********************@anonymous.comwrote:
我在滑动门方面遇到了一些问题，如A
List Apart（ http://www.alistapart.com/文章/ slidingdoors / ）和CSS Tab Designer v2.0程序中详述的
。
只要我使用中型和小型字体，我的标签看起来很好，但是当我将浏览器设置为使用更大的字体时，它们很快就会打破我。您可以在 http：//中看到最好的
sfl.london.on.ca/meetingsite.shtml 。如果您使用IE7转到
此页面，并且您的文字大小设置为中等，您会看到我
有一个很好的9行水平标签行。如果你点击每一个，你会看到
一切正常：所有的标签都停留在一排，所有标签都很好地嵌在一起
彼此相邻。 />
但是，如果您将文字大小设置为更大或最大的或最大的 ，你会看到
一行标签包裹，以便最后几个项目出现在第二行。
现在，我没有问题如果下面一行标签是
很好地对齐在下排的左边。不幸的是，它们与左边对齐了_ $ _
。更糟糕的是，如果你从上面
行的最左边的标签开始向右走，你可以看到
下方标签行的位置保持不变改变并进一步向右移动。
我已经看过CSS了，我很难理解为什么这会发生什么？b $ b发生了什么。有人能够更清楚地了解这是如何工作的吗
帮助我弄清楚如何使这些标签更好？
I''m having some problems with Sliding Doors, as described in an article in A
List Apart (http://www.alistapart.com/articles/slidingdoors/) and as
detailed in the CSS Tab Designer v2.0 program.
My tabs look fine as long as I am using medium and small fonts but as soon
as I set the browser to use bigger fonts, they start to break on me. You can
see this best at http://sfl.london.on.ca/meetingsite.shtml. If you go to
this page with IE7 and your text size set to "medium", you''ll see that I
have a nice row of 9 horizontal tabs. If you click on each one, you''ll see
that everything works fine: all the tabs stay on one row, all nicely nestled
beside one another.
However, if you set the text size to "larger" or "largest" , you''ll see that
the row of tabs wraps so that the last few items appear on a second line.
Now, I wouldn''t have a problem with that if the lower row of tabs were
nicely aligned to the left of the lower row. Unfortunately, they are _not_
aligned to the left. Worse, if you start at the leftmost tab on the upper
row and work your way to the right, you can see that the positioning of the
lower row of tabs keeps changing and moving further to the right.
I''ve looked at the CSS and I''m at a loss to understand why this is
happening. Can someone with a clearer understanding of how this works please
help me figure out how to make those tabs behave better?
你的第一个浮动（时间和位置）比
其他更高一点。因此，当其他浮子落下并向左浮动时，它们会在它上面晃动并在它们到达
容器左侧之前卡在那里。 />
这是定义的行为。
看起来你将其填充底部设置为5px，但它是4px on
大多数其他人。我认为这是#overview规则
（meetingsite.shtml：22）这就是问题所在。从那里删除填充底部：
5px它应该没问题。
Your first float ("Time and Location") is a tiny bit taller than the
others. So when other floats fall down, and float towards the left, they
sort of snag on it and get stuck there before they reach the left of the
container.
This is the defined behaviour.
It looks like you''re setting its padding-bottom to 5px, but it''s 4px on
most of the others. I think it''s the #overview a rule
(meetingsite.shtml: 22) that''s the problem. Remove the padding-bottom:
5px from there and it should be OK.
David Stone写道：
David Stone wrote:
在文章< ff ********** @ news.datemas.de>，
" rhino" < No *********************** @ anonymous.comwrote：
In article <ff**********@news.datemas.de>,
"rhino" <No***********************@anonymous.comwrote:
> 9水平标签。
>9 horizontal tabs.
如果你将em单位的宽度设置为连续保留所有标签
的东西，那有用吗？
If you set the width in em units to something that keeps all your tabs
in a row, does that work?
这不是个好主意。我们这些使用较大类型的人需要一个非常宽的窗口才能让所有这些都适合或最终得到过多的水平滚动。这可能会更糟糕。
-
Berg
That''s not a good idea. Those of us who use larger type will need a
really wide window to get it all to fit or end up with excessive
horizontal scrolling. That can be way worse.
--
Berg
这篇关于滑动门的麻烦的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
