How to align elements and define resize behaviour?

**Lachlan Hunt** · Oct 24 '05, 04:25 PM

Re: How to align elements and define resize behaviour?

Alex Blekhman wrote:[color=blue]
> 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:[/color]

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

Position Is Everything

http://positioniseverything.net/

Coding and Computing Tips & Tutorials. Learn & Build: CSS,JavaScript,HTML,PHP,C++ and MYSQL.

--
Lachlan Hunt

Lachlan Hunt: Web Development Guru

http://lachy.id.au/

http://GetFirefox.com/ Rediscover the Web
http://GetThunderbird.com/ Reclaim your Inbox

**Spartanicus** · Oct 24 '05, 06:25 PM

Re: How to align elements and define resize behaviour?

"Alex Blekhman" <tkfx.N05P4M@ya hoo.com> wrote:
[color=blue]
>I'm experienced Windows programmer, however, I'm quite
>novice in HTML technologies.[/color]

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".
[color=blue]
>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[/color]

It does magic?
[color=blue]
>and has following layout:
>
>+---+---------+ I - image
>| I | iframe | iframe - IFRAME object
>| | | [] - buttons
>|---+---------|
>|[] | [][] []|
>+---+---------+
>
>It's regular table with elements inside each cell.[/color]

Had it been a web "applicatio n" 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.
[color=blue]
>Now the questions:
>
>1. How can I specify that width of I-cell will be
>automaticall y adjusted to the width of image? Currently I
>hardcoded WIDTH="N", where N is number of pixels.[/color]

Then don't do that. A table cell's width "shrink wraps" around it's
content. However since you used the magic word "applicatio n" 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%.
[color=blue]
>2. How can I specify that height of second row (with
>buttons) will be equal to the default height of button?[/color]

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

--
Spartanicus

**Eric B. Bednarz** · Oct 25 '05, 01:35 AM

Re: How to align elements and define resize behaviour?

Spartanicus <invalid@invali d.invalid> writes:
[color=blue]
> "Alex Blekhman" <tkfx.N05P4M@ya hoo.com> wrote:[/color]
[color=blue][color=green]
>>My application is wizard-like[/color]
>
> It does magic?[/color]

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.
[color=blue][color=green]
>>+---+---------+ I - image
>>| I | iframe | iframe - IFRAME object
>>| | | [] - buttons
>>|---+---------|
>>|[] | [][] []|
>>+---+---------+[/color][/color]

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** · Oct 25 '05, 09:55 AM

Re: How to align elements and define resize behaviour?

Spartanicus wrote:[color=blue]
> 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".[/color]

I can assure you I know what HTML acronym means. I never
called HTML programming language in my life because
it's...erm...no t programming language. I understand the
difference between markup and programming.
[color=blue][color=green]
>> My application is wizard-like[/color]
>
> It does magic?[/color]

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:

404 Not Found

http://www.sfsu.edu/~helpdesk/pics/hostexplorer_complete_install.gif

http://is.curtin.edu.au/faqpics/vcitshot1.gif

[color=blue][color=green]
>> It's regular table with elements inside each cell.[/color]
>
> Had it been a web "applicatio n" 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.[/color]

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.
[color=blue][color=green]
>> 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.[/color]
>
> Then don't do that. A table cell's width "shrink wraps"
> around it's content. However since you used the magic
> word "applicatio n" 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.[/color]

Yes, you're right, table's width was 100%.
[color=blue]
> 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%.[/color]

Bingo! This worked.
[color=blue][color=green]
>> 2. How can I specify that height of second row (with
>> buttons) will be equal to the default height of button?[/color]
>
> Don't try to set a height for the row containing the
> "buttons".[/color]

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="lef tBkg.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** · Oct 25 '05, 10:05 AM

Re: How to align elements and define resize behaviour?

Eric B. Bednarz wrote:[color=blue]
>
> 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.[/color]

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** · Oct 25 '05, 10:45 AM

Re: How to align elements and define resize behaviour?

"Alex Blekhman" <tkfx.N05P4M@ya hoo.com> writes:
[color=blue]
> You could save your sarcasm for more appropriate occasion.[/color]

Sigh, you don't give all relevant information, also not in that post
[color=blue]
> See my response to Spartanicus where I describe the solution
> for my problem.[/color]

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** · Oct 25 '05, 10:55 AM

Re: How to align elements and define resize behaviour?

On Tue, 25 Oct 2005, Alex Blekhman wrote:
[color=blue]
> Eric B. Bednarz wrote:[/color]
[...snip...]
[color=blue]
> You could save your sarcasm for more appropriate occasion.[/color]

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.
[color=blue]
> See my response to Spartanicus where I describe the solution
> for my problem.[/color]

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.
[color=blue]
> I'll emphasize again that this is _NOT_ first class web
> application.[/color]

bye

**Alex Blekhman** · Oct 26 '05, 08:35 AM

Re: How to align elements and define resize behaviour?

Alan J. Flavell wrote:[color=blue]
> 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.[/color]

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.
[color=blue]
> 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.[/color]

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.
[color=blue]
> 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.[/color]

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** · Oct 26 '05, 08:55 AM

Re: How to align elements and define resize behaviour?

Eric B. Bednarz wrote:[color=blue]
> Sigh, you don't give all relevant information, also not
> in that post[/color]

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="lef tBkg.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>
[color=blue]
> 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.[/color]

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@yahoo.com** · Oct 26 '05, 10:05 AM

Re: How to align elements and define resize behaviour?

Eric B. Bednarz wrote:[color=blue]
> "Alex Blekhman" <tkfx.N05P4M@ya hoo.com> writes:
>[color=green]
> > You could save your sarcasm for more appropriate occasion.[/color]
>
> Sigh, you don't give all relevant information, also not in that post
>[color=green]
> > See my response to Spartanicus where I describe the solution
> > for my problem.[/color]
>
> 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.[/color]

**shreeshupriya@yahoo.com** · Oct 26 '05, 10:05 AM

Re: How to align elements and define resize behaviour?

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** · Oct 26 '05, 10:35 PM

Re: How to align elements and define resize behaviour?

"Alex Blekhman" <tkfx.N05P4M@ya hoo.com> writes:
[color=blue]
> I apologise if my description was unclear.[/color]

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
forwardscompati ble mode, meaning either precede it with a comment
declaration or use HTML 4.01 transitional without system identifier.
[color=blue]
> <TD width="100%">[/color]

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** · Oct 27 '05, 07:25 AM

Re: How to align elements and define resize behaviour?

Eric B. Bednarz wrote:[color=blue]
> Click here to start:
>
> <http://bednarz.nl/swamp/wizard/>[/color]

Thanks, this is good starting point.
[color=blue][color=green]
>> <TD width="100%">[/color]
>
> 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.[/color]

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** · Oct 27 '05, 12:25 PM

Re: How to align elements and define resize behaviour?

"Alex Blekhman" <tkfx.N05P4M@ya hoo.com> writes:
[color=blue]
> As a side question. Is there fundamental difference between
> setting element's property via its attribute vs its style?[/color]

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.

How to align elements and define resize behaviour?

How to align elements and define resize behaviour?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment