从表转换为css [英] converting from tables to css

问题描述

我想成为一个优秀的小作家并使用CSS。


因此，我正在尝试将我的表转换为等效的CSS。

不幸的是，我无法重现相同的结果。有人可以看看

看看 http：// www.greengoldcapital.info/test/test.shtml 并查看是否

你可以告诉我我做错了什么？


你看到的东西当然是乱七八糟的，因为我已经尝试了很多方法来完成这项工作并且大部分的试验完好无损。

代码。


问题是我希望第一个（css样式代码）看起来与第二个（表样式代码）相同的
。我不能为了生活

我得到的文字在背景中间垂直对齐

图片。


As你可以看到，我已经尝试使用垂直对齐指令调整边距，填充和

课程。


虽然我可以移动右边的文字使用margin-left，margin-top

对我看不到任何影响。填充没有效果，也没有
垂直对齐。


我已经尝试了我能想到的所有可能的组合，文本将
无论我做什么，
都不会垂直移动。我没有想法。


有什么想法吗？


提前谢谢你！

I want to be a good little author and use CSS.

Therefore, I''m attempting to convert my tables to the equivalent CSS.

Unfortunately, I can''t reproduce the same results. Can someone take a
look at http://www.greengoldcapital.info/test/test.shtml and see if
you can tell me what I''m doing wrong?

What you see there is of course a mess at this point, as I''ve tried
numerous ways to get this done and left most of those trials intact in
the code.

THE PROBLEM is that I want the first (css style code) to look
identical to the second (table style code). I cannot for the life of
me get the text to align vertically in the middle of the background
image.

As you can see, I''ve tried adjusting the margins, the padding, and of
course using the vertical alignment directive.

While I can move the text to the right using margin-left, margin-top
has no affect whatsoever that I can see. Padding has no effect, nor
does vertical-alignment.

I''ve tried every possible combination I can think of, the text will
not move vertically no matter what I do. I''m out of ideas.

Any thoughts?

Thank you in advance!

推荐答案

Dudely写道：

Dudely wrote:

我想成为一名优秀的小作家并使用CSS。


因此，我正在尝试将我的表转换为等效的CSS。


不幸的是，我无法重现相同的结果。有人可以看看

看看 http：// www.greengoldcapital.info/test/test.shtml 并查看是否

你可以告诉我我做错了什么？


你看到的东西当然是乱七八糟的，因为我已经尝试了很多方法来完成这项工作并且大部分的试验完好无损。

代码。


问题是我希望第一个（css样式代码）看起来与第二个（表样式代码）相同的
。我不能为了生活

我得到的文字在背景中间垂直对齐

图片。


As你可以看到，我已经尝试使用垂直对齐指令调整边距，填充和

课程。


虽然我可以移动右边的文字使用margin-left，margin-top

对我看不到任何影响。填充没有效果，也没有
垂直对齐。


我已经尝试了我能想到的所有可能的组合，文本将
无论我做什么，
都不会垂直移动。我没有想法。

I want to be a good little author and use CSS.

Therefore, I''m attempting to convert my tables to the equivalent CSS.

Unfortunately, I can''t reproduce the same results. Can someone take a
look at http://www.greengoldcapital.info/test/test.shtml and see if
you can tell me what I''m doing wrong?

What you see there is of course a mess at this point, as I''ve tried
numerous ways to get this done and left most of those trials intact in
the code.

THE PROBLEM is that I want the first (css style code) to look
identical to the second (table style code). I cannot for the life of
me get the text to align vertically in the middle of the background
image.

As you can see, I''ve tried adjusting the margins, the padding, and of
course using the vertical alignment directive.

While I can move the text to the right using margin-left, margin-top
has no affect whatsoever that I can see. Padding has no effect, nor
does vertical-alignment.

I''ve tried every possible combination I can think of, the text will
not move vertically no matter what I do. I''m out of ideas.

两个选项（好吧，还有更多，但只有两个我想建议）：

设置填充 - 在div上面。请注意，填充*会增加*

到高度，所以如果总高度应该保持60px，你可以使用一个20px的

顶部填充，但是你必须设置高度为40px，添加总计60px的
，或者，将该跨度的行高设置为60px。


请注意，但是这可能表面上将你的表格

转换为div，但只会让你以后遇到麻烦。因为，如果访问者决定要查看更大的文本，会发生什么？b $ b？通过

给div准确的高度为60px，如果你增加内容，它就不会拉伸。


要制作CSS布局，您应首先摆脱

头部IYSWIM中的表格。考虑灵活，测试如果访问者改变了什么会发生变化

类似字体大小，窗口大小等等。


从非常简单的页面开始，了解如何事情是有效的，只有这样才能获得
（这不会在一天内发生！）尝试模仿表格布局，

