CSS layout maintain the design consistence in all kinds of user screens resolution?

[erick30]

Hi,

Until now I have designed my web pages with tables layout, but now I am becoming crazy playing with table columns width, in pixels, after set the main table width to 100%, 75% or 80%. And when all seems correct, in another resolution screen some labels are broken, and the page appearance isn’t correct. I am desperate..

I know CSS a little. If I try to change all my tables layout to CSS styles, my pages design will be displayed in the same way in all the user screens? Or I will continue having the same problem but with CSS...?

Thanks

[Vladdy]

While CSS certainly helps you in accomplishing the task at hand, that is more of a "How you design it" rather than "What you design it with" problem.
First thing that you need to understand is: your web page needs to fit within browser window - screen resolution has little to do with it.

[erick30]

First thing that you need to understand is: your web page needs to fit within browser window - screen resolution has little to do with it.

With 'screen resolution' I meant browser window, to talk about this matter people use the expression 'screen resolution' in pixels (640x480 or 800x600,etc..), regardless that browser windows occupies some pixels of that screen.

[Shmohel]

so you are worried about the problem of larger browsers leaving white space?

Alot of sites ignore this and make a page designed for a particular resolution and just absolutely position everything. this is fine, and i have no problems, but not all pages work that way nor should.

What many people do is something of the following.

Imagine a simple three column layout, with the middle being the main area for text and content. if you make your outer smaller side columns (left and right) a fixed size--say 200px--then you can make your center fill up the rest. this way, as your browser window is resized, the content resizes with it.

http://glish.com/css/7.asp

this is what i am talking about. check out this link. resize your browser window and watch how the content responds.

hope this helps.

[erick30]

so you are worried about the problem of larger browsers leaving white space?

Yes, I find very chaotic when I lose the control over the spaces between form controls in the tables. Today I have been testing with fixed table pixels, (concretely with 640 pixels tables) and the design seems to be nice in the main known screen resolutions, (640x480, 800x600 and 1024x768), well indeed with the 640x480 it lacks some pixels :) and the horizontal scroll bar appears for a little space, but I think that a few people use that resolution.

What do you think about using fixed wide, and at the same time trying to make the tables as smaller as possible? Thus, the pages will be displayed in the 99,99% of the browsers without the horrible horizontal scroll bar, and much more, with the same design.


P.D. Your example page says 'LAYOUT TECHNIQUES: 3 columns, the holy grail'. Now I know why I am becoming crazy trying to adjust my tables design in % and pixels at the same time, because my tables are with 4 columns (label, form ojbect, label, form object), and these tables are integrated into a main table with one blank column per side.

I attached an example of one of my tables.

Thank you

[Shmohel]

my bad, here:

http://glish.com/css/

this is the link to the main page. there is a 4 column width if you want to use it.

Persoanlly, I am not a big fan of fixed widths, it just leaves too much to be desired, and it just takes so much trial and error trying to get it right on one computer. Using percentages gives you much more flexibility. or, like i said mixing the two. get creative. adapt other's codes to your advantage, to make them work for your site.

[DaveSW]

it depends on your graphics - some are only ever going to look good fixed width, like www.ryanbrill.com . others then can use the repeat options to tile simpler graphics around the page, hence having a full screen layout in every resolution.

[erick30]

Shmohel:

I think that your solution is very good, but I chose fixed widths because I didn’ t really know how to achieve a consistent design through the main screen resolutions (640x480, 800x600 and 1024x768). I only need a little help, I attached in my last post an updated example called ‘mixed_width.txt’. I want the labels are fixed so that if the user makes its browser smaller the labels (text field titles) aren’ t moved or line breaks.
You will see in this example that the yellow table is expanded a lot when the resolution is high. Do you really think that this form appearance is nice in that cases?


As well, I attached a file in this post called ‘fixed_width.txt’ because you understand what I meant with fixed width. I didn’ t mean all the tables in the page fixed in pixels, the main table is fluid in %, and the tables inside it are fixed. See the example ‘fixed_width.txt’.

I test the examples easily with this page: http://webdesign.about.com/gi/dynamic/offsite.htm?zi=1/XJ&sdn=webdesign&zu=http%3A%2F%2Fwww.unk.edu%2Fcomputing%2Fstyleguide%2Fresizer.html

Thanks

[erick30]

If you change my code, try to maintain the table layout instead of CSS, I need to clarify these basic things before start with CSS language ;).

[Vladdy]

www.vladdy.net/demos/elementsizing.html