?
Solved

Web page layout hint(s) needed

Posted on 2005-03-14
7
Medium Priority
?
229 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
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

621 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