基本图像对齐问题 [英] Basic image alignmen problem

查看:62
本文介绍了基本图像对齐问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述



我一直在使用varius对齐标签,甚至使用STYLE

标签进行绝对定位但没有完成简单的工作。

我有这样的安排:


____________________________________________

| |

|大标题真的是一个形象|

|在photoshop中创建的精美文本。 |

|这是以页面百分比表示的,因此|

|至于能够收缩和扩展|

|浏览器尺寸|

| |

| ____________________________________________ |


____________ ____________

| | _____________________ | |

| image2 | | image3 | | image4 |

| | | | | |

| __________ | | ____________________ | | ___________ |

更多下面的文字和表格


如果这个ascii图表获得最大的图片这是一张大图片

为中心顶部是在photoshop中完成的文本标题

其次是3个较小的图像,需要保持相同的

级别,并且在页面缩小或扩展时不会滑动。

图像2和3是半正方形尺寸,图像3是长而窄的。


保持第二行的标准方法是什么在任何规模的扩张或收缩的大多数浏览器中都可以看到



I keep stumbling around with varius alignment tags, even using STYLE
tag with absolute positioning but not getting a simple job done.

I have an arrangment like this:

____________________________________________
| |
| Large headline that is really an image |
| of Elaborate text created in photoshop. |
| This is presente in terms of % of page so |
| as to be able to shrink and expand with |
| browser size |
| |
|____________________________________________|

____________ ____________
| | _____________________ | |
| image2 | | image3 | | image4 |
| | | | | |
|__________| |____________________| |___________|
More text and tables below

In case this ascii diagram gets bolikst up It is a large image
centered at top that is a text headline done in photoshop
Followed by 3 smaller images that need to stay positioned on same
level and not slide around when page is shrunk or expanded.
Image 2 and 3 are the semi-square size and image 3 is long and narrow.

What is the standard way to keep the second row in place and viewable
in most browsers at any size of expansion or contraction?

推荐答案

2005年3月12日星期六22: 12:27 -0600,Harry Putnam< re **** @ newsguy.com>

写道:
On Sat, 12 Mar 2005 22:12:27 -0600, Harry Putnam <re****@newsguy.com>
wrote:
____________________________________________
| |
|大标题真的是一个形象|
|在photoshop中创建的精美文本。 |
|这是以页面百分比表示的,因此|
|能够缩小和扩展|
|浏览器尺寸|
| |
| ____________________________________________ |

____________ ____________
| | _____________________ | |
| image2 | | image3 | | image4 |
| | | | | |
| __________ | | ____________________ | | ___________ |

下面的更多文字和表格

如果这个ascii图表获得最大化它是一个大图像
位于顶部,是一个文本标题完成在Photoshop中
随后是3个较小的图像,需要保持在相同的水平位置,而不是在页面缩小或扩展时滑动。
图像2和3是半正方形的大小和图像3很长很窄。

在大多数浏览器中,在任何扩展或收缩的大小的情况下,保持第二行到位和可查看的标准方法是什么?
____________________________________________
| |
| Large headline that is really an image |
| of Elaborate text created in photoshop. |
| This is presente in terms of % of page so |
| as to be able to shrink and expand with |
| browser size |
| |
|____________________________________________|

____________ ____________
| | _____________________ | |
| image2 | | image3 | | image4 |
| | | | | |
|__________| |____________________| |___________|
More text and tables below

In case this ascii diagram gets bolikst up It is a large image
centered at top that is a text headline done in photoshop
Followed by 3 smaller images that need to stay positioned on same
level and not slide around when page is shrunk or expanded.
Image 2 and 3 are the semi-square size and image 3 is long and narrow.

What is the standard way to keep the second row in place and viewable
in most browsers at any size of expansion or contraction?



你所要求的似乎是矛盾的。如果3页
图像必须在页面缩小或展开时不会滑动然后它就不可能它们是可见的......在任何规模的扩张或

