screen area woes

[mrcoulson]

I feel like a real Web wuss for posting a question like this, but this is something I always struggle with and I want to conquer it once and for all. How can I make one layout that will work on most monitors? Is there any way to specify that the page should take up 95% of the viewable area? I want a page that will display without scrollbars on my 19" 1024x 768 monitor at work and, for example, someone else's 17" 800x600 monitor. I have always done this by making two versions of everything and then using a little script to choose the right page. This method is not very efficient and it leads to a lot of problems. On the particular site I am doing now, I am pretty sure the amount and size of content is not the problem. I would greatly appreciate any advice anyone can give. Thanks!

[BoR|S]

I think the best solution will be to give sizes in % and not in px...

[mrcoulson]

That's actually the first way I tried it. The page filled the screen the way I wanted, but the individual divs were lining up differently on every monitor.

[BoR|S]

Well, since it's code-dependent, could you paste here the problematic code?

[mrcoulson]

Sure thing.

Here is an example of what I'm using in my css:

.nav {font-family: arial;
position: absolute;
color: #006666;
background-color: #FFCC99;
top: 147 px;
left: 10 px;
height: 269 px;
width: 107 px;
padding: 2;
border: 0;
}

I was just using different percentages in place of the pixels. I really appreciate your help.

[BoR|S]

Try changing position from absolute to relative...

[DCElliott]

I have a few examples of liquid "squishy" pages on my website. They are created with CSS relative measurements so that they adapt to the window size across a wide range of resolutions.

The following three are all variations on the same theme, in order of creation:

http://www3.ns.sympatico.ca/d.elliott/ghanja2.html
http://www3.ns.sympatico.ca/d.elliott/iris-annotated.html
http://www3.ns.sympatico.ca/d.elliott/orchid.html

This is an alternate copy of a page created by another of our members (ByteWizard). It is a more conventional layout but uses a couple of neat effects, including a resizable banner headline made by Animgirl:
http://www3.ns.sympatico.ca/d.elliott/webtools/webtools.html

This may give you some ideas regarding what is possible.

DE

[Steve Leader]

I know I will get shouted down for this, but have you considered tables. If you define a table with borders etc. set to zero then you can layout everything inside it. You can even use percentages as they will define themselves to the table not the screen.

As I said, I will probably get shouted down for this, but try it first eh.

[BoR|S]

Originally posted by Steve Leader
I know I will get shouted down for this, but have you considered tables. If you define a table with borders etc. set to zero then you can layout everything inside it. You can even use percentages as they will define themselves to the table not the screen.

As I said, I will probably get shouted down for this, but try it first eh.

You won't get shouted for that, at least not from me.
There are times when you just can't use CSS becuase it won't apply there due to it's limitations...
As an example I bring you here (http://developers.evrsoft.com/forum/showthread.php?s=&postid=8951#post8951) an answer I got.

[DCElliott]

I think you need to fit the choice of layout to the page function. Look at this forum, for example. It uses a table-based layout. but at the heart of it, a forum is a big database and we are looking at the result of database queries and interacting with forms. Both of these are quite well served by a tabular layout. While divs wouldn't answer the effect you were trying to achieve in your example, Boris, you were basing your design on a table way of doing things, not a CSS positioning way of doing things. They are quite different. It doesn't make either right or wrong - it depends on what you need to achieve according to your content.

I had helped Animgirl on a site for a vocal group called Alliance (http://www.alliancemusic.org/engagements.html) which uses CSS positioning exclusively except for one table which is used to display (surprise, surprise) tabular data. The button rollover effects are CSS - no onmouseover= scripting. Also, make the page very narrow and watch how the masthead moves together. Try doing that with tables!

One of the less obvious advantages of using CSS layout is that the document has a semantic structure. If you use ids for the major document parts (masthead, nav/menu, content, footer) They are appropiately ordered and labelled. They can even be given different presentation depending on media. I have pages with print stylesheets that don't print the nav (you can't click on paper) and will show the full URL after a link since seeing "click here" in a printed page is not very helpful.

My recommendation is to learn CSS and CSS positioning and save tables for where they are most appropriate. You can do some nice thing with CSS and tables as you can see from the example.

All this being said, given current browser inconsistencies, tables are still more "certain" in providing layout. They are less adaptable, however, to new media (like web-tv, phone webpages, etc.)

I'd be happy to continue this discussion. I think it is a good one, although it perhaps belongs in design.

DE

[Steve Leader]

I guess that because every time I mension ASP everyone seems to take a dig at me. Personally I prefer ASP, but I will learn PHP, I promice.

I understand you are being called up to the army soon (does Israel have a navy?). Good luck.

[BoR|S]

Originally posted by Steve Leader
I understand you are being called up to the army soon (does Israel have a navy?). Good luck.

My draft date supposed to be on July the 28th, but it can be delayed, based upon where I'm going to serve.

And yes, Israel has a navy (http://www.idf.il/navy/). :D
(Though the site is Hebrew only...)

[DCElliott]

Here is (http://www.homelesspixel.de/remix/) a classic "table-style" layout. It is the redesign winner for the W3C consortium site. However, there isn't a single <table> tag in the whole layout. It is all CSS. If you have Mozilla, look at the page and then do a print preview. See how all the links have their corresponding (URL s). These are just a few of the things you can do with CSS. And look at the neat effect with the dates in the middle content - can't do that with tables easily.

Look at the code - it is very comprehensible and linear with major sections identified by ids.

That is modern tableless HTML coding at its best.

DE