22 replies [Last post]
joe_C_nice
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

I created a window using container div and a child table (view window attachment). My question is would it be best to create this window using a all css layout or leave it as is.

I say it's a dynamic window because it's created using js and the content within the window is asynchronously updated.

Some things about this window:
- width and height may vary is size
- the status bar may not always be present
- the content area is set to 100% height

I've attached a picture of my window.

AttachmentSize
window.png7.6 KB
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Leaving aside that "CSS

Leaving aside that "CSS Layout" is a minomer, everyone here will reckon you shouldn't be using tables for layout. Tables are for tabular data. There is (virtually) no need to use them for any other purpose, including the one shown in your picture.

joe_C_nice
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Taking what you said into

Taking what you said into account i've created the same window using several div tags. I am however curious how I go about getting 100% height for my content area, keeping in mind that the status bar may only be present on some windows.

Right now I have the status bar positioned at the bottom of my window using position "absolute" and setting the bottom to "0px".

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

100% of what?

100% of what?

joe_C_nice
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

If you notice in the picture

If you notice in the picture the window has a top pane (area in blue with text "Window Name") and a status bar (bottom area with text "Done"). Then there's the area in the middle with the white background and the text "This is my content area, the height of this area should be 100%", as the text says it's my content area.

The content area should occupy the complete area between the top pane and the status bar, keeping in mind the status bar my not be present in every window.

Hope that answers your question.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

So what determines how far

So what determines how far the top pane and the status bar are kept apart?

joe_C_nice
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

I may be misunderstanding

I may be misunderstanding you but i'll try and answer based on what I think your asking. Ok the top pane and the status bar are kept apart by the content area. The top pane is always at the top of the window and the status bar is always at the bottom, though in some instances the window may not have a status bar. The content area should always occupy the area in between these two.

Going back to my original post the window size may vary.

ex. 1
I have a window that's 640 x 480 (W x Grade the top pane is 20px and the status bar isn't present. The content area should be occupy the entire area below the top pane, ending at the windows bottom border.