尤其是那些依赖于图像尺寸的。 />

Divs与桌子的行为非常不同，最重要的是
重要的区别可能是他们不会超越

无论你设定它们的高度。 （除了在IE5 / 6中查看，但

不算数;-)）


-

Els http://locusmeus.com/

无障碍网页设计： http://locusoptimus.com/


现在玩：计数乌鸦 - 星期二几乎没有

Two options (well, there are more, but only two I''d want to suggest):
Either set a padding-top on the div. Be aware that padding is *added*
to height, so if the total height should remain 60px, you could use a
top padding of 20px, but then you must set the height to 40px, to add
up to 60px total, or, set the line-height on that span to 60px.

Please note though, that this might superficially convert your table
to a div, but will only get you into trouble later. Because, what
happens if the visitor decides he wants to see the text larger? By
giving the div an exact height of 60px, it won''t stretch if you
enlarge the content.

To make a "CSS layout", you should first get rid of the tables in your
head IYSWIM. Think flexible, test what happens if visitors change
stuff like font-size, window size, etc.

Start with very simple pages, get to understand how things work, and
only then (this won''t happen in one day!) try to mimic table layouts,
especially those that depend on image sizes.

Divs are very different in behaviour from tables, and the most
important difference might well be that they don''t stretch beyond
whatever height you set them to. (except when viewed in IE5/6, but
that doesn''t count ;-) )

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Counting Crows - Barely Out Of Tuesday

3月8日下午3:36，Els< els.aNOS ... @ tiscali.nlwrote：

On Mar 8, 3:36 pm, Els <[e-mail]:

Dudely写道：

Dudely wrote:

问题是我想要的第一个（css样式代码）看起来与第二个（表样式代码）相同的
。我不能为了生活

我得到的文字在背景中间垂直对齐

图片。

THE PROBLEM is that I want the first (css style code) to look
identical to the second (table style code). I cannot for the life of
me get the text to align vertically in the middle of the background
image.

正如你所看到的，我已经尝试调整边距，填充和

课程使用垂直对齐指令。

As you can see, I''ve tried adjusting the margins, the padding, and of
course using the vertical alignment directive.

虽然我可以使用margin-left向右移动文本，margin-top

对我们没有任何影响我可以看到。填充没有效果，也没有b $ b垂直对齐。

While I can move the text to the right using margin-left, margin-top
has no affect whatsoever that I can see. Padding has no effect, nor
does vertical-alignment.

我已经尝试了我能想到的每一种可能的组合，文本将无论是什么，b $ b都不会垂直移动我做。我没有想法。

I''ve tried every possible combination I can think of, the text will
not move vertically no matter what I do. I''m out of ideas.

两个选项（好吧，还有更多，但只有两个我想建议）：

设置填充 - 在div上面。请注意，填充*会增加*

到高度，所以如果总高度应该保持60px，你可以使用一个20px的

顶部填充，但是你必须设置高度为40px，加上总计60px的
，或者将该跨度的行高设置为60px。

Two options (well, there are more, but only two I''d want to suggest):
Either set a padding-top on the div. Be aware that padding is *added*
to height, so if the total height should remain 60px, you could use a
top padding of 20px, but then you must set the height to 40px, to add
up to 60px total, or, set the line-height on that span to 60px.

有效。我消除了跨度（我只把跨度放入因为我

没有得到操纵div的任何结果）调整了顶部

并且左边填充和高度为补偿，并且它非常非常接近原始表格布局的
。不完全，但足够好。我仍然不明白为什么垂直对齐：中间对我来说绝对没有什么价值，正如我所希望的那样，正是我想要的那样。

That works. I eliminated the span (I only put the span in because I
wasn''t getting any results from manipulating the div) adjusted the top
and left padding and height to compensate, and it''s very, very close
to the original table layout. Not exact, but good enough. What I
still don''t understand is why "vertical-alignment: middle" did
absolutely nothing for me, as I would of expected that to be precisely
what I was aiming for.

请注意，这可能会将您的表格

转换为div，但以后只能让您遇到麻烦。因为，如果访问者决定要查看更大的文本，会发生什么？b $ b？通过

给div一个60px的精确高度，如果你增加内容，它就不会拉伸。

Please note though, that this might superficially convert your table
to a div, but will only get you into trouble later. Because, what
happens if the visitor decides he wants to see the text larger? By
giving the div an exact height of 60px, it won''t stretch if you
enlarge the content.

我有点卡在摇滚和硬地之间。通过将它设置为

60px，图像被拉伸，以便我得到你应该看到的双色调

效果。我试过的任何其他设置都会消除

的效果。垂直拉伸图像大大超过60px会使图像扭曲，只要颜色有关，就会产生太多的双色调效果。
双色调效果。除非你以60px的速度观看，否则你得到一张我不想要的图像。基本上你会看到带有金色边框的绿色

