How to align elements and define resize behaviour?

[Alex Blekhman]

Hello,

I'm experienced Windows programmer, however, I'm quite
novice in HTML technologies. Recently I was assigned a task
to write small utility for internal use in our development
team. I chose to write its GUI in HTML and make front end as
HTA.

While developing application's logic is no problem the HTML
layout and properties require some additional efforts. So, I
decided to ask my questions here, where almost everybody is
well proficient in HTML and far beyond hypertext markup.
Please, bear with me if my questions seem too dull.

My application is wizard-like and has following layout:

+---+---------+ I - image
| I | iframe | iframe - IFRAME object
| | | [] - buttons
|---+---------|
|[] | [][] []|
+---+---------+

It's regular table with elements inside each cell. Now the
questions:

1. How can I specify that width of I-cell will be
automatically adjusted to the width of image? Currently I
hardcoded WIDTH="N", where N is number of pixels.

2. How can I specify that height of second row (with
buttons) will be equal to the default height of button?

3. During document resize I want that:
a) width of first column (with image) won't change
b) height if second row (with buttons) won't change
c) height and width of iframe-cell can change freely

how can I achieve that? Currently, during resize whole table
changes proportionally.

Thanks in advance
Alex

[Lachlan Hunt]

Alex Blekhman wrote:

While developing application's logic is no problem the HTML
layout and properties require some additional efforts.

My application is wizard-like and has following layout:

+---+---------+ I - image
| I | iframe | iframe - IFRAME object
| | | [] - buttons
|---+---------|
|[] | [][] []|
+---+---------+

It's regular table with elements inside each cell. Now the
questions:

Stop using tables for layout. Tables are meant for marking up tabular
data, which this is clearly not.

Look up CSS. There's some good layout techniques available at Position
is Everything, which may be suitable for your needs. Try google for
others, or ask in a CSS related group, like c.i.w.a.stylesheets

http://positioniseverything.net/

--
Lachlan Hunt
http://lachy.id.au/
http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox

[Spartanicus]

"Alex Blekhman" <tk*********@yahoo.com> wrote:

I'm experienced Windows programmer, however, I'm quite
novice in HTML technologies.
At least you didn't make the usual programmer mistake to call HTML a
programming language, I live in hope that you know that the "ML" in HTML
stands for "Markup Language".
Recently I was assigned a task
to write small utility for internal use in our development
team. I chose to write its GUI in HTML and make front end as
HTA.

While developing application's logic is no problem the HTML
layout and properties require some additional efforts. So, I
decided to ask my questions here, where almost everybody is
well proficient in HTML and far beyond hypertext markup.
Please, bear with me if my questions seem too dull.

My application is wizard-like
It does magic?
and has following layout:

+---+---------+ I - image
| I | iframe | iframe - IFRAME object
| | | [] - buttons
|---+---------|
|[] | [][] []|
+---+---------+

It's regular table with elements inside each cell.
Had it been a web "application" we would have lectured you about
semantics, not using tables for layout etc. Since it's for an intranet
I'm going to assume that this is less relevant.
Now the questions:

1. How can I specify that width of I-cell will be
automatically adjusted to the width of image? Currently I
hardcoded WIDTH="N", where N is number of pixels.
Then don't do that. A table cell's width "shrink wraps" around it's
content. However since you used the magic word "application" I'm going
to assume that you've set this layout table to occupy the full width of
the viewport by specifying width="100%" on the table itself.

To get the table cell containing the image to be as wide as the image,
but no wider, specify a width on the table cell to the right to 100%.
2. How can I specify that height of second row (with
buttons) will be equal to the default height of button?

Don't try to set a height for the row containing the "buttons".

--
Spartanicus

[Eric B. Bednarz]

Spartanicus <in*****@invalid.invalid> writes:

"Alex Blekhman" <tk*********@yahoo.com> wrote:

My application is wizard-like

It does magic?

While this statement may sound very wannabe in some ears

