Screen sizes during development

azunoman

during development I tend to use a screen setting of 1024x768. Allowing, at least for me, a better screen size for coding. But I also view my pages at this resolution.

Today, I thought, maybe I should check what it looks like at a large resolution. While the pages didn't look 'bad' they did look different.

I use CSS, well as good as I can for newbie.

I would love to hear from the community about how one can avoid pitfalls of developing at one screen resolution, but at the same time accomadate other screen resolutions that users might view them as.

pennblaze

Yeah, I was curious about that to. I looked at mine today on someone else's pc who uses a larger screen resolution and it just was out of proportion and wrong looking. I was upset. And I have no idea how to plan for that pitfall. Or if there is a way to make the page so that it doesn't encounter this disproportioned problem and look tacky.

azunoman

I suspect the answer is in CSS..but hopeuflly one of the more experienced folks here can lend their advice..

azunoman

I suspect the answer is in CSS..but hopeuflly one of the more experienced folks here can lend their advice..

helz

ive learnt that tables are a good start, set the height to 100% and the width is a mixture of 100% and fixed widths.

as seen in the 10 out of 10 image above that is the common setup of a site, with the nav on the left title at top and main content in the big square thing as shown above...
well for the title it has a width of 100% and a fixed hieght (preferably smallish for smaller screen resolutions) and the nav column the height is 100% and width is fixed, generally when its being design its hard to make your navigation overly large anyway.

drawmack

using hidden tables is very bad advice, do not abuse tables in such a way use css with div tags.

There are a couple of solutions. One is to look at them pages on different monitors, I have six set up all different resolutions on different sized monitors. I design for 800 x 600 but I make sure it looks good on all six of them.

The other solution is to do a little browser detection in javascript and load different style sheets based on the results.

azunoman

Thanks...though I am confused about what you mean my hidden tables. Are hidden tables those without any type of border, one would just see data and no cell spacing etc.?

pennblaze

Is there a tutorial for that particular Javascript code somewhere?

helz

i'd like to hear what is so bad about tables?

laserlight

Well, the reason would be that tables arent intended for such aesthetic presentation.
Rather, they were intended to present information in a, um, tabular layout.

As such, to design an aesthetic layout, one should use a stylesheet, probably in conjunction with div tags.

That said, if you still want to use tables in such a way, it isnt all that much of a sin (yet).

helz

ah,
only time ive ever used div tags is when im center aligning text
never delved any deeper into it, although now im aware i will look into it and design a new site by it...

btw how is it implemented into css?

drawmack

for the css: http://www.w3schools.com/css

for the javascript: http://www.docjavascript.com (you want broser detection)

The other reason that using tables is so bad is because you can't use those table attributes in xhtml (http://www.w3.org/MarkUp/) and would be forced to rely on style sheets behind the html anyway. So you may as well just do it right and use div tags.

On top of that you can do a lot of neat tricks with div tags that you can't do with tables.

helz

i took a look at that css tutorial, still dont see how it can be used for the layout of a page. they didnt cover div tags

drawmack

Look under the advanced tab you'll see topics such as positioning, dimension, etc.

those are what you use.

azunoman

project vii...has very good information. I bought one of their online ebooks/courses...they are geared towards, DW MX users...
http://www.projectseven.com/

drawmack

I put together a little example:http://www.phpbuilder.net/board/showthread.php?s=&threadid=10268843

parawizard

this is a good thread. Im still using tables in my works. About the DIV tags basically ur making a class of CSS div tags by different IDs to replace other html tags by customizing the almost generic <DIV> tag?

parawizard

so as I understand basically <DIV> tags are good for everything except things with multiple columns>? considering you cant have divs side by side? or can you?

drawmack

yes they can be side by side, just give it a negative top, you can even overlap them or make one appear inside another one when it is not nested in the code.

azunoman

I bought a comprhensive tutorial from project VII.

In the section concerning tabless tables the following is state:

While it is possible to use the CSS Float property to create multiple columns, there are just too many inconsistencies in the way different browsers interpret the property—and version 4 browsers, in particular, may act in a very unpredictable way. Using absolute positioning is a safe, effective way to achieve precise layouts in all version 4 and higher browsers—and it gives us the most control over our source code placement. To float an element, the element’s source code must be in a certain location. When an element is absolutely positioned, its html markup can be placed anywhere. For instance, we can position a sidebar on the right side of the screen and a main area to its left—and it won’t matter if the sidebar’s source code comes before or after the main area’s source code. This is not the case when floating. To float (and vertically align) a sidebar to the right of a main content area, the sidebar source code would have to come before the main area source code.

Some more looking about for tabless tables and multiple columns, I came across this : Tabless tables, HOWTO