473,226 Members | 1,372 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 software developers and data experts.

Basic image alignmen problem


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?
Jul 23 '05 #1
16 2403
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/
Jul 23 '05 #2
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
Jul 23 '05 #3
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/
Jul 23 '05 #4
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

Jul 23 '05 #5
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.
Jul 23 '05 #6
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?
Jul 23 '05 #7
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/>.
Jul 23 '05 #8
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/
Jul 23 '05 #9
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>
Jul 23 '05 #10
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>

Jul 23 '05 #11
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.
Jul 23 '05 #12
"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>
Jul 23 '05 #13
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>
Jul 23 '05 #14
"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.
Jul 23 '05 #15
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/
Jul 23 '05 #16
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.
Jul 23 '05 #17

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

15
by: Simon | last post by:
I would like to create a very basic file upload add image form to add to my web site and to keep them in a "tmp" directory within my web hosting file manager once uploaded. I understand the basic...
1
by: bj | last post by:
I have several pages that I want to allow the same kind of activity, so my basic question is how best to structure the interaction (and I have one related subquestion as well). Scenario: The...
2
by: frossberg | last post by:
Hello! I tried to install the Visual Basic.NET Resource Kit (http://msdn.microsoft.com/vbasic/vbrkit/) but obviously something went very wrong and now it sems impossible both to repair and to...
0
by: Athono | last post by:
I am new to Visual Basic. So the differences between C++ and VB are striking to me. But even this seems like too much. Here is what I am talking about: I got a project out of source safe and I...
1
by: jz | last post by:
Hi All, I have an ActiveX control project, in the main form, I have an image control and load a JPG image from by setting Picture property of Image; I build it and everything is good, I...
21
by: Al Christoph | last post by:
I posted this last week end in the MSDN forums. No luck there. Let's see what the experts here have to say:-)))) I have a rather convoluted project. The distributable will come in eight...
1
by: hunkgym | last post by:
Good Day! Would be appreciate if there is solution for the following problem: - In VB.Net of Visual Studio.Net 2003, developer can click and drag a table listed in the Server Explorer from a...
11
by: =?Utf-8?B?UGV0ZXIgSw==?= | last post by:
I am working with Visual Studio or alternately with Expression Web. I need to create about 50 aspx pages with about 1200 thumbnali images, typically arranged in three to four groups per page,...
1
by: amit saini | last post by:
Hi I have using back end sql server 2000, fornt end Visual Basic and For reporting using Ms-Word 2000. I have face a problem . In sql server i have using Image type data type and stored a image in...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.