<http://catb.org/~esr/jargon/html/W/wizard.html>

the odds ar that in a losedos environment it means little more than
an interface for talking to a paperclip.

+---+---------+ I - image
| I | iframe | iframe - IFRAME object
| | | [] - buttons
|---+---------|
|[] | [][] []|
+---+---------+

Exact table layout algorhythms differ between UAs and you fail to provide
sufficient details. If your Intranet is M$ based and you are using IE
6, ensuring 'quirks mode' and setting the width of the upper left cell
and the height of the bottom cells to '1' or '1%' should suffice.

Otherwise, provide an online test case instead of posting fairly vague
descriptions or snippets of code.

[Alex Blekhman]

Spartanicus wrote:

At least you didn't make the usual programmer mistake to
call HTML a programming language, I live in hope that you
know that the "ML" in HTML stands for "Markup Language".
I can assure you I know what HTML acronym means. I never
called HTML programming language in my life because
it's...erm...not programming language. I understand the
difference between markup and programming.

My application is wizard-like

It does magic?

I could only hope that by some magic it would do whatever
it's supposed to without intervention of developer at all.
However, since the moment we're expelled from Garden of Eden
cursed are computers and in toil we program them all the
days of our life.

I beg your pardon for assumption that most of readers here
are fluent in Windowese dialects. Here's brief explanation
of wizard.

Wizard is the program, which consists of dialog box. Usually
it has buttons "Back", "Next" and "Cancel". Whan user click
on "Back" or "Next", the content of dialog window changes
and user can select different options. The contents of next
step can depend on choice made by user on previous steps. It
called wizard, because the program like wizard guides user
through configuration/installation/whatever process.

Here's a couple of screenshots of typical wizard interfaces:
http://www.sfsu.edu/~helpdesk/pics/h...te_install.gif
http://is.curtin.edu.au/faqpics/vcitshot1.gif

It's regular table with elements inside each cell.

Had it been a web "application" we would have lectured
you about semantics, not using tables for layout etc.
Since it's for an intranet I'm going to assume that this
is less relevant.

Why shouldn't I use tables for layout? Actually, my first
attempts didn't use tables and when I encountered problems
with alignment and positioning, then fellow web developer
told me to use tables to alleviate this problem. Also, I
noticed that huge amount of web sites use tables for layout.
However, I'll embrace any other solution happily if it'll
provide me with desired result.

My goal is not to impress the public with this application.
Quite the contrary, it should be very basic and should
involve as little technologies as possible, so other HTML
illiterates would be able to support it. This application
won't be on intranet even. It will be launched from disk
directly.

HTA stands for HTML Application in Windows world. It's
regular HTML page [with some HTA specific tags], however
with access rights as executable module. It allows you to
develop simple GUI desktop applications with HTML and
scripts really fast and cheap.

Now the questions:

1. How can I specify that width of I-cell will be
automatically adjusted to the width of image? Currently I
hardcoded WIDTH="N", where N is number of pixels.

Then don't do that. A table cell's width "shrink wraps"
around it's content. However since you used the magic
word "application" I'm going to assume that you've set
this layout table to occupy the full width of the
viewport by specifying width="100%" on the table itself.

Yes, you're right, table's width was 100%.
To get the table cell containing the image to be as wide
as the image, but no wider, specify a width on the table
cell to the right to 100%.

Bingo! This worked.

2. How can I specify that height of second row (with
buttons) will be equal to the default height of button?

Don't try to set a height for the row containing the
"buttons".

Thanks for your help. After little bit of tweaking I
achieved all desired behaviours. Here's final table (with
relevant parts only):

-------
....
<TABLE height="100%" cellspacing="0">
<TR>
<TD valign="top" background="leftBkg.bmp">
<IMG src="left.bmp">
</TD>
<TD width="100%" height="100%">
<IFRAME width="100%" height="100%"></IFRAME>
</TD>
</TR>
<TR>
<TD align="left">[button]</TD>
<TD align="right">[button][button][button]</TD>
</TR>
</TABLE>
....
-------

