16:9 Website on a 4:3 Monitor?

I'm having issues trying to design 16:9 websites to show up properly on 4:3 monitors. If I create a website optimized for a 16:9 monitor, I want it to simply "cut off" the left and the right of the web page when viewed on a 4:3, that way it shows the center content of the page. What ends up happening is that it seems to align to the left no matter what, so that you have to use the horizontal scroll bar to view the actual content properly. Right now I'm using a WYSIWYG editor, but if I have to export it to HTML and edit something that's fine.

Any tips?

reply to post by Morgenstern89


My advice may be limited..but I can help try and start the discussion.. How are you defining your sheet for size? Are you setting things in absolute pixel size? %?. I've gone to using static size designs despite how nice fluid % can be because of your problem right here. The variety of devices from HD TV screens to Iphones and Blackberrys make the idea of trusting the browser to figure it out impossible for me...?

I do not know much about web making so my advice is get a wide screen monitor if you are going to be making web pages. You can get a 23" on cragslist for $100.

reply to post by Morgenstern89

As with anything of a vaguely technical computer nature I would advise giving some kind of access to whatever it is you are talking about to make it easier for others to see how you constructed it. HTML and websites are totally not my "thing" but I've seen web-designers on here showcasing their sites. Do you have a link or maybe a HTML source listing so that others can find it easier to help you?

Originally posted by Infi8nity
I do not know much about web making so my advice is get a wide screen monitor if you are going to be making web pages. You can get a 23" on cragslist for $100.

The issue isn't -me- viewing it, it's others viewing it. When using a widescreen image in the background, the editor aligns to the left, so individuals with 4:3 monitors are going to have to horizontally scroll to the right to properly view the content.

Originally posted by LightSpeedDriver
reply to post by Morgenstern89

 

As with anything of a vaguely technical computer nature I would advise giving some kind of access to whatever it is you are talking about to make it easier for others to see how you constructed it. HTML and websites are totally not my "thing" but I've seen web-designers on here showcasing their sites. Do you have a link or maybe a HTML source listing so that others can find it easier to help you?

Right now I don't have anything put together. An example of what I would like to have though, can be seen here:

www.corvusart.com...

On my 4:3 monitor this site is perfectly centered, and there is no horizontal scroll bar that would indicate there was more to the site. As far as a 4:3 user is concerned, that's the whole image. Viewing on my 16:9 laptop monitor you can see that the website is actually much wider, you can tell it is cut off at the left and right on a 4:3.

When I use an image that is say, 850x650, I can center it perfectly with no problem, it appears as one would expect on a 4:3 and it centers fine on a widescreen monitor. But if I use a wide image, anything larger than 1024x756 it seems, then it automatically orients to the left.

Sorry I'm having a terrible time trying to explain it, and not having anything I'm actually working on to show kind of makes it difficult to troubleshoot, I know.

I have a feeling this probably has a little bit to do with the program itself. I don't think a new version has been released since about 2010. It's called Web Page Maker. May be time for me to move on to properly learning html and css to convert my photoshop web layouts into functional sites.

As you said, it might be time to get away from the WYSIWYG stuff, if you are serious about design. Learning basic HTML and CSS goes a long way. I used to design sites this way, sometimes "borrowing" from pre-made templates and tweaking them. CSS can do a LOT of wonderful things! This page alone that I am typing this reply in references outside CSS pages, as well as a lot of internal CSS coding.

The page that you have provided a link to uses (I think I counted) 5 outside CSS pages.

The CSS page helps you to control the actual layout of what's displayed...

Then, there's this new fangled HTML 5 stuff, that I have absolutely no idea about...

You need to have your css set for margins: 0 auto; on the proper DIV. Better idea here since your like off coding without any idea is to buy a cheap but brilliant theme that can handle your auto margins nice and for all 55 browsers that it will need to be compliant with in the next 2-3 years. Try out....

Elegantthemes.com
themeforest.com

It is worth the time savings. Spend your time with a focus on content and let the layout alone unless you want to spend a lot of time with learning css.

When you get good you can code some nice collapsable modules in grids that work very well for any size screen.

Check it out:

webdesign4austin.com...

that is a fluid 960, which is the right width for every modern website's main content DIV. Resize your browser window and see how it behaves.

-J

Sometimes having two separate CSS layouts made and using a script to detect browser width works well. If done right, it eliminates the too-often seen annoying side-scrolling problem and can make columns, graphics, and such fall into place much better than they would with automatically flowing elements.

Most people on 4:3 use XGA, so less than or equal to 1024 seems like the logical cutoff point for most cases in choosing between standard or wide-format. Alternately you could include the height too and check if width divided by height rounded to one decimal is 1.3 or less. Then that way you'd also cover those people who use higher resolutions on 4:3 monitors.