ex. 2
I have another window, this one is 800 x 800 (W x Grade the top pane in this example is 30px and the status bar is present. The height of the status bar is 25px. The content area should occupy the entire area below the top pane, ending where the status bar begins.

Now using a table both these windows are easily achieved. I simple place my content area below my top pane, set a height of 100% for my content area and position my status bar or lack their off right below my content area. Because my top pane and status bar (when present) are a fixed height (px instead of %) my content area always occupies the area in between these two.

Again I hope that helps.

joe_C_nice
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Follow up to my last post.

Follow up to my last post. The window size determines how far apart the top pane and the status bar are from each other.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

joe_C_nice wrote:Going back

joe_C_nice wrote:
Going back to my original post the window size may vary.

ex. 1
I have a window that's 640 x 480 (W x Grade the top pane is 20px and the status bar isn't present. The content area should be occupy the entire area below the top pane, ending at the windows bottom border.

ex. 2
I have another window, this one is 800 x 800 (W x Grade the top pane in this example is 30px and the status bar is present. The height of the status bar is 25px. The content area should occupy the entire area below the top pane, ending where the status bar begins.

By what magic does the browser know one window is going to be 640 x 480 and the other is going to be 800 x 800?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 17 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

http://csscreator.com/divs-do

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'm inclined to say go with

I'm inclined to say go with your table then, as this seems to be one of those cases where one wants what tables offers, or in other words one is still thinking with a table layout mentality, never really convinced by this desire for visual filling of a browser viewport.

Have you worked out how the browser window is going to dictate the placement/positioning of the top bar and bottom? position absolute seems the only answer but that is full of problems Smile

The closest you'll likely come to your requirements is to set a division that is 100% of the viewport height set your top bar positioned absolute and your bottom bar in flow after the full height division; inside the full height division set another div and set padding on this to top= height of top bar and bottom = height + a bit extra of your bottom bar, on the bottom bar set a negative top margin that is equal to the height of your bottom bar.

If you then remove bottom bar the full height division will continue to the bottom of the viewport, but your content itself won't ! If your top/bottom bars height changes then you'll need to change values all round by setting a body id and adjusted rulesets based on that parent ID

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

joe_C_nice
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Chris..S wrote: By what

Chris..S wrote:

By what magic does the browser know one window is going to be 640 x 480 and the other is going to be 800 x 800?

To answer your question javascript, that said I wouldn't call it magic you should maybe do some surfing you'd be surprised.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 weeks 17 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

JS

Chris..S is our resident Javascript Guru, you know Wink I believe that's what's known in the business as "sarcasm" Wink

Verschwindende wrote:
  • CSS doesn't make pies

joe_C_nice
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Sure didn't come off as

Sure didn't come off as that, maybe it's all the questions that I think my first post (complete with a picture) should have answered. But chances are I didn't explain things as well as I thought I did.

To thepineapplehead and Hugo thanks for the input i'll go try and few things and see what I come up with. Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

It wasn't intended as

It wasn't intended as sarcasm, and I'm no expert at javascript. However, I feel its been like pulling teeth to find out how you are opening the new window and how the browser knows its height. If you don't explain how you are doing something, I don't know the starting point from which to frame an answer.

I still don't know how you are opening the new window. I am not even sure if you mean a window or a popup. Strictly a window means a new browser window (ie. window.open()). In this case its exactly the same as for any page with a footer stuck at bottom. If its just a popup element, what purpose does the content serve by taking up 100% of the space available to it? For a background? So the actual content can be centered vertically in the space? So the actual content (e.g. an image or a flash object) can be expanded to fill the space?

All these things can be done without using tables. But they all require different answers. So, please explain in detail what you trying to achieve.

joe_C_nice
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

It matters not how i'm

It matters not how i'm opening the new window, as how i'm opening the window has no baring the css layout.

I did mean a window (http://prototype-window.xilinus.com/samples.html), though not in the traditional sense. So no i'm not referring to a browser window.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

joe_C_nice wrote:It matters

joe_C_nice wrote:
It matters not how i'm opening the new window, as how i'm opening the window has no baring the css layout.

Let me get this straight - you come here to us asking for our help and then when we tell you wnat we need to help you you get mad and tell us we don't need that! You need help so you come to us, presumably thereby accepting our status as experts on the matter at hand. Then when we tell you what we need you tell us you know better than us.

So do you need help or not? And if you do why won't you give us what we ask for? If you know better than us what we need why haven't you solved the problem on your own?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

It does matter. That script

It does matter. That script is creating a DIV which it locates absolutely above the rest of the page content - so strictly its not a window, just a plain old absolutely positioned DIV. Your height and width are given to that DIV via the inline style property. However you didn't answer my questions on what you need to do with the content that requires 100% height. *shrug*

joe_C_nice
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

`

Ed Seedhouse wrote:
joe_C_nice wrote:
It matters not how i'm opening the new window, as how i'm opening the window has no baring the css layout.

Let me get this straight - you come here to us asking for our help and then when we tell you wnat we need to help you you get mad and tell us we don't need that! You need help so you come to us, presumably thereby accepting our status as experts on the matter at hand. Then when we tell you what we need you tell us you know better than us.

So do you need help or not? And if you do why won't you give us what we ask for? If you know better than us what we need why haven't you solved the problem on your own?

Again it does not matter. The window could just as easily been present in the existing html without creating the new window after the page had been loaded. Unless you are some how me then I don't see how you can assert that i'm upset.

I think the other two posters understood the scope of what was asked in the original post and as a result provided some valuable insight.

I heeded the advice of Hugo kept the original table I had in my layout.

Yes I did need help, hence my reason for posting the original question. The problem as since been solved (see above sentece). I did respond to Chris as I felt my response may be valuable to anyone who may have similar questions in the future.

@Chris..S
I wanted the content area to be 100% (fluid) because setting a fixed height was not an option as the window is resizable. I was under the impression that having it at a height 100% would ensure that the status bar would always be positioned at the bottom of the screen without the need for position "absolute".

Lastly I may not post often but i'm regularly visiting these forums and reading some of whats been posted.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I think you misunderstand

I think you misunderstand what height: 100% means when used in CSS terms. When the window is resized the javascript will handle the size of the original window.

Your dead right that the "window" could be present in normal html. That is the way I usually work out the styling of dynamic elements. Make them static. Sort out the styling. Make them dynamic again.

Take a look at the DojoToolkit. Iirc it has routines for creating a dragable, expandable "window" that doesn't use tables.

joe_C_nice
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

For testing purposes the

For testing purposes the window was already present in the html. I did manage to get the intended result, using an all css layout. Though I did have to use a little javascript. To be honest I was hoping it was something I could do without the need for additional javascript; granted it was only a few lines.

Chris..S if I came off harsh forgive me, I was aware of the misunderstanding in regards to the height.

Btw i've checked out Dojo and several other js libraries and am aware of their capabilites, but thank you for the suggestion.

Cheers

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Sorry, I didn't mean Dojo

Sorry, I didn't mean Dojo for its capabilities, but for the HTML structure it uses to create the window - I take it you are involved in the construction of the window extension to prototype (neat script btw) described in your link?

Are the sizes of the status bar and the title bar fixed?
I think the easiest x-browser solution is to subtract their heights from the overall height and specify that directly on the content DIV. Add the adjustment of the content DIV height to the window resize handler.

The easiest non IE6 solution is to use position absolute and both top and bottom offsets without any height.

joe_C_nice
Offline
Regular
Last seen: 10 years 33 weeks ago
Timezone: GMT-4
Joined: 2005-05-31
Posts: 41
Points: 1

Chris..S wrote: Are the

Chris..S wrote:

Are the sizes of the status bar and the title bar fixed?
I think the easiest x-browser solution is to subtract their heights from the overall height and specify that directly on the content DIV. Add the adjustment of the content DIV height to the window resize handler.

That's what we ended up doing.

I'm not involved with prototype, but I am involved with the developement of a small js library that's apart of a larger project. I provided the link to Prototype for clarification on what I meant by window.