I've been working at this web company for a while now (mainly on PHP stuff)
who are developing a website. The big problem with this site is that it's
all in Flash and uses some really dumb design. So I'm trying to lobby for
the scrapping of the Flash design in favour of a cleaner layout that is
based on HTML and entirely standards compliant. The problem is that in
order to stand even a remote chance of convincing them (I've already used
the bandwidth argument, the need to have the player argument, the
inaccessible for visually impaired people argument and the Google wont be
able to index argument but so far no luck), it has to look like the Flash
site
I want to go one better and have something that resembles the Flash site, is
standards compliant and that automatically sizes to fit the browser window,
leaving no ugly white margins down the sides. I thought of doing this with
tables but I understand that tables are now considered to be a Bad thing,
and besides I'm not sure if what I want to do can be accomplished with them
anyway.
The design I want goes as follows: A header section with the page title and
nav tabs for the major sections of the site which runs along the top of the
page and is always anchored there (my experiments suggested a div with
position:fixed but this wouldn't work in IE). Next comes a box down the left
hand side with navigation relevant to the section of the site the viewer is
on. To the right of this is a box that contains the page contents with a
scrollbar as needed (div with overflow:scroll set maybe?) and finally, along
the bottom should be a strip with the copyright and maybe some other stuff
like a quick log-in form. This should be anchored to the bottom of the
window.
Here is a quick ASCII diagram of the kid of thing I want:
------------------------------------
Page title and main navigation
------------------------------------
Subsection | Page content A
navigation | "
| "
| "
| "
| "
| V
------------------------------------
Page copyright
------------------------------------
So, with CSS layout, I am thinking that I need a div along the top of the
screen (top: 0px; left: 0px; width: 100%; height: auto) and another one on
the bottom (left: 0px; bottom: 100%; width: 100%; height: auto;) with a
third div between that expands to a height equivalent to 100% minus header
height - footer height.
I've been playing around with CSS but am quite frankly at a loss, I can get
things that sort of resemble what I want but that don't work the way I
envisioned. If any of you have some insights I would appreciate hearing
them. Is what I want even possible without resorting to JavaScript trickery?
who are developing a website. The big problem with this site is that it's
all in Flash and uses some really dumb design. So I'm trying to lobby for
the scrapping of the Flash design in favour of a cleaner layout that is
based on HTML and entirely standards compliant. The problem is that in
order to stand even a remote chance of convincing them (I've already used
the bandwidth argument, the need to have the player argument, the
inaccessible for visually impaired people argument and the Google wont be
able to index argument but so far no luck), it has to look like the Flash
site
I want to go one better and have something that resembles the Flash site, is
standards compliant and that automatically sizes to fit the browser window,
leaving no ugly white margins down the sides. I thought of doing this with
tables but I understand that tables are now considered to be a Bad thing,
and besides I'm not sure if what I want to do can be accomplished with them
anyway.
The design I want goes as follows: A header section with the page title and
nav tabs for the major sections of the site which runs along the top of the
page and is always anchored there (my experiments suggested a div with
position:fixed but this wouldn't work in IE). Next comes a box down the left
hand side with navigation relevant to the section of the site the viewer is
on. To the right of this is a box that contains the page contents with a
scrollbar as needed (div with overflow:scroll set maybe?) and finally, along
the bottom should be a strip with the copyright and maybe some other stuff
like a quick log-in form. This should be anchored to the bottom of the
window.
Here is a quick ASCII diagram of the kid of thing I want:
------------------------------------
Page title and main navigation
------------------------------------
Subsection | Page content A
navigation | "
| "
| "
| "
| "
| V
------------------------------------
Page copyright
------------------------------------
So, with CSS layout, I am thinking that I need a div along the top of the
screen (top: 0px; left: 0px; width: 100%; height: auto) and another one on
the bottom (left: 0px; bottom: 100%; width: 100%; height: auto;) with a
third div between that expands to a height equivalent to 100% minus header
height - footer height.
I've been playing around with CSS but am quite frankly at a loss, I can get
things that sort of resemble what I want but that don't work the way I
envisioned. If any of you have some insights I would appreciate hearing
them. Is what I want even possible without resorting to JavaScript trickery?
Comment