?
Solved

Web page layout hint(s) needed

Posted on 2005-03-14
7
Medium Priority
?
228 Views
Last Modified: 2010-04-06
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



   
 
0
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 13533674
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}
0
 
LVL 143

Author Comment

by:Guy Hengel [angelIII / a3]
ID: 13534834
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
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13535479
> 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.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 143

Author Comment

by:Guy Hengel [angelIII / a3]
ID: 13535999
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

0
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 2000 total points
ID: 13536482
> I implemented already the website using framesets, but not happy with some constraints.
CSS also has contstraints, the main constraint beeing IE not supporting a lot of attributes.  If you don't need to support IE, then it's much easier.  But IE is still the most commonly used browser.  That's why it's better to stick with a simple layout until the situation changes.

> Actually , I am also a use and honestly HATE that I need to scroll up ;-)
Then use FireFox with "position:fixed".  Only IE users will need to scroll, this will be an incentive for the visitors to get firefox if they like a fixed menu.

> Now, if I fix the font-size, that should not be a problem
You cannot fix the font-size in Mozilla.  And it's much better not to fix it for accessibility and also for poeple who use high resolution screens.

> What's old-fashionned about keeping the menu visible?
Nothing.  It's just something that was done a lot in the early years using a frameset.  As i said, it can be done with CSS but it won't work in IE.
I just mean that you should not concentrate on the things you can do with old techniques and that you cannot do with CSS because of IE.
0
 
LVL 143

Author Comment

by:Guy Hengel [angelIII / a3]
ID: 13630244
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
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 13630899
<:°)
Thanks for accepting the right answer.
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
It's sometimes a bit tricky to use date functions in Oracle BPEL. I'll explain quickly how you can add N days to the current date. In a BPEL process this can be useful, and you can adapt it to fit your needs. First of all, let's see how to add 1 …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question