Link to home
Start Free TrialLog in
Avatar of Guy Hengel [angelIII / a3]
Guy Hengel [angelIII / a3]Flag for Luxembourg

asked on

Web page layout hint(s) needed

Hi,
 
   I would like to design a webpage, and although I have been googling around a little bit, I think EE might be able to help me.
  Starting with CSS to use DIV instead of TABLES, I came to design a nice(r) and easier to maintain web page.
  However, there seems to be some limitations in different browsers...
 
  Let me explain what the page should be:
 
  The top bar (will contain the menu, but doesnt matter):
     fixed height
     100% width
     SHOULD REMAIN VISIBLE even if the users will scroll down

  The central part (will contain "data")
     100% height - the top bar height
     100% width
     Should present it's own scrollbar if more data inside than it's height

  I tried to use the simple TOP + LEFT for the central part div, but IE doesnt implement this combination :-(
 
  I am looking for suggestions, even if it is a scripting way of doing...

Any Questions?

Thanks in advance



   
 
Avatar of Eternal_Student
Eternal_Student
Flag of United Kingdom of Great Britain and Northern Ireland image

You should have a look at this link (some very good css lay-out techniques):

http://glish.com/css/


To get the main div to scroll if the content expands beyond the layer you can use:

#mainlayer {overflow:scroll}
Avatar of Guy Hengel [angelIII / a3]

ASKER

Hi,
  I know already about the overflow usage, there is not the issue.
  I have a test-site online which shows what I currently have:
  http://webplaza.pt.lu/~angeliii/test/index.ENG.html
 
  What you see is that the center part will display scroll bar if the contents of that central div is more than would fit,
  example:
  http://webplaza.pt.lu/~angeliii/test/map.LUX_ECH.ENG.html

  Now, I implemented this with % width on the header, left, right, bottom and obviously center part.
  What I would like is to have the parts around a size in px units, and the center part simply fill in the rest.
  Why px instead of %?
  Simple: the menu height for example should stay constant and not change on the height of the viewport,
  and also optimize the images used for the corners etc.
 
CHeers
Avatar of GrandSchtroumpf
GrandSchtroumpf

> I came to design a nice(r) and easier to maintain web page.
That is not going to be much easier.  If you absolutely want to reproduce a frameset, than why not using a frameset?

> SHOULD REMAIN VISIBLE even if the users will scroll down
It can be done with "position:fixed", but IE does not support that.  It's possible to get a similar effect with IE support, but the implementation is quite complicated for no real advantage.  Anyway, I don't think the visitors will mind if the menu is not always on top.

> the menu height for example should stay constant
It will never stay constant unless you use images instead of text.  Try increasing the text-size and you'll see.

Here is my advice:
Don't try to reproduce an old-fashion layout using CSS, you'll never be satisfied with the final result.
Keep it simple, start with a more standard CSS layout and focus on using the advantages of the CSS layout.

Sorry.
Ok, I admint being a beginner in creating web-pages.
First try: simple table layout
Second try: frameset design
third try: css technique

>>If you absolutely want to reproduce a frameset, than why not using a frameset?
I implemented already the website using framesets, but not happy with some constraints.
The splitting of the window would be great, but has drawbacks.

>> Anyway, I don't think the visitors will mind if the menu is not always on top.
Actually , I am also a use and honestly HATE that I need to scroll up ;-)

>>It will never stay constant unless you use images instead of text.  Try increasing the text-size and you'll see.
Now, if I fix the font-size, that should not be a problem, but anyhow, I only speak of the menu (short text ie single words)
Should not be a huge problem?

>>old-fashion layout using CSS
What's old-fashionned about keeping the menu visible?
AFAIK, CSS is a technique to implement a layout, and not a layout itself?!

Regards

ASKER CERTIFIED SOLUTION
Avatar of GrandSchtroumpf
GrandSchtroumpf

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I accept the answer "it can be done with CSS but won't work in IE".
In practice I used % height and widths to simulate indeed a frameset.
BTW, the drawback I had with the frameset was that the menu components would be clipped by the top border frameset, which made it unusable combination.

Thanks for the input, though.

CHeers
<:°)
Thanks for accepting the right answer.