Thanks
Alex

[Alex Blekhman]

Eric B. Bednarz wrote:

While this statement may sound very wannabe in some ears

<http://catb.org/~esr/jargon/html/W/wizard.html>

the odds ar that in a losedos environment it means little
more than
an interface for talking to a paperclip.
[...]
Exact table layout algorhythms differ between UAs and you
fail to provide sufficient details. If your Intranet is
M$ based and you are using IE 6, ensuring 'quirks mode'
and setting the width of the upper left cell and the
height of the bottom cells to '1' or '1%' should suffice.

Otherwise, provide an online test case instead of posting
fairly vague descriptions or snippets of code.

You could save your sarcasm for more appropriate occasion.
See my response to Spartanicus where I describe the solution
for my problem.

I'll emphasize again that this is _NOT_ first class web
application. It's simple GUI utility for making
configuration scripts for our internal tasks. There is no
requirements for exact layout of elements. The goal is to
employ as little technologies as possible. Reliance on basic
HTML capabilities is of primary concern.

Thanks
Alex

[Eric B. Bednarz]

"Alex Blekhman" <tk*********@yahoo.com> writes:

You could save your sarcasm for more appropriate occasion.
Sigh, you don't give all relevant information, also not in that post
See my response to Spartanicus where I describe the solution
for my problem.

because doctype sniffing happens to matter in this case. The difference
between my suggestion and your solution is that mine works quite
consistently in quite all more or less contemporary UA's and degrades
acceptably if not (read: IE5/Mac and IE6 in 'standards compliance' mode
would calculate the sizes relative to the contents). Yours would cause
a vertical scrollbar in iCab and IE6 in 'standards compliance' mode.

[Alan J. Flavell]

On Tue, 25 Oct 2005, Alex Blekhman wrote:

Eric B. Bednarz wrote: [...snip...]
You could save your sarcasm for more appropriate occasion.
Since you now make it clear, if it wasn't already, that you were
mis-using a WWW group in the interest of designing some internal
system, I'd say you should be only too grateful that you get any kind
of constructive answer.
See my response to Spartanicus where I describe the solution
for my problem.
I come here for discussions about the WWW. If you can learn something
useful from such discussions, then you're very welcome to use them for
your own purposes, but that's not what the WWW groups are for.

As an aside, I've seen quite a number of mistakes where web
applications have been designed for what the designer perceived to be
the specific situation, where the situation has later changed (due to
new browser versions, security issues, random management decisions
etc.) which could have been avoided if the design had been tackled *as
if* it was for the WWW.
I'll emphasize again that this is _NOT_ first class web
application.

bye

[Alex Blekhman]

Alan J. Flavell wrote:

Since you now make it clear, if it wasn't already, that
you were mis-using a WWW group in the interest of
designing some internal system, I'd say you should be
only too grateful that you get any kind of constructive
answer.
I'm sorry if I insulted you in some way. By no means it was
my intend. However, in my defence I can say that when you
get response, which mentions "losedos environment" and "M$",
then it quickly prompts /. style of discussion.
I come here for discussions about the WWW. If you can
learn something useful from such discussions, then you're
very welcome to use them for your own purposes, but
that's not what the WWW groups are for.
I agree with you that my task is not WWW application in
strict definition of the term. However, IMO, it's very
close. Yes, I'm bound to specific OS and certain browser.
It's highly unlikely that my environment will change in the
future. I don't have cross platform, cross browsers
requirements. Shouldn't it make the task easier? Yes, my
browser loads HTML page from drive instead of HTTP protocol,
but how can it influence HTML rendering? Correct me if I
wrong, but I think that from browser's point of view it's
the same HTML.
As an aside, I've seen quite a number of mistakes where
web applications have been designed for what the designer
perceived to be the specific situation, where the
situation has later changed (due to new browser versions,
security issues, random management decisions etc.) which
could have been avoided if the design had been tackled
*as if* it was for the WWW.