收缩。你能解释一下你想要的更好吗?


如果这三张图片真的有必要有固定的间距

(我不能立即想象一个真正需要的设计)

然后让它们成为一个图像似乎是一条显而易见的路线。


-

Stephen Poley

http://www.xs4all .nl / ~sbpoley / webmatters /


Stephen Poley< sb ****************** @ xs4all.nl>写道:
Stephen Poley <sb******************@xs4all.nl> writes:
2005年3月12日星期六22:12:27 -0600,Harry Putnam< re **** @ newsguy.com>
写道:
On Sat, 12 Mar 2005 22:12:27 -0600, Harry Putnam <re****@newsguy.com>
wrote:
____________________________________________
| |
|大标题真的是一个形象|
|在photoshop中创建的精美文本。 |
|这是以页面百分比表示的,因此|
|能够缩小和扩展|
|浏览器尺寸|
| |
| ____________________________________________ |

____________ ____________
| | _____________________ | |
| image2 | | image3 | | image4 |
| | | | | |
| __________ | | ____________________ | | ___________ |

下面的更多文字和表格

如果这个ascii图表获得最大化它是一个大图像
位于顶部,是一个文本标题完成在Photoshop中
随后是3个较小的图像,需要保持在相同的水平位置,而不是在页面缩小或扩展时滑动。
图像2和3是半正方形的大小和图像3长而窄。

在大多数浏览器中,在任何扩展或收缩的大小的情况下,保持第二行到位和可查看的标准方法是什么?
你是什么要求似乎是一个矛盾的术语。如果3页图像必须在页面缩小或展开时不会滑动那么它们是不可能的,它们是可见的......在任何规模的扩张或收缩。你能解释一下你想要的更好吗?
____________________________________________
| |
| Large headline that is really an image |
| of Elaborate text created in photoshop. |
| This is presente in terms of % of page so |
| as to be able to shrink and expand with |
| browser size |
| |
|____________________________________________|

____________ ____________
| | _____________________ | |
| image2 | | image3 | | image4 |
| | | | | |
|__________| |____________________| |___________|
More text and tables below

In case this ascii diagram gets bolikst up It is a large image
centered at top that is a text headline done in photoshop
Followed by 3 smaller images that need to stay positioned on same
level and not slide around when page is shrunk or expanded.
Image 2 and 3 are the semi-square size and image 3 is long and narrow.

What is the standard way to keep the second row in place and viewable
in most browsers at any size of expansion or contraction?
What you are asking for seems to be a contradiction in terms. If the 3
images must "not slide around when page is shrunk or expanded" then it
is not possible that they are "viewable ... at any size of expansion or
contraction". Could you explain a bit better what you want?




对不起,我的解释太弱了。


滑动我的意思随着浏览器窗口缩小,3个水平图像成为2行。 2个图片中的1个,第三个出现在下面

其他人,或者有足够的浏览器甚至3张图片

垂直。


因此,随着浏览器的扩展或者b $ b b缩小,他们需要保持一定的比例。总是在任何大小的窗口上水平保留3个图像


顶部图像通过使用页面符号的百分比来表示宽度

