Guy Hengel [angelIII / a3]
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
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
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
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
> 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.
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.
ASKER
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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.
Thanks for accepting the right answer.
http://glish.com/css/
To get the main div to scroll if the content expands beyond the layer you can use:
#mainlayer {overflow:scroll}