That's why I'm asking my question in the HTML authoring
group. I'm open to any advice or remark made by professional
HTML developer. Currently I'm trying to rephrase my task in
the answer to Eric B. Bernardz' post. If my description of
the problem is lacking some information, then I'm ready to
provide anything whatever you consider important. But tell
me what is it.

Thanks
Alex

[Alex Blekhman]

Eric B. Bednarz wrote:

Sigh, you don't give all relevant information, also not
in that post
I apologise if my description was unclear. I'll try to
describe it in another way. My goal is to make HTML
document, which consists of four parts:

+---+---+
| 1 | 2 | 1 - image
+---+---+ 2 - iframe
| 3 | 4 | 3 - left aligned button
+---+---+ 4 - three right aligned buttons

This layout should occupy all visible area of the document.
During resize I want that:

- part 1 can change its height, but not width
- part 2 can change both its height and width
- part 3 can change its width, but not height
- part 4 the same as part 3

Also, I need that part 1 will make its width equal to the
width of image. That's all. Regarding possible solution, I
would prefer to stay within basic HTML (if possible) even at
the cost of trading coolness of the look for simplicity.

Currently I can achieve my goal by using table with
following parameters:

<TABLE height="100%">
<TR>
<TD valign="top" background="leftBkg.bmp">
<IMG src="left.bmp">
</TD>
<TD width="100%">
<IFRAME width="100%" height="100%"></IFRAME>
</TD>
</TR>
<TR height="1%">
<TD align="left">[button]</TD>
<TD align="right">[button][button][button]</TD>
</TR>
</TABLE>
because doctype sniffing happens to matter in this case.
The difference between my suggestion and your solution is
that mine works quite consistently in quite all more or
less contemporary UA's and degrades acceptably if not
(read: IE5/Mac and IE6 in 'standards compliance' mode
would calculate the sizes relative to the contents).
Yours would cause a vertical scrollbar in iCab and IE6 in
'standards compliance' mode.

My client is IE5.5/IE6[/IE7?] on Windows for foreseeable
future. Anyway, I'm ready to implement it in most robust way
toprevent headaches right from the beginning.

Thanks
Alex

[shreeshupriya]

Eric B. Bednarz wrote:

"Alex Blekhman" <tk*********@yahoo.com> writes:

You could save your sarcasm for more appropriate occasion.

Sigh, you don't give all relevant information, also not in that post

See my response to Spartanicus where I describe the solution
for my problem.

because doctype sniffing happens to matter in this case. The difference
between my suggestion and your solution is that mine works quite
consistently in quite all more or less contemporary UA's and degrades
acceptably if not (read: IE5/Mac and IE6 in 'standards compliance' mode
would calculate the sizes relative to the contents). Yours would cause
a vertical scrollbar in iCab and IE6 in 'standards compliance' mode.

[shreeshupriya]

hai,
recently, i saw the getinnet it solution, they give all the solution
about web desinging and programming languages. it is very good. let you
try.

[Eric B. Bednarz]

"Alex Blekhman" <tk*********@yahoo.com> writes:

I apologise if my description was unclear.
It was rather incomplete, but let's cut this short.

Click here to start:

<http://bednarz.nl/swamp/wizard/>

It is possible that the shortage of a doctype declaration causes
problems in Safari, and maybe even IE/Mac, I frankly cannot remember and
I'm too lazy to reboot and check that (and don't be so touchy, you
haven't heard me bitching about OS X yes :).

You can stick one on top as long as you keep care to trigger M$IE's
forwardscompatible mode, meaning either precede it with a comment
declaration or use HTML 4.01 transitional without system identifier.
<TD width="100%">

As I said, that's no good; preferably take the opposite approach, by
limiting the left and bottom elements and letting them expand as
necessary.

[Alex Blekhman]

Eric B. Bednarz wrote:

Click here to start:

<http://bednarz.nl/swamp/wizard/>