和高度标签(width =" ; 65%" height =" 40%"。

如果三张图片确实需要固定间距


不确定何时固定得到了等式。但不,他们不会想要一个固定的间距。间距需要按比例保持比例



(我无法立即想象出真正需要的设计)
然后让它们成为一个图像似乎是一条显而易见的路线。



Sorry my explanation was so weak.

By slide around I mean the 3 horizontal images becoming 2 rows as
browser window is shrunk. 1 of 2 pics and the third appearing below
the others, or with enough shriking down of the browser even 3 images
vertically.

So, they need to stay in proportion as the browser is expanded or
shrunk. Always remaining 3 images horizontally across whatever size window

The top image does that by use of percent of page notation in width
and height tags (width="65%" height="40%").
If it is really necessary for the three images to have a fixed spacing
Not sure when `fixed'' got in the equation. But no, they would not
want a `fixed'' spacing. Spacing would need to stay in proportion as
well.
(I can''t immediately visualise a design that would really need that)
then making them one image would seem an obvious route.




是的,这也是我的想法,但我忽略了提到3

水平图像也是锚链接。如果他们都是一张图片的话,我现在还没有办法继续使用

将它们链接起来。


我想到的另一个想法是把它们放进去表。这确实有效

除了我有时间试图让它们保持在

格的中心。


我我发布了一个这样的模型(它一团糟):
www.jtan.com/~reader/test.html


即将上映



Yes, that was my thought too but I neglected to mention that the 3
horizontal images are also anchor links. I didn''t now a way to still
make them links if they were all one image.

Another thought I had was to put them into a table. That does work
except I''m having a time trying to make them stay centered in the
cell.

I''m posting a mockup of this at (its a mess):
www.jtan.com/~reader/test.html

It will be up shortly


在Sun,2005年3月13日04:58:25 -0600,Harry Putnam< re **** @ newsguy.com>

写道:
On Sun, 13 Mar 2005 04:58:25 -0600, Harry Putnam <re****@newsguy.com>
wrote:
Stephen Poley< sb ****************** @ xs4all.nl>写道:
Stephen Poley <sb******************@xs4all.nl> writes:
你所要求的似乎是矛盾的。如果3页图像必须在页面缩小或展开时不会滑动那么它们是不可能的,它们是可见的......在任何规模的扩张或收缩。你能解释一下你想要的更好吗?
抱歉,我的解释太弱了。

通过滑动我的意思是3个水平图像成为2行,因为浏览器窗口缩小了。 2个图片中的1个和第三个出现在下面的其他图片中,或者在浏览器中有足够的潦草地写下垂直的3个图像。 ...
What you are asking for seems to be a contradiction in terms. If the 3
images must "not slide around when page is shrunk or expanded" then it
is not possible that they are "viewable ... at any size of expansion or
contraction". Could you explain a bit better what you want?
Sorry my explanation was so weak.

By slide around I mean the 3 horizontal images becoming 2 rows as
browser window is shrunk. 1 of 2 pics and the third appearing below
the others, or with enough shriking down of the browser even 3 images
vertically. ...




好​​的,我想你要避免让图像换到新的一行。

IOW,看不见右手图像完全优于

,它出现在一个新行上。



OK, I gather you want to avoid having the images wrap to a new line.
IOW, losing sight of the right-hand image completely is preferable to
having it appear on a new line.

如果真的有必要这三个图像有一个固定的间距
If it is really necessary for the three images to have a fixed spacing



不确定何时固定得到了等式。



Not sure when `fixed'' got in the equation.




那'我认为你的意思可能是不滑。

但不,他们不会想要一个固定的间距。间距需要保持适当的比例。
我忽略了提到3
水平图像也是锚链接。如果他们都是一张图片,我现在还没有办法让他们链接。


图像映射是可能的。


如果它们是链接,你确定你真的想要右手一个

在一个狭窄的窗口中消失了吗?

我想到的另一个想法是将它们放入一张桌子。这确实有效
除了我有时间试图让它们保持在
单元格的中心。



That''s what I thought you might mean by "not slide".
But no, they would not
want a `fixed'' spacing. Spacing would need to stay in proportion as
well. I neglected to mention that the 3
horizontal images are also anchor links. I didn''t now a way to still
make them links if they were all one image.
An image-map is a possibility.

If they are links, are you sure you really want the right-hand one to
disappear in a narrow window?
Another thought I had was to put them into a table. That does work
except I''m having a time trying to make them stay centered in the
cell.




假设为了你要做的事情的论点是

明智,是的,一个包含三个单元格的表可能是最简单的
解决方案。 TD {text-align:center;应该把它们放在中心。


-

Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/


这篇关于基本图像对齐问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