图像。将图像拉伸到60px使得我可以按照自己喜欢的方式拉伸金边界。大大低于或高于60px并且你得到了一个我不打算生效的
。我不知道如何解决这个问题。

I''m kind of stuck between a rock and hard place. By setting it to
60px, the image IS being stretched so that I get the two-tone color
effect you should be seeing. Any other setting I''ve tried eliminates
the effect. Stretching the image vertically much beyond 60px makes
the image distorted as far as the colors are concerned giving too much
of a two-tone color effect. Unless you''re viewing it at 60px, you''re
getting an image I don''t intend. Essentially you''re seeing a green
image with a gold border. Stretching the image to 60px makes the gold
border stretch in a way I like. Much below or above 60px and you''re
getting an effect I didn''t intend. I don''t know how to fix that.

Divs与桌子的行为非常不同，而且最多

重要的区别可能是他们不会超出你设定的任何高度。 （除了在IE5 / 6中查看，但

不算数;-)）

Divs are very different in behaviour from tables, and the most
important difference might well be that they don''t stretch beyond
whatever height you set them to. (except when viewed in IE5/6, but
that doesn''t count ;-) )

绝对有一个有趣的效果如果我将窗口缩小到

很小。表格图像垂直延伸（我不喜欢

产生的图像，但至少文本仍然可见）而

div ...好吧，文字只是被切断了。我想一个糟糕的形象
带有可见文字的b $ b比不能看到文字更好，但是我不知道如何用div来实现这个结果没有丢失

原始60px拉伸图像的正常案件。即全屏

按预期查看。

It definitely has an interesting effect if I shrink the window down to
tiny. The table image stretches vertically (I don''t like the
resulting image, but at least the text is still visible) whereas the
div... well, the text simply gets cut off. I suppose a poor image
with visible text is better than not being able to see the text, but I
don''t know how to achieve that result with the div without losing the
original 60px stretched image for the "normal" case. i.e. full screen
viewing as intended.

Dudely写道：

Dudely wrote:

。 ..有人可以看一下

看看 http： //www.greengoldcapital.info/test/test.shtml 并查看是否

你可以告诉我我做错了什么？

... Can someone take a
look at http://www.greengoldcapital.info/test/test.shtml and see if
you can tell me what I''m doing wrong?

>

问题在于我想要第一个（css样式代码）看起来

与第二个（表格样式代码）相同。我不能为了生活

我得到的文字在背景中间垂直对齐

图片。

>
THE PROBLEM is that I want the first (css style code) to look
identical to the second (table style code). I cannot for the life of
me get the text to align vertically in the middle of the background
image.

虽然Els知道她说的是什么，但我得到了部分回答。

DIV对齐不是完全重复的表（他们_can_做类似的

的东西，但是不一样）。


这就是你所得到的，由我修剪以简化问题，然后我再次臃肿，看看我在做什么，并由我编辑实际

这样做：


< div style =" border：5px solid red;高度：60px;">

< span style =" border：1px纯黄色;位置：绝对;

顶部：25px;">绿金资本< / span>

< / div>


< table border =" 5px" CELLPADDING = QUOT; 0" CELLSPACING = QUOT; 0" width =" 100％">

< tbody>

< tr>

< td height =" 60px" ;> Green Gold Capital< / td>

< / tr>

< / tbody>

< / table>


如果需要，可以忽略或删除边框;他们在那里作为我的

可视化辅助工具。我已经添加了绝对定位（略微讨厌）和

a固定最高值（两倍令人讨厌）以px为单位（令人讨厌的四倍）。

考虑一下概念证明。还要考虑在调整文本大小时，或者文本很长但

视口很窄时，它会如何快速轻松地中断。这是埃尔斯所说的。


-

John

A partial answer from me, although Els knows of which she speaks; the
DIV alignments won''t exactly duplicate tables (they _can_ do similar
things, but aren''t identical).

Here''s what you''ve got, trimmed by me to simplify the problem, then
bloated by me again to see what I''m doing, and edited by me to actually
do it:

<div style="border:5px solid red; height: 60px;">
<span style="border:1px solid yellow; position:absolute;
top:25px;">Green Gold Capital</span>
</div>

<table border="5px" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td height="60px">Green Gold Capital</td>
</tr>
</tbody>
</table>

Ignore or remove the borders if you want; they''re there as my
visualization aid. I''ve added absolute positioning (slightly nasty) and
a fixed top value (twice as nasty) in units of px (four times as nasty).
Consider it a proof of concept. Consider also how quickly and easily it
breaks when the text is resized, or when the text is long but the
viewport is narrow. Which is what Els was saying.

--
John

这篇关于从表转换为css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！