Thanks, this is good starting point.

<TD width="100%">

As I said, that's no good; preferably take the opposite
approach, by limiting the left and bottom elements and
letting them expand as necessary.

Yes, I understand that probably it relies on browser to be
smart too much. I'll try the other approach as well.

As a side question. Is there fundamental difference between
setting element's property via its attribute vs its style?
For example, instead of

<table height="100%">

to do

<style type="text/css">
table { width: 100%; }
</style>

<table>...

[Eric B. Bednarz]

"Alex Blekhman" <tk*********@yahoo.com> writes:

As a side question. Is there fundamental difference between
setting element's property via its attribute vs its style?

The first fundamental difference would be that you'd normally keep your
style sheet external (I should probably lose that habit of placing it
internal in *examples*) and change the appearance of all pages in one
place.

Secondly, there is no HEIGHT attribute for the TABLE element type in W3C
HTML; while most UA's have legacy support for it, this may also depend
on doctype sniffing and might be dropped one day altogether.

What's more, since you normally need a parent height of 100% as well
(again, depending on UA's and doctype sniffing, you might get away with
a HEIGHT for TABLE alone, but that's no sensible ground to work on these
days) CSS is a requirement either way.

[Alex Blekhman]

Thanks for explanation.

[Gérard Talbot]

Alex Blekhman a écrit :

Eric B. Bednarz wrote:

Sigh, you don't give all relevant information, also not
in that post

I apologise if my description was unclear. I'll try to
describe it in another way. My goal is to make HTML
document, which consists of four parts:

+---+---+
| 1 | 2 | 1 - image
+---+---+ 2 - iframe
| 3 | 4 | 3 - left aligned button
+---+---+ 4 - three right aligned buttons

This layout should occupy all visible area of the document.
During resize I want that:

- part 1 can change its height, but not width
- part 2 can change both its height and width
- part 3 can change its width, but not height
- part 4 the same as part 3

Also, I need that part 1 will make its width equal to the
width of image. That's all. Regarding possible solution, I
would prefer to stay within basic HTML (if possible) even at
the cost of trading coolness of the look for simplicity.

Currently I can achieve my goal by using table with
following parameters:

<TABLE height="100%">
<TR>
<TD valign="top" background="leftBkg.bmp">
<IMG src="left.bmp">
</TD>
<TD width="100%">
<IFRAME width="100%" height="100%"></IFRAME>
</TD>
</TR>
<TR height="1%">
<TD align="left">[button]</TD>
<TD align="right">[button][button][button]</TD>
</TR>
</TABLE>

because doctype sniffing happens to matter in this case.
The difference between my suggestion and your solution is
that mine works quite consistently in quite all more or
less contemporary UA's and degrades acceptably if not
(read: IE5/Mac and IE6 in 'standards compliance' mode
would calculate the sizes relative to the contents).
Yours would cause a vertical scrollbar in iCab and IE6 in
'standards compliance' mode.

My client is IE5.5/IE6[/IE7?] on Windows for foreseeable
future. Anyway, I'm ready to implement it in most robust way
toprevent headaches right from the beginning.

Then use strict DTD, use CSS and drop table-based design for layout.

Gérard
--
remove blah to email me

[Eric B. Bednarz]

Gérard Talbot <ne***********@gtalbot.org> writes:

Alex Blekhman a écrit :

My client is IE5.5/IE6[/IE7?] on Windows for foreseeable
future. Anyway, I'm ready to implement it in most robust way
toprevent headaches right from the beginning.

Then use strict DTD, use CSS and drop table-based design for layout.

As much as the OP might have trouble to articulate his situation, we
are facing a total score of three out of three here failing to meet
'robust' in the context of an application interface, be it intra-,
extra- or internet.

Unsurprisingly, details are available at
<http://www.cs.tut.fi/~jkorpela/usenet/laws.html#law22>
--
hexadecimal EBB
decimal 3771
octal 7273
binary 111010111011