Basic image alignmen problem

[Harry Putnam]

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?

[Stephen Poley]

On Sat, 12 Mar 2005 22:12:27 -0600, Harry Putnam <re****@newsguy.com>
wrote:

____________________________________________
| |
| 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?

If it is really necessary for the three images to have a fixed spacing
(I can't immediately visualise a design that would really need that)
then making them one image would seem an obvious route.

--
Stephen Poley

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

[Harry Putnam]

Stephen Poley <sb******************@xs4all.nl> writes:

On Sat, 12 Mar 2005 22:12:27 -0600, Harry Putnam <re****@newsguy.com>
wrote:

____________________________________________
| |
| 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?

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.

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

[Stephen Poley]

On Sun, 13 Mar 2005 04:58:25 -0600, Harry Putnam <re****@newsguy.com>
wrote:

Stephen Poley <sb******************@xs4all.nl> writes:

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. ...

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.

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.

Assuming for the sake of argument that what you are trying to do is
sensible, yes a table with three cells would probably be the easiest
solution. TD { text-align: center; } should centre them.

--
Stephen Poley

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

[Dave Anderson]

Harry Putnam wrote:

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%").

This sounds to me as though you want the browser to rescale the images
so that they always fit in the viewport.

The last time I checked, many browsers did a very poor job of scaling
images -- even a small change in scale could render an image practically
unrecognizable. Unless essentially all modern browsers have learned to
do high-quality image scaling, what you want won't work in practice.

Dave

[Harry Putnam]

Dave Anderson <da**@daveanderson.com> writes:

Harry Putnam wrote:

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%").

This sounds to me as though you want the browser to rescale the images
so that they always fit in the viewport.

The last time I checked, many browsers did a very poor job of scaling
images -- even a small change in scale could render an image practically
unrecognizable. Unless essentially all modern browsers have learned to
do high-quality image scaling, what you want won't work in practice.

What I'm after is what happens with the topmost image. If you view
the source you'll notice that the code uses Percentage to accomplish
the proportional movement along with Browser pane shrink/expand.

I'd like to get the same effect with the other three. Make them act
like block and work like the top one.

[Harry Putnam]

Stephen Poley <sb******************@xs4all.nl> writes:

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. ...
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.

I guess by saying `I gather' you still aren't quite sure what I mean.
If its still not clear to you, I'm not sure what else I can say to
explain it other than I'd like the 3 image row to act like the single
image above them. It just shrinks and grows with the browser pane.

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.

I looked at some info about that and I too thought it sounded like a
good way. However I didn't really understand how to do it. That is,
make specific spots in a larger image `hot' or act like links.
If they are links, are you sure you really want the right-hand one to
disappear in a narrow window?
I'm not sure why it needs to disappear in a narrow window. If it can
be made to act like the top image it won't. That image just shrinks
and grows to infinity it seems.

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.

Assuming for the sake of argument that what you are trying to do is
sensible
If it appears to be thoroughly non-sensical to you, I'm all ears as to
a better or more `sensible way'
yes a table with three cells would probably be the easiest
solution. TD { text-align: center; } should centre them.

Yup, that lines them up. But I don't see a way to get some breathing
space between them. Adding values like this:
cellspacing="50" cellpadding="25"
seems to have no effect at all. But I'm not really sure what those are
supposed to do.

And if you really squeeze up the right hand side slips under the other
two.

Maybe that image-map thing is better? Can you point me toward
something that explains it well?

[David Ross]

Harry Putnam wrote:

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 |
| |
|____________________________________________|

I have a problem with this. The image cannot be "viewed" by an
audio browser for the blind. The font cannot be changed by someone
who is dyslexic to something more easily read. The text size
cannot be enlarged by me as my eyes get older. Overall, you are
excluding a portion of your potential audience this way.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.

[Stephen Poley]

On Sun, 13 Mar 2005 09:49:21 -0600, Harry Putnam <re****@newsguy.com>
wrote:

Stephen Poley <sb******************@xs4all.nl> writes:

An image-map is a possibility.

I looked at some info about that and I too thought it sounded like a
good way. However I didn't really understand how to do it. That is,
make specific spots in a larger image `hot' or act like links.

If they are links, are you sure you really want the right-hand one to
disappear in a narrow window?

I'm not sure why it needs to disappear in a narrow window. If it can
be made to act like the top image it won't. That image just shrinks
and grows to infinity it seems.

Right, I finally understand you. If you're happy that browser resizing
of images is of sufficient quality for your needs, then something like
the following should do it (untested). Stick the images in a div (id
mydiv for the sake of argument) and add CSS:

#mydiv { text-align: center; }
#mydiv img { width: 20%; margin-left: 5%; margin-right: 5%; }

--
Stephen Poley

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

[me]

"Harry Putnam" <re****@newsguy.com> wrote in message
news:u1***********@newsguy.com...

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?

See the following:
Good Luck,
me

<td nowrap>Stuff you don't want to wrap.</td>

[Harry Putnam]

Stephen Poley <sb******************@xs4all.nl> writes:

Right, I finally understand you. If you're happy that browser resizing
of images is of sufficient quality for your needs, then something like
the following should do it (untested). Stick the images in a div (id
mydiv for the sake of argument) and add CSS:

#mydiv { text-align: center; }
#mydiv img { width: 20%; margin-left: 5%; margin-right: 5%; }

Stephan, Sorry to be such a pest or thick skulled but, I'm not
familiar with the notation you're using and don't see it in refernces
I've looked thru on the web.

What does the technique you suggest look like in actual practice:

<div ID="mydiv" { text-align; cneter; }

<!--And then does the:-->
<!-- mydiv img { width: 20%; margin-left: 5%; margin-right: 5%; }-->

<!-- go inside of each `img' tag, or is it different for each or what? -->

<!-- Like this one:-->

<mydiv img { width: 20%; margin-left: 5%; margin-right: 5%; }
src="some.gif" border="0" align="center"
width="120" height="140" alt="some splash"> </mydiv>

<!--Or show me on these:-->
<a
href="http://www.adobe.com/products/tryadobe/main.jsp#product=39"><img
src="images/Photoshop-csWebGraphicFILL.gif" border="0" align="center"
width="120" height="140" alt="Photoshop CS splash"></a>
<a
href="http://www.apple.com/quicktime/"><img
src="images/quicktime.png" align="center"
border="2" alt="quicktime logo"></a>
<a
href="http://www.adobe.com/products/tryadobe/main.jsp#product=39"><img
src="images/IllustratorWebGraphicFILL.gif" border="0"
width="120" height="140" align="center" alt="Illustrator CS splash"></a>
</div>

[Harry Putnam]

David Ross <no****@nowhere.not> writes:

Harry Putnam wrote:

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 |
| |
|____________________________________________|

I have a problem with this. The image cannot be "viewed" by an
audio browser for the blind. The font cannot be changed by someone
who is dyslexic to something more easily read. The text size
cannot be enlarged by me as my eyes get older. Overall, you are
excluding a portion of your potential audience this way.

Just for the record, this is going on a home lan for my family's use.

I'm nowhere near good enough of a coder to put stuff up in public.

[Harry Putnam]

"me" <anonymous@_.com> writes:

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

See the following:
Good Luck,
me

<td nowrap>Stuff you don't want to wrap.</td>

Not sure what you mean here. If you mean verbatim then it doesn't
work on those three images. At a certain degree of narrowing, the
right hand one jumps down below the others.

Or do you mean to put them into a fully speced table and do that at
each td ...

This for example doesn't really prevent them from wrapping:

<td nowrap > <a
href="http://www.adobe.com/products/tryadobe/main.jsp#product=39"><img
src="images/Photoshop-csWebGraphicFILL.gif" border="0" align="center"
width="120" height="140" alt="Photoshop CS splash"></a>
<a
href="http://www.apple.com/quicktime/"><img
src="images/quicktime.png" align="center"
border="2" alt="quicktime logo"></a>
<a
href="http://www.adobe.com/products/tryadobe/main.jsp#product=39"><img
src="images/IllustratorWebGraphicFILL.gif" border="0"
width="120" height="140" align="center" alt="Illustrator CS splash"></a>
</td>

[me]

"Harry Putnam" <re****@newsguy.com> wrote in message
news:m3************@newsguy.com...

"me" <anonymous@_.com> writes:

What is the standard way to keep the second row in place and viewable
in most browsers at any size of expansion or contraction?
See the following:
Good Luck,
me

<td nowrap>Stuff you don't want to wrap.</td>

Not sure what you mean here. If you mean verbatim then it doesn't
work on those three images. At a certain degree of narrowing, the
right hand one jumps down below the others.

Or do you mean to put them into a fully speced table and do that at
each td ...

This for example doesn't really prevent them from wrapping:

<td nowrap > <a

href="http://www.adobe.com/products/tryadobe/main.jsp#product=39"><img src="images/Photoshop-csWebGraphicFILL.gif" border="0" align="center" width="120" height="140" alt="Photoshop CS splash"></a>
<a
href="http://www.apple.com/quicktime/"><img
src="images/quicktime.png" align="center"
border="2" alt="quicktime logo"></a>
<a
href="http://www.adobe.com/products/tryadobe/main.jsp#product=39"><img src="images/IllustratorWebGraphicFILL.gif" border="0"
width="120" height="140" align="center" alt="Illustrator CS splash"></a> </td>

I don't know at what degree of narrowing those images wrap for you in your
browser. I do know that in IE6 the images in the following table do not wrap
no matter how narrow I make the browser window, what does happen is that a
horizontal scroll bar appears:
Good Luck,
me

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td nowrap>
<a href="http://www.adobe.com/products/tryadobe/main.jsp#product=39">
<img src="images/Photoshop-csWebGraphicFILL.gif" border="0" align="center"
width="120" height="140" alt="Photoshop CS splash"></a>
<a href="http://www.apple.com/quicktime/">
<img src="images/quicktime.png" align="center"
border="2" alt="quicktime logo" width="32" height="32"></a>
<a href="http://www.adobe.com/products/tryadobe/main.jsp#product=39">
<img src="images/IllustratorWebGraphicFILL.gif" border="0"
width="120" height="140" align="center" alt="Illustrator CS splash"></a>
</td>
</table>

[Harry Putnam]

"me" <anonymous@_.com> writes:

I don't know at what degree of narrowing those images wrap for you in your
browser. I do know that in IE6 the images in the following table do not wrap
no matter how narrow I make the browser window, what does happen is that a
horizontal scroll bar appears:
Good Luck,
me

[...] Thanks for the example code

I'm using Firefox but I mistakenly used your first clue verbatim.
That is, without the rest of a table Spec. So of course it acts
different than inside a full coded table..

The table technique seems to work ok with or without nowrap here.

I'd sort of like to stay away from using a table at all if possible.
So still looking for a way to make the 3 images behave like one image
and be code with percent of screen so it resizes according to pane
size.

Stephen Poley has given me the answer I think, but I haven't been able
to figure out how to write the code with correct syntax yet.

Thanks for your effort and example code.

[Stephen Poley]

On Mon, 14 Mar 2005 22:23:07 -0600, Harry Putnam <re****@newsguy.com>
wrote:

Stephen Poley <sb******************@xs4all.nl> writes:

Right, I finally understand you. If you're happy that browser resizing
of images is of sufficient quality for your needs, then something like
the following should do it (untested). Stick the images in a div (id
mydiv for the sake of argument) and add CSS:

#mydiv { text-align: center; }
#mydiv img { width: 20%; margin-left: 5%; margin-right: 5%; }

Stephan, Sorry to be such a pest or thick skulled but, I'm not
familiar with the notation you're using and don't see it in refernces
I've looked thru on the web.

What does the technique you suggest look like in actual practice:

<div ID="mydiv" { text-align; cneter; }

Ah, I didn't realise you were completely unfamiliar with css.

The short answer is that the two lines above go in a css file (you could
instead put them in a style element in your HTML file, but then they
need to be included in every HTML file that has the same header). If
your file is called style.css, then in the head element of each HTML
file you include:

<LINK href='style.css' rel='stylesheet'>

And then the opening tag of your DIV element is <div ID="mydiv">

To get a better idea of what is going on, try:

http://tranchant.plus.com/web/css-tutorial/

You'll find it well worth learning a bit of CSS. Once you've got into
it, it makes writing and maintaining web pages a lot easier.

--
Stephen Poley

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

[Harry Putnam]

Stephen Poley <sb******************@xs4all.nl> writes:

[...] Snipped excellent mini tutorial

To get a better idea of what is going on, try:

http://tranchant.plus.com/web/css-tutorial/

You'll find it well worth learning a bit of CSS. Once you've got into
it, it makes writing and maintaining web pages a lot easier.

I can see already how it would really be a help. Looks like a good
intro you've posted. Again thanks for taking so much time with this.