I think I didn't explain myself right.
I was not advising you to develop a liquid layout. I was advising you to
develop an auto-resize layout.
If you want absolute positioning, you can do it with 'em' and 'ex' units.
For an auto-resize layout to work without moving parts, you just need to
include lots of div's so that buttons don't move to another line.
For instance, instead of having a margin of 50 px, set a margin of 4.5em
(it's only an example), and have a middle "frame" (a div) which would contain
the terminal screen (you can set its size in px). More or less like this:
--------------------------------------------------------
| ^ |
| | |
| 6em |
| | |
| / |
| ------------------------------- |
| | | |
| | | |
|<- 5em ->|<- 500px ->| |
| | | |
| | | |
| | | |
| ------------------------------- |
| |
| |
| |
--------------------------------------------------------
This way you have auto-resizing margins (the 'em' unit reshapes according
to screen resolution), but a fixed size for the 5250 terminal screen.
For button positioning, you set div's with similar positioning.
>-- Original Message --
>Reply-To: [EMAIL PROTECTED]
>From: "[EMAIL PROTECTED]" <[EMAIL PROTECTED]>
>To: [EMAIL PROTECTED]
>Subject: [wdvltalk] RE: DIV doesn't auto-size
>Date: Mon, 23 Aug 2004 15:54:30 -0400
>
>
>Thank you very much for your response, Pau, but that is not an option.
>
>Perhaps I should have emphasized my opening statement more strongly. This
>is
>a Web front end to an 11-year-old, IBM AS/400 GREEN SCREEN APP. That is
to
>say, it is designed to make available to Web access a basic 24 line X 80
>character, 5250 terminal-based application. It is not, nor can it
>successfully be made, a liquid layout, if we are to succeed in our purpose,
>which is to allow access to the application via the Web (versus the
>requirement of an active Global Services connection to our network), while
>not requiring the thousands of users globally who have learned to use the
>~1500-screen application to retrain.
>
>As such, fields must be where users are accustomed to finding them, labeled
>as they are accustomed to finding them, with keystroke responses appropriate
>to the responses in the 5250 application. In this situation, and given
that
>the AS/400 has no clue whatsoever about the environment into which it is
>sending its labels and field values, being accustomed to working with a
24
>X
>80 character grid on a green screen 5250 terminal, absolute positioning
is
>a
>requirement, not an option. Em or Ex based positioning is completely out
>of
>the question in this application. The application *requires* IE 6+, at
1024
>X 768 minimum, and every screen will fit into the 730w X 487h px DIV
>provided for it.
>
>I should also note that the script has worked for *every* other one of
the
>55+ pages to which it has been applied thus far. The container DIV width
>is
>specified in px, the script line "var theWidth = theNode[0].clientWidth;"
>returns the width value in px by default, and the math, by definition,
>requires the same measurement units to be used throughout the formula for
>it
>to work. Furthermore, the problem is *not* that the DIV is mispositioned;
>in
>fact, it is positioned absolutely dead center, just as the script is
>designed to achieve. The problem is that the text wraps *within* the DIV,
>which has nothing whatsoever to do with the external measurement units
used
>in calculating the position of the DIV itself.
>
>Just so this doesn't seem to be an exercise in futility, I will point out
>that we are free to (and do) use color, font choice, row striping,
>backgrounds, borders, etc. to make the Web version much more attractive
than
>the 5250 green screen app. Also, where the 5250 app required one to know
>the
>multitudinous line option keystrokes (anybody remember Wordstar's control
>key combinations?), or which of the F1 to F24 keys to use for a given
>option, we provide popup Select menus for each option, and a dedicated
area
>(DIV) on the left of the main app area just for displaying the
>currently-applicable line options (for those keyboard jockeys who will
>prefer to use the keystrokes instead of using popup menus), as well as
a
>clickable list of all the F-key functions currently available for the screen
>being displayed, again providing a choice between keystroke (F-key) and
>mouse operation. In other words, besides making the application available
>over the Web, we are making it easier for new users to learn and more
>flexible in use even for the "old hands."
>
>So, anybody got any idea why the text is wrapping in an absolutely
>positioned (therefore outside the page flow) DIV with no width or overflow
>attribute? ;-)
>
>Cheers,
>Scott
>----- Original Message -----
>From: "Pau Garcia i Quiles" <[EMAIL PROTECTED]>
>To: <[EMAIL PROTECTED]>
>Sent: Monday, August 23, 2004 2:50 PM
>Subject: [wdvltalk] RE: DIV doesn't auto-size
>
>
>
>Your Javascript code is placing the <div> using absolute values in pixels.
>Use 'em' or 'ex' units and you are done.
>
>>-- Original Message --
>>Reply-To: [EMAIL PROTECTED]
>>From: "[EMAIL PROTECTED]" <[EMAIL PROTECTED]>
>>To: [EMAIL PROTECTED]
>>Subject: [wdvltalk] DIV doesn't auto-size
>>Date: Mon, 23 Aug 2004 14:02:07 -0400
>>
>>
>>In our current app (a Web front end to an AS/400 "green screen" app) we
>have
>>a field representing the screen title for each screen, called, oddly
>enough,
>>screenTitle. It is contained in an absolutely positioned DIV with no width
>>attribute. Due to the nature of the AS/400 app providing the data, some
>>(many) items must be styled post-rendering using javascript. The CSS and
>>js
>>code I've been using has worked fine up until this one screen, which has
>>a
>>longer than usual title. On this screen the field is wrapping, which it
>>shouldn't do, as far as I know. Here's the CSS for the DIV:
>>
>>.screenTitle {
>> position:absolute;
>> margin-left: auto;
>> margin-right: auto;
>> font-family:Verdana, Arial, Helvetica, sans-serif;
>> font-weight:bold;
>> font-size:12px;
>> color:#000000;
>> text-align: center;
>> z-index: 10;
>> }
>>
>>Here's the HTML for the element:
>>
>><div id="screenTitle" class="screenTitle"><!-- -->Display Customer Item
>>Reference by UPC Code</div>
>>
>>And here's the javascript used (called in our initPage function) to center
>>the DIV on the screen:
>>
>>function setCompanyScreenCenter()
>>{
>>var theNode = getLikeElements("div", "id", "screenTitle");
>>// alert('This node\'s ID is ' + theNode[0].id);
>> if (theNode[0]) {
>> var theWidth = theNode[0].clientWidth;
>> if (theNode[0].firstChild.nextSibling) {
>> if (theNode[0].firstChild.nextSibling.nodeType == 3) { //text
>>node
>> var workString =
>>theNode[0].firstChild.nextSibling.nodeValue;
>> workString = trim(workString);
>> theNode[0].firstChild.nextSibling.nodeValue = workString;
>> theNode[0].style.left = 730/2 - (theWidth/2) + "px";
>>//container DIV width is 730px
>> theNode[0].style.width = theWidth;
>> } //if (theNode[0].first...
>> } //if (theNode[0].first...
>> } //if (theNode[0])
>>} //function
>>
>>Everything works fine on every other page. My experience has been that
>a
>>DIV
>>with no width or overflow attribute will automatically expand horizontally
>>to accommodate its contents, up to the width of its parent container.
I
>am
>>nonplussed as to why this one doesn't seem to be "following the script,"
>>so
>>to speak. Any ideas?
>>
>>Cheers,
>>Scott
>>
>>
>>____ ? The WDVL Discussion List from WDVL.COM ? ____
>>To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
>
>> Send Your Posts To: [EMAIL PROTECTED]
>>To set a personal password send an email to [EMAIL PROTECTED] with
the
>>words: "set WDVLTALK pw=yourpassword" in the body of the email.
>>To change subscription settings to the wdvltalk digest version:
>> http://wdvl.internet.com/WDVL/Forum/#sub
>>
>>________________ http://www.wdvl.com _______________________
>>
>>You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
>>To unsubscribe send a blank email to %%email.unsub%%
>>
>>To unsubscribe via postal mail, please contact us at:
>>Jupitermedia Corp.
>>Attn: Discussion List Management
>>475 Park Avenue South
>>New York, NY 10016
>>
>>Please include the email address which you have been contacted with.
>>
>
>--
>Pau Garcia i Quiles
>MSN Messenger: [EMAIL PROTECTED]
>http://www.elpauer.org
>
>
>____ ? The WDVL Discussion List from WDVL.COM ? ____
>To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
> Send Your Posts To: [EMAIL PROTECTED]
>To set a personal password send an email to [EMAIL PROTECTED] with the
>words: "set WDVLTALK pw=yourpassword" in the body of the email.
>To change subscription settings to the wdvltalk digest version:
> http://wdvl.internet.com/WDVL/Forum/#sub
>
>________________ http://www.wdvl.com _______________________
>
>You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
>To unsubscribe send a blank email to %%email.unsub%%
>
>To unsubscribe via postal mail, please contact us at:
>Jupitermedia Corp.
>Attn: Discussion List Management
>475 Park Avenue South
>New York, NY 10016
>
>Please include the email address which you have been contacted with.
>
>
>
>____ ? The WDVL Discussion List from WDVL.COM ? ____
>To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
> Send Your Posts To: [EMAIL PROTECTED]
>To set a personal password send an email to [EMAIL PROTECTED] with the
>words: "set WDVLTALK pw=yourpassword" in the body of the email.
>To change subscription settings to the wdvltalk digest version:
> http://wdvl.internet.com/WDVL/Forum/#sub
>
>________________ http://www.wdvl.com _______________________
>
>You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
>To unsubscribe send a blank email to [EMAIL PROTECTED]
>
>To unsubscribe via postal mail, please contact us at:
>Jupitermedia Corp.
>Attn: Discussion List Management
>475 Park Avenue South
>New York, NY 10016
>
>Please include the email address which you have been contacted with.
>
--
Pau Garcia i Quiles
MSN Messenger: [EMAIL PROTECTED]
http://www.elpauer.org
____ � The WDVL Discussion List from WDVL.COM � ____
To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
Send Your Posts To: [EMAIL PROTECTED]
To set a personal password send an email to [EMAIL PROTECTED] with the words: "set
WDVLTALK pw=yourpassword" in the body of the email.
To change subscription settings to the wdvltalk digest version:
http://wdvl.internet.com/WDVL/Forum/#sub
________________ http://www.wdvl.com _______________________
You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
To unsubscribe send a blank email to [EMAIL PROTECTED]
To unsubscribe via postal mail, please contact us at:
Jupitermedia Corp.
Attn: Discussion List Management
475 Park Avenue South
New York, NY 10016
Please include the email address which you have been contacted with.
